From 5876d468b1272d9bbcecbefb03a46bd7410d550c Mon Sep 17 00:00:00 2001 From: Alexis Montecillo Date: Mon, 16 Mar 2020 14:42:26 -0500 Subject: [PATCH 1/4] getting started --- css/index.css | 241 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 108 +++++++++++++++++++++- service.html | 0 3 files changed, 347 insertions(+), 2 deletions(-) create mode 100644 service.html diff --git a/css/index.css b/css/index.css index 0c9959c1e5..fe1df52248 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,244 @@ /* 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; +} + +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 */ +body { + width: 1000px; + margin: 50px auto; +} + +/* p{ + font-family: 'Baloo Chettan 2', cursive; +} */ + +header { + display: flex; + align-items: center; + width: 1000px; + height: 10vh; + overflow: hidden; + position: fixed; + top: 0; + background-color: gray; + margin: 25px auto 20px auto; + z-index: 1; + +} + +header nav { + width: 75%; + display:flex; + justify-content: space-around; + text-align: center; + align-items: center; +} + +a{ + + color: white; + font-size: 17px; + text-decoration: none; + float: left; + margin: 3vh 0; +} +header img { + float: right; + width: 15%; + height: 50%; + clear: right; + z-index: 1; + margin-left: 5%; +} + +/*code for the section: innovations*/ +.innovation { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding-bottom: 70px; + border-bottom: solid 1px black; + margin-top: 15vh; + +} + +.innovation div{ + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; + width: 60%; +} + +h1 { + font-size: 80px; + width: 100%; + margin: 40px 0; +} + +/*Everything to do with the button starts here*/ +.getStarted{ + width: 25%; + height: 10px; + + +} + +.getStarted button{ + display: block; + width: 100%; + height: 5vh; + font-size: 15px; + border: 1px solid black; + color: black; +} +/*Everything with the button ends here.*/ + +.innovation img { + display:block; + width: 40%; +} + +/*Sections feature and about +known class is sectionThree*/ + +.sectionThree{ + display:flex; + flex-direction: column; + width: 100%; + margin: 50px auto; + +} + +/*Section pharagraphs.*/ +.paraSection{ + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + margin: 0 auto 35px auto; +} + +.paraSection p{ + font-size: 17.5px; +} + +#sectionFeature { + width: 47%; +} + +#sectionAbout{ + width: 47%; +} + +.middle-img { + display: block; + width: 100%; +} + +/*Working on section four with service, product, and vision +This section is known as class sectionFour. +*/ + +.spv{ + width: 100%; + padding-bottom: 45px; + border-bottom: black solid 1px; +} + +.groupFour { + display: flex; + justify-content: space-between; +} + +.fourService{ + width: 30%; +} + +.fourProduct{ + width: 30%; +} + +.fourVision{ + width: 30%; +} + +/*Footer information*/ +footer { + width: 100%; + margin-top: 35px; +} +address{ + display: block; + width: 25%; +} +footer p{ + text-align: center; + margin-bottom: 30px; + color: black; +} + +/*We will start tablet work here.*/ diff --git a/index.html b/index.html index 476b4b8cb9..3d5cba6678 100644 --- a/index.html +++ b/index.html @@ -12,5 +12,109 @@ - - \ No newline at end of file + + + + +
+ + + + +
+ + + +
+ +
+

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.

+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/service.html b/service.html new file mode 100644 index 0000000000..e69de29bb2 From 8ef93556fbc6c6be8655eb42521e9ab9f0487812 Mon Sep 17 00:00:00 2001 From: Alexis Montecillo Date: Mon, 16 Mar 2020 15:19:56 -0500 Subject: [PATCH 2/4] finished tablet --- css/index.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/css/index.css b/css/index.css index fe1df52248..2398ac4539 100644 --- a/css/index.css +++ b/css/index.css @@ -242,3 +242,77 @@ footer p{ } /*We will start tablet work here.*/ + +@media (max-width: 800px){ + + + body { + width: 750px; + max-width: 100%; + } + + /*Tablet header.*/ + header { + width: 100%; + height: auto; + position: relative; + top: 0; + background-color: white; + z-index: 0; + flex-direction: column-reverse; + margin-top: 20px; + } + + header nav { + width: 100%; + display:flex; + justify-content: space-around; + text-align: center; + align-items: center; + } + + a{ + color: grey; + font-size: 17px; + text-decoration: none; + float: left; + margin: 3vh 0; + } + + header img { + float: none; + width: auto; + height: auto; + z-index: 1; + clear: none; + margin-bottom: 30px; + } + + /*End of tablet header and + the start of tablet innovition.*/ + + .innovation img{ + display: none; + width: 0; + height: 0; + } + + .innovation div { + width: 100%; + } + + .innovation div h1 { + margin: 2.5px auto; + } + + /*End of .innovation + beginning the middle pharagraphs*/ + + .sectionThree{ + margin: 0 10px; + } + + +} /*End of media width Tablet.*/ + + From 031cfde06d14a9559ec0f2f8c829b5282f44b4c1 Mon Sep 17 00:00:00 2001 From: Alexis Montecillo Date: Mon, 16 Mar 2020 15:40:10 -0500 Subject: [PATCH 3/4] finished project --- css/index.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/css/index.css b/css/index.css index 2398ac4539..079d1a4d41 100644 --- a/css/index.css +++ b/css/index.css @@ -315,4 +315,65 @@ footer p{ } /*End of media width Tablet.*/ +/*Mobile Editing*/ +@media (max-width: 500px){ + + body{ + width: 450px; + } + + /*header info starts here*/ + + + header nav{ + flex-direction: column; + border-top: solid grey 1px; + } + + header nav a { + display: block; + width: 100%; + padding: 15px 0; + margin: auto auto; + border-bottom: gray solid 1px; + } + +/*end of header +start of pharagraph management*/ + + .paraSection{ + flex-direction: column; + } + + #sectionFeature { + width: 95%; + margin: 15px auto; + } + + #sectionAbout { + width: 100%; + margin: 15px auto; + } + + .groupFour{ + flex-direction: column; + } + + .fourService{ + width: 95%; + margin: 15px auto; + } + + .fourProduct{ + width: 100%; + margin: 15px auto; + } + + .fourVision{ + width: 100%; + margin: 15px auto; + } + + +} /* end of mobile */ From 4569b4ea4cb17f4c6521b79147ef52bb864b1b6f Mon Sep 17 00:00:00 2001 From: Alexis Montecillo Date: Mon, 16 Mar 2020 15:49:37 -0500 Subject: [PATCH 4/4] added meta --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 3d5cba6678..c8604c40b1 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Great Idea - Responsive I +