Finished section 3

Author: jcsmith3

starter/02-HTML-Fundamentals/blog.css

@@ -3,10 +3,15 @@ html {
   width: 100%;
   background-color: rgba(255, 255, 255, 0.715);
 }
+body {
+  max-width: 80%;
+  margin: 0 auto;
+}
 h2,
 h3,
 h4 {
   color: #1098ad;
+  margin: 25px 0;
   font-family: "Courier New", Courier, monospace;
 }
 p,
@@ -42,11 +47,9 @@ p {
 
 a {
   text-decoration: none;
-  color: #1098ad;
 }
 
 a:hover {
-  text-decoration: underline;
   font-weight: 500;
 }
 
@@ -60,7 +63,19 @@ a:active {
 }
 
 article {
-  border-bottom: 1px solid rgba(96, 96, 96, 0.149);
+  border-bottom: 1px solid #1098ad4e;
+}
+
+#page_title {
+  margin: 15px;
+}
+
+#page_title::first-letter {
+  font-style: normal;
+}
+
+#post_header {
+  position: relative;
 }
 
 #post_title {
@@ -72,10 +87,20 @@ article {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  margin: 15px 0;
 }
 .main_nav a {
   padding: 0 5px;
   font-size: 20px;
+  border-left: 1px solid lightgray;
+  border-top: 1px solid lightgray;
+  box-shadow: 1px 5px 5px slategray;
+  background-color: coral;
+  color: white;
+}
+
+.main_nav a:hover {
+  text-decoration: underlinee;
 }
 #post_data {
   font-style: italic;
@@ -87,20 +112,66 @@ article {
 }
 
 .thumbnail {
+  border-radius: 25%;
   width: 75px;
   height: 75px;
 }
 
+#related_post_section {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+}
+
 #related_posts {
   list-style: none;
+  width: 80%;
+  min-width: 300px;
+  max-width: 900px;
+  padding: 0;
+  margin: 0;
 }
 .post_card {
   display: flex;
+  width: 100%;
+  margin: 15px 0;
+  border: 1px outset lightgray;
+  border-radius: 5px;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.425);
+}
+.post_card .thumbnail {
+  border-radius: 5px 0 0 5px;
+}
+.post_card:hover {
+  border: 1px inset #1098ad;
+  box-shadow: 1px 1px 3px #1098ad;
+}
+
+.post_card div {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  margin-left: 15px;
 }
 
 .post_card p {
   margin: 0;
-  padding: 0;
+  padding: 5px;
+}
+
+.author {
+  font-size: 12px;
+}
+
+#like_btn {
+  position: absolute;
+  bottom: 50px;
+  right: 5px;
+  padding: 10px 15px;
+  font-size: 22px;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.715);
 }
 
 #copyright {

starter/02-HTML-Fundamentals/challange.css

@@ -10,13 +10,16 @@ html {
 }
 
 body {
-  padding: 15px;
+  width: 80%;
+  max-width: 1200px;
+  margin: 50px auto;
+  border: 5px solid black;
 }
+
 p {
   line-height: 1.5;
 }
 li {
-  list-style-type: none;
   padding: 3px;
 }
 
@@ -35,7 +38,20 @@ a:active {
 }
 
 #product_header {
-  margin: 15px 0;
+  position: relative;
+  background-color: rgba(227, 227, 227, 0.533);
+  padding: 15px 0;
+}
+
+#sale-tag {
+  position: absolute;
+  top: -20px;
+  left: -35px;
+  background-color: rgb(162, 5, 5);
+  color: white;
+  text-align: center;
+  padding: 5px 15px;
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.589);
 }
 
 #product_name {
@@ -46,53 +62,98 @@ a:active {
 }
 
 .product_display {
-  margin: 0 auto;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   max-width: 800px;
-  padding: 15px 0;
 }
 #display_info {
   height: 100%;
   width: 100%;
   display: flex;
   flex-flow: column nowrap;
   align-self: flex-start;
-  margin: 15px 0;
 }
 
 #display_info .link {
-  align-self: center;
-  padding-top: 15px;
+  color: black;
+  padding-top: 10px;
+  text-decoration: underline;
 }
 
 #product_img {
-  width: 100%;
+  width: 25%;
   max-width: 800px;
 }
+
+#price-card {
+  margin-bottom: 15px;
+}
+
+#price {
+  font-weight: bolder;
+}
+
+#price-details {
+  color: rgb(121, 121, 121);
+  font-size: 8px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+#color-swatch {
+  margin: 15px 0;
+  width: 50%;
+  display: flex;
+  gap: 5px;
+}
+
+#color-swatch span {
+  padding: 8px;
+  border: 1px inset rgba(0, 0, 0, 0.434);
+  box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.301);
+}
+
+#black {
+  background-color: black;
+}
+#blue {
+  background-color: blue;
+}
+#red {
+  background-color: red;
+}
+#yellow {
+  background-color: yellow;
+}
+#green {
+  background-color: green;
+}
+#brown {
+  background-color: brown;
+}
+
 #product_details {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
 #product_details h2 {
-  text-align: center;
   margin-bottom: 20px;
-  border-bottom: 1px dotted rgba(0, 0, 0, 0.463);
+}
+#product_details ul {
+  margin: 0 20px;
 }
 
 #product_details button {
-  width: 60%;
+  width: 100%;
   color: aliceblue;
   font-weight: 900;
   align-self: center;
   border: none;
-  border-radius: 5px;
-  box-shadow: 3px 3px 5px gray;
-  background-color: rgb(76, 85, 85);
-  margin: 25px 0;
-  padding: 5px 0;
+  background-color: black;
+  margin-top: 25px;
+  padding: 10px 0;
   cursor: pointer;
 }

starter/02-HTML-Fundamentals/challange.html

@@ -10,6 +10,7 @@
   <body>
     <header id="product_header">
       <h1 id="product_name">Converse Chuck Taylor All Star Low Top</h1>
+      <p id="sale-tag">SALE</p>
     </header>
     <main>
       <article>
@@ -20,13 +21,20 @@ <h1 id="product_name">Converse Chuck Taylor All Star Low Top</h1>
             alt="Converse shoes"
           />
           <div id="display_info">
-            <p><strong>$65.00</strong></p>
-            <p>Free Shipping</p>
+            <div id="price-card">
+              <p id="price"><strong>$65.00</strong></p>
+              <p id="price-details">Free Shipping</p>
+            </div>
             <p>
               Ready to dress up or down, these classic canvas Chucks are an
               everyday wardrobe staple.
             </p>
             <a class="link" href="#">More information &#8594;</a>
+            <div id="color-swatch">
+              <span id="black"></span><span id="blue"></span
+              ><span id="red"></span><span id="yellow"></span
+              ><span id="green"></span><span id="brown"></span>
+            </div>
           </div>
         </section>
         <section id="product_details">