From 8307d070293df10579bd809b8d2323eb0866a43c Mon Sep 17 00:00:00 2001 From: NomadDaniel Date: Thu, 12 Mar 2020 11:09:42 -0400 Subject: [PATCH 01/12] minor change just to compare/pull request --- 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 a6445bd842..df3cd44e56 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -63,4 +63,5 @@ 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 */ +/* minor change to push */ From 92af51aceb0e73d4610396b0a9015209e678699e Mon Sep 17 00:00:00 2001 From: NomadDaniel Date: Thu, 12 Mar 2020 14:01:10 -0400 Subject: [PATCH 02/12] copied over yesterday's finished product, ready to start flexboxing this bad mama jama --- great-idea/css/index.css | 241 +++++++++++++++++++++++++++++++++++---- great-idea/index.html | 115 +++++++++++++++++-- 2 files changed, 319 insertions(+), 37 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index df3cd44e56..b7012600c6 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -1,6 +1,6 @@ /* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) +v2.0 | 20110126 +License: none (public domain) */ html, body, div, span, applet, object, iframe, @@ -16,52 +16,243 @@ 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; +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; +display: block; } body { - line-height: 1; +line-height: 1; } ol, ul { - list-style: none; +list-style: none; } blockquote, q { - quotes: none; +quotes: none; } blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; +content: ''; +content: none; } table { - border-collapse: collapse; - border-spacing: 0; +border-collapse: collapse; +border-spacing: 0; } /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; +box-sizing: border-box; +/* border: 1px solid grey !important; */ } html, body { - height: 100%; - font-family: 'Titillium Web', sans-serif; -} +height: 100%; +/* font-family: 'Titillium Web', sans-serif; */ +/* font-family: 'Muli', sans-serif; */ +/* font-family: 'Bellota', cursive; */ +font-family: 'Cedarville Cursive', cursive;} h1, h2, h3, h4, h5 { - font-family: 'Bangers', cursive; - letter-spacing: 1px; - margin-bottom: 15px; +/* font-family: 'Bellota', cursive; */ +font-family: 'Bangers', cursive; +letter-spacing: 1px; +margin-bottom: 15px; +} + +/* Your code starts here! */ +.container { +width: 900px; +margin: 0 auto; +} + +header a { +width: 5%; +border: 0%; +padding: 1%; +margin: 0 2%; +display: inline-block; +color: grey; +/* letter-spacing: ; */ +/* text-align: justify; */ +} + +.logo { +margin-left: 15%; +vertical-align: middle; +} + + + +nav { +padding-top: 2%; +} + +.top-content { +display: inline-block; +margin: 0 auto; +width: 100%; +border-bottom: 1px solid grey; +padding-top: 5%; +padding-bottom: 7%; +} + +.top-content-text { +display: inline-block; +margin: 60px 9%; +vertical-align: text-bottom; +text-align: center; +padding: 2%; +} + +/*================= Animation of "Start Now===================*/ +.flip-2-hor-top-1 { + background-color: black; + color: white; + margin: 0 auto; + width: 50%; + margin: 20%; + border: 2px solid black; + font-size: 1.5rem; + padding: 4%; + -webkit-animation: flip-2-hor-top-1 3s cubic-bezier(0.5, 0.5, 0.515, 1) both; + animation: flip-2-hor-top-1 3s cubic-bezier(0.5, 0.5, 0.5, 0.5) both infinite; +} + +/* ---------------------------------------------- + * Generated by Animista on 2020-3-11 23:8:52 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation flip-2-hor-top-1 + * ---------------------------------------- + */ + @-webkit-keyframes flip-2-hor-top-1 { + 0% { + -webkit-transform: translateY(0) rotateX(0); + transform: translateY(0) rotateX(0); + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; + } + 100% { + -webkit-transform: translateY(-100%) rotateX(-180deg); + transform: translateY(-100%) rotateX(-180deg); + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; + } + } + @keyframes flip-2-hor-top-1 { + 0% { + -webkit-transform: translateY(0) rotateX(0); + transform: translateY(0) rotateX(0); + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; + } + 100% { + -webkit-transform: translateY(-100%) rotateX(-180deg); + transform: translateY(-100%) rotateX(-180deg); + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; + } + } + /*==============End of Animation for Start Now============= */ + +.top-content-text h1 { +font-size: 4rem; +} + +/* img src="img/header-img.png" { +margin-right: 100px; +} */ + +.circle-image { +/* align-items: */ +margin-left: 1%; +display: inline-block; +} + +.middle-content { +display: inline-block; +width: 100%; +padding-top: 3%; +} + +.left-paragraph { +width: 45%; +display: inline-block; +margin: 2%; +} + +.right-paragraph { +width: 45%; +display: inline-block; +margin: 2%; +} + +.middle-img { +margin: 1%; +} + +.bottom-content { +display: inline-block; +/* margin-left: 7%; */ +padding-top: 5%; +padding-bottom: 5%; +/* color: red; */ +margin: 0 auto; +} + +.services { +display: inline-block; +/* color: red; */ +width: 32%; +margin-left: 1%; +} + +.product { +display: inline-block; +/* color: red; */ +width: 32%; +} +.vision { +display: inline-block; +/* color: red; */ +width: 32%; +} + +.contact { +border-top: 1px solid grey; +padding-top: 5%; +padding-bottom: 5%; +margin-left: 1%; +} +.address { +width: 18%; +margin-bottom: 2%; +/* margin-left: 1%; */ +} +.phone { +width: 18%; +margin-bottom: 2%; +/* margin-left: 1%; */ +}.email { +width: 18%; +margin-bottom: 2%; +/* margin-left: 1%; */ } -/* Copy and paste your work from yesterday here and start to refactor into flexbox */ -/* minor change to push */ +.copyright p { +text-align: center; +} \ No newline at end of file diff --git a/great-idea/index.html b/great-idea/index.html index c5f374a238..32bf1e3fcb 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -2,22 +2,113 @@ - + + - Great Idea! +Great Idea! - - + + - + - + +
- - - - +
+ +
+ +
+
+

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

+
+
+
+ +
+

Contact

+
+123 Way 456 Street +Somewhere, USA +
+
+1 (888) 888-8888 +
+ +
+ +
+
+

Copyright Great Idea! 2018

+
+
+ +
+ \ No newline at end of file From c219d5e253f6656938ab56c2a6a67680e59c03de Mon Sep 17 00:00:00 2001 From: NomadDaniel Date: Thu, 12 Mar 2020 14:40:57 -0400 Subject: [PATCH 03/12] making progress w flexboxing refactoring --- great-idea/css/index.css | 91 ++++++++++++++++++++++++---------------- great-idea/index.html | 21 ++++------ 2 files changed, 63 insertions(+), 49 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index b7012600c6..4baed80120 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -51,7 +51,7 @@ border-spacing: 0; /* Set every element's box-sizing to border-box */ * { box-sizing: border-box; -/* border: 1px solid grey !important; */ +border: 1px solid grey !important; } html, body { @@ -64,8 +64,8 @@ font-family: 'Cedarville Cursive', cursive;} h1, h2, h3, h4, h5 { /* font-family: 'Bellota', cursive; */ font-family: 'Bangers', cursive; -letter-spacing: 1px; -margin-bottom: 15px; +/* letter-spacing: 1px; +margin-bottom: 15px; */ } /* Your code starts here! */ @@ -74,31 +74,43 @@ width: 900px; margin: 0 auto; } -header a { -width: 5%; +header nav{ +/* width: 5%; */ +/* height: 10%; */ +display: flex; +justify-content: space-evenly; +align-items: center; border: 0%; -padding: 1%; -margin: 0 2%; -display: inline-block; +padding: 2%; +/* margin: 0 2%; */ +/* display: inline-block; */ color: grey; /* letter-spacing: ; */ /* text-align: justify; */ +/* vertical-align: middle; */ } .logo { -margin-left: 15%; -vertical-align: middle; +/* margin-left: 15%; */ +/* vertical-align: middle; */ +/* border: 1px solid red; */ +/* justify-content: space-between; */ } nav { -padding-top: 2%; +/* padding-top: 2%; */ +/* align-items: flex-start; */ } .top-content { -display: inline-block; -margin: 0 auto; +/* display: inline-block; +margin: 0 auto; */ +display: flex; +justify-content: center; +justify-content: space-around; +align-content: center; width: 100%; border-bottom: 1px solid grey; padding-top: 5%; @@ -106,9 +118,10 @@ padding-bottom: 7%; } .top-content-text { -display: inline-block; -margin: 60px 9%; -vertical-align: text-bottom; +/* display: inline-block; +margin: 60px 9%; */ +/* display: flex; */ +align-items: center; text-align: center; padding: 2%; } @@ -179,77 +192,81 @@ margin-right: 100px; .circle-image { /* align-items: */ -margin-left: 1%; -display: inline-block; +/* margin-left: 1%; */ +/* display: inline-block; */ } .middle-content { -display: inline-block; +/* display: inline-block; */ width: 100%; padding-top: 3%; } .left-paragraph { width: 45%; -display: inline-block; -margin: 2%; +/* display: inline-block; */ +/* margin: 2%; */ } .right-paragraph { width: 45%; -display: inline-block; -margin: 2%; +/* display: inline-block; +margin: 2%; */ } .middle-img { -margin: 1%; +/* margin: 1%; */ } .bottom-content { -display: inline-block; +/* display: inline-block; */ /* margin-left: 7%; */ padding-top: 5%; padding-bottom: 5%; /* color: red; */ -margin: 0 auto; +/* margin: 0 auto; */ +display: flex; +flex-direction: row; +/* justify-content: space-evenly; */ } .services { -display: inline-block; +/* display: inline-block; */ /* color: red; */ -width: 32%; -margin-left: 1%; +width: 25%; +/* margin-left: 1%; */ } .product { -display: inline-block; +/* display: inline-block; */ /* color: red; */ -width: 32%; +width: 25%; } .vision { -display: inline-block; +/* display: inline-block; */ /* color: red; */ -width: 32%; +width: 25%; } .contact { border-top: 1px solid grey; padding-top: 5%; padding-bottom: 5%; -margin-left: 1%; +/* margin-left: 1%; */ } .address { width: 18%; -margin-bottom: 2%; +/* margin-bottom: 2%; */ /* margin-left: 1%; */ } .phone { width: 18%; -margin-bottom: 2%; +/* margin-bottom: 2%; */ /* margin-left: 1%; */ + }.email { width: 18%; -margin-bottom: 2%; +/* margin-bottom: 2%; */ /* margin-left: 1%; */ } diff --git a/great-idea/index.html b/great-idea/index.html index 32bf1e3fcb..4928b8d2b5 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -20,27 +20,24 @@
-

-Innovation
-On
-Demand -

+

Innovation
On
Demand

-

Get Started

+
From 77ce503a4fda271f190f34cf1aec8b212ecf784f Mon Sep 17 00:00:00 2001 From: NomadDaniel Date: Thu, 12 Mar 2020 15:24:02 -0400 Subject: [PATCH 04/12] converted everything from inline-block to flexbox, looks good expect for 2 minor alignment issues --- great-idea/css/index.css | 29 +++++++++++++++++++---------- great-idea/index.html | 3 +-- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 4baed80120..211286995c 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -51,7 +51,7 @@ border-spacing: 0; /* Set every element's box-sizing to border-box */ * { box-sizing: border-box; -border: 1px solid grey !important; +/* border: 1px solid grey !important; */ } html, body { @@ -70,7 +70,7 @@ margin-bottom: 15px; */ /* Your code starts here! */ .container { -width: 900px; +width: 66%; margin: 0 auto; } @@ -197,7 +197,9 @@ margin-right: 100px; } .middle-content { -/* display: inline-block; */ +display: flex; +justify-content: space-between; + /* display: inline-block; */ width: 100%; padding-top: 3%; } @@ -215,37 +217,42 @@ margin: 2%; */ } .middle-img { +/* align-self: auto; */ +/* margin: 0 auto; */ /* margin: 1%; */ +padding-bottom: 5%; +padding-top: 5%; } .bottom-content { /* display: inline-block; */ /* margin-left: 7%; */ -padding-top: 5%; +/* padding-top: 2%; */ padding-bottom: 5%; /* color: red; */ /* margin: 0 auto; */ display: flex; -flex-direction: row; +justify-content: space-between; /* justify-content: space-evenly; */ } .services { /* display: inline-block; */ /* color: red; */ -width: 25%; +width: 30%; /* margin-left: 1%; */ } .product { /* display: inline-block; */ /* color: red; */ -width: 25%; +width: 30%; } + .vision { /* display: inline-block; */ /* color: red; */ -width: 25%; +width: 30%; */ } .contact { @@ -256,7 +263,8 @@ padding-bottom: 5%; } .address { width: 18%; -/* margin-bottom: 2%; */ +margin-top: 2%; +margin-bottom: 2%; /* margin-left: 1%; */ } .phone { @@ -265,7 +273,8 @@ width: 18%; /* margin-left: 1%; */ }.email { -width: 18%; +margin-top: 2%; + width: 18%; /* margin-bottom: 2%; */ /* margin-left: 1%; */ } diff --git a/great-idea/index.html b/great-idea/index.html index 4928b8d2b5..e2b46c3942 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -64,7 +64,6 @@

About

Image of code snippets across the screen
-

Services

@@ -83,7 +82,7 @@

Product

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.

-
+
From e3de0e07ffb4c30a1eb18dc04017631f96b16b9e Mon Sep 17 00:00:00 2001 From: NomadDaniel Date: Thu, 12 Mar 2020 15:49:57 -0400 Subject: [PATCH 05/12] cleaned up minor alignment issues, now time to build new page --- great-idea/css/index.css | 25 ++++++++++++++----------- great-idea/index.html | 1 + 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 211286995c..24450187b5 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -74,25 +74,28 @@ width: 66%; margin: 0 auto; } -header nav{ -/* width: 5%; */ +header { + display: flex; + justify-content: space-evenly; +} +nav { +width: 100%; /* height: 10%; */ display: flex; justify-content: space-evenly; -align-items: center; -border: 0%; +/* border: 2px solid red; */ padding: 2%; /* margin: 0 2%; */ /* display: inline-block; */ color: grey; /* letter-spacing: ; */ /* text-align: justify; */ -/* vertical-align: middle; */ +vertical-align: middle; } .logo { -/* margin-left: 15%; */ -/* vertical-align: middle; */ +margin-left: 15%; +vertical-align: middle; /* border: 1px solid red; */ /* justify-content: space-between; */ } @@ -128,14 +131,14 @@ padding: 2%; /*================= Animation of "Start Now===================*/ .flip-2-hor-top-1 { - background-color: black; + /* background-color: black; */ color: white; margin: 0 auto; - width: 50%; + width:60%; margin: 20%; - border: 2px solid black; + /* border: 2px solid black; */ font-size: 1.5rem; - padding: 4%; + /* padding: 4%; */ -webkit-animation: flip-2-hor-top-1 3s cubic-bezier(0.5, 0.5, 0.515, 1) both; animation: flip-2-hor-top-1 3s cubic-bezier(0.5, 0.5, 0.5, 0.5) both infinite; } diff --git a/great-idea/index.html b/great-idea/index.html index e2b46c3942..a910c0dbab 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -27,6 +27,7 @@ About Contact + From 1c287989f428bed3319f4ec7f7db9336a541ff38 Mon Sep 17 00:00:00 2001 From: NomadDaniel Date: Thu, 12 Mar 2020 16:07:06 -0400 Subject: [PATCH 06/12] starting markup for new page service.html --- great-idea/css/index.css | 15 +++++++++++++-- great-idea/index.html | 2 +- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/great-idea/css/index.css b/great-idea/css/index.css index 24450187b5..cb7fd20ed6 100644 --- a/great-idea/css/index.css +++ b/great-idea/css/index.css @@ -68,7 +68,15 @@ font-family: 'Bangers', cursive; margin-bottom: 15px; */ } -/* Your code starts here! */ + +/*================ Code starts here for `Services.html`====================*/ + + + + + + +/* ================Your code starts here for Landing Page!================== */ .container { width: 66%; margin: 0 auto; @@ -284,4 +292,7 @@ margin-top: 2%; .copyright p { text-align: center; -} \ No newline at end of file +} + + + diff --git a/great-idea/index.html b/great-idea/index.html index a910c0dbab..352708d68b 100644 --- a/great-idea/index.html +++ b/great-idea/index.html @@ -20,7 +20,7 @@