diff --git a/README.md b/README.md index dc5314a3a1..6d784573ee 100644 --- a/README.md +++ b/README.md @@ -34,15 +34,15 @@ Demonstrate your understanding of this week's concepts by answering the followin Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager -1. If you were to describe semantic HTML to the next cohort of students, what would you say? +1. If you were to describe semantic HTML to the next cohort of students, what would you say?/////// It's a set of tags that help accesibility readers understand the code and be able to reproduce in the desired manner from user. They're universal tags unlike divs. -2. What are the 4 areas of the box model? +2. What are the 4 areas of the box model?///// content, padding, border, margin. -3. While using flexbox, what axis does the following property work on: ```align-items: center```? +3. While using flexbox, what axis does the following property work on: ```align-items: center```?////////cross axis -4. Explain why git is valuable to a team of developers. +4. Explain why git is valuable to a team of developers.////// It's like an online cloud for their code. If accidentally deleted or lost, it can be retrieved through github. It also allows others to fork and add more value to a specific project by making it better if the original developer is open to that idea. -5. Define mobile-first design in your own words. +5. Define mobile-first design in your own words. ///////Intended for phones/tablets. It gets to the point of the purpose of your page. Developers must make choices of what is of utmost importance due to the size and limitations of a mobile device. 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. @@ -50,12 +50,12 @@ You are expected to be able to answer all these questions. Your responses contri ### 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 +65,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 -* [ ] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`) +* [ X ] Build the HTML and CSS to create the missing navigation and header +* [ X ] 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 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. diff --git a/about.html b/about.html new file mode 100644 index 0000000000..2359e530b5 --- /dev/null +++ b/about.html @@ -0,0 +1,26 @@ + + + + + + + About + + +
+ +
+ +
+
+ + diff --git a/index.html b/index.html index d32d8ad25c..936582603f 100644 --- a/index.html +++ b/index.html @@ -2,19 +2,34 @@ - + + - Sprint Challenge - Home +Sprint Challenge - Home - - + + -
- -
+
+
+ Home + About + Products + Blog + Contact + +
+ +
+ +
+

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.

@@ -23,29 +38,24 @@

The Future

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
+
-
-

That's

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

@@ -58,18 +68,17 @@

No

Moon

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

-
- - - +
+ +
diff --git a/style/index.css b/style/index.css index ae29d6ceee..532432f48d 100644 --- a/style/index.css +++ b/style/index.css @@ -46,22 +46,73 @@ table { border-collapse: collapse; border-spacing: 0; } - +/* ********My Sprint Challenge Code Begins below******* */ * { box-sizing: border-box; + + } + html, body { height: 100%; font-family: 'Roboto', sans-serif; + /* font-size: 62.5%; */ +} +header { + width: 100%; + height: 30vh; + padding:2%; +} + +.lambda-logo { + width: 15%; + padding: 2%; +} +header nav { + width: 80%; + display: flex; + justify-content: space-evenly; + align-items: center; + padding:2% } +nav { + width: 20%; + display: flex; + justify-content: space-between; +} + + +/* .jumbo-img { + width: 100%; + height: auto; + margin: 0 auto; + padding-left: 22%; + display: inline-block; +} */ + +.header-image { + width: 100%; + height: auto; + margin: 0 auto; + display: inline-block; + padding-left: 21%; + padding-right: 21%; +} + + h1, h2, h3, h4, h5 { - font-size: 18px; + font-size:1.125rem; margin-bottom: 15px; font-family: 'Rubik', sans-serif; } - +a { + text-decoration: none; + color: black; + +} +/* ****HEADER ENDS ABOVE ***** */ p { line-height: 1.4; } @@ -69,6 +120,7 @@ p { .container { width: 800px; margin: 0 auto; + padding: 2% } .top-content { @@ -84,38 +136,141 @@ p { padding: 0 1%; padding-bottom: 20px; } +/* ***** COLOR BOXES Begin here */ -.middle-content { +.middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; + } - .middle-content h2 { padding: 0 2%; margin-bottom: 0; } - .middle-content .boxes { display: flex; flex-wrap: wrap; - justify-content: space-evenly; + justify-content: space-evenly; } -.middle-content .boxes .box { +.middle-content .boxes .box1 { width: 12.5%; height: 100px; - background: black; + padding:3%; + background: teal; margin: 20px 2.5%; color: white; display: flex; align-items: center; - justify-content: center; -} + /* justify-content: space-between; */ + } +.middle-content .boxes .box2 { + width: 12.5%; + height: 100px; + padding:3%; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + +.middle-content .boxes .box3 { + width: 12.5%; + height: 100px; + padding:3%; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } +.middle-content .boxes .box4 { + width: 12.5%; + height: 100px; + padding:3%; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } +.middle-content .boxes .box5 { + width: 12.5%; + height: 100px; + padding:3%; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box6 { + width: 12.5%; + height: 100px; + padding:3%; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box7 { + width: 12.5%; + height: 100px; + padding:3%; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box8 { + width: 12.5%; + height: 100px; + padding:3%; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box9 { + width: 12.5%; + height: 100px; + padding:3%; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box10 { + width: 12.5%; + height: 100px; + padding:2%; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } +/* ****** COLOR BOXES END ABOVE**** */ .bottom-content { display: flex; margin: 0 2% 20px; justify-content: space-around; + padding: 1%; } .bottom-content .text-container { @@ -126,13 +281,17 @@ p { padding-right: 0; } + + +/* ******BOTTOM CONTENT ENDS HERE */ footer { - width: 100%; + width: 55%; background: black; + margin: 0 auto; } footer nav { - width: 60%; + width: 80%; display: flex; justify-content: space-between; align-items: center; @@ -143,4 +302,71 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + +section { + width: 800px; + margin: 0 auto; +} + + +.bottom-content { + width: 800px; + margin: 0 auto; +} +/* ****DESKTOP ENDS ABOVE ********/ + +@media(max-width: 500px){ + header nav { + flex-direction: column; + padding: 2%; + + } + .lambda-logo{ + padding:2%; + } + + + + a{ + padding: 1.5%; + } + .header-image { + width:100%; + padding: 1%; + } + + .container .top-content { + flex-direction: column; + padding: 8%; + padding-right:40%; + } + + + + + .middle-content .boxes { + flex-direction: column; + padding-left: 20%; + } + + h2 { + width:100%; + margin-left: 13%; + } + .bottom-content { + display: flex; + flex-direction: column; + } + .text-container { + width: 40%; + margin-left: 15%; + + } + + footer nav { + flex-direction: column; + margin: 4%; + } +} +