Initial Commit

README.md

@@ -1,2 +1,61 @@
-# Sprint-Challenge--UI-Responsive
-This is the sprint challenge for the User Interface and Responsive Web Design Sprint
+# Assessing Your User Interface and Responsive Design Learning
+
+* The objective of this challenge is test your knowledge on all of the topics surrounding user interface and responsive web design you learned this week.
+* Answers to your written questions will be recorded in _Answers.md_
+* This is to be worked on alone but you can use outside resources. You can _reference_ any old code you may have and the training kit content, however, please refrain from copying and pasting any of your answers. Try and understand the question and put your responses in your own words. Be as thorough as possible when explaining something.
+* **Just a friendly Reminder** Don't fret or get anxious about this, this is a no-pressure assessment that is only going to help guide you here in the near future. This is NOT a pass/fail situation.
+
+## Start by forking and cloning this repository.
+* Fork / Clone this project into a directory on your machine.
+* `cd` into your forked local copy.
+
+## Questions - Self Study - You can exercise your Google-Fu for this and any other _Sprint Challenge_ in the future. Remember to record your answers in _Answers.md_
+
+1. If you saw this HTML: ```<div class="box box1 box2 box3"></div>``` which class has the most specificity weight?
+2. Describe the difference between ```display: block;``` and ```display: inline;```.
+3. While using flexbox, what axis are you using when you use the property: ```align-items: center```?
+4. What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
+5. Why do we need to use the CSS property max-width on the outter most container in a responsive website?
+
+## Lets get started on the project!
+* This project has many parts invovled in it. You will start with a half built website that isn't ready for responsiveness.  You will need to complete the tasks below to successfully finish the website. For this project you have been provided design files which you must successfully match at the viewport sizes of 1000px, 768px, and 400px.  
+
+
+## Complete the following tasks to set up a responsive website project
+* Correctly place a viewport meta tag in the head of your index.html file that contains these values: ```content="width=device-width, initial-scale=1.0"```
+* In your CSS, Introduce ```font-size:62.5%;``` to the ```html``` element.
+* Convert all pixel font-sizes into rems and use rems for anything new you build.
+* Convert ```.container``` into a max-width responsive class based on it's fixed width's current size.
+* The header and jumbotron are missing from the code.  Use the image named ```desktop-design.png``` to create a pixel perfect replacement. Please note, the ```desktop-design.png``` file is 1000px wide.
+
+## Complete the following tasks for desktop at a screen size of 1000px
+* Update the background colors on the following boxes:
+  - box2: forestgreen
+  - box4: darkorchid
+  - box6: hotpink
+  - box8: indigo
+* Please reference the design file ```desktop-design.png``` and make sure your layout matches this design as close as you can.
+
+## Complete the following tasks for tablet at a screen size of 768px
+* Update the background colors on the following boxes:
+  - box1: teal
+  - box3: gold
+  - box5: cadetblue
+  - box7: coral
+  - box9: crimson
+* Please reference the design file ```tablet-design.png``` and make sure your layout matches this design as close as you can.  **Make sure you look at the header**
+
+## Complete the following tasks for phone at a screen size of 400px
+* Remove box 10 and reverse the order of the boxes.
+* Please reference the design file ```phone-design.png``` and make sure your layout matches this design as close as you can.
+
+* Once you're done with all the tasks, push your commits to your fork and submit a Pull-Request
+
+**Stretch Goal**
+* Introduce your own content updates into a new section under ```<section class="bottom-content">```.  Try to use the same margin and padding to create a coherent addition to the design.  Remember to make sure the new content is fully responsive and works well with the other requirements.
+
+**Note: The stretch goal is very open ended, there is no "right" thing to do here.**
+
+
+
+### Remember you can use any resources you want to solve these problems, but avoid copying/pasting solutions you've previously written. Also if you don't finish all of the challenges, that's fine! Just do what you can and submit your challenges in the end! HAVE FUN!

css/index.css

@@ -0,0 +1,146 @@
+/* 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;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-size: 18px;
+    margin-bottom: 15px;
+    font-family: 'Rubik', sans-serif;
+}
+
+p {
+    line-height: 1.4;
+}
+
+.container {
+    width: 800px;
+    margin: 0 auto;
+}
+
+.top-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed black;
+}
+
+.top-content .text-container {
+    width: 48%;
+    padding: 0 1%;
+    padding-bottom: 20px;  
+}
+
+.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;
+}
+
+.middle-content .boxes .box {
+    width: 12.5%;
+    height: 100px;
+    background: black;
+    margin: 20px 2.5%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.bottom-content {
+    display: flex;
+    margin: 0 2% 20px;
+    justify-content: space-around;
+}
+
+.bottom-content .text-container {
+    padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+    padding-right: 0;
+}
+
+footer {
+    width: 100%;
+    background: black;
+}
+
+footer nav {
+    width: 60%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 2%;
+    font-size: 14px;
+}
+
+footer nav a {
+    color: white;
+    text-decoration: none;
+}

index.html

@@ -0,0 +1,74 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Sprint Challenge - UI / RWD</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
+  <link rel="stylesheet" href="css/index.css">
+
+</head>
+
+<body>
+    <div class="container">
+        <section class="top-content">
+            <div class="text-container">
+                <h2>The Future</h2>
+                <p>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.</p>
+            </div>
+            <div class="text-container">
+                <h2>The Past</h2>
+                <p>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.</p>
+            </div>
+        </section>
+
+        <section class="middle-content">
+
+            <h2>Why Did It Have To Be Boxes...</h2>
+
+            <div class="boxes">
+                <div class="box">Box 1</div>
+                <div class="box">Box 2</div>
+                <div class="box">Box 3</div>
+                <div class="box">Box 4</div>
+                <div class="box">Box 5</div>
+                <div class="box">Box 6</div>
+                <div class="box">Box 7</div>
+                <div class="box">Box 8</div>
+                <div class="box">Box 9</div>
+                <div class="box">Box 10</div>
+            </div>
+
+        </section>
+
+        <section class="bottom-content">
+
+            <div class="text-container">
+                <h2>That's</h2>
+                <p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
+            </div>
+            <div class="text-container">
+                <h2>No</h2>
+                <p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
+            </div>
+            <div class="text-container">
+                <h2>Moon</h2>
+                <p>Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.</p>
+            </div>
+
+        </section>
+
+        <footer>
+            <nav>
+                <a href="#">Home</a>
+                <a href="#">About</a>
+                <a href="#">Products</a>
+                <a href="#">Blog</a>
+                <a href="#">Contact</a>
+            </nav>
+        </footer>
+    </div><!-- container -->        
+</body>
+</html>