diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..fc7c6e879 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -49,7 +49,7 @@ table { /* Set every element's box-sizing to border-box */ * { - box-sizing: border-box; + box-sizing: border-box; } html, body { @@ -63,4 +63,137 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ + +/* adding body margin */ +body { + margin: 25px 100px; +} + +/* editing nav anchors*/ +nav a { + /* adding padding */ + padding-left: 45px; + padding-right: 45px; + /* changing color */ + color: grey; +} + +@keyframes ani { + from {background-color: white;} + to {background-color: yellow;} + } + +a:hover { + animation-name: ani; + animation-duration: 3s; +} + +/* could not figure out header */ + +header { + border: 2px solid black; +} + +.header-left { + border: 2px solid black; + text-align: center; + display: inline-block; + border: 2px solid black; + padding: 75px 125px; + max-height: 100%; + margin-bottom: 75px; +} + +h1{ + border: 2px solid green; + font-size: 75px; + margin: 0; +} + +.button-box { + border: 2px solid green; + padding: 20px; + text-align: center; +} + +.button { + border: 2px solid black; + padding: 5px; + width: 125px; + text-align: center; + margin-left: 70px; +} + +header img { + border: 2px solid orange; + display: inline-block; + padding: 25px; +} + +/* section above image */ + +.upper-section { + border-top: 2px solid black; + padding: 25px 0px; +} + +.us-left { + display: inline-block; + width: 525px; + padding-right: 20px; +} + +.us-right { + display: inline-block; + width: 525px; + padding-left: 20px; +} + +/* image */ + +.middle-img { + width: 1055px; +} + + +/* lower-section */ + +.lower-section { + border-bottom: 2px solid black; + padding: 25px 0px; +} + +.ls-left { + display: inline-block; + width: 347px; + padding-right: 22px; +} + +.ls-middle { + display: inline-block; + width: 347px; +} + +.ls-right { + display: inline-block; + width: 347px; + padding-left: 22px; +} + +/* contact */ + +.contact { + padding: 25px 0px; +} + +.phone { + padding: 10px 0px; +} + +/* footer */ + +footer { + text-align: center; + margin-bottom: 50px; +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..d1317aee5 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,49 +15,67 @@ - - 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. - - 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 +
+
+

+ 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
+
sales@greatidea.io
+
+ + \ No newline at end of file