diff --git a/Homepage.html b/Homepage.html deleted file mode 100644 index 062d5f0..0000000 --- a/Homepage.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - How-To - - - - - - -
- - -
- -
-

Introduction:

-
We will help you, to help yourself to fix problems.
-
-
-

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

- -
-
-

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."

- -
-
-

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio."

-
- - - -
-
- - - - diff --git a/aboutus.html b/aboutus.html index 18d6578..e623bf6 100644 --- a/aboutus.html +++ b/aboutus.html @@ -12,22 +12,60 @@ /> -
- - + +
- - - +
+
+

Cole.W

+
Web UI
+ +
+
+

Tharshan.K

+
Web UI
+ +
+
+
+
+

Alex.Martinez

+
React I
+ +
+
+

Alex.Miller

+
React II
+ +
+
+
+
+

Edwin.C

+
Back-End
+ +
+
+

Cody.H

+
Back-End
+ +
+
+
+

Katrina.R

+
Product Lead
+ +
- \ No newline at end of file + + diff --git a/css/aboutus.css b/css/aboutus.css new file mode 100644 index 0000000..e00439f --- /dev/null +++ b/css/aboutus.css @@ -0,0 +1,32 @@ +h1 { + font-size: 3rem; +} +h5 { + font-size: 1.5rem; +} +.headshot { + width: 25%; +} +.first2 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + border-bottom: 2px dashed; +} +.firstProfile { + display: flex; + flex-direction: column; + align-items: center; +} +.secondProfile { + display: flex; + flex-direction: column; + align-items: center; +} +.second1 { + display: flex; + flex-direction: column; + align-items: center; + width: 45%; + margin-left: 27.5%; +} diff --git a/css/index.css b/css/index.css index 976ccf7..2b89b88 100644 --- a/css/index.css +++ b/css/index.css @@ -2,6 +2,134 @@ font-size: 4rem; color: #353531; } +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} html { padding: 2%; background-color: peachpuff; @@ -9,6 +137,18 @@ html { font-size: 62.5%; font-family: Comic Sans MS, Comic Sans, cursive; } +.introduction { + text-align: center; + margin-top: 30px; + color: #EC4E20; +} +.introduction h1 { + font-size: 3rem; +} +.introduction h5 { + font-size: 1.8rem; + margin-top: 1%; +} header { display: flex; justify-content: space-evenly; @@ -33,6 +173,7 @@ nav { align-items: center; font-size: 2rem; margin-top: -10%; + margin-bottom: 23.5px; } } nav a { @@ -71,12 +212,15 @@ footer p { } .introduction { text-align: center; + margin-top: 30px; + color: #EC4E20; } .introduction h1 { font-size: 3rem; } .introduction h5 { font-size: 1.8rem; + margin-top: 1%; } .photos { width: 30%; @@ -93,6 +237,7 @@ footer p { flex-direction: row; align-items: center; margin-top: 8%; + line-height: 1cm; } @media (max-width: 500px) { .content1 { @@ -116,6 +261,7 @@ footer p { margin-top: 8%; padding-bottom: 8%; border-bottom: 3px dashed #353531; + line-height: 1cm; } @media (max-width: 500px) { .content2 { @@ -140,6 +286,7 @@ footer p { text-align: center; font-size: 1.5rem; padding-bottom: 5%; + line-height: 1cm; } .content3 .imagesbox { display: flex; @@ -149,3 +296,59 @@ footer p { width: 20%; border-radius: 20px; } +h1 { + font-size: 3rem; +} +h5 { + font-size: 1.5rem; +} +.headshot2 { + width: 40%; + border-radius: 50%; + margin-top: 3%; +} +@media (max-width: 500px) { + .headshot2 { + width: 90%; + } +} +.headshot { + width: 40%; + border-radius: 50%; + margin-top: 3%; +} +.first2 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + border-bottom: 2px dashed #353531; + padding-bottom: 1px; + margin-top: 3%; + margin-bottom: 3%; + padding-bottom: 3%; + line-height: 1.6; +} +@media (max-width: 500px) { + .first2 { + display: flex; + flex-direction: column; + } +} +.firstProfile { + display: flex; + flex-direction: column; + align-items: center; +} +.secondProfile { + display: flex; + flex-direction: column; + align-items: center; +} +.second1 { + display: flex; + flex-direction: column; + align-items: center; + width: 45%; + margin-left: 27.5%; + line-height: 1.6; +} diff --git a/images/Brazil.jpg b/images/Brazil.jpg deleted file mode 100644 index 98ac6ab..0000000 Binary files a/images/Brazil.jpg and /dev/null differ diff --git a/images/Header-logo.png b/images/Header-logo.png deleted file mode 100644 index 1e7da5a..0000000 Binary files a/images/Header-logo.png and /dev/null differ diff --git a/images/alexmartinez.jpg b/images/alexmartinez.jpg new file mode 100644 index 0000000..26bd619 Binary files /dev/null and b/images/alexmartinez.jpg differ diff --git a/images/alexmiller.jpg b/images/alexmiller.jpg new file mode 100644 index 0000000..6a44723 Binary files /dev/null and b/images/alexmiller.jpg differ diff --git a/images/cody.jpg b/images/cody.jpg new file mode 100644 index 0000000..cb754ab Binary files /dev/null and b/images/cody.jpg differ diff --git a/images/cole.jpg b/images/cole.jpg new file mode 100644 index 0000000..3721de6 Binary files /dev/null and b/images/cole.jpg differ diff --git a/images/edwin.jpg b/images/edwin.jpg new file mode 100644 index 0000000..1b330a2 Binary files /dev/null and b/images/edwin.jpg differ diff --git a/images/football-stad.jpg b/images/football-stad.jpg deleted file mode 100644 index 94e0e2d..0000000 Binary files a/images/football-stad.jpg and /dev/null differ diff --git a/images/katrina.jpg b/images/katrina.jpg new file mode 100644 index 0000000..e3fb61b Binary files /dev/null and b/images/katrina.jpg differ diff --git a/images/motorbike.jpg b/images/motorbike.jpg deleted file mode 100644 index 86f6a17..0000000 Binary files a/images/motorbike.jpg and /dev/null differ diff --git a/images/techno.jpg b/images/techno.jpg deleted file mode 100644 index 7db9998..0000000 Binary files a/images/techno.jpg and /dev/null differ diff --git a/images/tharshan.jpg b/images/tharshan.jpg new file mode 100644 index 0000000..4969a49 Binary files /dev/null and b/images/tharshan.jpg differ diff --git a/images/videomake.jpg b/images/videomake.jpg deleted file mode 100644 index c857ab1..0000000 Binary files a/images/videomake.jpg and /dev/null differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..52905de --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + + How-To + + + + + + +
+ + +
+ +
+

Introduction:

+
We will help you, to help yourself to fix problems.
+
+
+

+ Welcome to our homepage of How-to. This site allows you to share your + knowledge and make life easier for one another on helping people with + basic day-to-day tasks. From tutorials to videos to step-by-step + instructions will all be provided on how to get through whatever task + you want. Feel free to browse through anything that may help you save + time or build your knowledge! +

+ +
+
+

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab + illo inventore veritatis et quasi architecto beatae vitae dicta sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut + odit aut fugit, sed quia consequuntur magni dolores eos qui ratione + voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum + quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam + eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat + voluptatem." +

+ +
+
+

+ "At vero eos et accusamus et iusto odio dignissimos ducimus qui + blanditiis praesentium voluptatum deleniti atque corrupti quos dolores + et quas molestias excepturi sint occaecati cupiditate non provident, + similique sunt in culpa qui officia deserunt mollitia animi, id est + laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita + distinctio." +

+
+ + + +
+
+ + + diff --git a/less/Homepage.less b/less/Homepage.less index 43c1795..0709b6a 100644 --- a/less/Homepage.less +++ b/less/Homepage.less @@ -1,76 +1,81 @@ //CSS - .introduction{ - text-align:center; - h1{ - font-size: 3rem; - } - h5{ - font-size: 1.8rem; - } - } +.introduction { + text-align: center; + margin-top: 30px; + color: @red; - .photos{ - width: 30%; - border-radius:20px; - @media @ipad{ - width:100%; - } + h1 { + font-size: 3rem; + } + h5 { + font-size: 1.8rem; + margin-top: 1%; } +} - .content1{ - .displayFlex(); - flex-direction: row; - align-items: center; - margin-top: 8%; - @media @ipad{ - flex-direction:column; - } - p{ - width: 20%; - font-size: 1.5rem; - @media @ipad{ - width:100%; - } - } +.photos { + width: 30%; + border-radius: 20px; + @media @ipad { + width: 100%; } +} - .content2{ - .displayFlex(); - flex-direction: row-reverse; - align-items: center; - margin-top: 8%; - padding-bottom: 8%; - border-bottom: 3px dashed @darkgrey; - @media @ipad{ - flex-direction:column; +.content1 { + .displayFlex(); + flex-direction: row; + align-items: center; + margin-top: 8%; + line-height: 1cm; + @media @ipad { + flex-direction: column; + } + p { + width: 20%; + font-size: 1.5rem; + @media @ipad { + width: 100%; } - p{ - width: 20%; - font-size: 1.5rem; - @media @ipad{ - width:100%; - } + } +} + +.content2 { + .displayFlex(); + flex-direction: row-reverse; + align-items: center; + margin-top: 8%; + padding-bottom: 8%; + border-bottom: 3px dashed @darkgrey; + line-height: 1cm; + @media @ipad { + flex-direction: column; + } + p { + width: 20%; + font-size: 1.5rem; + @media @ipad { + width: 100%; } + } } -.content3{ - margin-top: 5%; - border-bottom: 3px dashed @darkgrey; +.content3 { + margin-top: 5%; + border-bottom: 3px dashed @darkgrey; + padding-bottom: 5%; + p { + text-align: center; + font-size: 1.5rem; padding-bottom: 5%; - p{ - text-align:center; - font-size: 1.5rem; - padding-bottom: 5%; - } - .imagesbox{ - .displayFlex(); - - .images3{ - width: 20%; - border-radius: 20px; - } + line-height: 1cm; + } + .imagesbox { + .displayFlex(); + + .images3 { + width: 20%; + border-radius: 20px; } - + } } - diff --git a/less/aboutus.less b/less/aboutus.less new file mode 100644 index 0000000..38db3bf --- /dev/null +++ b/less/aboutus.less @@ -0,0 +1,46 @@ +h1 { + font-size: 3rem; +} +h5 { + font-size: 1.5rem; +} +.headshot2 { + width: 40%; + border-radius: 50%; + margin-top: 3%; + @media @ipad { + width: 90%; + } +} +.headshot { + width: 40%; + border-radius: 50%; + margin-top: 3%; +} +.first2 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + border-bottom: 2px dashed @darkgrey; + padding-bottom: 1px; + margin-top: 3%; + margin-bottom: 3%; + padding-bottom: 3%; + line-height: 1.6; + @media @ipad { + display: flex; + flex-direction: column; + } +} +.firstProfile { + .sameflex(flex, column, center); +} +.secondProfile { + .sameflex(flex, column, center); +} +.second1 { + .sameflex(flex, column, center); + width: 45%; + margin-left: 27.5%; + line-height: 1.6; +} diff --git a/less/global.less b/less/global.less index 9445b8a..5ab2c0b 100644 --- a/less/global.less +++ b/less/global.less @@ -1,7 +1,24 @@ -html{ - padding: 2%; - background-color:peachpuff; - max-width:100%; - font-size: 62.5%; - font-family: Comic Sans MS, Comic Sans, cursive; +html { + padding: 2%; + background-color: peachpuff; + max-width: 100%; + font-size: 62.5%; + font-family: Comic Sans MS, Comic Sans, cursive; +} + +.introduction { + text-align: center; + margin-top: 30px; + color: @red; + + h1 { + font-size: 3rem; + } + h5 { + font-size: 1.8rem; + margin-top: 1%; + } + + + } \ No newline at end of file diff --git a/less/index.less b/less/index.less index f7e89cf..897a09f 100644 --- a/less/index.less +++ b/less/index.less @@ -4,4 +4,5 @@ @import "global.less"; @import "navigation.less"; @import "footer.less"; -@import "Homepage.less"; \ No newline at end of file +@import "Homepage.less"; +@import "aboutus.less"; diff --git a/less/mixins.less b/less/mixins.less index 20f6f4b..aa7894f 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1,12 +1,17 @@ //Mixins -.mainfont{ - font-size: 4rem; - color: @darkgrey; +.mainfont { + font-size: 4rem; + color: @darkgrey; +} +.displayFlex() { + display: flex; + justify-content: space-evenly; } -.displayFlex(){ - display:flex; - justify-content:space-evenly; +.sameflex(@display, @direction, @place) { + display: @display; + flex-direction: @direction; + align-items: @place; } \ No newline at end of file diff --git a/less/navigation.less b/less/navigation.less index f360cdd..859cb71 100644 --- a/less/navigation.less +++ b/less/navigation.less @@ -1,32 +1,35 @@ -header{ +header { .displayFlex(); flex-direction: row; align-items: center; border-bottom: 3px dashed @darkgrey; - @media @ipad{ - flex-direction:column; + @media @ipad { + flex-direction: column; } } nav { - font-size: 2.8rem; - .displayFlex(); - width: 50%; - @media @ipad{ - flex-direction:column; - align-items:center; - font-size:2rem; - margin-top:-10%; + font-size: 2.8rem; + .displayFlex(); + width: 50%; + + @media @ipad { + flex-direction: column; + align-items: center; + font-size: 2rem; + margin-top: -10%; + margin-bottom: 23.5px; + } + + a { + text-decoration: none; + color: @blue; + &:hover { + color: @darkgrey; } - a { - text-decoration: none; - color: @blue; - &:hover { - color: @darkgrey; - } - @media @ipad{ - padding-top: 2%; - } + @media @ipad { + padding-top: 2%; } } +} diff --git a/less/reset.less b/less/reset.less index e69de29..591f7ba 100644 --- a/less/reset.less +++ b/less/reset.less @@ -0,0 +1,128 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +}