diff --git a/README.md b/README.md index dc5314a3a1..c4d26a7468 100644 --- a/README.md +++ b/README.md @@ -36,14 +36,24 @@ 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 using the tools of HTML to mark and separate various pieces of the page into different sections for styling and accessibility. + 2. What are the 4 areas of the box model? +The 4 areas of the Box Model are: Content, Padding, Border, and Margin. + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? + The property ```align-items:center``` works on the x, or horizontal, axis. + 4. Explain why git is valuable to a team of developers. +Git is valuable for file sharing amonst a team, as well as backing up previous versions if you need to remove a change you made a long time ago, or revert back to a previous version that is not broken. + 5. Define mobile-first design in your own words. +Mobile-first design is when you begin by styling items to work best on a device that is more narrow than a desktop (320 pixels will display well on most devices) first, and adjust the styling to fit a wider screen later on. + 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 diff --git a/about.html b/about.html new file mode 100644 index 0000000000..83b9ce1d7c --- /dev/null +++ b/about.html @@ -0,0 +1,16 @@ + + + + + + About + + + + + +
+

About

+
+ + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000000..d2ee0693a2 --- /dev/null +++ b/contact.html @@ -0,0 +1,59 @@ + + + + + + + Sprint Challenge - Home + + + + + + + +
+ + + +
+ + + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..972342c821 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,27 @@ - Sprint Challenge - Home - + -
- +
+ + + Header image + +

The Future

@@ -30,16 +40,16 @@

The Past

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,11 +73,11 @@

Moon

diff --git a/style/index.css b/style/index.css index ae29d6ceee..9eefffc3d5 100644 --- a/style/index.css +++ b/style/index.css @@ -28,6 +28,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } + body { line-height: 1; } @@ -53,6 +54,7 @@ table { html, body { height: 100%; + width: 100%; font-family: 'Roboto', sans-serif; } @@ -71,6 +73,22 @@ p { margin: 0 auto; } +header { + padding: 2%; + font-size: 14px; +} + +header nav { + display: flex; + justify-content: space-around; + align-items: flex-end; +} + +header nav a { + text-decoration: none; + color: black; +} + .top-content { display: flex; flex-wrap: wrap; @@ -79,6 +97,11 @@ p { border-bottom: 1px dashed black; } +.headerImg { + padding: 4%; + width: 100%; +} + .top-content .text-container { width: 48%; padding: 0 1%; @@ -112,9 +135,49 @@ p { justify-content: center; } +.middle-content .boxes .box.box1 { + background: teal; +} + +.middle-content .boxes .box.box2 { + background: gold; +} + +.middle-content .boxes .box.box3 { + background: cadetblue; +} + +.middle-content .boxes .box.box4 { + background: coral; +} + +.middle-content .boxes .box.box5 { + background: crimson; +} + +.middle-content .boxes .box.box6 { + background: forestgreen; +} + +.middle-content .boxes .box.box7 { + background: darkorchid; +} + +.middle-content .boxes .box.box8 { + background: hotpink; +} + +.middle-content .boxes .box.box9 { + background: indigo; +} + +.middle-content .boxes .box.box10 { + background: dodgerblue; +} + .bottom-content { display: flex; - margin: 0 2% 20px; + margin: 0 2% 2%; justify-content: space-around; } @@ -129,6 +192,9 @@ p { footer { width: 100%; background: black; + display: flex; + align-self: flex-end; + margin-bottom: 0%; } footer nav { @@ -143,4 +209,173 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + +.contactForm { + border-radius: .5rem; + background-color: #c4c4c4; + padding: 2%; + margin: 0% 20%; +} + +.textBox { + padding: 1%; +} + +label { + color: black; +} + + input[type=text], select, textarea { + color: black; + width: 100%; /* Full width */ + padding: 1%; /* Some padding */ + border: .1rem solid #bfbfbf; /* Gray border */ + border-radius: .4rem; /* Rounded borders */ + box-sizing: border-box; /* Make sure that padding and width stays in place */ + margin-top: .5rem; /* Add a top margin */ + margin-bottom: .8rem; /* Bottom margin */ + resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ +} + +/* Submit Button */ +input[type=submit] { + background-color: rgba(0,136,169,0.8); + padding: 1rem 2rem; + border: none; + border-radius: .5rem; + cursor: pointer; +} + +/* When moving the mouse over the submit button, add a darker green color */ + input[type=submit]:hover { + background-color: #01728e; +} + +@media (max-width: 500px) { + body{ + font-size: 3rem; + } + + header{ + text-align: center; + } + + header nav { + display: flex; + flex-direction: column; + align-items: center; + } + + header nav a { + font-size: 4rem; + } + + .logo { + height: 5rem; + margin: 5%; + } + + .top-content { + display: flex; + align-items: center; + flex-direction: column; + font-size: 2.5rem; + padding-top: 5%; + } + + .headerImg { + height: 300px; + width: 650px; + object-fit: cover; + } + + .middle-content { + text-align: center; + } + + h2{ + font-size: 4rem; + } + + .boxes { + display: flex; + flex-direction: column; + align-content: center; + } + + .bottom-content{ + display: flex; + flex-direction: column; + align-content: center; + padding: 4%; + + } + + .text-container{ + padding: 0%; + width: 100%; + } + + footer nav{ + display: flex; + flex-direction: column; + align-items: center; + } +} + +@media screen and (max-width: 800px) and (min-width: 501px){ + body{ + font-size: 1.5rem; + } + + h2{ + font-size: 2rem; + } + + header nav { + font-size: 1.5rem; + } + + .top-content { + display: flex; + align-items: center; + flex-direction: column; + } + + .top-content .text-container{ + width: 80%; + margin: 3%; + } + + .box{ + display: flex; + flex-wrap: wrap; + padding: 15%; + } + + .bottom-content { + display: flex; + flex-wrap: wrap; + font-size: 2rem; + } + + .bottom-content .text-container{ + width: 40%; + } + + footer{ + padding: 8%; + } + + footer nav{ + + } + + footer nav a{ + font-size: 2rem; + padding: 3%; + margin: 1%; + text-align: center; + } +}