Skip to content

Instantly share code, notes, and snippets.

@cecyramallo

cecyramallo/button.css

Created February 4, 2025 23:14
Show Gist options
  • Save cecyramallo/916b76b5ea72d2c67ea36562fd7e929e to your computer and use it in GitHub Desktop.
Save cecyramallo/916b76b5ea72d2c67ea36562fd7e929e to your computer and use it in GitHub Desktop.
Download ZIP
Livecode_CSS_Components_04-02-2025
Raw
button.css
.btn-green {
background-color: green;
border-radius: 12px;
color: white;
font-size: 25px;
padding: 10px 30px;
text-decoration: none;
}
.btn-green:hover {
background-color: darkgreen;
}
Raw
card.css
.card-product {
background-color: #FFFFFF;
width: 600px;
}
.card-product-top {
display: flex;
}
.card-product-top-image {
background-position: center;
background-size: cover;
height: 250px;
width: 250px;
}
.card-product-top-info {
padding: 30px 0 0 30px;
}
.card-product-middle {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: flex;
height: 300px;
justify-content: center;
margin: -20px 30px;
margin-bottom: -20px;
object-fit: cover;
width: 90%;
}
.card-product-bottom {
display: flex;
justify-content: space-evenly;
padding-bottom: 20px;
}
.card-product-bottom img {
height: 80px;
object-fit: cover;
width: 150px;
}
Raw
container.css
.container {
margin: 0 auto;
width: 1000px;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fancy product card</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Fancy product card</h1>
<div class="card-product">
<div class="card-product-top">
<div class="card-product-top-image"
style="background-image: url(https://www.divineessence.com/cdn/shop/files/HE252B-0015.jpg?v=1714411879);">
<i class="fas fa-heart" style="color: #d73cbb;"></i>
</div>
<div class="card-product-top-info">
<i class="fas fa-star" style="color: #FFD43B;"></i>
<i class="fas fa-star" style="color: #FFD43B;"></i>
<i class="fas fa-star" style="color: #FFD43B;"></i>
<i class="fas fa-star" style="color: #FFD43B;"></i>
<i class="far fa-star" style="color: #FFD43B;"></i>
<h2>Sweet Orange Oil</h2>
<p>Best product you can get</p>
<a href="" class="btn-green">$ 200</a>
</div>
</div>
<div class="card-product-middle"
style="background-image: url(https://www.keyaseth.com/cdn/shop/articles/banner-1682433283443_e5a893af-0add-41a6-9d4d-3fbffff77d73.jpg);">
</div>
<div class="card-product-bottom">
<img src="https://cdn.shopify.com/s/files/1/1350/8533/t/62/assets/oil2-1682427161515_1000x.jpg?v=1682427162"
alt="Orange oil">
<img src="https://cdn.shopify.com/s/files/1/1350/8533/t/62/assets/oil2-1682427161515_1000x.jpg?v=1682427162"
alt="Orange oil">
<img src="https://cdn.shopify.com/s/files/1/1350/8533/t/62/assets/oil2-1682427161515_1000x.jpg?v=1682427162"
alt="Orange oil">
</div>
</div>
</div>
</body>
</html>
Raw
style.css
/* --- Fonts --- */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&family=Poppins:wght@400;700");
@import url("https://use.fontawesome.com/releases/v6.1.2/css/all.css");
/* --- Components design --- */
@import url(components/container.css);
@import url(components/card.css);
@import url(components/button.css);
/* --- Fonts & colors --- */
body {
font-family: "Open Sans", "Helvetica", "sans-serif";
padding-bottom: 200px;
margin: 0;
background-color: rgb(240, 240, 240);
}
h1,
h2,
h3 {
font-family: "Poppins", "sans-serif";
text-align: center;
}
.text-center {
text-align: center;
margin-bottom: 48px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment