diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..6d9380d16 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -3,7 +3,7 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, +/*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, @@ -23,7 +23,7 @@ time, mark, audio, video { font: inherit; vertical-align: baseline; } -/* HTML5 display-role reset for older browsers */ + HTML5 display-role reset for older browsers article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; @@ -46,15 +46,16 @@ table { border-collapse: collapse; border-spacing: 0; } - +*/ /* Set every element's box-sizing to border-box */ +/* No Flexbox or CSS Grid */ * { - box-sizing: border-box; + box-sizing: border-box; } html, body { height: 100%; - font-family: 'Titillium Web', sans-serif; + font-family: 'Titillium Web', sans-serif; } h1, h2, h3, h4, h5 { @@ -63,4 +64,117 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ + +/* Navbar*/ +#navbar{ + width: 100vw; + height: 60px; + z-index: 10; + background: linear-gradient(to right, blue, red); + position: fixed; + top: 0; + left: 0; +} +#navbar a{ + width: 100px; + height: 100%; + text-decoration: none; + color: white; + display: inline-block; + vertical-align: top; + text-align: center; + padding-top: 15px; +} + +/* Innovation On Demand */ +#innovation_container{ + height: 450px; + margin-top: 85px; +} + +#innovation_and_button{ + width: 45%; + height: 100%; + vertical-align: top; + display: inline-block; + 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; +} +#image_container{ + width: 50%; + height: 100%; + padding: 10px 0px 0px 60px; + display: inline-block; + background-image: url("header-img.png"); +} +/* Features and About Section */ +#features_about{ + border-top: gray 2px solid; +} +#features, #about{ + display: inline-block; + width: 49.5%; +} + +/* Images */ +.middle-img{ + width: 100vw; + max-width: 100%; + height: 20vw; +} +.logo{ + padding: 8px 0px 0px 105px; +} +/* Services, Product, and Vision Section */ +#services_product_vision{ + border-bottom: gray 2px solid; +} +#services, #product, #vision{ + display: inline-block; + width: 33%; +} +/* Footer Section */ +#copyright{ + text-align: center; + margin-bottom: 100px; +} +/* Hover Effects */ +#navbar a: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; + } +} \ No newline at end of file diff --git a/great-idea-website/css/link.css b/great-idea-website/css/link.css new file mode 100644 index 000000000..2d2771ca6 --- /dev/null +++ b/great-idea-website/css/link.css @@ -0,0 +1,79 @@ +*{ + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: sans-serif; +} + +/* Navbar */ +#navbar{ + width: 100%; + height: 60px; + z-index: 10; + background: linear-gradient(to right, blue, red); + position: fixed; + top: 0; + left: 0; +} +#navbar a{ + width: 100px; + height: 100%; + text-decoration: none; + color:white; + display: inline-table; + vertical-align: top; + text-align: center; + padding-top: 20px; +} +/* First Section */ +#first_section{ + margin-top: 60px; + +} +#first_section h1{ + text-align: center; + font-family: 'Titillium Web', sans-serif; + border-bottom: gray 2px solid; + padding: 20px 0px 20px 0px; +} +#services_section{ + padding-top: 20px; +} +#quality, #state_of_the_art{ + display: inline-block; + width: 48%; + text-align: center; +} +/* Attention To Detail Portion*/ +#attention_to_detail{ + padding: 30px 0px 0px 0px; + text-align: center; +} +/* Images */ +.logo{ + padding: 8px 0px 0px 105px; +} +/* Hover Effects */ +#navbar a: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; + } +} \ No newline at end of file diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..a7467ea15 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -8,7 +8,8 @@ - + + @@ -16,48 +17,68 @@ - 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 + +
+
+

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.

+
+
+ 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.

+
+
+ + - Copyright Great Idea! 2018 + \ No newline at end of file diff --git a/great-idea-website/link.html b/great-idea-website/link.html new file mode 100644 index 000000000..78afb4df4 --- /dev/null +++ b/great-idea-website/link.html @@ -0,0 +1,53 @@ + + + + + + + Great Idea! + + + + + + + + + + + +
+

Services

+
+
+

Quality

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Ab mollitia, quo deleniti minima doloribus expedita natus quisquam. Consectetur assumenda qui expedita beatae, id sapiente, quisquam natus, nam eveniet soluta voluptas.

+
+
+

State Of The Art

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Ab mollitia, quo deleniti minima doloribus expedita natus quisquam. Consectetur assumenda qui expedita beatae, id sapiente, quisquam natus, nam eveniet soluta voluptas.

+
+
+
+

Attention To Detail

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Sint non totam nulla excepturi molestias eaque, laudantium dolore magni officiis omnis aut obcaecati dicta velit ullam nemo recusandae expedita eveniet suscipit. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem facilis blanditiis error officia repellat. Voluptas eaque quibusdam ipsum molestiae autem qui deserunt neque, pariatur soluta modi, nam corporis? Quos, cupiditate.

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