diff --git a/.gitignore b/.gitignore index 496ee2ca6a..e43b0f9889 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -.DS_Store \ No newline at end of file +.DS_Store diff --git a/README.md b/README.md index dc5314a3a1..18a657c121 100644 --- a/README.md +++ b/README.md @@ -15,10 +15,10 @@ You are not allowed to collaborate during the Sprint Challenge. However, you are In this challenge, you build a missing header (navigation and image) on the home page, update some CSS styling on the home page, and make your page responsive for mobile. You will be working with a pre-existing web page, allowing you to get a taste of what it is like to inherit code from someone else, as will regularly happen on the job. -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. +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) @@ -36,26 +36,30 @@ 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? +*Semantic html is one of two kinds of HTML Semantic and presentation. They often serve the same exact purpose, but Semantic is not only function, but it has meaning. For example, the div tag is presentational and section tag is semantic. The section tag implies that wthin the tag is a section of the page.* + 2. What are the 4 areas of the box model? -3. While using flexbox, what axis does the following property work on: ```align-items: center```? +*content, padding, border, margin ***in order from the center out* +3. While using flexbox, what axis does the following property work on: ```align-items: center```? +*it centers vertically to fit along the x axis, unless flex-direction is set to column, then it is centered on the y axis* 4. Explain why git is valuable to a team of developers. +*Git is a version controll software. It allows a team to share and record thier work as it is being developed.* 5. Define mobile-first design in your own words. - -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. +*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 -- [ ] 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 -- [ ] Push commits: git push origin `` +- [x] Create a forked copy of this project +- [x] Add your team lead 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 ``. +- [x] Implement the project on your newly created `` branch, committing changes regularly +- [x] Push commits: git push origin `` ### Task 2: Minimum Viable Product @@ -65,23 +69,23 @@ Your finished project must include all of the following requirements: [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 +* [x] Build the HTML and CSS to create the missing navigation and header * [ ] 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 matches the [mobile](design/Mobile.png) wireframe. -* [ ] Add responsive breakpoints to your code by using media queries +* [x] Make your design responsive such that it is accessible on mobile(500px)and matches the [mobile](design/Mobile.png) wireframe. +* [x] Add responsive breakpoints to your code by using media queries You will also notice there are 10 boxes on the home page that need background colors. Use this list below to correctly style each box: -* [ ] box1: `teal` -* [ ] box2: `gold` -* [ ] box3: `cadetblue` -* [ ] box4: `coral` -* [ ] box5: `crimson` -* [ ] box6: `forestgreen` -* [ ] box7: `darkorchid` -* [ ] box8: `hotpink` -* [ ] box9: `indigo` -* [ ] box10: `dodgerblue` +* [x] box1: `teal` +* [x] box2: `gold` +* [x] box3: `cadetblue` +* [x] box4: `coral` +* [x] box5: `crimson` +* [x] box6: `forestgreen` +* [x] box7: `darkorchid` +* [x] box8: `hotpink` +* [x] box9: `indigo` +* [x] box10: `dodgerblue` In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not. @@ -90,7 +94,7 @@ In your solution, it is essential that you follow best practices and produce cle After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals: * [ ] Make your design responsive such that it is accessible on tablet(800 px) and matches the [tablet](design/Tablet.png) wireframe. -* [ ] Build a page of your choosing from the navigation items. Come up with content and images that fit the theme. +* [ ] Build a page of your choosing from the navigation items. Come up with content and images that fit the theme. * [ ] Introduce CSS animations to your site. * [ ] Build a contact page and create a form with several inputs of your choosing diff --git a/about.html b/about.html new file mode 100644 index 0000000000..1d279ce227 --- /dev/null +++ b/about.html @@ -0,0 +1,48 @@ + + + + + + + Sprint Challenge - Home + + + + + + + + +
+
+ + +
+
+ top-decore +
+
+
+ +
+
+

About

+

Josh is really silly and did not read the instructions. He thought that the project was to recreate the three wireframes perfectly.

+
+
+

BUT...

+

nevertheless...

+

he is still proud

+
+
+
+ + diff --git a/index.html b/index.html index d32d8ad25c..41ce71ae48 100644 --- a/index.html +++ b/index.html @@ -5,15 +5,32 @@ Sprint Challenge - Home - + +
+
+ + +
+
+ top-decore +
+
- +

The Future

@@ -24,24 +41,24 @@

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
- +
@@ -60,7 +77,7 @@

Moon

- + - + + diff --git a/style/index.css b/style/index.css index ae29d6ceee..d28576e529 100644 --- a/style/index.css +++ b/style/index.css @@ -1,4 +1,4 @@ -/* http://meyerweb.com/eric/tools/css/reset/ +/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @@ -12,8 +12,8 @@ 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, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -24,7 +24,7 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @@ -51,14 +51,20 @@ table { box-sizing: border-box; } +html{ + margin: 0 10%; +} html, body { height: 100%; font-family: 'Roboto', sans-serif; } - +.top-decore img{ + width: 100%; + height: auto; +} h1, h2, h3, h4, h5 { - font-size: 18px; - margin-bottom: 15px; + font-size: 1.1rem; + margin: 20px 0; font-family: 'Rubik', sans-serif; } @@ -66,6 +72,30 @@ p { line-height: 1.4; } +.head .nav{ + display: flex; + height: 112px; + align-items: center; +} + +.head .nav .nav-bar{ + flex-grow: 1; + display: flex; + justify-content: space-around; + margin-top: 20px; + margin-left: 10px; +} + +.head .nav .nav-bar li a{ + text-decoration: none; + color: black; +} + +.head .nav .nav-bar li { + display: flex; + align-items: center; +} + .container { width: 800px; margin: 0 auto; @@ -82,7 +112,7 @@ p { .top-content .text-container { width: 48%; padding: 0 1%; - padding-bottom: 20px; + padding-bottom: 20px; } .middle-content { @@ -93,6 +123,7 @@ p { .middle-content h2 { padding: 0 2%; margin-bottom: 0; + text-transform: capitalize; } .middle-content .boxes { @@ -101,10 +132,40 @@ p { justify-content: space-evenly; } +.middle-content #box1{ + background-color: #358080; +} +.middle-content #box2{ + background-color: #FCD84A; +} +.middle-content #box3{ + background-color: #5F9EA0; +} +.middle-content #box4{ + background-color: #F17D4D; +} +.middle-content #box5{ + background-color: #DD353D; +} +.middle-content #box6{ + background-color: #3F8B24; +} +.middle-content #box7{ + background-color: #9A41CC; +} +.middle-content #box8{ + background-color: #EE66B3; +} +.middle-content #box9{ + background-color: #4D2582; +} +.middle-content #box10{ + background-color: #2A8FF7; +} + .middle-content .boxes .box { width: 12.5%; height: 100px; - background: black; margin: 20px 2.5%; color: white; display: flex; @@ -143,4 +204,191 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + + +/* *********** tablet view ************** */ + +@media(max-width: 900px){ + html{ + margin: 0; + font-family: 'Titillium Web', sans-serif; + font-weight: 200; + } + + .container { + width: auto; + } + + h1, h2, h3, h4, h5 { + margin: 5px 0; + font-size: 1.85rem; + font-family: 'Titillium Web', sans-serif; + font-weight: 300; + } + + .head .nav{ + margin: 0 25px; + font-family: 'Titillium Web'; + font-weight: 300; + } + + .head .nav .nav-bar{ + font-size: 1.8rem; + margin-top: 10px; + margin-left: 30px; + } + + .top-content { + flex-direction: column; + } + .top-content .text-container { + width: 100%; + padding: 20px 30px; + } + + + .middle-content h2{ + padding: 20px 30px; + text-transform: none; + } + .middle-content .boxes{ + margin-left: 125px; + margin-right: 125px; + } + .middle-content .boxes .box { + width: 38%; + height: 220px; + margin: 10px 5%; + color: white; + display: flex; + align-items: center; + justify-content: space-around; + font-size: 1.5em; + font-family: 'Titillium Web', sans-serif; + font-weight: 200; + } + .bottom-content{ + display: flex; + justify-content: space-around; + flex-flow: row wrap; + margin-bottom: 100px; + } + .bottom-content .text-container{ + max-width: 45%; + + } + .bottom-content .text-container h2{ + margin-top: 40px; + margin-bottom: 5px; + } + footer { + display: flex; + flex-direction: center; + justify-content: center; + } + footer nav{ + margin: 30px 0; + display: flex; + flex-direction: center; + justify-content: space-around; + font-size: 2rem; + + } + footer nav a{ + margin: 10px; + } +} + +/* ********** mobile view ************** */ + +@media(max-width: 700px){ + + + h1, h2, h3, h4, h5 { + font-size: 1.5rem; + } + + .head .nav{ + margin: 40px 0; + display: flex; + flex-direction: column; + flex-flow: column nowrap; + height: auto; + } + + .head .nav .nav-bar{ + flex-direction: column; + font-size: 1.8rem; + margin-top: 5px; + margin-left: 20px; + align-items: center; + margin: 10px 0; + margin-top: 30px; + } + .head .nav .nav-bar li{ + margin: 5px; + } + .top-decore img{ + width: 100%; + height: 130px; + object-fit: cover; + } + .top-content .text-container { + padding: 20px 30px; + } + + .middle-content h2{ + padding: 20px 30px; + } + .middle-content{ + display: flex; + flex-direction: column; + border-bottom: none; + + } + .middle-content .boxes{ + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + + } + .middle-content .boxes .box { + width: 40%; + height: 170px; + margin: 10px 5%; + font-size: 1.25em; + color: white; + display: flex; + justify-content: center; + } + .bottom-content{ + flex-direction: column; + align-items: center; + max-width: auto; + margin-left: 30px; + } + .bottom-content .text-container{ + max-width: 100%; + } + .bottom-content .text-container h2{ + margin-top: 40px; + margin-bottom: 5px; + } + footer { + display: flex; + flex-direction: center; + } + footer nav{ + display: flex; + flex-direction: column; + font-size: 1.5rem; + font-family: 'Titillium Web', sans-serif; + font-weight: 200; + margin: 5px 0; + } + footer nav a{ + margin: 5px; + } +}