From f380131dabe4986a600bf49d3941a2e0b5f53d9a Mon Sep 17 00:00:00 2001 From: francistse23 Date: Mon, 11 Jun 2018 16:32:30 -0700 Subject: [PATCH 1/2] Project update. Main structure somewhat acceptable. Needs fine-tuning on CSS --- great-idea-website/css/index.css | 83 +++++++++++++++++++++++++++- great-idea-website/index.html | 93 +++++++++++++++++++------------- 2 files changed, 138 insertions(+), 38 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..45522666e 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,85 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +html{ + padding: 50px 400px 50px 400px; +} +.section1{ + display:inline-block; + width: 100%; + border: 3px solid blue; + column-count: 2; + column-width: auto; +} + + nav{ + display: inline; + color: rgb(160, 156, 156); + } + + ul{ + display: inline; + padding-left: 10px; + padding-right:30px; + } + +.logo{ + float: right; + padding: 0px 100px 0px 0px; +} + +.section2{ + display: inline-block; + width: 100%; + border: 3px solid red; + column-count: 2; + column-fill: auto; + padding: 80px 10px 80px 10px; +} + + header{ + font-family: 'Bangers', cursive; + font-size: 80px; + text-align: center; + } + + box{ + text-align: right; + font-size: 20px; + padding: 5px 20px 5px 20px; + border: solid 1px black; + font-family: sans-serif; + } + + .logo2{ + float:right; +} +.section3{ + display: inline-block; + border-top: solid 2px black; + padding: 20px 0px 20px 0px; + width: 100%; + column-count: 2; + column-fill: balance; +} + +.middle-img{ + width:100%; +} + +.section4{ + padding: 20px 0px 20px 0px; + column-count:3; + column-fill: balance; +} +.contact{ + padding: 20px 0px 20px 0px; + border-top: solid 2px black; +} + +.copy{ + display: inline-block; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..04aa3458c 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,49 +15,68 @@ +
+ + +
+ +
+
+
+ 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. +
- Services - Product - Vision - Features - About - Contact - - - 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. - + Image of code snippets across the screen +

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

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 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. - 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 +
- Contact - 123 Way 456 Street - Somewhere, USA - 1 (888) 888-8888 - sales@greatidea.io + - Copyright Great Idea! 2018 - - +
Copyright Great Idea! 2018
+ \ No newline at end of file From 1f23ad84d0646c995cbaa5748bdfadff8f8e31db Mon Sep 17 00:00:00 2001 From: francistse23 Date: Tue, 12 Jun 2018 14:35:46 -0700 Subject: [PATCH 2/2] Please enter the commit message for your changes. Lines starting Project completed with 3 stretch goals. #1 h1, h2, and contact uses new font. #2 locked nav bar on top with background color. #3 nav bar hover changes nav item background color, font color, and font size. :wq :q :q q :q --- great-idea-website/css/index.css | 98 ++++++++++++++++++++------------ great-idea-website/index.html | 76 ++++++++++++------------- 2 files changed, 99 insertions(+), 75 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 45522666e..91f24e7de 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -64,15 +64,17 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ -html{ - padding: 50px 400px 50px 400px; +body{ + margin: 50px 400px 50px 400px; } -.section1{ + +section1 div{ display:inline-block; - width: 100%; - border: 3px solid blue; - column-count: 2; - column-width: auto; + line-height:50px; + background-color: rgb(96, 240, 96); + position: fixed; + top: 0; + width:1103px; } nav{ @@ -80,68 +82,90 @@ html{ color: rgb(160, 156, 156); } + nav ul:hover{ + background-color: rgb(233, 75, 75); + color: white; + font-size: 20px; + + } + ul{ display: inline; - padding-left: 10px; - padding-right:30px; + margin: 30px 30px; } -.logo{ - float: right; - padding: 0px 100px 0px 0px; -} + section1 div img{ + position: absolute; + right: 100px; + top:5px; + } + .logo{ + z-index: 1; + } -.section2{ - display: inline-block; - width: 100%; - border: 3px solid red; - column-count: 2; - column-fill: auto; - padding: 80px 10px 80px 10px; +section2{ + display: block; + padding: 50px 100px; + margin: 0 auto; } header{ + display: inline-block; font-family: 'Bangers', cursive; font-size: 80px; text-align: center; + padding-top: 50px; } box{ - text-align: right; + display: inline-block; font-size: 20px; - padding: 5px 20px 5px 20px; border: solid 1px black; font-family: sans-serif; + padding: 10px 50px; } .logo2{ - float:right; + position:absolute; + right: 500px; + z-index: -1; } -.section3{ - display: inline-block; + +section3 div{ + display: block; border-top: solid 2px black; - padding: 20px 0px 20px 0px; - width: 100%; + padding: 30px 0; column-count: 2; - column-fill: balance; } -.middle-img{ - width:100%; -} + .middle-img{ + width:100%; + } -.section4{ - padding: 20px 0px 20px 0px; +section4 div{ + padding: 30px 0; column-count:3; - column-fill: balance; } -.contact{ - padding: 20px 0px 20px 0px; + +contact div{ + padding: 30px 0; border-top: solid 2px black; + font-family: Julius Sans One; + font-size: 15px; } .copy{ display: inline-block; width: 100%; text-align: center; -} \ No newline at end of file +} + +h1{ + font-family: Julius Sans One; + font-weight: bold; + font-size: 20px; +} + +h2{ + font-family: Julius Sans One; +} diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 04aa3458c..8565c5adf 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,56 +15,55 @@ -
- + +
+ + + +
+ Image of a code snippet.
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. -
- + Get Started + +
+ + + +
+

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

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
@@ -74,6 +73,7 @@

Contact



sales@greatidea.io
+