<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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=Quicksand:wght@300;500;700&display=swap>"
rel="stylesheet"
/>
<title>Document</title>
<style>
:root {
--white: #ffffff;
--black: #000000;
--very-light-pink: #c7c7c7;
--text-input-field: #f7f7f7;
--hospital-green: #acd9b2;
--sm: 14px;
--md: 16px;
--lg: 18px;
}
body {
margin: 0;
font-family: "Quicksand", sans-serif;
}
.product-detail {
width: 360px;
padding-bottom: 24px;
position: absolute;
right: 0;
}
.product-detail-close {
background: var(--white);
width: 14px;
height: 14px;
position: absolute;
top: 24px;
left: 24px;
z-index: 2;
padding: 12px;
border-radius: 50%;
}
.product-detail-close:hover {
cursor: pointer;
}
.product-detail > img:nth-child(2) {
width: 100%;
height: 360px;
object-fit: cover;
border-radius: 0 0 20px 20px;
}
.product-info {
margin: 24px 24px 0 24px;
}
.product-info p:nth-child(1) {
font-weight: bold;
font-size: var(--md);
margin-top: 0;
margin-bottom: 4px;
}
.product-info p:nth-child(2) {
color: var(--very-light-pink);
font-size: var(--md);
margin-top: 0;
margin-bottom: 36px;
}
.product-info p:nth-child(3) {
color: var(--very-light-pink);
font-size: var(--sm);
margin-top: 0;
margin-bottom: 36px;
}
.primary-button {
background-color: var(--hospital-green);
border-radius: 8px;
border: none;
color: var(--white);
width: 100%;
cursor: pointer;
font-size: var(--md);
font-weight: bold;
height: 50px;
}
.add-to-cart-button {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 640px) {
.product-detail {
width: 100%;
}
}
</style>
</head>
<body>
<aside class="product-detail">
<div class="product-detail-close">
<img src="../assets/icons/icon_close.png" alt="close" />
</div>
<img
src="<https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940>"
alt="bike"
/>
<div class="product-info">
<p>$35,00</p>
<p>Bike</p>
<p>
With its practical position, this bike also fulfills a decorative
function, add your hall or workspace.
</p>
<button class="primary-button add-to-cart-button">
<img src="../assets/icons/bt_add_to_cart.svg" alt="add to cart" />
Add to cart
</button>
</div>
</aside>
</body>
</html>
https://github.com/FROSTYLAN/Notes-JavascriptSchool/commit/275571ce47779d6c31b2e45430bd52a80dc47476
curso-frontend-developer-practico/clase12.html at main · platzi/curso-frontend-developer-practico