diff --git a/design-files/desktop.jpg b/design-files/desktop.jpg index 136265451..ff21f08c7 100644 Binary files a/design-files/desktop.jpg and b/design-files/desktop.jpg differ diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..29a478a55 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -63,4 +63,129 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +body{ + margin: auto; + width: 1000px; +} +/*Header Styling*/ +header nav{ + display: inline-block; + margin: 25px 0px 10px 15px; + width: 75%; +} +header nav a{ + margin: 0 30px; + color: grey; + text-decoration: none; + font-size: 14px; +} +/*nav bar*/ +.navbar { + overflow: hidden; + position: fixed; + top: 0; + width: 49%; + background-color: rgb(0, 0, 92); + } +.navbar:hover{ + background-color: rgb(0, 110, 255); +} +.navbar a:hover{ + color: rgb(0, 0, 92); + animation: Highlight 2s; +} +.navbar a { + float: left; + display: inline-block; + text-align: center; + text-decoration: none; + } +.logo{ + display: inline-block; + padding: 25px 15px 0px 0px; +} +/*title styling*/ +h1{ + font-size: 80px; +} +div.title{ + text-align: center; + width: 49%; + display: inline-block; + padding: 50px; +} +button{ + width: 150px; + height: 30px; + border: 1px solid black; +} +button:hover{ + animation: Highlight 10s; +} +@keyframes Highlight { + 0%{ + transform: scale(1); + } + 20%{ + transform: scale(1.2) + } + 60%{ + transform: scale(1.2) + } + 100%{ + transform: scale(1.2) + } + } +.code{ + display: inline-block; + width: 49%; + padding: 0px 50px; +} +div.fix{ + margin-top: 100px; +} +/*main section styling*/ +hr { + width:90%; + height:3px; + background:black; +} +div.feat{ + display: inline-block; + width: 40%; + margin: 30px 10px 30px 45px; +} +div.abt{ + display: inline-block; + width: 40%; + margin: 30px 10px 30px 45px; +} +.middle-img{ + width: 90%; + margin: 0px 49px 0px; +} +div.service{ + display: inline-block; + width: 29%; + margin: 30px 10px 30px 45px; +} +div.product{ + display: inline-block; + width: 29%; +} +div.vision{ + display: inline-block; + width:29%; +} +/*contact info/footer*/ +div.contact{ + width: 16%; + display: inline-block; + margin-left: 45px; + margin-top: 30px; +} +footer{ + text-align: center; + margin: 50px 0px; +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..516dba15c 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -15,49 +15,64 @@
- - Services - Product - Vision - Features - About - Contact - -
- Innovation
- On
- Demand
-
- 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.
-
-
-
- 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
-
+
+ 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.
+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.
+
+ 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.
+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.
+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.
+