Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update emprendimiento.html #1

Merged
merged 1 commit into from
Jan 14, 2025
Merged

Update emprendimiento.html #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 117 additions & 26 deletions emprendimiento.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,42 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gato Barato</title>
<title >Gato Barato </title>
<link rel="icon" type="image/png" href="https://i.pinimg.com/736x/48/db/ce/48dbce0eea66ba320ca8c5fc99a05ca4.jpg" sizes="32x32" alt="Logo de Gato Barato - Imagen de un gato con diseño moderno">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f0f4f8;
background-color: #f9f9f9;
color: #333;
margin: 0;
font-size: 24px;
padding: 0;
}
header {
background-color: #4a90e2;
background-color: #6a5acd;
color: #ffffff;
padding: 20px 0;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
overflow: hidden;
padding: 20px;
}
h1 {
font-size: 2.5rem;
margin: 0;
color: #f9f8f8; /* Usa un color oscuro si el fondo es claro */
}

h2 {
color: #4a90e2;
margin-top: 20px;
font-size: 1.8rem;
}
p {
margin: 10px 0;
color: #6a5acd;
}
.productos img {
width: 100%;
max-width: 150px;
height: auto;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
Expand All @@ -60,24 +53,45 @@
border: 1px solid #ddd;
}
th {
background-color: #4a90e2;
background-color: #6a5acd;
color: white;
}
td {
background-color: #ffffff;
}
td:focus {
outline: 2px solid #ff5733;
}
a {
color: #4a90e2;
color: #007bff;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #d35400;
text-decoration: underline;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #6a5acd;
color: #fff;
padding: 10px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
.productos img {
width: 100px; /* Ancho fijo */
height: 50px; /* Alto fijo */
object-fit: cover; /* Mantener proporción sin distorsión */
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para hacerlas más atractivas */
}

.btn {
display: inline-block;
background: #4a90e2;
background: #6a5acd;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
Expand All @@ -87,38 +101,115 @@
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
background: #357ab8;
background: #4b3d91;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
footer {
background: #4a90e2;
background: #6a5acd;
color: #fff;
text-align: center;
padding: 15px 0;
margin-top: 40px;
font-size: 0.9rem;
font-size: 19px;
}
@media screen and (max-width: 480px) {
header h1 {
font-size: 1.5rem;
font-size: 1.3rem;
}
table th, table td {
font-size: 0.8rem;
padding: 5px;
}
.productos img {
td img {
width: 80px;
height: 80px;
}
iframe {
height: 200px;
}
}

</style>
</head>
<body>
<a href="#main-content" class="skip-link">Saltar al contenido principal</a>

<header>
<img src="https://i.pinimg.com/736x/48/db/ce/48dbce0eea66ba320ca8c5fc99a05ca4.jpg"
alt="
alt="Logo de Gato Barato, diseño estilizado de un gato"
style="vertical-align: middle; width: 80px; height: 80px; border-radius: 10%; margin-right: 10px;"
tabindex="0">
<h1 tabindex="0">Gato Barato</h1>
<h1 tabindex="0">Ropa para Gatos - Emprendimiento de Johanna Huaraca</h1>
<p tabindex="0">Contacto: 0963241909</p>
</header>
<div class="container" id="main-content">
<section>
<h2 tabindex="0">Sobre mí</h2>
<p tabindex="0">Hola, soy Johanna Huaraca, amante de los gatos y creadora de ropa especial para ellos. Mi objetivo es ofrecer prendas cómodas, funcionales y con estilo para que tus gatos se vean y sientan increíbles.</p>
</section>

<section >
<h2 tabindex="0">Productos</h2>
<table tabindex="0">
<thead>
<tr>
<th tabindex="0">Producto</th>
<th tabindex="0">Precio</th>
<th tabindex="0">Descripción</th>
<th tabindex="0">Imagen</th>
</tr>
</thead>
<tbody>
<tr>
<td tabindex="0">Suéter de Invierno</td>
<td tabindex="0">$15</td>
<td tabindex="0">Mantén a tu gato cálido durante los días fríos.</td>
<td tabindex="0">
<a href="https://via.placeholder.com/150" target="_blank" tabindex="0">
<img src="https://i.pinimg.com/736x/a1/43/d4/a143d4631d59c8c3e33769519152ba44.jpg" alt="Suéter de invierno azul para gatos" style="width: 150px; height: 150px; object-fit: cover; border-radius: 10px;">
</a>
</td>
</tr>
<tr>
<td tabindex="0">Capa de Superhéroe</td>
<td tabindex="0">$20</td>
<td tabindex="0">Convierte a tu gato en el héroe de la casa con esta capa.</td>
<td tabindex="0">
<a href="https://i.pinimg.com/736x/ea/15/4a/ea154a8520ad91c94fb747b126273783.jpg" target="_blank" tabindex="0">
<img src="https://i.pinimg.com/736x/ea/15/4a/ea154a8520ad91c94fb747b126273783.jpg" alt="Capa de superhéroe roja para gatos" style="width: 150px; height: 150px; object-fit: cover; border-radius: 10px;">
</a>
</td>
</tr>
<tr>
<td tabindex="0">Sombrero de Fiesta</td>
<td tabindex="0">$10</td>
<td tabindex="0">Perfecto para celebraciones y fotos memorables.</td>
<td tabindex="0">
<a href="https://i.pinimg.com/736x/5b/0e/bc/5b0ebcdc3385e9ea2155569cda772fd1.jpg" target="_blank" tabindex="0">
<img src="https://i.pinimg.com/736x/5b/0e/bc/5b0ebcdc3385e9ea2155569cda772fd1.jpg" alt="Sombrero colorido de fiesta para gatos"
style="width: 150px; height: 150px; object-fit: cover; border-radius: 10px;">

</a>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 tabindex="0">Video Promocional</h2>
<iframe width="315" height="560" src="https://www.youtube.com/embed/gwToqLHeMnI" title="Video promocional de Gato Barato" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p tabindex="0">Video promocional que muestra nuestros productos y cómo tu gato puede lucir con estilo usando ropa de <strong>Gato Barato</strong>.</p>
</section>

<section>
<h2 tabindex="0">Mi experiencia</h2>
<p tabindex="0">He trabajado durante años en la industria del diseño, enfocándome en accesorios para mascotas. Mis productos están pensados para la comodidad y felicidad de tus gatos.</p>
</section>
</div>

<footer>
<p tabindex="0">© 2025 Gato Barato. Todos los derechos reservados.</p>
</footer>
</body>
</html>