#2 solve Section3 | Challenge3

alilosoft · Jul 31, 2022 · e2b623f · e2b623f
1 parent 1d62d0d
commit e2b623f
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 2 deletions.
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/index.html b/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>CodePen - Challenge #2</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <article class="product">
+      <header>
+        <h2 class="prod-name">Converse Chunk Taylor All Star Low Top</h2>
+        <img
+          class="prod-img"
+          src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
+          alt="black converse shoe"
+          width="250"
+          height="250"
+        />
+        <h4 class="price">$65.00</h4>
+        <p class="shipping">Free shipping</p>
+      </header>
+      <p class="desc">
+        Ready to dress up or down, these classic Converse Chucks are an everyday
+        wardrobe staple.
+      </p>
+      <a class="more-info" href="#">More information &rarr;</a>
+
+      <ul class="colors">
+        <li>bk</li>
+        <li>bl</li>
+        <li>rd</li>
+        <li>or</li>
+        <li>gr</li>
+        <li>br</li>
+      </ul>
+
+      <h3 class="details-header">Product details</h3>
+      <ul class="details-list">
+        <li>Lightweight, durable canvas sneaker</li>
+        <li>Lightly padded footbed for added comfort</li>
+        <li>Iconic Chuck Taylor ankle patch</li>
+      </ul>
+
+      <button class="add-to-cart">Add to cart</button>
+    </article>
+  </body>
+</html>
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/readme.md b/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/readme.md
@@ -1 +1,9 @@
-# Build Responsive Real-World Websites with HTML and CSS
+# Build Responsive Real-World Websites with HTML and CSS
+
+## Section 3 | Challenge #3
+
+### See code on: [CodePen](https://codepen.io/alilosoft/pen/LYdejwr) | [Github](../04-Challenges)
+
+### _Final Result:_
+
+![Result](screenshot.jpg)
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/screenshot.jpg b/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/screenshot.jpg
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/style.css b/02-Udemy/-01-HTML-CSS-Jonas/Challenges/04-Challenges/style.css
@@ -0,0 +1,138 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: 18px;
+  line-height: 1.3;
+}
+
+.product {
+  border: 4px solid black;
+  width: 700px;
+  margin: 48px auto;
+  position: relative;
+}
+
+.product::before {
+  content: "SALE";
+  font-size: 14px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  color: #fff;
+  background-color: #e33;
+  padding: 8px 18px;
+  display: inline-block;
+  top: -20px;
+  left: -40px;
+  position: absolute;
+}
+
+.prod-name {
+  font-size: 22px;
+  text-transform: uppercase;
+  background-color: #f1f1f1;
+  text-align: center;
+  padding: 16px;
+}
+
+/* product-info */
+.price {
+  font-size: 24px;
+}
+
+.shipping {
+  font-size: 14px;
+  color: #777;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 18px;
+}
+
+.desc {
+  margin-bottom: 4px;
+}
+
+.more-info:link,
+.more-info:visited {
+  color: #000;
+}
+
+.more-info:hover,
+.more-info:active {
+  text-decoration: none;
+}
+
+/* COLORS */
+.colors li {
+  display: inline-block;
+  margin: 28px 4px;
+  cursor: pointer;
+}
+
+.colors li:nth-child(1) {
+  background-color: #000;
+  width: 24px;
+  margin-left: 0;
+}
+.colors li:nth-child(2) {
+  color: #3d40ec;
+  background-color: #3d40ec;
+  width: 24px;
+}
+.colors li:nth-child(3) {
+  color: #e34f4f;
+  background-color: #e34f4f;
+  width: 24px;
+}
+.colors li:nth-child(4) {
+  color: #e8a23f;
+  background-color: #e8a23f;
+  width: 24px;
+}
+.colors li:nth-child(5) {
+  color: #82bd4f;
+  background-color: #82bd4f;
+  width: 24px;
+}
+.colors li:nth-child(6) {
+  color: #b67c10;
+  background-color: #b67c10;
+  width: 24px;
+}
+/* product details */
+.details-header {
+  font-size: 16px;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  /* margin-top: 24px; */
+}
+
+.details-list {
+  list-style: square;
+  margin-left: 20px;
+}
+
+.details-list li {
+  padding-bottom: 8px;
+}
+
+/* add to cart button */
+.add-to-cart {
+  font-size: 20px;
+  text-transform: uppercase;
+  color: white;
+  background-color: black;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  padding: 12px;
+  border-top: 4px solid black;
+}
+
+.add-to-cart:hover {
+  color: black;
+  background-color: white;
+}
diff --git a/02-Udemy/-01-HTML-CSS-Jonas/readme.md b/02-Udemy/-01-HTML-CSS-Jonas/readme.md
@@ -5,7 +5,7 @@
 - [x] [Section 2 – Challenge #2](./Challenges/01-Challenges/)
 - [x] [Section 3 – Challenge #1](./Challenges/02-Challenges/)
 - [x] [Section 3 – Challenge #2](./Challenges/03-Challenges/)
-- [ ] [Section 3 – Challenge #3](./Challenges/04-Challenges/)
+- [x] [Section 3 – Challenge #3](./Challenges/04-Challenges/)
 - [ ] [Section 4 – Challenge #1](./Challenges/05-Challenges/)
 - [ ] [Section 4 – Challenge #2](./Challenges/06-Challenges/)
 - [ ] [Section 4 – Challenge #3](./Challenges/07-Challenges/)