changes

Author: marcuma

starter/03-CSS-Fundamentals/challenges/shoes.html

@@ -10,30 +10,31 @@
       <a href="../index.html">Home</a>
       <a href="index.html">Challenges</a>
     </nav>
+    <div class="product">
+      <article>
+        <h1 class="product-title">Converse Chuck Taylor All Start Low Top</h1>
+        <img
+          src="../img/challenges.jpg"
+          height="250"
+          width="250"
+          alt="an image of black canvas shoes"
+        />
+        <h3 class="price">$65.00</h3>
+        <p class="free-shipping">Free Shipping</p>
+        <p>
+          Ready to dress up or down, these classic canvas Chucks are an everyday
+          wardrobe staple.
+        </p>
+        <a href="#">More information &rarr;</a>
+        <h2>Production Details</h2>
+        <ul>
+          <li>Lightweight, durable canvas sneaker</li>
+          <li>Lightly padded footbed for added comfort</li>
+          <li>Iconic Chuck Taylor ankle patch</li>
+        </ul>
 
-    <article>
-      <h1 class="item-title">Converse Chuck Taylor All Start Low Top</h1>
-      <img
-        src="../img/challenges.jpg"
-        height="250"
-        width="250"
-        alt="an image of black canvas shoes"
-      />
-      <h3 class="price">$65.00</h3>
-      <p class="free-shipping">Free Shipping</p>
-      <p>
-        Ready to dress up or down, these classic canvas Chucks are an everyday
-        wardrobe staple.
-      </p>
-      <a href="#">More information &rarr;</a>
-      <h2>Production Details</h2>
-      <ul>
-        <li>Lightweight, durable canvas sneaker</li>
-        <li>Lightly padded footbed for added comfort</li>
-        <li>Iconic Chuck Taylor ankle patch</li>
-      </ul>
-
-      <button>Add to cart</button>
-    </article>
+        <button>Add to cart</button>
+      </article>
+    </div>
   </body>
 </html>

starter/03-CSS-Fundamentals/css/shoes.css

@@ -3,6 +3,11 @@ body {
   font-size: 15px;
 }
 
+.product {
+  width: 825px;
+  margin: 20px auto;
+}
+
 article {
   border: 5px solid black;
 }
@@ -11,19 +16,24 @@ h1 {
   text-align: center;
 }
 
-.item-title {
+.product-title {
+  background-color: #f7f7f7;
   text-transform: uppercase;
+  padding: 10px;
 }
 
 .free-shipping {
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
   color: #777;
+  margin-top: 0;
 }
 
 .price {
   font-size: 20px;
+  margin-top: 2px;
+  margin-bottom: 0;
 }
 
 ul {
@@ -52,4 +62,6 @@ a:hover {
 button {
   background-color: black;
   color: white;
+  width: 100%;
+  height: 50px;
 }

starter/03-CSS-Fundamentals/css/style.css

@@ -1,18 +1,39 @@
 * {
-  /* border-top: 10px solid #1098ad; */
+  margin: 2px;
+  padding: 0;
 }
 
 body {
+  color: #444;
   font-family: sans-serif;
   font-size: 22px;
+  border-top: 10px solid #1098ad;
+}
+
+.container {
+  width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.main-header {
+  background-color: #f7f7f7;
+  padding: 20px;
+  margin-bottom: 60px;
 }
 
 nav {
-  text-align: center;
   font-size: 16px;
-  text-decoration: underline;
+  margin-top: 2px;
 }
 
+/* nav a:link {
+  background-color: orangered;
+  margin: 20px;
+  padding: 20px;
+  display: block;
+} */
+
 h1,
 h2,
 h3,
@@ -26,6 +47,7 @@ h1,
 h2,
 h3 {
   color: #1098ad;
+  /*margin-bottom: 40px;*/
 }
 
 h1 {
@@ -36,10 +58,15 @@ h1 {
 
 h2 {
   font-size: 40px;
+  /* margin-bottom: 30px; */
 }
 
 h3 {
   font-size: 30px;
+  /*
+  margin-bottom: 10px;
+  margin-top: 10px;
+  */
 }
 
 h4 {
@@ -50,10 +77,19 @@ h4 {
 
 p {
   line-height: 1.5;
+  margin-bottom: 15px;
+}
+
+ul,
+ol {
+  margin-left: 50px;
+  margin-bottom: 20px;
 }
 
 li {
   font-size: 20px;
+  margin-bottom: 10px;
+  /* display: inline; */
 }
 
 /* footer p {
@@ -82,18 +118,16 @@ li {
   list-style: none;
 }
 
-.main-header {
-  background-color: #f7f7f7;
+.post-header {
+  margin-bottom: 40px;
 }
 
 aside {
-  background-color: #f7f7f7;
+  background-color: #d4d4d4;
   border-top: 5px solid #1098ad;
   border-bottom: 5px solid #1098ad;
-}
-
-.border {
-  border-bottom: 5px solid #3a3b3b;
+  padding: 5px 0px;
+  width: 500px;
 }
 
 li:first-child {
@@ -102,6 +136,7 @@ li:first-child {
 
 li:last-child {
   font-style: italic;
+  margin-bottom: 0;
 }
 
 li:nth-child(even) {
@@ -122,3 +157,15 @@ a:hover {
   color: orangered;
   font-weight: bold;
 }
+button {
+  font-size: 22px;
+  padding: 20px;
+  cursor: pointer;
+  position: absolute;
+  bottom: 50px;
+  right: 50px;
+}
+.post-img {
+  width: 100%;
+  height: auto;
+}