From 72e4e6197546a9bd18daf5e3658b0b3ea065781e Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 14:27:11 -0600 Subject: [PATCH 1/5] first edit, clean file --- great-idea/css/index.css | 130 ++++++++++++++++++------- great-idea/index.html | 205 +++++++++++++++++---------------------- 2 files changed, 183 insertions(+), 152 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index abb29d9531..85e0d4a83d 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -149,68 +149,126 @@ h5 { margin-bottom: 15px; } -/* Copy and paste your work from yesterday here and start to refactor into flexbox */ - -body { - width: 900px; - margin: auto; -} -header { - display: flex; - margin: 20px 0; - justify-content: space-evenly; +.container { + width: 880px; + /* TB LR */ + margin: 0 auto; } +/* header */ + header nav { - display: flex; - width: 100%; - justify-content: space-between; + display: inline-block; + width: 691px; + vertical-align: top; + margin-top: 35px; } header nav a { + margin-right: 65px; + font-size: 14px; + color: gray; text-decoration: none; - color: grey; } -.cta { - display: flex; - justify-content: space-evenly; - padding: 50px 0; - border-bottom: 1px solid black; +header nav a:hover { + text-decoration: underline; +} + +header nav a:first-child { + margin-left: 0; +} + +header nav a:last-child { + margin-right: 0; +} + +header .logo { + margin-top: 25px; } +/* cta */ + .cta .cta-text { - font-size: 5rem; + display: inline-block; + vertical-align: top; + font-size: 77px; + margin-top: 120px; text-align: center; + padding: 0px 75px; } -.cta .cta-text a { - font-size: 20px; - text-decoration: none; - color: black; - width: 300px; +.cta .cta-text button { + background: white; + vertical-align: top; + margin-top: 6px; + padding: 8px 44px; + font-size: 17px; border: 1px solid black; - padding: 0 20px; + cursor: pointer; +} + +.cta .cta-text button:hover { + background: black; + color: white; +} + +.cta img { + display: inline-block; + margin-top: 69px; +} + +.main-content { + border-top: 1px solid black; + margin-top: 76px; + padding-top: 39px; } .main-content .top-content { - display: flex; - margin: 40px 0; + padding: 0 10px; +} + +.main-content .top-content .text-content { + width: 410px; + display: inline-block; + margin-right: 34px; +} + +.main-content .top-content .text-content:last-child { + margin-right: 0; +} + +.main-content .middle-img { + margin-top: 45px; } .main-content .bottom-content { - display: flex; - margin: 20px 20px; - border-bottom: 1px solid black; + margin-top: 37px; + padding: 0 10px; } .main-content .bottom-content .text-content { + width: 275px; + display: inline-block; + margin-right: 12px; +} + +.main-content .bottom-content .text-content:last-child { + margin-right: 0; +} + +.contact { + margin-top: 57px; + border-top: 1px solid black; + padding: 39px 10px 0; +} + +.contact p { margin: 20px 0; - padding: 20px 20px; } -#copyright { - display: flex; - justify-content: center; - margin: 50px 0 50px 0; +footer { + margin: 32px 0; + text-align: center; + font-size: 14px; } diff --git a/great-idea/index.html b/great-idea/index.html index 0af24a52be..28f9b0a66a 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -1,128 +1,101 @@ - +
+
+ + +
- - - +
+
+

+ Innovation
+ On
+ Demand +

+ +
+ Image of a code snippet. +
- Great Idea! +
+
+
+

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

+
+
- - - - - - - - -
- -
-
-
-

- Innovation
- On
- Demand -

- Get Started +
+
+

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

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

-
+
+

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

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

Contact

-
-
-

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

-
-
-
+

+ 123 Way 456 Street
+ Somewhere, USA +

-
-

Contact

+

1 (888) 888-8888

-
-

- 123 Way 456 Street - Somewhere, USA -


- -

1 (888) 888-8888


- -

sales@greatidea.io


- -
+

sales@greatidea.io

+
-
- -
- - +
+

Copyright Great Idea! 2018

+
+
+ From c3af83e5d260143aeb91616fe38285b513c3be19 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 14:34:46 -0600 Subject: [PATCH 2/5] second edit, cleaned css file --- great-idea/css/index.css | 124 ++------------------------------------- 1 file changed, 4 insertions(+), 120 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 85e0d4a83d..850f3fe10e 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -149,126 +149,10 @@ h5 { margin-bottom: 15px; } -.container { - width: 880px; - /* TB LR */ - margin: 0 auto; -} - -/* header */ - -header nav { - display: inline-block; - width: 691px; - vertical-align: top; - margin-top: 35px; -} - -header nav a { - margin-right: 65px; - font-size: 14px; - color: gray; - text-decoration: none; -} - -header nav a:hover { - text-decoration: underline; -} - -header nav a:first-child { - margin-left: 0; -} - -header nav a:last-child { - margin-right: 0; -} - -header .logo { - margin-top: 25px; -} - -/* cta */ - -.cta .cta-text { - display: inline-block; - vertical-align: top; - font-size: 77px; - margin-top: 120px; - text-align: center; - padding: 0px 75px; -} - -.cta .cta-text button { - background: white; - vertical-align: top; - margin-top: 6px; - padding: 8px 44px; - font-size: 17px; - border: 1px solid black; - cursor: pointer; -} - -.cta .cta-text button:hover { - background: black; - color: white; -} -.cta img { - display: inline-block; - margin-top: 69px; -} - -.main-content { - border-top: 1px solid black; - margin-top: 76px; - padding-top: 39px; -} -.main-content .top-content { - padding: 0 10px; -} - -.main-content .top-content .text-content { - width: 410px; - display: inline-block; - margin-right: 34px; -} +/* My Code Starts Here */ -.main-content .top-content .text-content:last-child { - margin-right: 0; -} - -.main-content .middle-img { - margin-top: 45px; -} - -.main-content .bottom-content { - margin-top: 37px; - padding: 0 10px; -} - -.main-content .bottom-content .text-content { - width: 275px; - display: inline-block; - margin-right: 12px; -} - -.main-content .bottom-content .text-content:last-child { - margin-right: 0; -} - -.contact { - margin-top: 57px; - border-top: 1px solid black; - padding: 39px 10px 0; -} - -.contact p { - margin: 20px 0; -} - -footer { - margin: 32px 0; - text-align: center; - font-size: 14px; -} +header{ + display: flex; +} \ No newline at end of file From f96481fbe280ebfd25b7c7fe41d9bb65a63a9685 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 14:43:52 -0600 Subject: [PATCH 3/5] fixed up various messes --- great-idea/index.html | 178 +++++++++++++++++++----------------------- 1 file changed, 79 insertions(+), 99 deletions(-) diff --git a/great-idea/index.html b/great-idea/index.html index 28f9b0a66a..3747dd63cd 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -1,101 +1,81 @@ -
-
- - -
+ + + + + + + +
-
-
-

- Innovation
- On
- Demand -

- -
- Image of a code snippet. -
+
+ + +
+ +
+
+

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.

+
+
+ +
+ +
+ +

Contact

+ +

123 Way 456 Street
Somewhere, USA

+ +

1 (888) 888-8888

+ +

sales@greatidea.io

+ +
+ +
+

Copyright Great Idea! 2018

+
+ +
+ -
-
-
-

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

-
-
-
- -
-

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 3d2d757ffc63c010a1d1cc1ba3d4a6634a6465cb Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 16:00:24 -0600 Subject: [PATCH 4/5] almost done --- great-idea/css/index.css | 70 ++++++++++++++- great-idea/index.html | 183 +++++++++++++++++++++++---------------- 2 files changed, 177 insertions(+), 76 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 850f3fe10e..4d892f7b08 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -149,10 +149,74 @@ h5 { margin-bottom: 15px; } +/* My Code Starts Here */ +.container { + width: 876px; + margin: auto; +} -/* My Code Starts Here */ +header { + display: flex; + justify-content: space-between; + margin: 30px 0; + align-items: center; +} + +header nav { + display: flex; + width: 65%; + justify-content: space-between; +} -header{ +header nav a { + text-decoration: none; + color: grey; +} + +.cta { + display: flex; + justify-content: space-between; + text-align: center; + padding: 15px 0 45px 0; + border-bottom: 2px solid black; +} + +.cta .cta-text { + margin: auto; + font-size: 4.5rem; +} + +.main-content { display: flex; -} \ No newline at end of file + flex-direction: column; + border-bottom: 2px solid black; +} + +.main-content .top-content { + display: flex; + margin: 30px 0; +} + +.main-content .top-content #features{ + padding-right: 30px; +} + +.main-content .bottom-content{ + display: flex; + margin: 30px 0; +} + +.main-content .bottom-content #services{ + padding-right: 20px; +} + +.main-content .bottom-content #product{ + padding-right: 20px; +} + +.contact{ + display: flex; + flex-direction: column; + margin-top: 30px; +} diff --git a/great-idea/index.html b/great-idea/index.html index 3747dd63cd..37bb3a55c9 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -1,81 +1,118 @@ - - - - - + + + + +
+
+ + +
-
- - -
- -
-
-

Innovation
On
Demand

- +
+
+

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

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

-
+
+

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

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

-
+
+

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

-
- -
- +
+ + +
+

Contact

+ +

+ 123 Way 456 Street
+ Somewhere, USA +

+ +

1 (888) 888-8888

+ +

sales@greatidea.io

+
- \ No newline at end of file +
+

Copyright Great Idea! 2018

+
+ + + + From 07059496e97b17e6587ccaed02d24962f6079752 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 18:33:52 -0600 Subject: [PATCH 5/5] final edit --- great-idea/css/index.css | 17 +++++++++++------ great-idea/index.html | 2 ++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 4d892f7b08..24ad022f46 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -198,25 +198,30 @@ header nav a { margin: 30px 0; } -.main-content .top-content #features{ +.main-content .top-content #features { padding-right: 30px; } -.main-content .bottom-content{ +.main-content .bottom-content { display: flex; margin: 30px 0; } -.main-content .bottom-content #services{ +.main-content .bottom-content #services { padding-right: 20px; } -.main-content .bottom-content #product{ +.main-content .bottom-content #product { padding-right: 20px; } -.contact{ +.contact { display: flex; flex-direction: column; - margin-top: 30px; + margin: 30px 0; +} + +footer { + text-align: center; + margin-bottom: 30px; } diff --git a/great-idea/index.html b/great-idea/index.html index 37bb3a55c9..9fedbfc1e1 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -103,8 +103,10 @@

Contact

123 Way 456 Street
Somewhere, USA

+

1 (888) 888-8888

+

sales@greatidea.io