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

Compare commits

merge into: el_diego:style
Branches Tags
el_diego:master
el_diego:style
...
pull from: 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 42 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

110
index.html
View File

@ -1,40 +1,70 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Productos en venta</title>
</head>
<body>
<style>
body {
background-color: #ffffff;
}
.logo-container {
display: flex;
}
</style>
<div class="logo-container">
<img src="img/logosalaudio.jpg" alt="Logo institucional"style="max-width: 60px; max-height: 60px;">
<img src="img/logodevfzn.png" alt="Logo institucional" style="max-width: 60px; max-height: 60px;">
</div>
<h1>VENTA DE AUDIO Y TECNOLOGIA</h1>
<ul>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Productos en venta</title>
</head>
<body>
<header>
<div class="logo-container">
<img src="img/logosalaudio.jpg" alt="Logo institucional 1">
<img src="img/logodevfzn.png" alt="Logo institucional 2">
</div>
</header>
<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>
</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;
}