Tienda de informacion periodismo Giralismo en HTML
- samuel gaitan
- 30 dic 2025
- 3 Min. de lectura
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tienda Virtual - Periodismo</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
color: white;
margin-bottom: 40px;
padding: 20px;
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.subtitle {
font-size: 1.2em;
opacity: 0.9;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.product-card {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}
.product-title {
font-size: 1.5em;
color: #333;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 3px solid #667eea;
}
.product-description {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.price {
font-size: 1.8em;
color: #667eea;
font-weight: bold;
margin-bottom: 20px;
}
.donation-section {
margin-bottom: 25px;
}
.section-title {
font-weight: bold;
color: #333;
margin-bottom: 15px;
font-size: 1.1em;
}
.donate-btn {
display: block;
width: 100%;
padding: 12px;
margin-bottom: 10px;
color: white;
text-decoration: none;
text-align: center;
border-radius: 8px;
font-weight: bold;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.donate-btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.links-section {
margin-top: 20px;
}
.resource-btn {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 8px;
background: #f0f0f0;
color: #333;
text-decoration: none;
text-align: center;
border-radius: 6px;
transition: all 0.3s ease;
font-size: 0.9em;
}
.resource-btn:hover {
background: #e0e0e0;
transform: translateX(5px);
}
footer {
text-align: center;
color: white;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>📰 Tienda de Información Periodismo Giralismo</h1>
<p class="subtitle">Apoya el periodismo giralismo independiente</p>
</header>
<div class="products-grid">
<!-- Producto 1 -->
<div class="product-card">
<h2 class="product-title">Reportaje Premium</h2>
<p class="product-description">Acceso a reportajes exclusivos y análisis profundos de actualidad</p>
<div class="price">1€ | 1$ | $5.000 COP</div>
<div class="donation-section">
<div class="section-title">💳 Métodos de Donación:</div>
<a href="tel:3123561250" class="donate-btn">📱 Nequi - 3123561250 (1€ | 1$ | $5.000 COP)</a>
<a href="tel:3123561250" class="donate-btn">💰 Daviplata - 3123561250 (1€ | 1$ | $5.000 COP)</a>
<a href="https://www.paypal.com/paypalme/samuelgaitan015" class="donate-btn" target="_blank">🌐 PayPal - samuelgaitan015@gmail.com (1€ | 1$ | $5.000 COP)</a>
</div>
<div class="links-section">
<div class="section-title">🔗 Enlaces de Interés:</div>
<a
href="https://samuelgaitan015.wixsite.com/gyralismpoems" class="resource-btn" target="_blank">✍️ Gyralism Poems</a>
<a href="https://samuelgaitan1613.wixsite.com/giralismoloucura" class="resource-btn" target="_blank">🌀 Giralismo Loucura</a>
<a href="https://samuelgaitan1613.wixsite.com/giralismo-gedichte-a" class="resource-btn" target="_blank">🖋️ Giralismo Gedichte</a>
</div>
</div>
<!-- Producto 2 -->
<div class="product-card">
<h2 class="product-title">Investigación Especial</h2>
<p class="product-description">Investigaciones periodísticas detalladas sobre temas de relevancia nacional</p>
<div class="price">1€</div>
<div class="donation-section">
<div class="section-title">💳 Métodos de Donación:</div>
<a href="tel:3123561250" class="donate-btn">📱 Nequi - 3123561250</a>
<a href="tel:3123561250" class="donate-btn">💰 Daviplata - 3123561250</a>
<a href="https://www.paypal.com/paypalme/samuelgaitan015" class="donate-btn" target="_blank">🌐 PayPal</a>
</div>
<div class="links-section">
<div class="section-title">🔗 Enlaces de Interés:</div>
<a href="https://samuelgaitan015.wixsite.com/poesiepoeme" class="resource-btn" target="_blank">📚 Poesie Poeme</a>
<a href="https://samuelgaitan015.wixsite.com/girasolismo" class="resource-
<a
href="https://samuelgaitan015.wixsite.com/gyralismpoems" class="resource-btn" target="_blank">✍️ Gyralism Poems</a>
</div>
</div>
<!-- Producto 3 -->
<div class="product-card">
<h2 class="product-title">Entrevistas Exclusivas</h2>
<p class="product-description">Entrevistas en profundidad con figuras clave de la actualidad</p>
<div class="price">1€</div>
<div class="donation-section">
<div class="section-title">💳 Métodos de Donación:</div>
<a href="tel:3123561250" class="donate-btn">📱 Nequi - 3123561250</a>
<a href="tel:3123561250" class="donate-btn">💰 Daviplata - 3123561250</a>
<a href="https://www.paypal.com/paypalme/samuelgaitan015" class="donate-btn" target="_blank">🌐 PayPal</a>
</div>
<div class="links-section">
<div class="section-title">🔗 Enlaces de Interés:</div>
<a href="https://samuelgaitan1613.wixsite.com/giralismoloucura" class="resource-btn" target="_blank">🌀 Giralismo Loucura</a>
<a href="https://samuelgaitan1613.wixsite.com/giralismo-gedichte-a" class="resource-btn" target="_blank">🖋️ Giralismo Gedichte</a>
<a href="https://samuelgaitan015.wixsite.com/poesiepoeme" class="resource-btn" target="_blank">📚 Poesie Poeme</a>
<a href="https://samuelgaitan015.wixsite.com/girasolismo" class="resource-btn" target="_blank">🌻 Girasolismo</a>
</div>
</div>
</div>
<footer>
<p>📧 Contacto: samuelgaitan015@gmail.com</p>
<p>Gracias por apoyar el periodismo giralismo independiente 🙏</p>
</footer>
</div>
</body>
</html>
Comentarios