Códigos para shopify
Empezamos a usar los códigos personalizados en shopify en nuestro curso 25-26, voy a aprovechar esta entrada para dejarte los códigos para que los copies fácilmente, iré agregando códigos que utilizaremos pronto en nuestro próximo proyecto.
Clientes felices
<div class="happy-customers">
<div class="avatars">
<img src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg" alt="Customer 1" class="avatar">
<img src="https://thumbs.dreamstime.com/b/beautiful-african-american-woman-relaxing-outside-happy-middle-aged-smiling-46298787.jpg" alt="Customer 2" class="avatar">
<img src="https://media.istockphoto.com/id/1320651997/photo/young-woman-close-up-isolated-studio-portrait.jpg?s=612x612&w=0&k=20&c=lV6pxz-DknISGT2jjiSvUmSaw0hpMDf-dBpT8HTSAUI=" alt="Customer 3" class="avatar">
</div>
<span class="text">1,000,000+ HAPPY CUSTOMERS</span>
</div>
<style>
.happy-customers {
display: flex;
align-items: center;
background-image: linear-gradient(45deg, #1cbcc3, #4abf8f 80%);
border-radius: 5px;
padding: 5px 15px;
font-family: Arial, sans-serif;
font-size: 12px;
color: white;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.avatars {
display: flex;
margin-right: 10px;
margin-left: 10px
}
.avatar {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid white;
margin-left: -7px;
object-fit: cover;
}
.text {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
</style>Personas compraron
<div class="happy-customersV2">
<div class="avatarsV2">
<img src="https://img.freepik.com/free-photo/stylish-african-american-woman-smiling_23-2148770405.jpg" alt="Customer 1" class="avatarV2" />
<img src="https://thumbs.dreamstime.com/b/beautiful-african-american-woman-relaxing-outside-happy-middle-aged-smiling-46298787.jpg" alt="Customer 2" class="avatarV2" />
<img src="https://media.istockphoto.com/id/1320651997/photo/young-woman-close-up-isolated-studio-portrait.jpg?s=612x612&w=0&k=20&c=lV6pxz-DknISGT2jjiSvUmSaw0hpMDf-dBpT8HTSAUI=" alt="Customer 3" class="avatarV2" />
</div>
<span class="textV2">
<span style = "font-weight: 900;">Ana María Obregón</span>
<span class="verifiedV2">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Twitter_Verified_Badge.svg/800px-Twitter_Verified_Badge.svg.png"
alt="verified badge"
class="verifiedV2">
</span>
<span> y <strong>251</strong> personas más compraron</span>
</span>
</div>
<style>
.happy-customersV2 {
display: flex;
align-items: center;
background-color: #ffffff;
border-radius: 8px;
padding: 5px 15px;
font-family: Roboto, sans-serif !important;
font-size: 12px;
color: #000;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.avatarsV2 {
display: flex;
margin-right: 10px;
}
.avatarV2 {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid white;
margin-left: -7px;
object-fit: cover;
}
.textV2 {
font-weight: normal;
font-size: 12px;
color: #000;
line-height: 0px;
display: flex;
align-items: center;
gap: 3px;
}
.textV2 strong {
font-weight: 800;
font-family: Roboto, sans-serif;
}
.verifiedV2 {
vertical-align: middle;
height: 13px;
width: 13px;
}
</style>Calificaciones de trustpilot
<div class="trustpilot-container">
<div class="trustpilot-text">"Genial!"</div>
<img
class="trustpilot-image"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqwTrpqlDxrYZ0pXL4aXXL4azowSSvjMZM2g&s"
alt="Trustpilot Image"
/>
<div class="trustpilot-rating">Calificado 4.8/5 en</div>
<img
class="trustpilot-logo"
src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/trustpilot-logo-sml_bf402230-0d05-4609-a750-c310e4720da2.png?v=1733179329"
alt="Trustpilot Image"
/>
</div>
<style>
.trustpilot-container {
display: flex;
align-items: center;
background-color: #e9fff9;
border: 1px solid #d4edda;
border-radius: 8px;
padding: 2px 10px;
width: 100%;
border: 1px dashed #898686;
gap: 8px;
justify-content: center;
}
.trustpilot-image{
width: 60px;
}
.trustpilot-logo{
width: 70px;
}
.trustpilot-text{
font-size: 13px;
font-weight: 600;
}
.trustpilot-rating{
font-size: 10px;
font-weight: 500;
color: #000;
}
</style>Slider con reviews
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Slider with Swiper</title>
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
#card-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.swiper-wrapper {
min-width: 100%; /* Set a minimum width to prevent excessive compression */
box-sizing: content-box; /* Ensure the width includes padding and border, but not margin */
}
.swiper-container {
width: calc(100% - 20px);
position: relative;
margin: 0 auto;
padding: 10px 0px;
}
@keyframes upAndDown {
0%, 100% {
transform: translateY(0); /* Original position */
}
25% {
transform: translateY(-4px);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(4px);
}
}
@keyframes downAndUp {
0%, 100% {
transform: translateY(0); /* Original position */
}
25% {
transform: translateY(4px);
}
50% {
transform: translateY(0px);
}
75% {
transform: translateY(-4px);
}
}
.swiper-slide:nth-child(odd) {
animation: upAndDown 4s infinite linear;
}
.swiper-slide:nth-child(even) {
animation: downAndUp 4s infinite linear;
}
.swiper-slide {
max-width: 280px;
height: 230px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border: 2px solid rgb(239, 239, 243);
border-radius: 5px;
padding: 11px;
box-sizing: border-box;
justify-content: space-between;
gap: 15px;
}
.rating {
font-size: 32px;
color: #f7d131;
margin-top: 10px;
line-height: 20px;
}
.description {
font-size: 14px;
color: #333;
text-align: center;
justify-content: space-between;
line-height: 22px;
}
.name{
display: flex;
align-items: center;
gap: 5px;
}
.swiper-button-prev, .swiper-button-next {
color: white;
font-size: 15px!important;
background-color: #333;
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 10px;
top: 42%!important;
}
@media (max-width: 767px) {
.swiper-button-prev, .swiper-button-next {
display: none;
}
}
.swiper-pagination {
position: relative;
top: auto;
left: auto;
right: auto;
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 2.5rem;
height: 0.5rem;
background-color: #0d437d;
margin: 0 5px;
border-radius: 0px;
cursor: pointer;
margin: 0 var(--swiper-pagination-bullet-horizontal-gap,0px)!important;
}
.swiper-pagination-bullet-active {
width: 3rem;
background-image: linear-gradient(45deg, #1cbcc3, #4abf8f 80%);
border-radius: 4px;
}
.swiper-button-next:after,.swiper-button-prev:after {
font-family: swiper-icons;
font-size: 15px;
text-transform: none!important;
letter-spacing: 0;
font-variant: initial;
line-height: 1
}
</style>
<div class="container">
<div id="card-container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="rating">★★★★★</div>
<div class="description">"Pedí dos beisboleras de ferrari y me encantaron, ojo, tardan en llegar."</div>
<div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Jose Luis Hernandez</font> <font style = "font-size: 12px; color: #13152f;" >Verified</font></div>
</div>
<div class="swiper-slide">
<div class="rating">★★★★★</div>
<div class="description">"Buenas calidad muy bonita"</div>
<div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Irma</font> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>
<div class="swiper-slide">
<div class="rating">★★★★★</div>
<div class="description">"Tardó pero valió la pena, me gustó la tela, ojalá hicieran en corte de dama"</div>
<div class = "name""> <font style = "color: #13152f!important; font-weight: bold;">Anita H</font><font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>
<div class="swiper-slide">
<div class="rating">
<span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #DDDDDD;">★</span>
</div>
<div class="description" style = "margin-top:10px">
"Compre una sudaderota y crei que no iba a llegar, llegó y me encantó, pronto encargaré una para mi mujer"
</div>
<div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Jorge Gutierrez</font><font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>
<div class="swiper-slide">
<div class="rating">★★★★★</div>
<div class="description">"
Todo muy bien gracias, ojo con el tiempo de entrega que marca la página, yo no lo había visto y reclamé que se habían tardado
"</div>
<div class = "name" > <font style = "color: #13152f!important; font-weight: bold;">José María Jiménez</font> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>
<div class="swiper-slide">
<div class="rating">★★★★★</div>
<div class="description">"
Si llegan, y si me gustaron jajaja
"</div>
<div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Juan Hernandez Hernandez</font><font style = "font-size: 13px; color: #13152f;" >Verified</font></div>
</div>
</div>
<!-- Add Navigation Arrows -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 10000, // Autoplay every 10 seconds
disableOnInteraction: false, // Allow manual navigation without stopping autoplay
},
breakpoints: {
1024: {
slidesPerView: 3,
},
1300: {
slidesPerView: 4,
},
},
});
});
</script>
</body>
</html>Preguntas Frecuentes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAQ Accordion Section</title>
<style>
.accordion {
width: 100%;
max-width: 800px;
margin: 40px auto;
border-radius: 5px;
}
.accordion-item {
border-bottom: 1px solid #ccc;
margin-bottom: 3px;
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-header {
padding: 8px;
cursor: pointer;
font-weight: bold;
font-size: 13px;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-header .indicator {
font-size: 1.3em;
margin-left: 8px;
transition: transform 0.3s ease;
}
.accordion-item.active .indicator {
content: '-';
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
padding: 0 10px;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion-content p {
margin: 8px 0;
font-size: 12px;
}
.active .accordion-content {
max-height: 150px;
padding: 8px 10px;
}
</style>
</head>
<body>
<div class="container page-width">
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">
Pregunta 1<span class="indicator">+</span>
</div>
<div class="accordion-content">
<p>
Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1 Respuesta 1
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
Pregunta 2<span class="indicator">+</span>
</div>
<div class="accordion-content">
<p>
Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2 Respuesta 2
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
Pregunta 3<span class="indicator">+</span>
</div>
<div class="accordion-content">
<p>
Respuesta 3
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
Pregumta 4<span class="indicator">+</span>
</div>
<div class="accordion-content">
<p>
Respuesta 4
</p>
</div>
</div>
</div>
</div>
<script>
function handleAccordionClick(event) {
const item = event.target.closest('.accordion-item');
if (item) {
item.classList.toggle('active');
const indicator = item.querySelector('.indicator');
if (item.classList.contains('active')) {
indicator.textContent = '-';
} else {
indicator.textContent = '+';
}
}
}
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', handleAccordionClick);
});
</script>
</body>
</html>Comparación de características
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Why Choose Us?</title>
<style>
.why-choose-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
color: #1b3a57;
}
.why-choose-subtitle {
font-size: 0.8em;
margin-bottom: 30px;
color: #666;
text-align: center;
}
.why-choose-comparison-table {
width: 100%;
max-width: 550px;
margin: 0 auto;
border-collapse: collapse;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
border-radius: 10px;
}
.why-choose-comparison-table th, .why-choose-comparison-table td {
padding: 8px;
text-align: center;
border: 1px solid #ddd;
font-size: 13px;
}
.why-choose-comparison-table th {
background-color: #f5f5f5;
font-weight: bold;
color: #121212bf;
}
.why-choose-feature {
background: linear-gradient(45deg, #19a9b0, #42ad81 80%);
color: #fff;
text-align: left;
font-weight: bold;
font-size: 13px;
width: 40%;
}
.why-choose-comparison-table th:nth-child(2), .why-choose-comparison-table td:nth-child(2) {
width: 30%;
}
.why-choose-comparison-table th:nth-child(3), .why-choose-comparison-table td:nth-child(3) {
width: 30%;
}
.why-choose-check {
color: #28a745;
font-size: 1.3em;
}
.why-choose-cross {
color: #3f3f3f;
font-size: 1.5em;
}
.why-choose-rounded-corners {
border-radius: 10px;
overflow: hidden;
}
.why-choose-comparison-table tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container page-width">
<div class="why-choose-title">Porqué elegir MiMarca?</div>
<div class="why-choose-subtitle">
mi marca está mas padre que las demás
</div>
<table class="why-choose-comparison-table">
<thead>
<tr>
<th
class="why-choose-feature"
style="background: #f5f5f5!important;"
>
Característica
</th>
<th>MiMarca</th>
<th>Competencia</th>
</tr>
</thead>
<tbody>
<tr>
<td class="why-choose-feature">Ventaja 1</td>
<td class="why-choose-check">✔</td>
<td class="why-choose-cross">✘</td>
</tr>
<tr>
<td class="why-choose-feature">Ventaja 2</td>
<td class="why-choose-check">✔</td>
<td class="why-choose-cross">✘</td>
</tr>
<tr>
<td class="why-choose-feature">Ventaja 3</td>
<td class="why-choose-check">✔</td>
<td class="why-choose-cross">✘</td>
</tr>
<tr>
<td class="why-choose-feature">Ventaja 4</td>
<td class="why-choose-check">✔</td>
<td class="why-choose-check">✔</td>
</tr>
<tr>
<td class="why-choose-feature">Ventaja 5</td>
<td class="why-choose-check">✔</td>
<td class="why-choose-check">✔</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Ventajas en pestañas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Info Tabs</title>
<style>
.tabs-container {
max-width: 500px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.tabs-header {
display: flex;
gap: 10px;
}
.tab {
flex: 1;
padding: 8px 8px;
text-align: center;
font-weight: bold;
cursor: pointer;
background: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
color: #ffffff;
max-width: 33.33%;
box-sizing: border-box;
align-items: center;
display: flex;
justify-content: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
font-size: 13px;
transition: background-color 0.8s ease;
}
.tab.active {
background: #ffffff;
color: #1b3a57;
}
.tab-content {
padding: 5px 10px;
display: none;
font-size: 13px;
transition: opacity 0.5s ease;
}
.tab-content.active {
display: block;
background: #fff;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
opacity: 1;
}
</style>
</head>
<body>
<div class="container page-width">
<div class="tabs-container">
<div class="tabs-header">
<div class="tab active" onclick="showTabContent('when-to-take')">
Ventaja 1
</div>
<div class="tab" onclick="showTabContent('description')">Ventaja 2</div>
<div class="tab" onclick="showTabContent('ingredients')">Ventaja 3</div>
</div>
<div id="when-to-take" class="tab-content active">
<div>
<p>
Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja,
</p>
</div>
</div>
<div id="description" class="tab-content">
<p>
Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja,
</p>
</div>
<div id="ingredients" class="tab-content">
<p>
Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja,
</p>
</div>
</div>
</div>
<script>
function showTabContent(tabId) {
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
document.querySelector(`[onclick="showTabContent('${tabId}')"]`).classList.add('active');
document.getElementById(tabId).classList.add('active');
}
</script>
</body>
</html>Facebook Falso
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Info Tabs</title>
<style>
.tabs-container {
max-width: 500px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.tabs-header {
display: flex;
gap: 10px;
}
.tab {
flex: 1;
padding: 8px 8px;
text-align: center;
font-weight: bold;
cursor: pointer;
background: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);
color: #ffffff;
max-width: 33.33%;
box-sizing: border-box;
align-items: center;
display: flex;
justify-content: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
font-size: 13px;
transition: background-color 0.8s ease;
}
.tab.active {
background: #ffffff;
color: #1b3a57;
}
.tab-content {
padding: 5px 10px;
display: none;
font-size: 13px;
transition: opacity 0.5s ease;
}
.tab-content.active {
display: block;
background: #fff;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
opacity: 1;
}
</style>
</head>
<body>
<div class="container page-width">
<div class="tabs-container">
<div class="tabs-header">
<div class="tab active" onclick="showTabContent('when-to-take')">
Ventaja 1
</div>
<div class="tab" onclick="showTabContent('description')">Ventaja 2</div>
<div class="tab" onclick="showTabContent('ingredients')">Ventaja 3</div>
</div>
<div id="when-to-take" class="tab-content active">
<div>
<p>
Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja, Primer ventaja,
</p>
</div>
</div>
<div id="description" class="tab-content">
<p>
Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja, Segunda ventaja,
</p>
</div>
<div id="ingredients" class="tab-content">
<p>
Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja, Tercera ventaja,
</p>
</div>
</div>
</div>
<script>
function showTabContent(tabId) {
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
document.querySelector(`[onclick="showTabContent('${tabId}')"]`).classList.add('active');
document.getElementById(tabId).classList.add('active');
}
</script>
</body>
</html>Información en cuadros
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item-box {
margin: 10px;
text-align: center;
}
.item-box img {
width: 30%;
border-radius: 8px;
}
.item-title {
margin: 5px 0;
}
.item-description {
margin: 5px 0;
}
@media (min-width: 768px) {
.item-box {
flex: 0 0 30%;
}
.item-box img {
width: 30%;
margin-bottom: 15px;
min-width: 150px;
}
.flex-container{
display: flex;
flex-wrap: wrap;
max-width: 1000px;
align-content: center;
}
}
@media (max-width: 767px) {
.flex-container {
flex-direction: column;
}
.item-box img {
width: 32%!important;
}
.item-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.item-box:nth-child(odd) {
flex-direction: row-reverse;
}
.item-box img, .item-box .text-content {
width: 60%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="flex-container" style="padding: 30px 0px 30px 0px;">
<div class="item-box">
<img src="https://cdn.shopify.com/s/files/1/0692/5015/4577/files/envios_a_todo_Mexico.jpg?v=1760113834" alt="Image 1">
<div class="text-content">
<h4 class="item-title">Envío a todo México</h4>
<p class="item-description">Usamos la mejor paquetería disponible en tu zona</p>
</div>
</div>
<div class="item-box">
<img src="https://cdn.shopify.com/s/files/1/0692/5015/4577/files/garantia.jpg?v=1760113834" alt="Image 2">
<div class="text-content">
<h4 class="item-title">Garantía al 100%</h4>
<p class="item-description">Si no llega o no te gusta el producto te regresamos tu dinero</p>
</div> </div>
<div class="item-box">
<img src="https://cdn.shopify.com/s/files/1/0692/5015/4577/files/sobre_pedido.jpg?v=1760113834" alt="Image 3">
<div class="text-content">
<h4 class="item-title">Sobre Pedido</h4>
<p class="item-description">Fabricamos los productos, manejamos hasta la talla 6XL</p>
</div>
</div>
</div>
</div>
</body>
</html>
Envío gratis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Free Delivery and Returns Box</title>
<style>
.delivery-box {
border: 2px solid #d4d4d4;
border-radius: 8px;
padding: 12px 15px;
font-family: Arial, sans-serif;
background-color: #fff;
}
.delivery-box .icon {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.delivery-box .text {
display: inline-block;
vertical-align: middle;
}
.delivery-box .title {
font-size: 14px;
font-weight: bold;
margin: 0;
color: #474747;
display: flex;
align-items: center;
line-height: 15px;
}
.delivery-box .delivery-time {
font-size: 13px;
color: #474747;
line-height: 20px;
}
.delivery-box .delivery-time span {
font-weight: bold;
color: #039903;
}
.textv6{
display:flex;
flex-direction: column;
gap:5px;
justify-content: center;
}
</style>
</head>
<body>
<div class="delivery-box">
<div class="textv6">
<div class="title">
<div class="icon">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="18"
fill="#474747"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 24 24"
style="enable-background:new 0 0 24 24;"
xml:space="preserve"
>
<metadata>
<dc:creator>Davooda</dc:creator>
<dc:relation>https://davooda.com</dc:relation>
</metadata>
<style type="text/css">
.st0{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#474747;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill:#474747;}
.st4{fill:#FFFFFF;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st5{fill:none;stroke:#474747;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{fill:none;stroke:#474747;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st7{fill:#474747;}
.st8{fill:none;stroke:#474747;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<path
class="st0"
d="M6,5h9v2l3.7,0.8c0.9,0.2,1.7,0.8,2.1,1.7l1.8,4c0.2,0.4,0.3,0.8,0.3,1.3v1.7V18h-3"
/>
<line class="st0" x1="5" y1="13" x2="2" y2="13" />
</g>
<line class="st0" x1="15" y1="18" x2="9" y2="18" />
<circle class="st0" cx="6.5" cy="18.5" r="2.5" />
<circle class="st0" cx="17.5" cy="18.5" r="2.5" />
<polyline class="st0" points="15,7 15,12 15,14 " />
<line class="st0" x1="1" y1="9" x2="7" y2="9" />
<line class="st0" x1="4" y1="19" x2="3" y2="19" />
</svg>
</div>
ENVÍO GRATIS!
</div>
<div class="delivery-time">
Envío gratis a partir de 3 piezas<br />
Entrega de: <span> 3 a 5 días hábiles</span>
</div>
</div>
</div>
</body>
</html>