From 6246fceabee2f3b157b3d89bc69ad35aaf97f8f2 Mon Sep 17 00:00:00 2001 From: dustin Date: Wed, 8 Apr 2020 21:23:25 -0500 Subject: [PATCH 1/5] optimize for tablet --- css/index.css | 298 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 106 +++++++++++++++++- 2 files changed, 402 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 0c9959c1e5..662663ac09 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,299 @@ -/* 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; +} + +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 */ + +/* Your code starts here! */ +body{ + width:100%; +} + +header{ +margin:5%; +padding:10px; +width:90%; +display:flex; +justify-content: space-around; +} + +nav { +display:flex; +justify-content: space-evenly; +width:90%; +} + +p{ + padding:5px; +} + +.sec1{ + margin:5%; + width:100%; + display:flex; + +} + +.sec1 section{ + width:49%; + margin:auto; + text-align:center; + display:flex; + +} + +.innovation{ + flex-direction:column; + justify-content:center; + align-items:center; + padding:auto; + +} + +h1{ + display:inline-block; + font-size:80px; + margin:auto; + align-self:flex-start; +} + +button{ + width:160px; + height:40px; + border-radius:10px; +} + +.sec2 { + display:flex; + flex-direction: column; + margin:5%; + padding:5px; + border-top: 2px solid black; + border-bottom:2px solid black; + +} + +.sec2 .top{ + margin:10px; + display:flex; +} + +.sec2 img{ +width:100%; +} + +.sec2 .bottom{ + display:flex; + margin: 10px; +} + +footer{ + margin:5%; +} + +footer p { + text-align:center; +} + + +.service-body { + line-height: 5%; +} + +.services-header-img{ + width:100%; + margin-left:5%; + margin-right:5% +} + +.serviceSec1 section { + margin:5%; + line-height:1.5; +} + +.serviceSec2{ + display:flex; + width:100%; + border-bottom: 2px solid black; + border-top: 2px solid black; + padding:20px 0px; + flex-wrap:wrap; + justify-content:space-between; + margin:5%; + align-content:space-between; + line-height: 1.5; +} + +.serviceSec2 section { + background-color:lightgrey; + border: 2px solid black; + padding:20px; + width:48%; + height:32%; + margin:20px 0px; + min-width: 300px; +} +.serviceSec2 p { + padding-bottom: 18px; +} + +.serviceSec3{ + display:flex; + margin:5%; + width:100%; +} + +.serviceSec3 section{ + padding-left:25px; + width:48%; + margin:0px; + line-height:1.5; +} +li{ + line-height: 3; +} + +.services-info-img{ + width:570px; + height:375px; + padding-left:25px; +} + +.service-footer{ + padding-left:125px; +} + +@media(max-width:800px){ + +body{ + margin:2%; + padding:5px +} +p{ + font-size: smaller; + padding:5px +} +.sec1 div section{ + display:none; +} +header{ + flex-direction:column; + margin:2%; + padding:5px; + width:100%; +} + .logo{ + order:-1; + display:block; + align-self:center; + display:block; + padding-bottom:30px; + + } + nav{ + justify-content:space-between + } + .sec1{ + margin:2%; + padding:5px; + width:100%; + } + .innovation{ + margin:auto; + padding:auto; + display:inline-block; + } + + .sec1 section{ + width:100%; + margin:auto; + padding:auto; + display:flex; + justify-content:center; + align-items:center; + border:1px solid blue; + text-align:center; + } + + .sec2{ + margin:2%; + padding:5px; + } + footer{ + margin:2%; + padding:5px; + font-size: smaller; +} +} + + +@media(max-width:500px){ + + .sec1 section{ + width:90% + } + .sec2 section{ + width: 90%; + } + +} \ No newline at end of file diff --git a/index.html b/index.html index 476b4b8cb9..48ee876ca9 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Great Idea - Responsive I @@ -11,6 +12,109 @@ - + + + + + + + Great Idea! + + + + + + + + + + +
+ + + + +
+
+
+

+ Innovation
+ On
+ Demand +

+ + +
+ +
+
+ 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

+

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.

+
+ +
+

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.

+
+
+
+ + + + + + + + + \ No newline at end of file From 6ee9783aabe10f8f333f298f3a82dcd136d8d5ba Mon Sep 17 00:00:00 2001 From: dustin Date: Wed, 8 Apr 2020 21:54:04 -0500 Subject: [PATCH 2/5] hopefully complete assignment --- css/index.css | 37 ++++++++++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/css/index.css b/css/index.css index 662663ac09..ae0490d271 100644 --- a/css/index.css +++ b/css/index.css @@ -81,15 +81,19 @@ nav { display:flex; justify-content: space-evenly; width:90%; + } +nav a{ + color:grey; +text-decoration-line: none;} p{ padding:5px; } .sec1{ - margin:5%; - width:100%; + margin:auto; + width:70%; display:flex; } @@ -106,7 +110,7 @@ p{ flex-direction:column; justify-content:center; align-items:center; - padding:auto; + } @@ -120,7 +124,6 @@ h1{ button{ width:160px; height:40px; - border-radius:10px; } .sec2 { @@ -271,7 +274,6 @@ header{ display:flex; justify-content:center; align-items:center; - border:1px solid blue; text-align:center; } @@ -289,11 +291,32 @@ header{ @media(max-width:500px){ + nav{ + flex-direction:column; + justify-content:center; + align-items:center; + text-align:center; + } + + nav a { + padding:4%; + margin:auto; + width:100%; + display:inline-block; + border-bottom:1px solid grey; + align-self:center; + + } .sec1 section{ - width:90% + width:90%; + padding:5% 0% 5% 0%; } + .sec2 section{ + flex-direction:column; width: 90%; } - + .sec2 section { + padding-bottom:4%; + } } \ No newline at end of file From 38d22840b8c3ed970dd59be07cc5a28530b5cb7c Mon Sep 17 00:00:00 2001 From: dustin Date: Wed, 8 Apr 2020 22:08:35 -0500 Subject: [PATCH 3/5] add finishing touches --- css/index.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/css/index.css b/css/index.css index ae0490d271..10c6dcb551 100644 --- a/css/index.css +++ b/css/index.css @@ -122,15 +122,16 @@ h1{ } button{ - width:160px; - height:40px; + width:170px; + height:36px; + margin:4% 0% 5% 0%; } .sec2 { display:flex; flex-direction: column; margin:5%; - padding:5px; + padding:7% 0% 7% 0%; border-top: 2px solid black; border-bottom:2px solid black; @@ -305,7 +306,9 @@ header{ display:inline-block; border-bottom:1px solid grey; align-self:center; - + } + p{ + font-weight:bold ; } .sec1 section{ width:90%; From 09ecc5cf4caa015bb8a820b3d72e043dde556d45 Mon Sep 17 00:00:00 2001 From: dustin Date: Wed, 8 Apr 2020 22:14:06 -0500 Subject: [PATCH 4/5] add more finishing touches --- css/index.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index 10c6dcb551..a85e969030 100644 --- a/css/index.css +++ b/css/index.css @@ -131,7 +131,7 @@ button{ display:flex; flex-direction: column; margin:5%; - padding:7% 0% 7% 0%; + padding:4% 0% 4% 0%; border-top: 2px solid black; border-bottom:2px solid black; @@ -139,7 +139,8 @@ button{ .sec2 .top{ margin:10px; - display:flex; + display:flex; + padding-bottom:4%; } .sec2 img{ @@ -148,7 +149,8 @@ width:100%; .sec2 .bottom{ display:flex; - margin: 10px; + margin: 10px; + padding-top:4% } footer{ @@ -287,6 +289,12 @@ header{ padding:5px; font-size: smaller; } +.sec2 .top{ +padding-top:3%; +} +.sec2 .bottom{ +padding-bottom:3%; +} } From 69cdf91a36eb9022d53ad462fae246dbe044b377 Mon Sep 17 00:00:00 2001 From: dustin Date: Wed, 8 Apr 2020 22:25:23 -0500 Subject: [PATCH 5/5] complete assignment --- css/index.css | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/css/index.css b/css/index.css index a85e969030..73fda37cb8 100644 --- a/css/index.css +++ b/css/index.css @@ -180,8 +180,7 @@ footer p { .serviceSec2{ display:flex; width:100%; - border-bottom: 2px solid black; - border-top: 2px solid black; + border-bottom: 2px 0px 2px 0px solid black; padding:20px 0px; flex-wrap:wrap; justify-content:space-between; @@ -249,15 +248,14 @@ header{ width:100%; } .logo{ - order:-1; - display:block; - align-self:center; - display:block; - padding-bottom:30px; + order:-1; + display:block; + padding-bottom:30px; + align-self:center; } nav{ - justify-content:space-between + justify-content:space-between; } .sec1{ margin:2%; @@ -265,15 +263,15 @@ header{ width:100%; } .innovation{ - margin:auto; - padding:auto; + margin:auto; + padding:auto; + padding-top:8%; display:inline-block; } .sec1 section{ width:100%; - margin:auto; - padding:auto; + display:flex; justify-content:center; align-items:center;