From 264609129d327589d59ff52b4e8d6598bf8e3c7a Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 15:55:13 -0400 Subject: [PATCH 01/16] flexbox will replace inline-block --- great-idea/css/index.css | 112 ++++++++++++++++++++++++++++++++++++++- great-idea/index.html | 72 +++++++++++++++++++++++-- 2 files changed, 180 insertions(+), 4 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index a6445bd842..97e03be2ef 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,4 +63,114 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Copy and paste your work from yesterday here and start to refactor into flexbox */ \ No newline at end of file +/* Copy and paste your work from yesterday here and start to refactor into flexbox */ +/* Here is where the header styling will go */ + +header { + width: 80%; + padding: 40px 75px; + margin: 0 auto; +} +/* aligning the navigation and the image */ +header nav { + background: #ddf; + position: fixed; + width: 620px; + margin-top: 45px; +} +header nav a { + display: inline-block; + padding: 12px 25px; + text-decoration: none; + color: #333; +} +header nav a:hover { + background: #444; + color: #fff; +} +/*aliging the logo to the right */ +.logo { + display: inline-block; + margin: 44px 0 85px 775px; +} +/* Resizing and positioning the header */ +header h1 { + margin: 85px 0 15px 185px; + text-align: center; + display: block; + width: 200px; + font-size: 75px; +} + /* Adding a color border radius that act as a botton*/ + .cta a { + border: 1px solid #333; + width: 195px; + text-align: center; + text-decoration: none; + padding: 6px 42px; + margin: 45px 0 0 202px; + color:#000; + } + +/* Positioning the image to the rigth */ + +header img { + display: inline-block; + margin: -285px 0 0 600px; +} +/* Creating top border using section semantic tags */ +section { + border-top: 3px solid #ccc; + width: 57%; + margin: 0 auto; + border-bottom: 3px solid #ccc; +} +/*Moving the class secondary-h2 */ +.secondary-h2 { + margin-top: 24px; +} +/* creating the columns */ +.col-1, .col-2 { + width: 425px; + display: inline-block; + line-height: 22px; +} +/* aligning the two columns horizontal with margin right from the first one and using inline-block */ +.col-1 { + margin-right: 45px; +} +/* applying inline-block to the second column */ + +.col-1, col-2 { + margin-bottom: 45px; +} +/* Centering the image */ +.middle-img { + margin: 0 2px 65px 2px; +} +/* The last three columns will have the same style as well */ +.col-3, .col-4, .col-5 { + width: 250px; + display: inline-block; + line-height: 22px; + margin-bottom: 33px; +} +/* Adding spacing */ +.col-3, .col-4 { + margin-right: 60px; +} +/* Adding style to the footer */ +footer h3 { + margin: 25px 0 0 337px; +} +footer address { + display: block; + width: 200px; + margin: 15px 0 0 337px; +} +footer p { + padding: 18px 0; +} +.cpyrght { + margin: 33px 700px 145px 700px; +} \ No newline at end of file diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..814dacc20a 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -13,11 +13,77 @@ + +
+ + + +

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

+

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 6e54b37db7b06e5392bb65e72c0cf0ed6f1bf30c Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 15:59:37 -0400 Subject: [PATCH 02/16] adding flex box style --- great-idea/css/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 97e03be2ef..b822dc8825 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -79,7 +79,8 @@ header nav { margin-top: 45px; } header nav a { - display: inline-block; + display: flex; + justify-content: flex-start; padding: 12px 25px; text-decoration: none; color: #333; From 44517a3eecf7adc2ec5eadf216f858fd3a5393a6 Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:01:53 -0400 Subject: [PATCH 03/16] readjusting the nav --- great-idea/css/index.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index b822dc8825..ec244c9e96 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -75,12 +75,13 @@ header { header nav { background: #ddf; position: fixed; - width: 620px; + /* width: 680px; */ margin-top: 45px; } header nav a { display: flex; - justify-content: flex-start; + /* justify-content: flex-start; */ + padding: 12px 25px; text-decoration: none; color: #333; From e87011e1fca6b77e36164ff53784063d345e79d7 Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:03:35 -0400 Subject: [PATCH 04/16] reworking css code --- great-idea/css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index ec244c9e96..8d59871a8f 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -80,7 +80,7 @@ header nav { } header nav a { display: flex; - /* justify-content: flex-start; */ + justify-content: flex-start; padding: 12px 25px; text-decoration: none; From 2a226b1566c96b009b88c6fcc99ec183ca01a431 Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:05:23 -0400 Subject: [PATCH 05/16] making changes --- great-idea/css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 8d59871a8f..5725d630ce 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -80,7 +80,7 @@ header nav { } header nav a { display: flex; - justify-content: flex-start; + flex-flow: row; padding: 12px 25px; text-decoration: none; From d4d02df56cccbe781676311dfe5691ea2d3162c5 Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:07:21 -0400 Subject: [PATCH 06/16] making chages --- great-idea/css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 5725d630ce..b74c4567c9 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -75,7 +75,7 @@ header { header nav { background: #ddf; position: fixed; - /* width: 680px; */ + width: 680px; margin-top: 45px; } header nav a { From 644e1dbed30379853d068c51ed2910452f7daffa Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:13:57 -0400 Subject: [PATCH 07/16] made chages --- great-idea/css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index b74c4567c9..e1ce6c86b8 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -80,7 +80,7 @@ header nav { } header nav a { display: flex; - flex-flow: row; + flex-direction: row; padding: 12px 25px; text-decoration: none; From b0bfd017630979bc5d64dac13a827dd36f26e28b Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:15:20 -0400 Subject: [PATCH 08/16] making changes --- great-idea/css/index.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index e1ce6c86b8..8f9db007f7 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -79,9 +79,9 @@ header nav { margin-top: 45px; } header nav a { - display: flex; - flex-direction: row; - + /* display: flex; + flex-direction: row; */ + display: inline-block; padding: 12px 25px; text-decoration: none; color: #333; From 6bbbba14c695e7f9974730235999ea823816f8bb Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:19:54 -0400 Subject: [PATCH 09/16] changes made to nav using flex box --- great-idea/css/index.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 8f9db007f7..207cd8360d 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -75,13 +75,14 @@ header { header nav { background: #ddf; position: fixed; + display: flex; + flex-direction: row; + width: 680px; margin-top: 45px; } header nav a { - /* display: flex; - flex-direction: row; */ - display: inline-block; + padding: 12px 25px; text-decoration: none; color: #333; From 209763c8d105df005eed77204236faeb863212a3 Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 16:26:18 -0400 Subject: [PATCH 10/16] added a few more flex style --- great-idea/css/index.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 207cd8360d..6ffbf7867c 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -78,7 +78,7 @@ header nav { display: flex; flex-direction: row; - width: 680px; + width: 600px; margin-top: 45px; } header nav a { @@ -93,12 +93,15 @@ header nav a:hover { } /*aliging the logo to the right */ .logo { - display: inline-block; + display: flex; + justify-content: flex-end; margin: 44px 0 85px 775px; } /* Resizing and positioning the header */ header h1 { - margin: 85px 0 15px 185px; + display: flex; + flex-flow: row; + margin: 0 0 15px 185px; text-align: center; display: block; width: 200px; From 5d19f563934c6561e641b460d7a9c1aa127a366f Mon Sep 17 00:00:00 2001 From: "bigdre4557@gmail.com" Date: Wed, 29 May 2019 17:54:49 -0400 Subject: [PATCH 11/16] flex style are added --- great-idea/css/index.css | 15 ++++++++++----- great-idea/index.html | 7 +++++-- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 6ffbf7867c..afc74c9209 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -121,7 +121,8 @@ header h1 { /* Positioning the image to the rigth */ header img { - display: inline-block; + display: flex; + justify-self: end; margin: -285px 0 0 600px; } /* Creating top border using section semantic tags */ @@ -135,12 +136,16 @@ section { .secondary-h2 { margin-top: 24px; } +.col-1, .col-2, .col-3, .col-4, .col-5 { + justify-content: space-evenly; +} /* creating the columns */ -.col-1, .col-2 { - width: 425px; - display: inline-block; - line-height: 22px; +.first-columns, .second-columns { + display: flex; } + + + /* aligning the two columns horizontal with margin right from the first one and using inline-block */ .col-1 { margin-right: 45px; diff --git a/great-idea/index.html b/great-idea/index.html index 814dacc20a..c4444e1d94 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -41,17 +41,20 @@

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 @@ -69,7 +72,7 @@

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.

- +