diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..112a3615f 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,153 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +body { + width:900px; + margin: auto; +} +nav { + width: 100%; + margin-top: 10px; + position: relative; + display: inline-block; +} + +nav .nav-items { + width: 65%; + display: inline-block; + position: relative; + text-align: center; + vertical-align: middle; + margin-bottom: 16px; +} + +nav .nav-items a { + display: inline-block; + position: relative; + padding-left: 10px; + padding-right: 30px; + font-size: 16px; + text-decoration: none; + color: grey; +} + +nav .logo { + width: 25%; + position: relative; + margin: 25px 40px 30px 40px; + padding: 5px 5px 5px 5px; + vertical-align: middle; + ; +} + +header { + width: 100%; + position: relative; + display: inline-block; + margin-bottom: 20px; + border-bottom: 1px solid black; +} + +header .getting-started { + width: 49.5%; + position: relative; + display: inline-block; + margin: 50px auto; + padding: 50px; + text-align: center; + vertical-align: middle; + font-size: 90px; +} + +header .getting-started .start { + position: relative; + display: inline-block; + font-size: 16px; + padding: 10px 20px; + border: 1px solid black; + text-align: center; +} + +header .snippet { + width: 49.5%; + position: relative; + display: inline-block; + margin: 20px auto; + text-align: center; + vertical-align: middle; +} + +main { + width: 100%; + display: inline-block; +} + +main .top .features { + width: 49.5%; + position: relative; + display: inline-block; + margin: 0 auto; + padding: 50px; +} + +main .top .about { + width: 49.5%; + position: relative; + display: inline-block; + margin: 0 auto; + padding: 50px; +} + +main .middle .middle-img { + width: 100%; + position: relative; + display: inline-block; +} + +main .bottom .services { + width: 33%; + position: relative; + display: inline-block; + margin: 0 auto; + padding: 50px; +} + +main .bottom .product { + width: 33%; + position: relative; + display: inline-block; + margin: 0 auto; + padding: 50px; +} +main .bottom .vision { + width: 33%; + position: relative; + display: inline-block; + margin: 0 auto; + padding: 50px; +} + +.contact { + width: 100%; + padding: 5px; + display: block; + position : relative; + margin: 0 auto; + border-top: 1px solid black; +} + +.contact p { + text-align:left; + font-size: 16px; + margin-bottom: 16px; +} + +footer { + width: 100%; + padding: 5px; + display: block; + position : relative; + margin: 0 auto; + 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..0ef6568e5 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,49 +15,95 @@ - - 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 + + + +
+
+

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

+
+ + - 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 \ No newline at end of file