/* Styles for the labels */
.label {
display: inline-flex; /* Ensures flexbox layout */
align-items: center; /* Centers items vertically */
justify-content: center; /* Centers items horizontally */
background-color: #000; /* Black background */
color: #fff; /* White text */
padding: 8px 12px; /* Uniform padding */
font-size: 1rem; /* Font size */
border-radius: 5px; /* Rounded corners */
font-weight: bold; /* Bold font weight */
margin: 10px 0; /* Space above and below the labels */
width: 250px; /* Fixed width for consistency */
box-sizing: border-box; /* Ensures width includes padding and border */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delivery Time and Quality Guarantee Labels</title>
<style>
/* Styles for the labels */
.label {
display: inline-flex; /* Ensures flexbox layout */
align-items: center; /* Centers items vertically */
justify-content: center; /* Centers items horizontally */
background-color: #000; /* Black background */
color: #fff; /* White text */
padding: 8px 12px; /* Uniform padding */
font-size: 1rem; /* Font size */
border-radius: 5px; /* Rounded corners */
font-weight: bold; /* Bold font weight */
margin: 10px 0; /* Space above and below the labels */
width: 250px; /* Fixed width for consistency */
box-sizing: border-box; /* Ensures width includes padding and border */
}
/* Styles for emoji to make padding consistent */
.label img.emoji {
margin-right: 8px; /* Space between emoji and text */
}
/* Responsive behavior with media query for desktop screens */
@media (min-width: 768px) {
.labels-container {
display: flex; /* Uses flexbox to place items side by side */
justify-content: space-between; /* Distributes items evenly across space */
flex-wrap: wrap; /* Allows wrapping if necessary */
}
}
/* Styles for other content outside the labels */
.other-content {
margin-top: 30px; /* Space after the "Add to Cart" button */
}
</style>
</head>
<body>
<!-- Container for the labels -->
<div class="labels-container">
<span class="label delivery-time-label">🚚 Delivery Time 1 - 2 weeks</span>
<span class="label quality-guarantee-label">⭐ 100% Quality Guarantee</span>
</div>
<!-- Other content below the labels -->
<div class="other-content">
<!-- Place additional content here like the "Custom Quote" button -->
<!-- Ensure appropriate margins and formatting for this content -->
</div>
</body>
</html>
Reactie plaatsen
Reacties