From e0c09968de4f08276dcacf74c64ffc01e7163514 Mon Sep 17 00:00:00 2001 From: Codyt11 Date: Wed, 8 Apr 2020 21:36:59 -0500 Subject: [PATCH 1/2] updated html and css --- css/index.css | 181 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 93 +++++++++++++++++++++++--- 2 files changed, 264 insertions(+), 10 deletions(-) diff --git a/css/index.css b/css/index.css index 0c9959c1e5..bfbcbbf47d 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,182 @@ -/* Use your own code or past solution for Great Idea Web Page CSS here! */ + +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; +} + +h1, h2, h3, h4, h5 { + font-family: 'Bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; +} + +/* Copy and paste your work from yesterday here and start to refactor into flexbox */ +nav{ + display: flex; + justify-content: space-around; + margin:15px; +} +nav a{ + margin-top: 10px; + text-decoration: none; + color: gray; + padding: 10px; +} +.search{ + width: 100%; + margin:0 15px; + display: flex; + justify-content: space-between; +} +.log{ + margin:0 15px; +} + +.main{ + margin:15px; + display:flex; + justify-content: space-evenly; + +} +.title{ + width:30%; + display:flex; + margin:20px; + padding:15px; + font-size: 80px; + flex-direction: column; + justify-content: center; + align-items: center; +} +h5{ + font-size: 20px; + padding:3px 15px; + border: 1px inset gray; + display:inline; + text-align: center; +} +.innovation{ + margin-left: 15px; + display: flex; + justify-content: center; +} +.on{ + margin-left: 115px; +} +.de{ + margin-left: 35px; +} +.mid{ + display: flex; + justify-content: space-evenly; + +} +.features{ + margin:5%; + font-size: 25px; +} +.about{ + margin:5%; + font-size: 25px; +} +.middle-img{ + width:100%; + height:25%; + margin-top: 20px; + margin-bottom: 20px; + display: flex; +} +.bottom{ + display: flex; + justify-content: space-around; +} +.services{ + margin:1.5%; + font-size: 25px; +} +.product{ + margin:1.5%; + font-size: 25px; +} +.vision{ + margin:1.5%; + font-size: 25px; +} +footer{ + line-height: 30px; + width:100%; +} +.copy{ + text-align: center; + border: none; +} + +@media(max-width: 800px) { + body nav{ + display: flex; + flex-direction: column-reverse; + } + body .search{ + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + } + body .log{ + display: flex; + justify-content: center; + } + body .code{ + display: none; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 476b4b8cb9..34fb74862f 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,91 @@ - - - Great Idea - Responsive I + + + + Great Idea - Responsive I - - + + - + - - - + + + + + +
+
+
+

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.

+
+
+
+ + + + \ No newline at end of file From e5a7b7163cf10632c36a2a6a839106c8952a9b4a Mon Sep 17 00:00:00 2001 From: Codyt11 Date: Wed, 8 Apr 2020 22:50:00 -0500 Subject: [PATCH 2/2] finished project not cleaned up --- css/index.css | 64 +++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 24 +++++++++---------- 2 files changed, 71 insertions(+), 17 deletions(-) diff --git a/css/index.css b/css/index.css index bfbcbbf47d..0d01ed08dd 100644 --- a/css/index.css +++ b/css/index.css @@ -92,7 +92,7 @@ nav a{ .title{ width:30%; display:flex; - margin:20px; + margin:5%; padding:15px; font-size: 80px; flex-direction: column; @@ -103,8 +103,7 @@ h5{ font-size: 20px; padding:3px 15px; border: 1px inset gray; - display:inline; - text-align: center; + text-align: center; } .innovation{ margin-left: 15px; @@ -169,7 +168,7 @@ footer{ } body .search{ display: flex; - flex-direction: row-reverse; + flex-direction: row; justify-content: space-between; } body .log{ @@ -179,4 +178,61 @@ footer{ body .code{ display: none; } + .main{ + margin: 0 auto; + display:flex; + justify-content: space-evenly; + } + .middle-img{ + width:100%; + height:15%; + margin-top: 20px; + margin-bottom: 20px; + display: flex; + } +} + +@media(max-width: 500px) { + p{ + font-size: 75%; + } + body nav{ + display: flex; + flex-direction: column-reverse; + justify-content: center; + } + body .search{ + width:95%; + display: flex; + flex-direction: column; + text-align: center; + } + body .log{ + display: flex; + justify-content: center; + } + body .code{ + display: none; + } + nav a{ + border-bottom: 1px gray solid; + } + + .mid{ + display: flex; + flex-direction: column; + justify-content: space-evenly; + } + .middle-img{ + width:100%; + height:15%; + margin-top: 20px; + margin-bottom: 20px; + display: flex; + } + .bottom{ + display: flex; + flex-direction: column; + justify-content: space-around; + } } \ No newline at end of file diff --git a/index.html b/index.html index 34fb74862f..323a574d19 100644 --- a/index.html +++ b/index.html @@ -16,15 +16,15 @@ @@ -36,23 +36,21 @@

Innovation
Demand

-
Get Started
-
Image of a code snippet.
-

Features

+

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.

+

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.

+

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.