From 3972863299ab88f31ab0c907d5c0d40e276c265a Mon Sep 17 00:00:00 2001 From: Nikolai Lvov Date: Wed, 26 Feb 2020 16:11:50 -0800 Subject: [PATCH 1/2] I added the css and html solution from a past project to start this one. --- css/index.css | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 84 +++++++++++++++++++++++++- 2 files changed, 247 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index 0c9959c1e5..317c07b849 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,167 @@ /* 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 */ +* { + box-sizing: border-box; +} +header { + display: flex; + justify-content: center; +} +.navigation{ + display: flex; + justify-content: center; + align-content: center; + align-items: center; + margin: 2% 12% 3% 10%; + width: 80%; +} +.navigation a{ + display: flex; + justify-content: space-evenly; + width: 10%; + text-decoration: none; + color: gray; +} +button { + background-color: white; + border: 1px solid black; + width: 200px; + height: 35px; + font-size: 18px; + } + + +h1 { + font-size: 62.5px; +} + +section.top-content { + display: flex; + align-items: center; +} +.features { + display: flex; + flex-direction: column; + height: 50px; + width: 390px; + margin-left: 260px; +} +.about { + display: flex; + flex-direction: column; + height: 50px; + width: 390px; + margin: 90px; +} +.middle-img { + display: flex; + align-items: center; + margin: 3% 20% 0% 19%; +} +section.bottom-content{ + display: flex; + align-items: center; +} +.services { + display: flex; + flex-direction: column; + height: 30px; + width: 225px; + margin-left:260px; +} +.product { + display: flex; + flex-direction: column; + height: 30px; + width: 225px; + margin: 95px; +} +.vision { + display: flex; + flex-direction: column; + height: 30px; + width: 225px; + margin-right: 200px; +} +address{ + display: flex; + flex-direction: column; + width:150px; + margin-left: 260px; +} +.copyright { + display: flex; + justify-content: center; + padding: 5%; +} + +hr { + width: 880px; +} diff --git a/index.html b/index.html index 476b4b8cb9..cbe40261f2 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,88 @@ - + +
+ Services + Product + Vision + Features + About + Contact + + +
+ + +
+
+

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.

+
+
+
+
+
+
+
+
+
+
+
+

Contact

+

123 Way 456 Street + Somewhere, USA

+
+

1 (888) 888-8888

+
+

sales@greatidea.io

+
+ + + \ No newline at end of file From 0d3885290a5416cb83ea64ff4bffc11b87e27f89 Mon Sep 17 00:00:00 2001 From: Nikolai Lvov Date: Sun, 1 Mar 2020 22:40:15 -0500 Subject: [PATCH 2/2] I had to entirely redo my html because something was going wrong with my CSS. I started from scratch and redid all my css as well. I checked off what I did in readme.md. After all that media queries finally started working for me. --- README.md | 14 +-- css/index.css | 257 +++++++++++++++++++++++++++++++++++++++++++++++--- index.html | 57 ++++++----- 3 files changed, 283 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 121cd3bf42..cf5426ead4 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,10 @@ It's time to expand our CSS skills into multiple devices. You will be creating Follow these steps to set up and work on your project: -- [ ] Create a forked copy of this project. -- [ ] Add your project manager as collaborator on Github. -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -- [ ] Create a new branch: git checkout -b ``. +- [x] Create a forked copy of this project. +- [x] Add your project manager as collaborator on Github. +- [x] Clone your OWN version of the repository (Not Lambda's by mistake!). +- [x] Create a new branch: git checkout -b ``. - [ ] Implement the project on your newly created `` branch, committing changes regularly. - [ ] Push commits: git push origin ``. @@ -21,9 +21,9 @@ Follow these steps for completing your project. ## Task 2: Minimum Viable Product -* [ ] Review each [design file](design-files). Notice the subtle differences between them all. -* [ ] Insert a `viewport` meta tag into the head of the project with these html attributes: `content="width=device-width, initial-scale=1"` -* [ ] Introduce max-width media queries into your project at 800px and 500px +* [x] Review each [design file](design-files). Notice the subtle differences between them all. +* [x] Insert a `viewport` meta tag into the head of the project with these html attributes: `content="width=device-width, initial-scale=1"` +* [x] Introduce max-width media queries into your project at 800px and 500px * [ ] Do your best to make your styles match the design files at each breakpoint ## Stretch Goals: diff --git a/css/index.css b/css/index.css index 317c07b849..3bd7002689 100644 --- a/css/index.css +++ b/css/index.css @@ -66,27 +66,33 @@ h1, h2, h3, h4, h5 { } /* Copy and paste your work from yesterday here and start to refactor into flexbox */ -* { - box-sizing: border-box; +/* +body{ + width: 100%; + margin: 0 auto; } header { display: flex; - justify-content: center; + justify-content: center; + align-items: center; } .navigation{ - display: flex; - justify-content: center; - align-content: center; - align-items: center; - margin: 2% 12% 3% 10%; - width: 80%; + display: flex; + justify-content: center; } -.navigation a{ +/*.anchors{ display: flex; - justify-content: space-evenly; - width: 10%; - text-decoration: none; - color: gray; + justify-content: space-between; + width: 610px; + margin-top: 40px; +}*/ +/*.anchors a { + text-decoration: none; + color: #B0B0B0; + padding: 20px; +} +.logo2{ + margin: 20px 50px; } button { background-color: white; @@ -165,3 +171,226 @@ hr { width: 880px; } +.logo1{ + visibility: hidden; +} + +@media ( max-width: 800px ){ + + .title-image{ + display: none; + } + /*.title-image{ + display: none; + } + .navigation{ + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 20px; + } + .anchors{ + flex-direction: row; + border: 1px solid red; + } + .anchors a{ + display: block; + padding: 3%; + border: 1px solid red; + margin: 10%; + } + .logo1{ + visibility: visible; + text-align: center; + display: block; + margin: 10px; + padding: 10px; + } + .header{ + width: 100%; + padding: 20px 0px 20px 0px; + margin: 20px 0px 10px 0px; +} + section.top-content { + display: flex; + align-items: center; +} + .features { + display: flex; + flex-direction: column; + +} + .about { + display: flex; + flex-direction: column; + +} + .middle-img { + margin: 0 auto; +} + section.bottom-content { + display: flex; + align-items: center; +} + .services{ + display: flex; + flex-direction: column; + + +} + .product{ + display: flex; + flex-direction: column; + + } + .vision{ + display: flex; + flex-direction: column; + + } + +@media (max-width: 500px){ + flex-direction: column; +}*/ +body{ + width: 100%; + margin: 0 auto; +} + +.navigation{ + display: flex; + justify-content: center; +} + +.navigation a{ + color: gray; + padding: 20px; + text-decoration: none; +} + +header{ + display: flex; + justify-content: center; + align-items: center; +} + +header .header{ + flex-direction: column; + margin-right: 50px; +} + +button{ + width:110px; + height: 40px; + font-size: 18px; +} + +h1{ + font-family: 'bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; + font-size: 75px; +} + +h3{ + font-family: 'bangers', cursive; + letter-spacing: 1px; + margin-bottom: 15px; + font-size: 20px; +} + +.top-content{ + display: flex; + justify-content: center; +} + +.features{ + margin-right: 50px; + font-size: 20px; + width: 500px; +} + +.about{ + font-size: 20px; + width: 500px; +} + +.middle{ + display: flex; + justify-content: center; + margin-top: 100px; + margin-bottom: 100px; +} + +.bottom-content{ + display: flex; + justify-content: center; +} + +.services{ + width: 350px; + font-size: 20px; + margin-right: 25px; +} + +.product{ + width: 350px; + font-size: 20px; + margin-right: 25px; +} + +.vision{ + width: 350px; + font-size: 20px; +} + +footer{ + display: flex; + justify-content: center; + margin-top: 50px; +} + +@media ( max-width: 800px){ + .header-image{ + display: none; + } + .services{ + margin: 0 auto; + } + .middle{ + max-width: 100%; + } + .navigation .logoo{ + order: -6; + } +} + +@media ( max-width: 500px ){ + .navigation{ + flex-direction: column; + } + a { + flex-direction: column; + border-bottom: 1px solid gray; + } + .features{ + flex-direction: column; + } + .about{ + flex-direction: column; + } + .navigation .logoo{ + order: -6; + } + header .header{ + margin-right: 0px; + } + .features .about .services .product .vision{ + width: 350px; + font-size: 20px; + margin: auto; + } + .middle{ + max-width: 100%; + } +} \ No newline at end of file diff --git a/index.html b/index.html index cbe40261f2..f20332178b 100644 --- a/index.html +++ b/index.html @@ -8,42 +8,51 @@ + -
- Services - Product - Vision - Features - About - Contact - +
+ +
+
+
+
-
-
-

Innovation -
- On -
- Demand

- +
+
+
+

Innovation
+ On
+ Demand
+

+
-
+
Image of a code snippet.
-
+




- +
+
+

Features

@@ -56,8 +65,10 @@

About

- Image of code snippets across the screen - +
Image of code snippets across the screen +
+
+

Services

@@ -75,8 +86,6 @@

Vision




-
-