.

thomascwei · thomascwei · commit 1cf052c71eb6 · 2022-11-30T15:43:19.000+08:00
diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html
@@ -2,19 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="./style.css" />
+
     <title>Challenges</title>
   </head>
   <article>
     <h2>Converse low Top</h2>
     <img src="./img/challenges.jpg" alt="challenges" width="300" />
-    <p><strong>$60.0</strong></p>
-    <p>Free shipping</p>
-    <a href="#">More Information &rarr;</a>
-    <h3>Product details</h3>
-    <ul>
+    <p class="price"><strong>$60.0</strong></p>
+    <p class="shipping">Free shipping</p>
+    <a class="more-info" href="#">More Information &rarr;</a>
+    <h3 class="detail-title">Product details</h3>
+    <ul class="detail-list">
       <li>light</li>
       <li>comfort</li>
     </ul>
   </article>
-  <button>add to cart</button>
+  <button class="cart">add to cart</button>
 </html>
diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css
@@ -0,0 +1,49 @@
+body {
+  border: 5px solid #000;
+}
+h2 {
+  text-align: center;
+  background-color: #ddd;
+  text-transform: uppercase;
+}
+
+.price {
+  font-weight: bold;
+  font-size: 25px;
+}
+
+.shipping {
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #777;
+}
+
+.more-info:link,
+.more-info:visited {
+  color: #000;
+  text-decoration: underline;
+}
+
+.more-info:hover,
+.more-info:active {
+  text-decoration: none;
+}
+
+.detail-title {
+  text-transform: uppercase;
+}
+.detail-list {
+  list-style: square;
+}
+
+.cart {
+  font-size: 30px;
+  text-transform: uppercase;
+  background-color: #000;
+  color: white;
+}
+.cart:hover {
+  color: black;
+  background-color: white;
+  cursor: pointer;
+}
diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html
@@ -147,7 +147,9 @@ <h4>Related posts</h4>
     </aside>
 
     <footer>
-      <p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
+      <p id="copyright" class="copyright text">
+        Copyright &copy; 2027 by The Code Magazine.
+      </p>
     </footer>
   </body>
 </html>
diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css
@@ -1,3 +1,7 @@
+body {
+  color: red;
+}
+
 h1,
 h2,
 h3,
@@ -122,3 +126,22 @@ a:active {
   background-color: black;
   font-style: italic;
 }
+
+/* resolving conflicts */
+/* #copyright {
+  color: red;
+}
+.copyright {
+  color: blue;
+}
+.text {
+  color: yellow;
+}
+
+footer p {
+  color: green;
+} */
+
+nav {
+  font-size: 18px;
+}
