From 30b58354ed2d2b4db3a1b8e5264fa1ebd5bc3a05 Mon Sep 17 00:00:00 2001 From: raberin Date: Sat, 15 Dec 2018 10:31:23 -0800 Subject: [PATCH 1/3] Made desktop page responsive utilizing percentages and rem font size. --- css/index.css | 367 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 117 +++++++++++++++- 2 files changed, 480 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index 09344e0dc..35ae2327d 100644 --- a/css/index.css +++ b/css/index.css @@ -1 +1,366 @@ -/* Use your CSS from RWD - I here. IF you don't have CSS, use the solution CSS from RWD - I*/ \ No newline at end of file +/* Use your own code or past solution for Great Idea Web Page CSS here! */ +/* 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; +} + +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + font-family: 'Titillium Web', sans-serif; +} + +h1, h2, h3, h4, h5 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; +} + +/* Copy and paste your work from yesterday here and start to refactor into flexbox */ +html { + font-size: 62.5%; +} + +.container { + margin: 0 auto; + max-width: 880px; + width : 100%; + font-size: 1.6rem; +} +header { + width: 97%; + margin-top: 1%; +} + +header nav { + display: flex; + justify-content: space-evenly; +} +header nav ul { + display: flex; + flex-direction: row; + align-items: flex-end; + width: 70%; + justify-content: space-evenly; +} + +header nav ul a { + font-weight: bold; + color: silver; + text-decoration: none; + padding: 0 1% 0 1%; + font-weight: bold; +} + +header nav a { + display: flex; + align-self: flex-end; +} + +div.second-part { + display: flex; + text-align: center; + margin-top: 5%; + margin-bottom: 5%; + justify-content: space-evenly; + width: 100%; +} + +div.header-anchor{ + display: flex; + flex-direction: column; + margin-top: 5%; + align-items: center; +} + +div.second-part h1 { + font-size: 75px; +} + +div.second-part .header-anchor .get-started { + width: 54%; + height: 9%; + text-decoration: none; + border: solid 1px black; + padding-top: 2%; + color: gray; + font-weight: bold; +} + +hr { + width: 92%; +} + +section.top-content { + display: flex; + margin-top: 2%; + margin-bottom: 2%; + justify-content: space-evenly; +} + +section .left-side, .right-side { + padding: 1%; + width: 45%; +} + +div.middle-img { + display: flex; + justify-content: center; +} + +div.middle-img img { + width: 92% +} + +section.bottom-content { + display: flex; + justify-content: space-evenly; + margin-top: 2%; + margin-bottom: 2%; +} + +section.bottom-content div { + width: 27.5%; +} + +section.contact { + margin: 2% 0; +} + +section.contact div { + display: flex; + flex-direction: column; + margin-left: 4.3%; +} + +footer { + text-align: center; +} + +/* When the width of the display is 800px apply these styles */ +@media (max-width: 800px){ + .container { + width: 800px; + } + header nav { + flex-direction: column-reverse; + } + + header nav ul { + align-self: center; + } + + header nav a { + align-self: center; + margin-bottom: 20px; + } + + hr { + width: 736px; + } + + + div.second-part { + justify-content: center; + } + + .second-part img { + display: none; + } + + div.header-anchor { + display: flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + align-items: center; + } + + img.middle-img { + width: 720px; + margin-left: 37px; + } + + section .left-side, .right-side { + height: 160px; + width: 350px; + } + + .bottom-left, .bottom-middle, .bottom-right { + display: flex; + flex-direction: column; + } + + section.bottom-content div { + margin-top: 20px; + width: 190px; + margin-bottom: 20px; + } + + section.contact div { + margin-left: 48px; + margin-top: 20px; + } + + .contact { + margin-top: 7%; + } + + footer { + margin-top: 5% + } +} + + @media (max-width: 500px) { + .container { + height: 2047px; + width: 500px; + } + + header nav { + margin-top: 0; + width: 100%; + } + + header nav ul { + display: flex; + flex-direction: column; + width: 100% + + } + + header nav a { + margin-right: 0; + padding: 20px; + margin-bottom: 0; + } + + header nav ul a { + display: flex; + justify-content: center; + border-bottom: solid 1px black; + width: 100%; + padding: 20px; + margin-top: 0; + margin-left: 0; + font-size: 20px; + } + + header nav ul a.services { + border-top: solid 1px black; + } + + + div.second-part { + display: flex; + text-align: center; + margin-bottom: 77px; + margin-top: 50px; + } + + div.second-part h1 { + font-size: 70px; + } + + div.second-part .header-anchor .get-started { + width: 170px; + margin-top: 17px; + } + + hr { + width: 92%; + } + + .top-content { + flex-direction: column; + margin-top: 12%; + } + + section .left-side, .right-side { + height: 150px; + width: 450px; + padding: 0; + margin-left: 4%; + } + + .middle-img { + height: 5%; + } + + .bottom-content { + flex-direction: column; + margin-top: 12%; + } + + section.bottom-content div { + height: 150px; + width: 450px; + display: flex; + flex-direction: column; + margin-left: 4%; + margin-top: 0; + margin-bottom: 0; + } + + section.contact div { + margin-left: 4%; + margin-top: 0; + } + + .contact { + margin-top: 7%; + } + + footer { + margin-top: 6% + } + } +} diff --git a/index.html b/index.html index 6ee66a434..f059db946 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,120 @@ + - - - + +
+
+ +
+ +
+
+

+ Innovation
+ On
+ Demand +

+ Get Started +
+ Image of a code snippet. +
+ +
+ +
+
+

Features

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. + Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu + ornare nisl. Nullam convallis augue justo, at imperdiet metus + scelerisque quis. +

+
+ +
+

About

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. + Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu + ornare nisl. Nullam convallis augue justo, at imperdiet metus + scelerisque quis. +

+
+
+
+ Image of code snippets across the screen +
+ +
+
+

Services

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. + Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu + ornare nisl. Nullam convallis augue justo, at imperdiet metus + scelerisque quis. +

+
+ +
+

Product

+

+ elementum magna eros, ac posuere elvit tempus et. Suspendisse vel + tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam + convallis augue justo, at imperdiet metus scelerisque quis. +

+
+ +
+

Vision

+

+ Aliquam elementum magna eros, ac posuere elvit tempus et. + Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu + ornare nisl. Nullam convallis augue justo, at imperdiet metus + scelerisque quis. +

+
+
+ +
+ +
+
+

Contact

+ +
+ 123 Way 456 Street
+ Somewhere, USA

+ 1 (888) 888-8888

+ sales@greatidea.io +
+
+
+ +
Copyright Great Idea! 2018
+
+ \ No newline at end of file From 31a025a0051904a85afa9d917e431f0bfac44dd1 Mon Sep 17 00:00:00 2001 From: raberin Date: Sat, 15 Dec 2018 10:57:17 -0800 Subject: [PATCH 2/3] Completed making the tablet page responsive. --- css/index.css | 50 ++++++++++++-------------------------------------- 1 file changed, 12 insertions(+), 38 deletions(-) diff --git a/css/index.css b/css/index.css index 35ae2327d..a4066c609 100644 --- a/css/index.css +++ b/css/index.css @@ -188,7 +188,7 @@ footer { /* When the width of the display is 800px apply these styles */ @media (max-width: 800px){ .container { - width: 800px; + max-width: 800px; } header nav { flex-direction: column-reverse; @@ -197,21 +197,25 @@ footer { header nav ul { align-self: center; } + + header nav ul a { + padding: 0 6%; + } header nav a { align-self: center; - margin-bottom: 20px; + margin-bottom: 5%; } - hr { - width: 736px; - } - - div.second-part { justify-content: center; } + div.second-part .header-anchor .get-started { + width: 54%; + height: 30px; + } + .second-part img { display: none; } @@ -224,45 +228,15 @@ footer { align-items: center; } - img.middle-img { - width: 720px; - margin-left: 37px; - } - - section .left-side, .right-side { - height: 160px; - width: 350px; - } - .bottom-left, .bottom-middle, .bottom-right { display: flex; flex-direction: column; } - - section.bottom-content div { - margin-top: 20px; - width: 190px; - margin-bottom: 20px; - } - - section.contact div { - margin-left: 48px; - margin-top: 20px; - } - - .contact { - margin-top: 7%; - } - - footer { - margin-top: 5% - } } @media (max-width: 500px) { .container { - height: 2047px; - width: 500px; + max-width: 500px; } header nav { From 2a0437b6380ba721cbce19101babf1c2dd70437a Mon Sep 17 00:00:00 2001 From: raberin Date: Sat, 15 Dec 2018 11:35:18 -0800 Subject: [PATCH 3/3] Completed the mobile page for responsiveness. --- css/index.css | 62 ++++++++++++++++++++++++--------------------------- 1 file changed, 29 insertions(+), 33 deletions(-) diff --git a/css/index.css b/css/index.css index a4066c609..61865219f 100644 --- a/css/index.css +++ b/css/index.css @@ -239,6 +239,10 @@ footer { max-width: 500px; } + header { + width: 100% + } + header nav { margin-top: 0; width: 100%; @@ -250,22 +254,22 @@ footer { width: 100% } - + header nav a { - margin-right: 0; - padding: 20px; margin-bottom: 0; } + header nav a img { + margin-bottom: 10%; + } + header nav ul a { display: flex; justify-content: center; border-bottom: solid 1px black; width: 100%; - padding: 20px; - margin-top: 0; - margin-left: 0; - font-size: 20px; + padding: 5%; + font-size: 2rem; } header nav ul a.services { @@ -276,65 +280,57 @@ footer { div.second-part { display: flex; text-align: center; - margin-bottom: 77px; - margin-top: 50px; + margin-bottom: 10%; + margin-top: 10%; } div.second-part h1 { - font-size: 70px; + font-size: 7rem; } div.second-part .header-anchor .get-started { - width: 170px; - margin-top: 17px; + width: 57%; + margin-top: 5%; } hr { width: 92%; } - .top-content { + section.top-content { flex-direction: column; - margin-top: 12%; + margin-bottom: 10%; } - section .left-side, .right-side { - height: 150px; - width: 450px; + section .left-side, section .right-side, section.bottom-content div { + width: 93%; padding: 0; margin-left: 4%; + margin-top: 10%; } - .middle-img { - height: 5%; + div.middle-img img { + height: 100px; } - .bottom-content { + section.bottom-content { flex-direction: column; - margin-top: 12%; + justify-content: space-evenly; + margin-bottom: 10%; } - section.bottom-content div { - height: 150px; - width: 450px; - display: flex; - flex-direction: column; - margin-left: 4%; - margin-top: 0; - margin-bottom: 0; - } section.contact div { margin-left: 4%; margin-top: 0; } - .contact { - margin-top: 7%; + section.contact { + margin-top: 10%; } footer { - margin-top: 6% + margin-top: 10% } } }