diff --git a/img/header-img.png b/css/img/header-img.png similarity index 100% rename from img/header-img.png rename to css/img/header-img.png diff --git a/img/logo.png b/css/img/logo.png similarity index 100% rename from img/logo.png rename to css/img/logo.png diff --git a/img/mid-page-accent.jpg b/css/img/mid-page-accent.jpg similarity index 100% rename from img/mid-page-accent.jpg rename to css/img/mid-page-accent.jpg diff --git a/css/index.css b/css/index.css index 0c9959c1e5..1d1aa54604 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,332 @@ -/* Use your own code or past solution for Great Idea Web Page CSS here! */ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +/* +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + HTML5 display-role reset for older browsers +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +*/ +/* Set every element's box-sizing to border-box */ +* { + box-sizing: border-box; +} +html, body { + height: 100%; + font-family: 'Titillium Web', sans-serif; + display: flex; + justify-content: center; +} +h1, h2, h3, h4, h5 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; +} + +/* Your code starts here! */ +/* Page Wrapper */ +.page-wrapper{ + width: 1000px; +} +/* Navbar*/ + +#navbar{ + width: 1000px; + height: 60px; + z-index: 10; + background: linear-gradient(to right, blue, red); + position: fixed; + display: flex; + justify-content: space-evenly; + top: 0; +} +.nav-link{ + width: 115px; + height: 100%; + text-decoration: none; + color: white; + vertical-align: top; + text-align: center; + padding-top: 15px; +} + +/* Innovation On Demand */ +#innovation_container{ + height: 450px; + margin-top: 85px; + display: flex; +} +#innovation_and_button{ + width: 45%; + height: 100%; + vertical-align: top; + padding: 55px 95px 105px 75px; +} +#innovation_on_demand{ + font-size: 4.1rem; + text-align: center; +} +#get_started_button{ + margin-left: 4%; + width: 95%; + height: 35px; + background: #37af65; + color: white; + font-size: 20px; + border: none; + border-radius: 10px; + cursor: pointer; + font-family: 'Anton', sans-serif; +} +/* Features and About Section */ +#features_about{ + border-top: gray 2px solid; + display: flex; + justify-content: space-between; +} +#features, #about{ + width: 490px; +} + +/* Services, Product, and Vision Section */ +#services_product_vision{ + border-bottom: gray 2px solid; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-right: 10px; + width: 100%; +} +.ser_pro_vis{ + width: 30%; + height: 220px; +} +/* Footer Section */ +#copyright{ + text-align: center; + margin-bottom: 100px; +} + +/* Images */ +#image_container{ + width: 50%; + height: 100%; + margin: 20px 10px 10px 60px; + background-repeat: no-repeat; + background-image: url(img/header-img.png); +} +.middle-img{ + width: 120vw; + height: 200px; + background-repeat: no-repeat; + background-image: url(img/mid-page-accent.jpg); + background-size: 1000px 200px; +} +.logo{ + margin: 8px 0px 0px 10px; + padding: 50px 100px 0px 100px; + width: 100px; + height: 10px; + background-image: url(img/logo.png); + background-repeat: no-repeat; + z-index: 15; +} + +.services-header-img{ + width: 100%; +} +/* Hover Effects and Animations */ +#navbar .nav-link:hover{ + animation-name: test; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: reverse; +} +@keyframes test{ + 0% { + background-color: orange; + } + 20%{ + background-color: lightblue; + } + 40%{ + background-color: orange; + } + 60%{ + background-color: lightblue; + } + 100%{ + background-color: orange; + } +} +/* Service Page */ +.first-section{ + border-bottom: black solid 1px; + padding-bottom: 15px; + margin-top: 30px; +} +.middle-section{ + display: flex; + flex-wrap: wrap; + justify-content: flex; + align-content: space-around; + margin-top: 20px; +} +.middle-content{ + width: 45%; + border: black solid 1px; + padding: 0px 20px 20px 20px; + background: rgb(233, 225, 225); + margin: 20px; +} +.middle-content h2{ + font-size: 20px; +} +.learn-more{ + border: black 1px solid; + height: 30px; + width: 120px; + font-family: cursive; + cursor: pointer; +} +.bottom-section{ + display: flex; + justify-content: space-between; + border-top: black solid 2px; + margin: 20px 0px 60px 0px; + padding-top: 40px; + align-content: flex-start; +} +.bottom-content{ + width: 50%; +} + +/* 800px */ +@media (max-width: 800px){ + .page-wrapper{ + width: 700px; + } + #navbar{ + width: 700px; + height: 120px; + } + .nav-link{ + width: 120px; + height: 50px; + margin-top: 70px; + } + #image_container{ + display: none; + background: none; + } + #innovation_container{ + display: flex; + justify-content: center; + } + #innovation_on_demand{ + display: flex; + justify-content: center; + } + .bottom-section{ + margin-bottom: 300px; + } + .logo{ + position: absolute; + top: 15px; + } + .middle-img{ + height: 150px; + background-size: 700px 150px; + } + #services_product_vision{ + padding-bottom: 50px; + } +} +@media (max-width: 500px){ + .page-wrapper{ + width: 400px; + } + #navbar{ + margin-top: 100px; + flex-direction: column; + width: 400px; + height: 250px; + background: white; + position: static; + border-bottom: gray 2px solid; + } + .nav-link{ + color: black; + width: 100%; + border-top: gray 2px solid; + margin-top: 0px; + } + #get_started_button{ + margin-right: 100px; + width: 200px; + position: absolute; + left: 110px; + } + .logo{ + left: 150px; + } + .middle-img{ + background-size: 400px 100px; + height: 100px; + } + #services_product_vision{ + flex-direction: column; + } + #features_about{ + flex-direction: column; + } + #features, #about{ + width: 100%; + } + .ser_pro_vis{ + width: 100%; + height: 150px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 476b4b8cb9..0a0b80e6d8 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,82 @@ - Great Idea - Responsive I + + + Great Idea! - + + - - - + +
+ +
+
+

Innovation On Demand

+ +
+
+
+
+
+
+

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.

+
+
+ + + + +
+ \ No newline at end of file