diff --git a/README.md b/README.md index 58f53899db..e1b20b96e3 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,11 @@ In this challenge, you build a missing header (navigation and image) on the home In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home page and mobile version. [Click here for home page example](https://tk-assets.lambdaschool.com/39a49225-8ac9-43da-aa90-514fd60ae99a_sprint-challenge-ui-home-example.png) + + [Click here for tablet example](design/Tablet.png) -[Click here for mobile example](https://tk-assets.lambdaschool.com/fbe7ebfc-a4c2-4a32-8929-bbd41fbc4f67_ScreenShot2020-03-25at11.03.41AM.png) + +[Click here for mobile example](design/Mobile.png) ### Commits @@ -33,22 +36,32 @@ Edit this document to include your answers after each question. Make sure to lea 1. If you were to describe semantic HTML to the next cohort of students, what would you say? +A1. Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just for looks. + 2. What are the 4 areas of the box model? +A2. Content, padding, border, and margin + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +A3. The y axis + 4. Explain why git is valuable to a team of developers. +A4. Git is valuable, because we can have multiple save states and can fork the information from the cloud. + 5. Define mobile-first design in your own words. +A5. Its a layout that starts with the mobile design first in mind. + You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. ## Instructions ### Task 1: Project Set Up -- [ ] Create a forked copy of this project -- [ ] Add your team lead as collaborator on Github +- [√] Create a forked copy of this project +- [√] Add your team lead as collaborator on Github - [ ] Clone your OWN version of the repository (Not Lambda's by mistake!) - [ ] Create a new branch: git checkout -b ``. - [ ] Implement the project on your newly created `` branch, committing changes regularly @@ -60,10 +73,10 @@ Your finished project must include all of the following requirements: #### Home Page -[Review the provided design file for the home page](design/home.png). Notice the navigation and header images are missing. +[Review the provided design files](/design). Notice the navigation and header images are missing in the starter code. * [ ] Build the HTML and CSS to create the missing navigation and header -* [ ] Link the `About` navigation item to the [about.html](about.html) page +* [ ] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`) * [ ] Make your design responsive such that it is accessible on mobile(500px) and tablet(800 px) and matches the [mobile](design/mobile.png) wireframe * Add responsive breakpoints to your code by using media queries diff --git a/design/Tablet.png b/design/Tablet.png new file mode 100644 index 0000000000..aa3c1ad071 Binary files /dev/null and b/design/Tablet.png differ diff --git a/design/mobile.png b/design/mobile.png index e08d605c0d..9d093e6b76 100644 Binary files a/design/mobile.png and b/design/mobile.png differ diff --git a/index.html b/index.html index c6405aef71..862a81cfc2 100644 --- a/index.html +++ b/index.html @@ -3,44 +3,75 @@ - + + Sprint Challenge - Home - + + +
+ + + +
+
-
-

The Future

-

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

-
-
-

The Past

-

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

+ + +
+ Jumbo Picture + +
+
+
+

The Future

+

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

+
+
+

The Past

+

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

+
+
-

Why Did It Have To Be Boxes...

+

Why Did It Have To Be Boxes...

-
-
Box 1
-
Box 2
-
Box 3
-
Box 4
-
Box 5
-
Box 6
-
Box 7
-
Box 8
-
Box 9
-
Box 10
+ +
+ + +
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
+
Box 10
+
@@ -63,8 +94,8 @@

Moon

- \ No newline at end of file + + diff --git a/style/index.css b/style/index.css index ae29d6ceee..a34d956dd1 100644 --- a/style/index.css +++ b/style/index.css @@ -21,13 +21,59 @@ time, mark, audio, video { border: 0; font-size: 100%; font: inherit; - vertical-align: baseline; + vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } +* { + max-width: 100%; +} +/* for scaling */ +html{ + font-size:62.5%; + } + + + + /* add css for nav*/ + .head{ + margin: 6% 0 0 0; /***/ + +} +nav{ + margin: 0 auto; /***/ + max-width: 50%; + display: flex; + justify-content: center; +} +.Logo{ + width: auto; + text-align: center; +} + +.Navlinks +{ + margin: 2rem; + width: 90%; + display: flex; + justify-content: space-around; +} +.Navlinks li{ + padding: 0 6%; + margin: 3rem 0 0 0; + + } + +.Navbutton { + background-color: white; + border: none; + border-radius: .5rem; + margin: 0 20%; +} + body { line-height: 1; } @@ -49,6 +95,9 @@ table { * { box-sizing: border-box; + padding: 0; + margin:0; + max-width:100%; } html, body { @@ -65,6 +114,138 @@ h1, h2, h3, h4, h5 { p { line-height: 1.4; } +.top-content { + display: flex; + justify-content: center; +} +/* flex here*/ +#top-contentcontainer { + margin: 30%; +} +.bigtext{ + display: flex; +} +/*add 2 sections to make the rows*/ +.boxes { + width: 100%; + height: 300 px; + display: flex; + justify-content: space-evenly; + align-items: center; + margin: 4%; +} + +/*Add boxes and colors*/ +.box1 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: teal; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box2 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: gold; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box3 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: cadetblue; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box4 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: coral; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box5 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: crimson; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box6 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: forestgreen; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box7 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: darkorchid; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box8 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: hotpink; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box9 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: indigo; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +.box10 { + margin: 2.5rem; + width: 10rem; + height: 10rem; + background-color: dodgerblue; + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} .container { width: 800px; @@ -81,7 +262,7 @@ p { .top-content .text-container { width: 48%; - padding: 0 1%; + padding: 10%; padding-bottom: 20px; } @@ -96,7 +277,9 @@ p { } .middle-content .boxes { + display: flex; + justify-content: center; flex-wrap: wrap; justify-content: space-evenly; } @@ -107,9 +290,6 @@ p { background: black; margin: 20px 2.5%; color: white; - display: flex; - align-items: center; - justify-content: center; } .bottom-content { @@ -127,20 +307,174 @@ p { } footer { + width: 100%; background: black; } footer nav { - width: 60%; display: flex; - justify-content: space-between; - align-items: center; + justify-content: flex-start; + margin: 0 4%; + width: 95%; padding: 20px 2%; font-size: 14px; } footer nav a { + display: flex; + justify-content: flex-start; + text-align: left; + width: 100%; + text-align: left; + margin: 1.5%; color: white; text-decoration: none; +} + +@media (max-width: 800px){ + + .middle-content { + display: flex; + flex-direction: column; + align-items: center; + + } + .boxes{ + width: 50%; + } + .middle-content h2{ + margin: 0; + width: 60%; + } + .Navbutton { + background-color: white; + border: none; + } + + nav{ + text-align: center; + width: 50%; + display: flex; + justify-content: center; + } + .logo { + width: 50%; + } + + .heropic { + max-width: 100%; + } + .top-content{ + + display: flex; + } + + .bigtext{ + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + + } +.top-content .text-container { + width: 80%; + padding: 3%; + padding-bottom: 20px; +} + .text-container { + width: 100%; + flex-direction: column; + } +footer{ + display: flex; + justify-content: center; +} + footer nav { + + justify-content: space-evenly; + align-content: center; + text-align: center; + + width: 95%; + padding: 20px 2%; + font-size: 14px; + } + footer nav a { + + width: 100%; + text-align: center; + margin: 0 10%; + + } +.text-container { + width: 40% + +} + .bottom-content{ + + display: flex; + align-items: center; + flex-wrap: wrap; + text-align: left; + } +/*body { + background: #008080; +}*/ + + +.topboxes { + +} + +.topboxes2 { + +} + + + } + +@media (max-width: 500px){ + + .Navbutton { + border: none; + background-color: white; + } + + + .logo{ + width: 0 auto; + text-align: center; + } + .head{ + width: 100%; + + } + + + + +.topboxes { + + +} + + +.topboxes2 { + +} +.top-content { + flex-direction: column; + align-items: center; + +} + + .bottom-content { + flex-direction: column; + + } + +footer { + +} } \ No newline at end of file