<!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: 24px;
box-sizing: border-box;
position: absolute;
right: 0;
}
.title-container {
display: flex;
}
.title-container img {
transform: rotate(180deg);
margin-right: 14px;
}
.title {
font-size: var(--lg);
font-weight: bold;
}
.order {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
background-color: var(--text-input-field);
margin-bottom: 24px;
border-radius: 8px;
padding: 0 24px;
}
.order p:nth-child(1) {
display: flex;
flex-direction: column;
}
.order p span:nth-child(1) {
font-size: var(--md);
font-weight: bold;
}
.order p:nth-child(2) {
text-align: end;
font-weight: bold;
}
.shopping-cart {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 16px;
margin-bottom: 24px;
align-items: center;
}
.shopping-cart figure {
margin: 0;
}
.shopping-cart figure img {
width: 70px;
height: 70px;
border-radius: 20px;
object-fit: cover;
}
.shopping-cart p:nth-child(2) {
color: var(--very-light-pink);
}
.shopping-cart p:nth-child(3) {
font-size: var(--md);
font-weight: bold;
}
.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;
}
@media (max-width: 640px) {
.product-detail {
width: 100%;
}
}
</style>
</head>
<body>
<aside class="product-detail">
<div class="title-container">
<img src="../assets/icons/flechita.svg" alt="arrow">
<p class="title">My order</p>
</div>
<div class="my-order-content">
<div class="shopping-cart">
<figure>
<img src="<https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940>" alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="../assets/icons/icon_close.png" alt="close">
</div>
<div class="shopping-cart">
<figure>
<img src="<https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940>" alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="../assets/icons/icon_close.png" alt="close">
</div>
<div class="shopping-cart">
<figure>
<img src="<https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940>" alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="../assets/icons/icon_close.png" alt="close">
</div>
<div class="order">
<p>
<span>Total</span>
</p>
<p>$560.00</p>
</div>
<button class="primary-button">
Checkout
</button>
</div>
</div>
</aside>
</body>
</html>
https://github.com/FROSTYLAN/Notes-JavascriptSchool/commit/32a5a60865e19f834f429754e425e652cc92c6c9
curso-frontend-developer-practico/clase13.html at main · platzi/curso-frontend-developer-practico