Add media query

intro-to-media-queries/style.css

@@ -0,0 +1,9 @@
+p {
+    font-size: 14px;
+}
+
+@media all and (min-width: 800px) {
+    p {
+        font-size: 24px;
+    }
+}

mobile-first-development/style.css

@@ -24,7 +24,7 @@ h3 {
 
 .group {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   margin-bottom: 100px;
 }
 
@@ -36,3 +36,17 @@ h3 {
 .item-double {
   flex: 2;
 }
+
+
+/* Groups and items (Desktop) */
+
+@media all and (min-width: 800px) {
+  section,
+  h1 {
+    padding: 0 10%;
+  }
+
+  .group {
+    flex-direction: row;
+  }
+}

navigation/index.html

@@ -16,12 +16,18 @@
       <h1>Your Name</h1>
       <nav>
         <ul id="menu">
-          <li><a href="#">Home</a></li>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Portfolio</a></li>
-          <li><a href="#">Contact</a></li>
+          <li><a href="#home">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#portfolio">Portfolio</a></li>
+          <li><a href="#contact">Contact</a></li>
         </ul>
       </nav>
     </header>
+    <main>
+      <section id="home"></section>
+      <section id="about"></section>
+      <section id="portfolio"></section>
+      <section id="contact"></section>
+    </main>
   </body>
 </html>

navigation/style.css

@@ -1,3 +1,65 @@
+* {
+  border: 1px solid red;
+}
+
 body {
   margin: 0;
 }
+
+header {
+  background-color: black;
+  /* space under the header so main content is not so close to the navigation */
+  margin-bottom: 40px;
+}
+
+header h1 {
+  color: white;
+  text-align: center;
+  margin: 0;
+  padding-top: 20px;
+}
+
+header nav {
+  display: flex;
+  /* center nav element */
+  justify-content: center;
+}
+
+header nav ul {
+  display: flex;
+  padding-left: 0;
+  /* remove bullet ponits */
+  list-style: none;
+}
+
+header nav ul li a {
+  color: white;
+  text-decoration: none;
+  margin: 0 20px 0 0;
+}
+
+header nav ul li:last-child a {
+  margin-right: 0;
+}
+
+/* When a web browser is larger then 600 pix, apply this rules */
+@media all and (min-width: 600px) {
+  header {
+    display: flex;
+    justify-content: space-around;
+    padding: 0 30px;
+  }
+
+  header h1 {
+    margin: 14px 0;
+    padding-top: 0;
+  }
+
+  header nav {
+    margin-top: 8px
+  }
+
+  header nav ul li a:hover {
+    color: #bdbdbd;
+  }
+}

responsive-images/style.css

@@ -28,7 +28,7 @@ h3 {
 }
 
 .item {
-  flex: 1;
+  flex: 2;
   margin: 10px;
 }
 
@@ -49,3 +49,7 @@ h3 {
     flex-direction: row;
   }
 }
+
+main img {
+  width: 100%;
+}