Skip to content

Commit 04c698b

Browse files
committed
criação popup detalhe produto
1 parent 802dde8 commit 04c698b

5 files changed

Lines changed: 77 additions & 12 deletions

File tree

‎css/style.css‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -505,14 +505,16 @@ main.product .right-column select{
505505
float: right;
506506
border: 1px solid var(--black);
507507
}
508-
.add-to-cart button{
508+
.add-to-cart > a{
509+
display: block;
509510
width: 350px;
510511
margin-top: 67px;
511512
margin-left: 190px;
512513
font-size: 20px;
513514
line-height: 23px;
515+
text-align: center;
514516
}
515-
.add-to-cart button span{
517+
.add-to-cart a span{
516518
font-size: 20px;
517519
line-height: 23px;
518520
}
@@ -530,6 +532,50 @@ main.product .right-column select{
530532
.add-to-cart .product-description span{
531533
color: #1D252C;
532534
}
535+
/*POPUP*/
536+
.popup{
537+
display: none;
538+
position: fixed;
539+
z-index: 10;
540+
top: 0;
541+
width: 100vw;
542+
height: 100vh;
543+
background-color: #272727c2;
544+
justify-content: center;
545+
align-items: center;
546+
animation: popup .5s ease;
547+
}
548+
@keyframes popup {
549+
0% {opacity: 0;}
550+
100% {opacity: 1;}
551+
}
552+
.popup span{
553+
position: absolute;
554+
top: 0;
555+
right: 0;
556+
cursor: pointer;
557+
}
558+
.popup article{
559+
position: relative;
560+
width: 70%;
561+
display: flex;
562+
justify-content: space-around;
563+
background-color: var(--white);
564+
}
565+
.popup span{
566+
position: absolute;
567+
top: 10px;
568+
right: 10px;
569+
color: var(--green);
570+
}
571+
.popup figure{
572+
display: flex;
573+
flex-direction: column;
574+
justify-content: center;
575+
align-items: center;
576+
margin: 100px 0;
577+
}
578+
533579

534580

535581
/* PAGE DETAILS*/
@@ -1131,6 +1177,9 @@ main.cart .top a{
11311177
}
11321178

11331179
/* PÁGINA PRODUTO*/
1180+
.popup article{
1181+
flex-wrap: wrap;
1182+
}
11341183
.p-details h1{
11351184
text-align: center;
11361185
}
@@ -1156,7 +1205,7 @@ main.cart .top a{
11561205
.left-column h3{
11571206
width: 50%;
11581207
}
1159-
.add-to-cart button{
1208+
.add-to-cart > a{
11601209
width: 100%;
11611210
margin-top: 67px;
11621211
margin-left: unset;

‎img/logo-wagner-1000x1000.png‎

39.4 KB
Loading

‎img/logo-wagner.png‎

13 KB
Loading

‎js/script.js‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎product_1.html‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,27 +75,21 @@ <h4>Quantity</h4>
7575
<option value="1 week">3 weeks</option>
7676
<option value="1 week">4 weeks</option>
7777
</select>
78-
<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>
78+
<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>
7979
</div>
8080
</div>
8181
<div class="clear"></div>
82-
<button class="btn"><span class="material-icons-outlined">shopping_cart</span> + Add to cart</button>
82+
<a href="/cart.html" class="btn"><span class="material-icons-outlined">shopping_cart</span> + Add to cart</a>
8383
<div class="product-description">
8484
<p><span>Wax:</span> Top grade Soy wax that delivers a smoke less, consistent burn</p>
8585
<p><span>Fragrance:</span> Premium quality ingredients with natural essential oils </p>
86-
<p><span>Burning Time:</span> 70-75 hours
87-
<span>Dimension:</span> 10cm x 5cm
88-
<span>Weight:</span> 400g </p>
86+
<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>
8987
</div>
9088
</article>
9189
<p class="mobile_only">All hand-made with natural soy wax, Candleaf is made for your pleasure moments</p>
9290
<h3 class="mobile_only">🚚 FREE SHIPPING</h3>
9391
</article>
94-
9592
</main>
96-
97-
98-
9993
<footer id="footer">
10094
<article class="container">
10195
<figure>
@@ -130,6 +124,20 @@ <h4>Coded by <a href="https://www.linkedin.com/in/wagner-trezub/" target="_blank
130124
</div>
131125
</section>
132126
</footer>
127+
<section class="popup">
128+
<article>
129+
<span class="material-icons-outlined pop-close">cancel</span>
130+
<figure>
131+
<img src="img/jira_codeblue.png" alt="">
132+
<figcaption>Powered by Codeblue</figcaption>
133+
</figure>
134+
<figure>
135+
<img src="img/logo-wagner.png" alt="" width="128" height="128">
136+
<figcaption>Coded by Wagner Trezub</figcaption>
137+
</figure>
138+
</article>
139+
140+
</section>
133141

134142
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
135143
<script src="js/script.js"></script>

0 commit comments

Comments
 (0)