Add files via upload

MatheusPrudente · Oct 15, 2024 · 6e62f07 · 6e62f07
1 parent 355b946
commit 6e62f07
Show file tree

Hide file tree

Showing 16 changed files with 210 additions and 0 deletions.
diff --git a/02-product-card/assets/css/style.css b/02-product-card/assets/css/style.css
@@ -0,0 +1,136 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+  --bg-color: #f6f6f4;
+  --text-color: #271a45;
+}
+
+body {
+  background-color: var(--bg-color);
+  height: 100vh;
+
+  display: grid;
+  place-content: center;
+}
+
+body * {
+  color: var(--text-color);
+  font-family: "Lato", sans-serif;
+  line-height: 100%;
+}
+
+h4 {
+  font-weight: 300;
+  font-size: 10px;
+}
+
+h1 {
+  font-family: "Crimson Pro", sans-serif;
+  font-weight: 600;
+  font-size: 32px;
+
+  margin-top: 12px;
+}
+
+p {
+  margin-top: 12px;
+  opacity: 0.67;
+}
+
+#btn-close,
+#animated {
+  display: none;
+}
+
+#app {
+  display: flex;
+  align-items: center;
+  gap: 3.938rem;
+}
+
+#product-image {
+  position: relative;
+}
+
+html.animated button#btn-360,
+html.animated img#static {
+  display: initial;
+}
+
+html.animated button#btn-close,
+html.animated img#animated {
+  display: initial;
+}
+
+#product-single-image > img {
+  width: 449px;
+  height: 222px;
+  object-fit: cover;
+}
+
+#product-all-images {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+#product-all-images > img {
+  max-width: 5rem !important;
+  max-height: 5rem !important;
+  cursor: pointer;
+}
+
+#product-details button {
+  font-size: 12px;
+  line-height: 16px;
+  padding: 8px 16px;
+  border: 0.5px solid var(--text-color);
+  border-radius: 999px;
+  background-color: transparent;
+  margin-top: 20px;
+  width: 100%;
+  cursor: pointer;
+}
+
+#product-details button:hover{
+  color: #fff !important;
+  background-color: var(--text-color);
+  transition: ease-in-out 0.5s;
+}
+
+#product-details-colors {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.product-details-color {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.product-details-color-circle-fill {
+  border-radius: 8.5px;height: 17px;width: 17px;float: left;margin: 2px;
+}
+
+@media (max-width: 800px) {
+  #app {
+    display: flex;
+    flex-direction: column;
+    max-width: 270px;
+    margin: auto;
+    height: auto;
+    padding-block: 60px;
+  }
+
+  .horizontal .controls {
+    padding-inline: 30px;
+  }
+}
diff --git a/02-product-card/assets/images/360.svg b/02-product-card/assets/images/360.svg
diff --git a/02-product-card/assets/images/close.svg b/02-product-card/assets/images/close.svg
diff --git a/02-product-card/assets/images/margot_blossom_pink.jpg b/02-product-card/assets/images/margot_blossom_pink.jpg
diff --git a/02-product-card/assets/images/margot_blossom_pink_planta.jpg b/02-product-card/assets/images/margot_blossom_pink_planta.jpg
diff --git a/02-product-card/assets/images/margot_dark_grey.jpg b/02-product-card/assets/images/margot_dark_grey.jpg
diff --git a/02-product-card/assets/images/margot_dark_grey_planta.jpg b/02-product-card/assets/images/margot_dark_grey_planta.jpg
diff --git a/02-product-card/assets/images/margot_forest_green.jpg b/02-product-card/assets/images/margot_forest_green.jpg
diff --git a/02-product-card/assets/images/margot_forest_green_planta.jpg b/02-product-card/assets/images/margot_forest_green_planta.jpg
diff --git a/02-product-card/assets/images/margot_moss_green.jpg b/02-product-card/assets/images/margot_moss_green.jpg
diff --git a/02-product-card/assets/images/margot_moss_green_planta.jpg b/02-product-card/assets/images/margot_moss_green_planta.jpg
diff --git a/02-product-card/assets/images/margot_nevy_blue.jpg b/02-product-card/assets/images/margot_nevy_blue.jpg
diff --git a/02-product-card/assets/images/margot_nevy_blue_planta.jpg b/02-product-card/assets/images/margot_nevy_blue_planta.jpg
diff --git a/02-product-card/assets/images/margot_yellow.jpg b/02-product-card/assets/images/margot_yellow.jpg
diff --git a/02-product-card/assets/images/margot_yellow_planta.jpg b/02-product-card/assets/images/margot_yellow_planta.jpg
diff --git a/02-product-card/index.html b/02-product-card/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="pt-br" class="animated">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@600&family=Lato:wght@300;400&display=swap"
+      rel="stylesheet"
+    />
+
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Product Card - BoraCodar #02</title>
+    <link rel="stylesheet" href="./assets/css/style.css" />
+    <script src="./assets/js/script.js" defer></script>
+  </head>
+  <body>
+    <div id="app">
+      <div id="product-image">
+        <div id="product-single-image">
+          <img id="static" src="./assets/images/margot_dark_grey.jpg" alt="sofa" />
+        </div>
+        <div id="product-all-images"></div>
+      </div>
+      <div id="product-details">
+        <h4>CÓDIGO: <span id="product-details-code">42404</span></h4>
+        <h1 id="product-details-name">Sofá Margot II</h1>
+        <h3 id="product-details-color">Rosé</h2>
+        <p id="product-details-price">R$ 4.000</p>
+        <div id="product-details-colors">
+          <span class="product-details-color" data-code='42404' data-color="#774a41" role="button" style="color: #774a41">
+            <span class="product-details-color-circle-fill active" data-code='42404'  data-color="#774a41" style="background-color: #774a41;">
+            </span>
+          </span>
+          <span class="product-details-color" data-code='42405' role="button" data-color="#414141" style="color: #414141">
+            <span class="product-details-color-circle-fill" data-color="#414141" style="background-color: #414141;">
+              <span class="product-details-color-circle-border" data-code='42405'></span>
+            </span>
+          </span>
+          <span class="product-details-color" data-code='42406' role="button" data-color="#192B1A" style="color: #192B1A">
+            <span class="product-details-color-circle-fill" style="background-color: #192B1A;">
+              <span class="product-details-color-circle-border" data-code='42406' data-color="#192B1A"></span>
+            </span>
+          </span>
+          <span class="product-details-color" data-code='42407' role="button" data-color="#223C3D"style="color: #223C3D">
+            <span class="product-details-color-circle-fill" data-code='42408' data-color="#223C3D" style="background-color: #223C3D;">
+            </span>
+          </span>
+          <span class="product-details-color" data-code='42408' role="button" data-color="#1D2433" style="color: #1D2433;">
+            <span class="product-details-color-circle-fill" data-code='42408' data-color="#1D2433"  style="background-color: #1D2433;">
+            </span>
+          </span>
+          <span class="product-details-color" data-code='42409' role="button" data-color="#9E772A" style="color: #9E772A;">
+            <span class="product-details-color-circle-fill" data-code='42409'data-color="#9E772A" style="background-color: #9E772A;">
+            </span>
+          </span>
+        </div>
+        <button>ADICIONAR À CESTA</button>
+      </div>
+    </div>
+  </body>
+</html>