From 2ecf2cc42a789363a9a67fb3a1fb54334667d3c6 Mon Sep 17 00:00:00 2001 From: Cassandra Villarreal Date: Wed, 19 Feb 2020 21:49:57 -0500 Subject: [PATCH 1/4] nav done --- great-idea/css/index.css | 79 +++++++++++++++++++++++++++- great-idea/index.html | 109 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 185 insertions(+), 3 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index a6445bd842..215b239344 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,4 +63,81 @@ 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 +/* .nav { + display: flex; + border: solid; +} */ +.nav nav { + display: flex; + justify-content: space-around; + padding: 2%; +} +.nav .logo { + display: flex; + justify-content: flex-end; +} + +.Big-content .heading h1 { + font-size: 45px; + text-align: center; +} +.Big-content .heading { + display: inline-block; + width: 10%; + padding-left: 15%; + padding-right: 20%; + padding-bottom: 10%; + /* text-align: center; */ + /* font-size: 45px; */ +} +h5 { + border: solid; +} +.Big-content img { + display: inline-block; + padding-left: 15%; + align-content: center; + padding-right: 10%; + padding-top: 150px; + /* width: 45%; */ +} +.content { + display: inline-block; +} +.content .top .Features { + display: inline-block; + width: 40%; + padding-left: 10%; +} +.content .top .About { + display: inline-block; + width: 40%; + padding-right: 10%; +} +.middle-img { + display: inline-block; + padding: 2% 10% 2% 10%; +} +.bottom { + padding-left: 10%; +} +.bottom .B { + display: inline-block; + width: 20%; + align-content: center; +} +.bottom .Product { + align-content: center; +} +footer .contact { + display: inline-block; + padding-left: 10%; + padding-top: 5%; + width: 20%; +} +footer .copy { + display: block; + align-content: center; + padding-top: 3%; + padding-left: 35%; +} diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..882e396ff8 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -15,9 +15,114 @@ +
+ - - +
+ +
+
+

+ 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 3fa9b5a9fa605125b3f8cffbd820f428650b7aa8 Mon Sep 17 00:00:00 2001 From: Cassandra Villarreal Date: Thu, 20 Feb 2020 19:52:42 -0500 Subject: [PATCH 2/4] positioned title and snippit picture --- great-idea/css/index.css | 37 +++++++++++++++++++------------------ great-idea/index.html | 12 ++++++------ 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 215b239344..d27daeb845 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -77,29 +77,30 @@ h1, h2, h3, h4, h5 { justify-content: flex-end; } -.Big-content .heading h1 { - font-size: 45px; - text-align: center; +.Big-content { + display: flex; + justify-content: center; + align-items: center; } -.Big-content .heading { - display: inline-block; - width: 10%; - padding-left: 15%; - padding-right: 20%; - padding-bottom: 10%; - /* text-align: center; */ - /* font-size: 45px; */ + +.Big-content .heading .main-heading { + display: flex; + flex-direction: column; + align-items: center; + font-size: 45px; + padding-right: 55%; } + h5 { + display: inline-block; + margin-left: 8%; border: solid; + padding-top: 0%; + padding: 1%; } -.Big-content img { - display: inline-block; - padding-left: 15%; - align-content: center; - padding-right: 10%; - padding-top: 150px; - /* width: 45%; */ +.Big-content .snippet { + display: flex; + margin-right: 15%; } .content { display: inline-block; diff --git a/great-idea/index.html b/great-idea/index.html index 882e396ff8..761abbf7cc 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -43,16 +43,16 @@
-

- Innovation - On - Demand -

+
+

Innovation

+

On

+

Demand

+
Get Started
- Image of a code snippet. + Image of a code snippet.
From bfe328f5d837fdef7e1efbd4683bbb6cea52b184 Mon Sep 17 00:00:00 2001 From: Cassandra Villarreal Date: Thu, 20 Feb 2020 21:06:04 -0500 Subject: [PATCH 3/4] top content check --- great-idea/css/index.css | 58 +++++++++++++++++++++++++--------------- 1 file changed, 37 insertions(+), 21 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index d27daeb845..e6a648bee8 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -79,7 +79,7 @@ h1, h2, h3, h4, h5 { .Big-content { display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; } @@ -88,48 +88,64 @@ h1, h2, h3, h4, h5 { flex-direction: column; align-items: center; font-size: 45px; - padding-right: 55%; + /* padding-right: 55%; */ +} + +.Big-content .heading { + display: flex; + justify-content: center; + flex-direction: column; } h5 { - display: inline-block; - margin-left: 8%; + display: flex; + /* margin-left: 8%; */ border: solid; - padding-top: 0%; - padding: 1%; + /* padding-top: 0%; */ + /* padding: 1%; */ } -.Big-content .snippet { +.middle-img { display: flex; - margin-right: 15%; + justify-content: center; + /* margin-right: 15%; */ } -.content { - display: inline-block; +/* .content { + display: flex; + border: solid; +} */ +.content .top { + display: flex; + justify-content: space-evenly; + padding: 3%; } -.content .top .Features { +.Features { display: inline-block; - width: 40%; - padding-left: 10%; + border: solid; + width: 30%; } -.content .top .About { +.About { display: inline-block; - width: 40%; - padding-right: 10%; + border: solid; + width: 30%; } .middle-img { - display: inline-block; - padding: 2% 10% 2% 10%; + display: flex; + justify-content: center; } .bottom { - padding-left: 10%; + display: flex; } -.bottom .B { +.B { + width: 30% +} +/* .bottom .B { display: inline-block; width: 20%; align-content: center; } .bottom .Product { align-content: center; -} +} */ footer .contact { display: inline-block; padding-left: 10%; From 7ef4cec0d1e1a587c3d61253a95d27eafa697eb8 Mon Sep 17 00:00:00 2001 From: Cassandra Villarreal Date: Mon, 24 Feb 2020 19:31:07 -0500 Subject: [PATCH 4/4] test --- great-idea/css/index.css | 48 +++++++++++++--------------------------- great-idea/index.html | 4 ++-- 2 files changed, 17 insertions(+), 35 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index e6a648bee8..923b3e11b7 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,10 +63,6 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* .nav { - display: flex; - border: solid; -} */ .nav nav { display: flex; justify-content: space-around; @@ -80,7 +76,6 @@ h1, h2, h3, h4, h5 { .Big-content { display: flex; justify-content: space-evenly; - align-items: center; } .Big-content .heading .main-heading { @@ -88,44 +83,36 @@ h1, h2, h3, h4, h5 { flex-direction: column; align-items: center; font-size: 45px; - /* padding-right: 55%; */ } -.Big-content .heading { +.heading { display: flex; justify-content: center; flex-direction: column; } h5 { - display: flex; - /* margin-left: 8%; */ + display: inline-block; border: solid; - /* padding-top: 0%; */ - /* padding: 1%; */ } -.middle-img { +.snippit { display: flex; - justify-content: center; - /* margin-right: 15%; */ } -/* .content { + +.content { display: flex; - border: solid; -} */ -.content .top { + flex-wrap: wrap; + justify-content: center; +} +.top { display: flex; - justify-content: space-evenly; - padding: 3%; + justify-content: center; + padding: 3% } .Features { - display: inline-block; - border: solid; - width: 30%; + width: 30% } .About { - display: inline-block; - border: solid; width: 30%; } .middle-img { @@ -134,18 +121,13 @@ h5 { } .bottom { display: flex; + justify-content: center; + padding: 3%; } .B { - width: 30% -} -/* .bottom .B { - display: inline-block; width: 20%; - align-content: center; } -.bottom .Product { - align-content: center; -} */ + footer .contact { display: inline-block; padding-left: 10%; diff --git a/great-idea/index.html b/great-idea/index.html index 761abbf7cc..e4b9e55d36 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -75,9 +75,9 @@

- +
Image of code snippets across the screen - +