el_diego/pagina_ventas_salaudio
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: el_diego:style
Branches Tags
el_diego:master
el_diego:style
..
compare: el_diego:master
Branches Tags
el_diego:master
el_diego:style

8 Commits
style ... master

Author SHA1 Message Date
devfzn
873b4e7a3e
+: 404 2023-08-02 16:05:09 -04:00
devfzn
8a4a11d24d
ed: h4 -> h2, tamaños fuente 2023-05-05 16:03:43 -04:00
devfzn
eb315e301e
estilos en archivo styles.css 2023-05-05 15:55:36 -04:00
el_diego
56b7d760c2 Actualizar 'index.html' 2023-05-05 13:16:10 -04:00
el_diego
d2dc057adf Subir archivos a 'img' 2023-05-05 13:11:33 -04:00
el_diego
2d4202b786 Subir archivos a 'img' 2023-05-05 13:10:35 -04:00
el_diego
4756f27a93 Subir archivos a 'img' 2023-05-05 13:09:17 -04:00
el_diego
908cb9b505 actualizacion 5mayo 2023-05-05 13:06:24 -04:00
14 changed files with 282 additions and 232 deletions
Show Stats Expand all files Collapse all files

179
404.html Normal file
View File

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page not found</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@600&family=VT323&display=swap");
/*
font-family: 'M PLUS 1 Code', sans-serif;
font-family: 'VT323', monospace;
*/
:root {
--bck: #2b2f38;
--font: rgb(241, 241, 241);
--glitch1: hsl(214, 50%, 52%);
--glitch2: hsl(9, 50%, 52%);
--glitch3: hsl(61, 50%, 52%);
}
* {
margin: 0;
padding: 0;
}
#main {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bck);
}
h1 {
color: white;
text-align: center;
font-size: 10rem;
font-family: "VT323", monospace;
text-shadow: 6px 4px var(--glitch2), 5px -5px var(--glitch1),
2px -4px var(--glitch3);
animation: glitch 0.5s infinite;
}
#txt::after {
content: "";
position: absolute;
height: 0.3rem;
width: 100%;
background: var(--bck);
bottom: 0;
left: 0;
transform: translateY(10px);
animation: line 0.4s infinite;
box-shadow: 0px 0px 2px 2px var(--bck);
}
#txt::before {
content: "";
position: absolute;
height: 0.3rem;
width: 100%;
background: var(--bck);
bottom: 0;
left: 0;
animation: lineTwo 0.9s infinite;
box-shadow: 0px 0px 4px 3px var(--bck);
}
#txt {
position: relative;
transform: translateX(5px, 3px);
animation: move 0.8s infinite;
}
@keyframes glitch {
0% {
text-shadow: 6px 4px var(--glitch2), 5px -5px var(--glitch1),
2px -4px var(--glitch3);
}
1% {
text-shadow: -2px 0px var(--glitch2), -5px 5px var(--glitch1),
2px 4px var(--glitch3);
}
19% {
text-shadow: -2px 0px var(--glitch2), -5px 5px var(--glitch1),
2px 4px var(--glitch3);
}
20% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
39% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
40% {
text-shadow: 1px -1px var(--glitch2), -1px 5px var(--glitch1),
6px -3px var(--glitch3);
}
59% {
text-shadow: 1px -1px var(--glitch2), -1px 5px var(--glitch1),
6px -3px var(--glitch3);
}
60% {
text-shadow: -5px -4px var(--glitch2), -4px 4px var(--glitch1),
-3px 3px var(--glitch3);
}
79% {
text-shadow: -5px -4px var(--glitch2), -4px 4px var(--glitch1),
-3px 3px var(--glitch3);
}
80% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
99% {
text-shadow: -4px 4px var(--glitch2), 3px 3px var(--glitch1),
-2px 4px var(--glitch3);
}
}
@keyframes line {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-110px);
}
}
@keyframes lineTwo {
0% {
transform: translateY(10px);
}
48% {
transform: translateY(-110px);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateY(-110px);
}
}
@keyframes move {
0% {
transform: translate(5px, 3px);
}
25% {
transform: translate(-4px, 1px);
}
50% {
transform: translate(3px, -4px);
}
75% {
transform: translate(-3px, 4px);
}
99% {
transform: translate(5px, 3px);
}
}
@media screen and (max-width: 720px) {
/* Noch größer, noch mehr Regeln */
h1 {
font-size: 5rem;
}
}
</style>
</head>
<body>
<div id="main">
<div id="txt">
<h1>404</h1>
<h1>not found!</h1>
</div>
</div>
</body>
</html>

3
README.md
View File

@ -1,2 +1 @@
# pagina_ventas_salaudio
# Página de Ventas Salaudio

BIN
img/bateria_clutchverde.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/bateria_esponjabujepromo.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
img/bateria_esponjas.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
img/chyna_zjn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 KiB

BIN
img/chyna_zjn1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 996 KiB

BIN
img/gtr_cuerdas.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
img/pedal_bosscs31.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
img/pedal_hardwire1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 382 KiB

BIN
img/pedal_metalmuff.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
img/pedal_metalmuff1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 916 KiB

276
index.html
View File

@ -2,229 +2,69 @@
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Productos en venta</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
</head>
<body>
<header>
<div class="collapse" style="background-color: #010101;" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">Sala Audio</h4>
<p class="text-muted">Información de la sala y/o peronas que venden. Garantias mambojambo bla bla bla, compre ya!!!</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contacto</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Siguenos en Twitter</a></li>
<li><a href="#" class="text-white">Me gusta en Facebook</a></li>
<li><a href="#" class="text-white">Envianos un email</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark shadow-sm" style="background: #010101;">
<div class="container" style="background-color: #010101;">
<a href="#" class="navbar-brand d-flex align-items-center" style="background-color: #010101;">
<img src="img/logosalaudio.jpg" width="60" height="60" fill="none"/>
<strong>Articulos en venta</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="logo-container">
<img src="img/logosalaudio.jpg" alt="Logo institucional 1">
<img src="img/logodevfzn.png" alt="Logo institucional 2">
</div>
</header>
<main>
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Instrumentos y accesorios</h1>
<p class="lead text-muted">Artículos usados, en buen estado y funcionamiento.</p>
<p>
<a href="#" class="btn btn-primary my-2">Botón Principal</a>
<a href="#" class="btn btn-secondary my-2">Botón Secundario</a>
</p>
</div>
<div class="main">
<h1>VENTA DE AUDIO Y TECNOLOGIA</h1>
<ul>
<li>
<h3>Juego de CUERDAS para Guitarra Electrica</h3>
<img class="producto" src="img/gtr_cuerdas.jpeg">
<p class="precio">$ 8.000.-</p>
</li>
<li>
<h3>Pedal de distorsión HARDWIRE TL-2</h3>
<img class="producto" src="img/pedal_hardwire.jpg">
<img class="producto" src="img/pedal_hardwire1.jpeg">
<p class="precio">$ 100.000.-</p>
</li>
<li>
<h3>Pedal de distorsión METAL MUFF de electro-harmonix</h3>
<img class="producto" src="img/pedal_metalmuff1.jpg">
<img class="producto" src="img/pedal_metalmuff.jpg">
<p class="precio">$ 80.000.-</p>
</li>
<li>
<h3>Pedal Compression Sustainer CS-3 de BOSS</h3>
<img class="producto" src="img/pedal_bosscs3.jpeg">
<img class="producto" src="img/pedal_bosscs31.jpeg">
<p class="precio">$ 70.000.-</p>
</li>
<li>
<h3>CLUTCH para Hi-Hat</h3>
<img class="producto" src="img/bateria_clutchverde.jpeg">
<p class="precio">$ 15.000.-</p>
</li>
<li>
<h3>ESPONJAS y BUJES</h3>
<img class="producto" src="img/bateria_esponjabujepromo.jpeg">
<img class="producto" src="img/bateria_esponjas.jpeg">
<p><strong>$ 2.000.-</strong> cada ESPONJA</p>
<p><strong>$ 2.000.-</strong> cada BUJE</p>
<p><strong>$ 5.000.-</strong> PACK 2 ESPONJAS y 1 BUJE</p>
</li>
<li>
<h3>CHYNA ZILDJIAN ZBT 18''</h3>
<img class="producto" src="img/chyna_zjn1.jpg">
<img class="producto" src="img/chyna_zjn.jpg">
<p class="precio">$ 70.000.-</p>
</li>
</ul>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
<img class="bd-placeholder-img card-img-top" width="100%" height="225" src="./img/pedal_bosscs3.jpeg" role="img"/>
<div class="card-body">
<p class="card-text">Pedal Compression Sustainer CS-3 de BOSS</p>
<h4 class="card-text"><strong> $ 70.000.</strong></h4>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<img class="bd-placeholder-img card-img-top" width="100%" height="225" src="./img/pedal_hardwire.jpg" role="img"/>
<div class="card-body">
<p class="card-text">Pedal de distorsión HARDWIRE TL-2</p>
<h4 class="card-text"><strong> $ 100.000.</strong></h4>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!--
<h1>VENTA DE AUDIO Y TECNOLOGIA</h1>
<h4>Pedal de distorsión HARDWIRE 100.000 clp</h4>
<img src="img/pedal_hardwire.jpg" alt="Imagen 1" style="max-width: 600px; max-height: 400px;">
<p>aqui una descripción</p>
<h4>Pedal Compression Sustainer CS-3 de BOSS 70.000 clp</h4>
<img src="img/pedal_bosscs3.jpeg" alt="Imagen 2" style="max-width: 600px; max-height: 400px;">
<p>aqui una descripción</p>
<h4>Este es el cuadro de texto para la imagen 3</h4>
<img src="imagen3.jpg" alt="Imagen 3" style="max-width: 600px; max-height: 400px;">
<p>aqui una descripción</p>
-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
</body>
</html>

32
style.css Normal file
View File

@ -0,0 +1,32 @@
body {
background-color: aquamarine;
/*text-align: center;*/
}
.logo-container {
display: flex;
}
.logo-container>img {
max-width: 60px;
max-height: 60px;
}
p {
font-size: 20px;
}
p.precio {
font-size: 22px;
font-weight: bold;
}
.main h3 {
font-size: 22px;
font-weight: bold;
}
img.producto {
max-width: 600px;
max-height: 400px;
}