Os cartões são um meio conveniente de exibir conteúdo composto por diferentes tipos de objetos. Eles também são adequados para apresentar objetos semelhantes cujo tamanho ou ações suportadas podem variar consideravelmente, como fotos com legendas de comprimento variável.
Neste tutorial aprendemos como desenvolve-los em html,css e javascript.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Cards </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="container">
<div class="product">
<div class="product-card">
<h2 class="name">Sorvete</h2>
<span class="price">R$12.90</span>
<a class="popup-btn">Visualizar</a>
<img src="1.png" class="product-img" alt="">
</div>
<div class="popup-view">
<div class="popup-card">
<a><i class="fas fa-times close-btn"></i></a>
<div class="product-img">
<img src="1.png" alt="">
</div>
<div class="info">
<h2>Sorvete<br><span>Sorvete Misto</span></h2>
<p>Essa deliciosa sobremesa, esse é o Sorvete Perfeito,para alegrar ainda mais o seu dia.</p>
<span class="price">R$12.90</span>
<a href="#" class="add-cart-btn">Adicionar ao carrinho</a>
<a href="#" class="add-wish">Adicionar a lista de desejos</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product-card">
<h2 class="name">Milkshake</h2>
<span class="price">R$25,50</span>
<a class="popup-btn">Visualizar</a>
<img src="2.png" class="product-img" alt="">
</div>
<div class="popup-view">
<div class="popup-card">
<a><i class="fas fa-times close-btn"></i></a>
<div class="product-img">
<img src="2.png" alt="">
</div>
<div class="info">
<h2>Milkshake<br><span>Milkshake</span></h2>
<p>Ele é simplesmente irresístivel, para todas as horas do dia, delcioso milkshake</p>
<span class="price">R$25,50</span>
<a href="#" class="add-cart-btn">Adicionar ao carrinho</a>
<a href="#" class="add-wish">Adicionar a lista de desejos</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product-card">
<h2 class="name">Torta de Chocolate</h2>
<span class="price">R$59,90</span>
<a class="popup-btn">Visualizar</a>
<img src="3.png" class="product-img" alt="">
</div>
<div class="popup-view">
<div class="popup-card">
<a><i class="fas fa-times close-btn"></i></a>
<div class="product-img">
<img src="3.png" alt="">
</div>
<div class="info">
<h2>Torta<br><span>Torta de Chocolate</span></h2>
<p>A melhor e mais saborosa torta do mundo,totalmente deliciosa.</p>
<span class="price">R$59,90</span>
<a href="#" class="add-cart-btn">Adicionar ao carrinho</a>
<a href="#" class="add-wish">Adicionar a lista de desejos</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var popupViews = document.querySelectorAll('.popup-view');
var popupBtns = document.querySelectorAll('.popup-btn');
var closeBtns = document.querySelectorAll('.close-btn');
//javascript for quick view button
var popup = function(popupClick){
popupViews[popupClick].classList.add('active');
}
popupBtns.forEach((popupBtn, i) => {
popupBtn.addEventListener("click", () => {
popup(i);
});
});
//javascript for close button
closeBtns.forEach((closeBtn) => {
closeBtn.addEventListener("click", () => {
popupViews.forEach((popupView) => {
popupView.classList.remove('active');
});
});
});
</script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #151515;
}
.container{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
/*Styles for product card*/
.product .product-card{
z-index: 1;
background: #1D212B;
position: relative;
width: 300px;
height: 400px;
margin: 40px;
border-radius: 10px;
}
.product .product-card:before{
content: '';
background: rgba(255, 255, 255, 0.1);
position: absolute;
display: block;
top: 0;
left: 0;
width: 50%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.product .product-card .product-img{
z-index: 1;
position: absolute;
max-width: 350px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.product .product-card .name{
z-index: 2;
color: #fff;
position: absolute;
width: 100%;
text-align: center;
bottom: 130px;
font-size: 20px;
letter-spacing: 1px;
}
.product .product-card .price{
z-index: 2;
color: #fff;
position: absolute;
width: 100%;
text-align: center;
bottom: 80px;
font-size: 30px;
font-weight: 300;
}
.product .product-card .popup-btn{
z-index: 2;
color: #fff;
background: #555;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
padding: 10px 15px;
border-radius: 20px;
cursor: pointer;
}
/*Styles for popup view*/
.product .popup-view{
z-index: 2;
background: rgba(255, 255, 255, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
.product .popup-view.active{
opacity: 1;
visibility: visible;
}
.product .popup-card{
position: relative;
display: flex;
width: 800px;
height: 500px;
margin: 20px;
}
.product .popup-card .product-img{
z-index: 2;
background: #1D212B;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 45%;
height: 90%;
transform: translateY(25px);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.product .popup-card .product-img img{
z-index: 2;
position: relative;
width: 450px;
left: -50px;
}
.product .popup-card .info{
z-index: 2;
background: #fff;
display: flex;
flex-direction: column;
width: 55%;
height: 100%;
box-sizing: border-box;
padding: 40px;
border-radius: 10px;
}
.product .popup-card .close-btn{
color: #555;
z-index: 3;
position: absolute;
right: 0;
font-size: 20px;
margin: 20px;
cursor: pointer;
}
.product .popup-card .info h2{
font-size: 40px;
line-height: 20px;
margin: 10px;
}
.product .popup-card .info h2 span{
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.product .popup-card .info p{
font-size: 15px;
margin: 10px;
}
.product .popup-card .info .price{
font-size: 45px;
font-weight: 300;
margin: 10px;
}
.product .popup-card .info .add-cart-btn{
color: #fff;
background: #009DD2;
font-size: 16px;
font-weight: 600;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 10px auto;
padding: 10px 50px;
border-radius: 20px;
}
.product .popup-card .info .add-wish{
color: #009DD2;
font-size: 16px;
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
/*Responsive styles*/
@media (max-width: 900px){
.product .popup-card{
flex-direction: column;
width: 550px;
height: auto;
}
.product .popup-card .product-img{
z-index: 3;
width: 100%;
height: 200px;
transform: translateY(0);
border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.product .popup-card .product-img img{
left: initial;
max-width: 100%;
}
.product .popup-card .info{
width: 100%;
height: auto;
padding: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.product .popup-card .info h2{
margin: 20px 5px 5px 5px;
font-size: 25px;
}
.product .popup-card .info h2 span{
font-size: 10px;
}
.product .popup-card .info p{
margin: 5px;
font-size: 13px;
}
.product .popup-card .info .price{
margin: 5px;
font-size: 30px;
}
.product .popup-card .info .add-cart-btn{
margin: 5px auto;
padding: 5px 40px;
font-size: 14px;
}
.product .popup-card .info .add-wish{
font-size: 14px;
}
.product .popup-card .close-btn{
z-index: 4;
}
}
0 Comentários