criação popup detalhe produto

Author: Wagner3UB

css/style.css

@@ -505,14 +505,16 @@ main.product .right-column select{
   float: right;
   border: 1px solid var(--black);
 }
-.add-to-cart button{
+.add-to-cart > a{
+  display: block;
   width: 350px;
   margin-top: 67px;
   margin-left: 190px;
   font-size: 20px;
   line-height: 23px;
+  text-align: center;
 }
-.add-to-cart button span{
+.add-to-cart a span{
   font-size: 20px;
   line-height: 23px;
 }
@@ -530,6 +532,50 @@ main.product .right-column select{
 .add-to-cart .product-description span{
   color: #1D252C;
 }
+/*POPUP*/
+.popup{
+  display: none;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #272727c2;
+  justify-content: center;
+  align-items: center;
+  animation: popup .5s ease;
+}
+@keyframes popup {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+.popup span{
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+}
+.popup article{
+  position: relative;
+  width: 70%;
+  display: flex;
+  justify-content: space-around;
+  background-color: var(--white);
+}
+.popup span{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: var(--green);
+}
+.popup figure{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 100px 0;
+}
+
 
 
 /* PAGE DETAILS*/
@@ -1131,6 +1177,9 @@ main.cart .top a{
   }
 
   /* PÁGINA PRODUTO*/
+  .popup article{
+    flex-wrap: wrap;
+  }
   .p-details h1{
     text-align: center;
   }
@@ -1156,7 +1205,7 @@ main.cart .top a{
   .left-column h3{
     width: 50%;
   }
-  .add-to-cart button{
+  .add-to-cart > a{
     width: 100%;
     margin-top: 67px;
     margin-left: unset;

img/logo-wagner-1000x1000.png

@@ -75,27 +75,21 @@ <h4>Quantity</h4>
                 <option value="1 week">3 weeks</option>
                 <option value="1 week">4 weeks</option>
               </select>
-            <p>Subscribe now and get the 10% of discount on every recurring order.  The discount will be applied at checkout. <a href="#">See details</a></p>
+            <p>Subscribe now and get the 10% of discount on every recurring order.  The discount will be applied at checkout. <a href="#" class="pop-open">See details</a></p>
           </div> 
         </div>
         <div class="clear"></div>
-        <button class="btn"><span class="material-icons-outlined">shopping_cart</span> + Add to cart</button>
+        <a href="/cart.html" class="btn"><span class="material-icons-outlined">shopping_cart</span> + Add to cart</a>
         <div class="product-description">
           <p><span>Wax:</span> Top grade Soy wax that delivers a smoke less,  consistent burn</p>
           <p><span>Fragrance:</span> Premium quality ingredients with natural essential oils </p>
-          <p><span>Burning Time:</span> 70-75 hours
-            <span>Dimension:</span> 10cm x 5cm 
-              <span>Weight:</span> 400g </p>
+          <p><span>Burning Time:</span> 70-75 hours <br class="mobile_only"><span>Dimension:</span> 10cm x 5cm <br class="mobile_only"><span>Weight:</span> 400g </p>
         </div>
       </article>
       <p class="mobile_only">All hand-made with natural soy wax, Candleaf is made for your pleasure moments</p>
       <h3 class="mobile_only">🚚 FREE SHIPPING</h3>
     </article>
-
   </main>
-
-
-
   <footer id="footer">
     <article class="container">
       <figure>
@@ -130,6 +124,20 @@ <h4>Coded by <a href="https://www.linkedin.com/in/wagner-trezub/" target="_blank
       </div>
     </section>
   </footer>
+  <section class="popup">
+    <article>
+      <span class="material-icons-outlined pop-close">cancel</span>
+      <figure>
+        <img src="img/jira_codeblue.png" alt="">
+        <figcaption>Powered by Codeblue</figcaption>
+      </figure>
+      <figure>
+        <img src="img/logo-wagner.png" alt="" width="128" height="128">
+        <figcaption>Coded by Wagner Trezub</figcaption>
+      </figure>
+    </article>
+
+  </section>
 
   <script  src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <script src="js/script.js"></script>