From ce9ecc27f7c4811ab80754887963cae08f854234 Mon Sep 17 00:00:00 2001 From: Alexis-Anderson Date: Sat, 7 Sep 2019 11:43:29 -0700 Subject: [PATCH 1/8] html added --- great-idea-website/index.html | 42 ++++++++++++++++++++++------------- 1 file changed, 27 insertions(+), 15 deletions(-) diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..1521ae742 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,21 +15,33 @@ - - Services - Product - Vision - Features - About - Contact - - - Innovation - On - Demand - - Get Started - +
+
+ +
+
+ +
+
+

+ Innovation
+ On
+ Demand
+

+
+
+ +
+
Image of a code snippet. Features From cfa98d1f8331c6baa1bb7639fc09f175cb06da95 Mon Sep 17 00:00:00 2001 From: Alexis-Anderson Date: Sun, 8 Sep 2019 09:49:13 -0700 Subject: [PATCH 2/8] cleaned and added html --- great-idea-website/css/index.css | 15 ++++- great-idea-website/index.html | 98 ++++++++++++++++++-------------- 2 files changed, 70 insertions(+), 43 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..d59394596 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,17 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +body { + width: 880px; + +} +header { + margin: auto; + padding: 2px; +} + +div .navbar { + display: inline-block; + +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 1521ae742..d6e2a5554 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -14,10 +14,10 @@ - +
-
-
-
+ -
-
-

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

Innovation
On
Demand

+ +
+ Image of a code snippet. +
- 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. +
+ +
+
+
+

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

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 5e1a7f0e92a1d556a23d5b6537a22e5875448eb9 Mon Sep 17 00:00:00 2001 From: Alexis-Anderson Date: Sun, 8 Sep 2019 10:19:57 -0700 Subject: [PATCH 3/8] css added --- great-idea-website/css/index.css | 35 ++++++++++++++++++++++++-------- great-idea-website/index.html | 12 +++++------ 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index d59394596..1cd094d76 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -64,16 +64,35 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ -body { - width: 880px; - -} -header { +.container { + width: 800px; margin: auto; - padding: 2px; } -div .navbar { +.block { + position: relative; + width: 100%; +} +/* navbar */ +#navbar { display: inline-block; + text-align: center; + height: 60px; + padding: 40px 0px px 0px; + overflow: hidden; +} + +.nav-button { + font-size: 14px; + margin: 25px 16px; + position: relative; + border: none; + outline: none; + background-color: white; + +} + +.nav-button:hover { + opacity: .4; +} -} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index d6e2a5554..e0e661b69 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -19,12 +19,12 @@ From 67f4614052264dddcc4689cef4f338bd80faec79 Mon Sep 17 00:00:00 2001 From: Alexis-Anderson Date: Sun, 8 Sep 2019 11:08:02 -0700 Subject: [PATCH 4/8] css changes --- great-idea-website/css/index.css | 62 +++++++++++++++++++++++++++++--- great-idea-website/index.html | 8 ++--- 2 files changed, 62 insertions(+), 8 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 1cd094d76..ce869d1d6 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -65,7 +65,7 @@ h1, h2, h3, h4, h5 { /* Your code starts here! */ .container { - width: 800px; + width: 880px; margin: auto; } @@ -73,13 +73,21 @@ h1, h2, h3, h4, h5 { position: relative; width: 100%; } + +header { + position: fixed; + z-index: 1; + background-color: #3CCEDA; + width: 100%; +} /* navbar */ #navbar { display: inline-block; text-align: center; height: 60px; padding: 40px 0px px 0px; - overflow: hidden; + + } .nav-button { @@ -88,11 +96,57 @@ h1, h2, h3, h4, h5 { position: relative; border: none; outline: none; - background-color: white; + + } .nav-button:hover { - opacity: .4; + opacity: .6; +} + +.logo { + float: right; + padding: 12px 0px 0px 0px; +} + +/* call to action */ +.cta { + position: relative; + } +.cta .cta_text { + display: inline-block; + vertical-align: top; + margin: 100px 0px; + padding: 0px 60px; + font-size: 50px; + text-align: center; + width: 55%; +} + +.cta .cta_text button { + font-weight: 300; + background-color: white; + vertical-align: top; + margin-top: 2px; + padding: 10px 50px; + font-size: 18px; + border: 1px solid black; + +} + +.cta .cta_text button:hover { + background: black; + color: white; +} + +.cta img { + /* display: inline-block */ + position: absolute; + top: 20px; + right: 0px; +} + + diff --git a/great-idea-website/index.html b/great-idea-website/index.html index e0e661b69..106816b68 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -31,14 +31,14 @@ -
-
+
+

Innovation
On
Demand

- +
Image of a code snippet.
- +
From a0f246b616b5df35a1e7b1f7c80c4955813ef510 Mon Sep 17 00:00:00 2001 From: Alexis-Anderson Date: Sun, 8 Sep 2019 12:26:01 -0700 Subject: [PATCH 5/8] more css changes --- great-idea-website/css/index.css | 55 +++++++++++++++++++++++--------- 1 file changed, 40 insertions(+), 15 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index ce869d1d6..1d5046eee 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -65,8 +65,9 @@ h1, h2, h3, h4, h5 { /* Your code starts here! */ .container { - width: 880px; - margin: auto; + width: 885px; + margin: 0 auto; + } .block { @@ -78,26 +79,25 @@ header { position: fixed; z-index: 1; background-color: #3CCEDA; - width: 100%; + width: 46.4%; + opacity: .9; + } /* navbar */ #navbar { display: inline-block; text-align: center; - height: 60px; - padding: 40px 0px px 0px; - - + height: 40px; + padding: 10px 10px px 20px; } .nav-button { font-size: 14px; - margin: 25px 16px; + margin: 15px 16px; + padding: 0px 15px 0px 15px; position: relative; border: none; outline: none; - - } @@ -107,7 +107,7 @@ header { .logo { float: right; - padding: 12px 0px 0px 0px; + padding: 5px 0px 0px px; } /* call to action */ @@ -127,14 +127,15 @@ header { } .cta .cta_text button { - font-weight: 300; + font-weight: 200; background-color: white; vertical-align: top; margin-top: 2px; padding: 10px 50px; - font-size: 18px; + font-size: 20px; border: 1px solid black; + } .cta .cta_text button:hover { @@ -145,8 +146,32 @@ header { .cta img { /* display: inline-block */ position: absolute; - top: 20px; - right: 0px; + top: 50px; + right: 0px; +} + +/* paragraphs */ +.content { + position: relative; +} + +.content .content-top{ + display: inline-block; + width: 420px; + line-height: 15px; + margin: 1% 1% 2% 1%; + padding: 25px 0px; + line-height: 20px; +} + +.content2 .content-bottom{ + display: inline-block; + width: 276px; + margin: 1% 8px 2% 8px; + padding: 25px 0px; + line-height: 20px; + + } From 8810f2e3c05644f1e17d23f75e73d1d69e75c62a Mon Sep 17 00:00:00 2001 From: Alexis-Anderson Date: Sun, 8 Sep 2019 13:09:26 -0700 Subject: [PATCH 6/8] all done! --- great-idea-website/css/index.css | 17 +++++++++++++++-- great-idea-website/index.html | 12 +++++++++--- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 1d5046eee..1b3a77699 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -64,9 +64,11 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ + .container { width: 885px; margin: 0 auto; + font-family: 'Livvic', sans-serif; } @@ -76,11 +78,14 @@ h1, h2, h3, h4, h5 { } header { - position: fixed; + /* set the header to a fixed position */ + position: fixed; + top: 0; z-index: 1; background-color: #3CCEDA; width: 46.4%; opacity: .9; + } /* navbar */ @@ -113,6 +118,7 @@ header { /* call to action */ .cta { position: relative; + margin-top: 30px; } @@ -170,8 +176,15 @@ header { margin: 1% 8px 2% 8px; padding: 25px 0px; line-height: 20px; +} +/* copyright and contact info */ +footer { + padding: 25px 0px 0px 0px; +} - +#copyright { + text-align: center; } + diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 106816b68..3ae855e92 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -3,15 +3,21 @@ + + + Great Idea! + + + @@ -79,9 +85,9 @@

Vision

Contact

123 Way 456 Street
- Somewhere, USA
- 1 (888) 888-8888
- sales@greatidea.io
+ Somewhere, USA

+ 1 (888) 888-8888

+

From 6fc5b5f579dd8cffb9c8c54c55c540853707b00f Mon Sep 17 00:00:00 2001 From: Alexis-Anderson Date: Sun, 8 Sep 2019 16:03:13 -0700 Subject: [PATCH 7/8] fixed a couple html hiccups --- great-idea-website/index.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 3ae855e92..c6bff824f 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -3,10 +3,7 @@ - - - - + Great Idea! From 61734810e27bde99f12a15506c5fcef9a2d4d27e Mon Sep 17 00:00:00 2001 From: anderson9313 <53631518+aanderson9313@users.noreply.github.com> Date: Thu, 12 Sep 2019 18:52:03 -0700 Subject: [PATCH 8/8] Update README.md added name to ReadMe.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dffdf0bc8..423279645 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# User Interface Project: Great Idea Web Page +# User Interface Project: Great Idea Web Page -AlexisAnderson Being able to create a user interface from scratch based on a design file is considered a basic necessity for front end developers. We will be building a single page website using HTML and CSS. @@ -37,4 +37,4 @@ Stretch goals are not required. Complete the project objectives before working o - [ ] Change all the image tags into background images instead -- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items \ No newline at end of file +- [ ] Research CSS animations and see how you could implement some ideas when hovering over buttons or navigation items