Added: up to 4.65 Challenge jonasschmedtmann#3

JaviEstacio · Oct 5, 2022 · 2200735 · 2200735
1 parent f876fae
commit 2200735
Show file tree

Hide file tree

Showing 3 changed files with 237 additions and 0 deletions.
diff --git a/ongoing/04-Challenge_3/img/ZrTU3VK.jpg b/ongoing/04-Challenge_3/img/ZrTU3VK.jpg
diff --git a/ongoing/04-Challenge_3/index.html b/ongoing/04-Challenge_3/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link href="style.css" rel="stylesheet" />
+
+    <title>Challenge 2</title>
+  </head>
+
+  <body>
+    <article class="product">
+      <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+      <img
+        src="img/ZrTU3VK.jpg"
+        alt="Chuck Taylor All Star Shoe"
+        height="250"
+        width="250"
+        class="product-img"
+      />
+      <div class="product-info">
+        <div class="product-price">
+          <p class="price"><strong>$65.00</strong></p>
+          <p class="shipping">Free shipping</p>
+        </div>
+        <p class="sale">Sale</p>
+
+        <p class="product-description">
+          Ready to dress up or down, these classic canvas Chucks are an everyday
+          wardrobe staple.
+        </p>
+        <a href="https://converse.com" target="_blank" class="more-info"
+          >More information &rarr;</a
+        >
+
+        <div class="product-colors">
+          <div class="color"></div>
+          <div class="color color-blue"></div>
+          <div class="color color-red"></div>
+          <div class="color color-yellow"></div>
+          <div class="color color-green"></div>
+          <div class="color color-brown"></div>
+        </div>
+      </div>
+
+      <div class="product-details">
+        <h3 class="details-title">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>
+      </div>
+      <button class="add-cart">Add to cart</button>
+    </article>
+  </body>
+</html>
diff --git a/ongoing/04-Challenge_3/style.css b/ongoing/04-Challenge_3/style.css
@@ -0,0 +1,181 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  line-height: 1.4;
+}
+
+.container {
+  /*   background-color: red; */
+  /* display: flex; */
+  /* justify-content: space-between; */
+  /* gap: 40px; */
+}
+
+.product-img {
+  /* float: left; */
+  /* margin-right: 40px; */
+}
+
+/* PRODUCT */
+.product {
+  border: 4px solid black;
+  width: 825px;
+  margin: 50px auto;
+  position: relative;
+
+  display: grid;
+  grid-template-columns: 250px 1fr 1fr;
+  column-gap: 40px;
+}
+
+.product-title {
+  text-align: center;
+  font-size: 22px;
+  text-transform: uppercase;
+  background-color: #f7f7f7;
+  padding: 15px;
+
+  grid-column: 1 / -1;
+}
+
+/* PRODUCT INFORMATION */
+.product-info {
+  /*  (825 - 8 - 250 - 80) / 2  */
+  /* width: 243px;
+  float: left; */
+  /* margin-right: 40px; */
+  margin-top: 20px;
+  flex: 1;
+}
+
+.product-price {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.price {
+  font-size: 24px;
+  /* float: left; */
+}
+
+.shipping {
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #777;
+  /* margin-bottom: 20px;
+  float: right;
+  margin-top: 8px; */
+}
+
+.sale {
+  background-color: #ec2f2f;
+  color: #fff;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 2px;
+  padding: 7px 15px;
+  display: inline-block;
+  position: absolute;
+  top: -17px;
+  left: -38px;
+
+  /*   width: 40px;
+  text-align: center; */
+}
+
+.product-description {
+  /* clear: both; */
+  margin-bottom: 10px;
+}
+
+.more-info:link,
+.more-info:visited {
+  color: black;
+  margin-bottom: 30px;
+  display: inline-block;
+}
+
+.more-info:hover,
+.more-info:active {
+  text-decoration: none;
+}
+
+.product-colors {
+  display: flex;
+  gap: 15px;
+}
+
+.color {
+  background-color: #000;
+  height: 22px;
+  width: 22px;
+  /* display: inline-block;
+  margin-right: 10px; */
+}
+
+.color-blue {
+  background-color: #2f6ee2;
+}
+.color-red {
+  background-color: #ec2f2f;
+}
+.color-yellow {
+  background-color: #f0bf1e;
+}
+.color-green {
+  background-color: #90cc20;
+}
+.color-brown {
+  background-color: #885214;
+}
+
+/* PRODUCT DETAILS */
+.product-details {
+  /* width: 243px;
+  float: left; */
+  margin-top: 20px;
+  flex: 1;
+}
+
+.details-title {
+  text-transform: uppercase;
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+
+.details-list {
+  list-style: square;
+  margin-left: 20px;
+}
+
+.details-list li {
+  margin-bottom: 10px;
+}
+
+/* BUTTON */
+.add-cart {
+  background-color: #000;
+  border: none;
+  color: #fff;
+  font-size: 20px;
+  text-transform: uppercase;
+  cursor: pointer;
+  padding: 15px;
+  width: 100%;
+  border-top: 4px solid black;
+  grid-column: 1 / -1;
+}
+
+.add-cart:hover {
+  color: #000;
+  background-color: #fff;
+}