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 diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..1b3a77699 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,128 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ + +.container { + width: 885px; + margin: 0 auto; + font-family: 'Livvic', sans-serif; + +} + +.block { + position: relative; + width: 100%; +} + +header { + /* set the header to a fixed position */ + position: fixed; + top: 0; + z-index: 1; + background-color: #3CCEDA; + width: 46.4%; + opacity: .9; + + +} +/* navbar */ +#navbar { + display: inline-block; + text-align: center; + height: 40px; + padding: 10px 10px px 20px; +} + +.nav-button { + font-size: 14px; + margin: 15px 16px; + padding: 0px 15px 0px 15px; + position: relative; + border: none; + outline: none; + +} + +.nav-button:hover { + opacity: .6; +} + +.logo { + float: right; + padding: 5px 0px 0px px; +} + +/* call to action */ +.cta { + position: relative; + margin-top: 30px; + +} + +.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: 200; + background-color: white; + vertical-align: top; + margin-top: 2px; + padding: 10px 50px; + font-size: 20px; + border: 1px solid black; + + +} + +.cta .cta_text button:hover { + background: black; + color: white; +} + +.cta img { + /* display: inline-block */ + position: absolute; + 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; +} +/* 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 92beabd65..c6bff824f 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -3,61 +3,90 @@ - + Great Idea! + - - - - - 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. + + - 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. + +
+ + + + +
+ +
+
+

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.

+
+
+

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