From 7315f4a9ef3c5d4782191d425a79dfe94ad7b119 Mon Sep 17 00:00:00 2001 From: udykas Date: Mon, 2 Apr 2018 16:43:29 -0400 Subject: [PATCH 1/5] Mostly done, Still need to fix middle section --- great-idea/css/index.css | 90 ++++++++++++++++++++++++++++++++++++++-- great-idea/index.html | 10 ++--- 2 files changed, 91 insertions(+), 9 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 11a690045..03d333313 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -1,4 +1,4 @@ -/* http://meyerweb.com/eric/tools/css/reset/ +/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @@ -12,8 +12,8 @@ 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, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -24,7 +24,7 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @@ -62,3 +62,85 @@ h1, h2, h3, h4, h5 { letter-spacing: 1px; margin-bottom: 15px; } + +/*My code starts here*/ + +/*Header*/ + +header{ + height: 40px; +} + +header a { + display: inline-block; + color: gray; + text-decoration: none; + margin: 40px 70px; +} + +.logo{ + position: absolute; + right: 0; + top: 0; + padding-top: 30px; + padding-right: 40px; +} + +/*Main Banner */ + +.cta{ + margin: 80px 250px; +} + +.cta-text{ + display: inline-block; + font-size: 90px; + text-align: center; + margin-right: 150px; +} + +.cta-text button{ + background-color: white; + border: 2px solid black; + font-size: 20px; + padding: 5px 50px; +} + +/*Main Content*/ + +.main-content{ + border-top: 1px solid black; + border-bottom: 1px solid black; + width: 85%; + margin: 0px 100px; + padding-bottom: 30px; +} + +.top-content{ + padding: 40px 0; +} + +.middle-img{ + width: 100% +} + +.text-content{ + width: 48%; + display: inline-block; + padding: 20px; +} + +.bottom-content{ + width: 60%; +} + +/*Contact*/ + +.contact{ + margin: 40px 100px; +} + +footer{ + text-align: center; + margin-bottom: 100px; +} diff --git a/great-idea/index.html b/great-idea/index.html index 6da3e589a..6cb0eb921 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -7,7 +7,7 @@ Great Idea! - + @@ -79,6 +79,6 @@

Contact

- + - \ No newline at end of file + From e7e48f775c75fe3c4e31ded2254199dddb7cef0c Mon Sep 17 00:00:00 2001 From: udykas Date: Mon, 2 Apr 2018 16:49:07 -0400 Subject: [PATCH 2/5] Complete --- great-idea/css/index.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 03d333313..47ec5b864 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -116,8 +116,9 @@ header a { padding-bottom: 30px; } -.top-content{ +.top-content .text-content{ padding: 40px 0; + width: 48%; } .middle-img{ @@ -125,13 +126,13 @@ header a { } .text-content{ - width: 48%; display: inline-block; padding: 20px; } -.bottom-content{ - width: 60%; +.bottom-content .text-content{ + width: 30%; + padding-top: 40px; } /*Contact*/ From bfb9fb74f143dbe3797787d0c399d015165c25a1 Mon Sep 17 00:00:00 2001 From: udykas Date: Tue, 3 Apr 2018 16:02:35 -0400 Subject: [PATCH 3/5] header and banner complete --- great-idea/css/index.css | 103 ++++++++++++++++++--------------------- great-idea/index.html | 73 ++++++--------------------- 2 files changed, 64 insertions(+), 112 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 47ec5b864..97f5ff666 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -65,83 +65,76 @@ h1, h2, h3, h4, h5 { /*My code starts here*/ -/*Header*/ +/*Universal*/ -header{ - height: 40px; +html{ + font-size: 16px; + font-family: Helvetica, sans-serif; } -header a { - display: inline-block; - color: gray; - text-decoration: none; - margin: 40px 70px; +body{ + display: flex; + justify-content: center; } -.logo{ - position: absolute; - right: 0; - top: 0; - padding-top: 30px; - padding-right: 40px; +.page-container{ + width: 80%; } -/*Main Banner */ +/*Header*/ -.cta{ - margin: 80px 250px; +header{ + position: fixed; + background-color: white; + width: 80%; + display: flex; + align-items: center; + justify-content: space-between; + height: 60px; + z-index: 5; } -.cta-text{ - display: inline-block; - font-size: 90px; - text-align: center; - margin-right: 150px; +header a{ + text-decoration: none; + color: gray; } -.cta-text button{ - background-color: white; - border: 2px solid black; - font-size: 20px; - padding: 5px 50px; +/*Main Banner */ + +.banner{ + margin-top: 160px; + padding-bottom: 100px; + display: flex; + justify-content: space-around; + border-bottom: 2px solid black; } -/*Main Content*/ +.banner-text{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; -.main-content{ - border-top: 1px solid black; - border-bottom: 1px solid black; - width: 85%; - margin: 0px 100px; - padding-bottom: 30px; } -.top-content .text-content{ - padding: 40px 0; - width: 48%; +.banner-text p{ + font-size: 100px; + font-family: 'Bangers', cursive; + text-align: center; } -.middle-img{ - width: 100% +.banner-text button{ + width: 13.5rem; + background-color: white; + border: 2px solid black; + font-size: 1.25rem; + margin-top: 1.25rem; + padding: 0.5rem; } -.text-content{ - display: inline-block; - padding: 20px; -} +/*Main Content*/ -.bottom-content .text-content{ - width: 30%; - padding-top: 40px; -} /*Contact*/ -.contact{ - margin: 40px 100px; -} - -footer{ - text-align: center; - margin-bottom: 100px; -} +/*Footer*/ diff --git a/great-idea/index.html b/great-idea/index.html index 6cb0eb921..53d6be81e 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -15,70 +15,29 @@ - -
+
- - + Services + Product + Vision + Features + About + Contact + + Great Idea logo
-
-
-

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.

-
+
- -
-

Contact

-

123 Way 456 Street
- Somewhere, USA


-

1 (888) 888-8888


-

sales@greatidea.io

-
-
-

Copyright Great Idea! 2018

-
+ Code snippets +
-
+ From 56dc3b1498c37992f7322659023265fa91236982 Mon Sep 17 00:00:00 2001 From: udykas Date: Tue, 3 Apr 2018 16:44:14 -0400 Subject: [PATCH 4/5] Complete --- great-idea/css/index.css | 33 ++++++++++++++++++++++++++- great-idea/index.html | 49 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 97f5ff666..3b1946921 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -114,7 +114,6 @@ header a{ flex-direction: column; justify-content: center; align-items: center; - } .banner-text p{ @@ -134,7 +133,39 @@ header a{ /*Main Content*/ +.main-content{ + margin-top: 4rem; +} + +.top-content{ + display: flex; +} + +.bottom-content{ + display: flex; + padding-bottom: 4rem; + border-bottom: 2px solid black; +} + +.article{ + display: flex; + flex-direction: column; +} + +.mid-img{ + width: 100%; + padding: 3rem 0; +} /*Contact*/ +.contact{ + margin: 4rem; +} + /*Footer*/ + +footer{ + text-align: center; + margin-bottom: 6rem; +} diff --git a/great-idea/index.html b/great-idea/index.html index 53d6be81e..4f3342382 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -17,6 +17,8 @@
+ +
Services Product @@ -28,6 +30,8 @@ Great Idea logo
+ + From cfb550a07462fe8b3de40a3b56eba20204b3be79 Mon Sep 17 00:00:00 2001 From: udykas Date: Tue, 3 Apr 2018 18:01:38 -0400 Subject: [PATCH 5/5] Tweaked the spacing between articles, assignment complete --- great-idea/css/index.css | 4 ++++ great-idea/index.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 3b1946921..0fc911207 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -157,6 +157,10 @@ header a{ padding: 3rem 0; } +.product{ + padding: 0 1.5rem; +} + /*Contact*/ .contact{ diff --git a/great-idea/index.html b/great-idea/index.html index 4f3342382..2cea40b0f 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -63,7 +63,7 @@

ABOUT

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.