From 490663ab342676adff63b7e4ce2920e5562e9831 Mon Sep 17 00:00:00 2001 From: Jonathan Canela Date: Tue, 17 Mar 2020 21:41:51 -0700 Subject: [PATCH 1/3] Test --- great-idea-website/css/index.css | 21 ++++++-- great-idea-website/index.html | 83 ++++++++++++++++++-------------- 2 files changed, 65 insertions(+), 39 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 7766e7f18..9fea35967 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,8 +46,9 @@ 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; } @@ -63,4 +64,16 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; } -/* Your code starts here! */ \ No newline at end of file +/* Your code starts here! */ +#navbar a{ + text-decoration: none; + color: black; + display: inline; +} +#features_about{ + background: lightblue; +} +#features, #about{ + display: inline; + background-color: lightcoral; +} diff --git a/great-idea-website/index.html b/great-idea-website/index.html index 92beabd65..289cf1c64 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -16,46 +16,59 @@ - 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. - + +
+

Innovation + On + Demand

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

+ Copyright Great Idea! 2018 From d9fd31e8e9bd8b267950ee7f0b5f7509a38fea6c Mon Sep 17 00:00:00 2001 From: Jonathan Canela Date: Wed, 18 Mar 2020 16:36:27 -0700 Subject: [PATCH 2/3] finished main page --- great-idea-website/css/index.css | 89 ++++++++++++++++++++++++++++++-- 1 file changed, 84 insertions(+), 5 deletions(-) diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index 9fea35967..d2e5b1046 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -50,7 +50,7 @@ table { /* Set every element's box-sizing to border-box */ /* No Flexbox or CSS Grid */ * { - box-sizing: border-box; + box-sizing: border-box; } html, body { @@ -65,15 +65,94 @@ h1, h2, h3, h4, h5 { } /* Your code starts here! */ + +/* Navbar*/ +#navbar{ + width: 100%; + height: 60px; + z-index: 10; + background: rgb(98, 93, 93); + position: fixed; + top: 0; + left: 0; +} #navbar a{ + width: 100px; + height: 100%; text-decoration: none; color: black; - display: inline; + display: inline-table; + vertical-align: top; + text-align: center; + padding-top: 15px; +} + +/* Innovation On Demand */ +#innovation_container{ + height: 450px; +} + +#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%; + display: inline-block; +} +/* Features and About Section */ #features_about{ - background: lightblue; + border-top: gray 2px solid; } #features, #about{ - display: inline; - background-color: lightcoral; + display: inline-block; + width: 49.5%; +} + +/* Images */ +.middle-img{ + width: 100%; + height: 20%; +} +.logo{ + margin-top: 6px; + margin-left: 100px; + width: 205px; +} +/* 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{ + background: rgb(241, 241, 241); +} \ No newline at end of file From 3bc04775fde4410e354a3717a6d77b4c6130edeb Mon Sep 17 00:00:00 2001 From: Jonathan Canela Date: Thu, 19 Mar 2020 15:25:06 -0700 Subject: [PATCH 3/3] Finished Completely --- great-idea-website/css/index.css | 46 ++++++++++++++----- great-idea-website/css/link.css | 79 ++++++++++++++++++++++++++++++++ great-idea-website/index.html | 50 +++++++++++--------- great-idea-website/link.html | 53 +++++++++++++++++++++ 4 files changed, 195 insertions(+), 33 deletions(-) create mode 100644 great-idea-website/css/link.css create mode 100644 great-idea-website/link.html diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css index d2e5b1046..6d9380d16 100644 --- a/great-idea-website/css/index.css +++ b/great-idea-website/css/index.css @@ -55,7 +55,7 @@ table { html, body { height: 100%; - font-family: 'Titillium Web', sans-serif; + font-family: 'Titillium Web', sans-serif; } h1, h2, h3, h4, h5 { @@ -68,10 +68,10 @@ h1, h2, h3, h4, h5 { /* Navbar*/ #navbar{ - width: 100%; + width: 100vw; height: 60px; z-index: 10; - background: rgb(98, 93, 93); + background: linear-gradient(to right, blue, red); position: fixed; top: 0; left: 0; @@ -80,8 +80,8 @@ h1, h2, h3, h4, h5 { width: 100px; height: 100%; text-decoration: none; - color: black; - display: inline-table; + color: white; + display: inline-block; vertical-align: top; text-align: center; padding-top: 15px; @@ -90,6 +90,7 @@ h1, h2, h3, h4, h5 { /* Innovation On Demand */ #innovation_container{ height: 450px; + margin-top: 85px; } #innovation_and_button{ @@ -118,7 +119,9 @@ h1, h2, h3, h4, h5 { #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{ @@ -131,13 +134,12 @@ h1, h2, h3, h4, h5 { /* Images */ .middle-img{ - width: 100%; - height: 20%; + width: 100vw; + max-width: 100%; + height: 20vw; } -.logo{ - margin-top: 6px; - margin-left: 100px; - width: 205px; +.logo{ + padding: 8px 0px 0px 105px; } /* Services, Product, and Vision Section */ #services_product_vision{ @@ -154,5 +156,25 @@ h1, h2, h3, h4, h5 { } /* Hover Effects */ #navbar a:hover{ - background: rgb(241, 241, 241); + 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 289cf1c64..a7467ea15 100644 --- a/great-idea-website/index.html +++ b/great-idea-website/index.html @@ -8,7 +8,8 @@ - + + @@ -17,7 +18,7 @@ -
-

Innovation - On - Demand

- - - - - Image of a code snippet. +
+
+

Innovation On Demand

+ +
+
+
@@ -48,29 +47,38 @@

About

Image of code snippets across the screen -
-

Services

+
+
+

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.

-

Product

+
+

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.

- -

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 +

Contact

123 Way 456 Street +
Somewhere, USA +
+
1 (888) 888-8888 +
+
sales@greatidea.io
- 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