prueba bootstrap 'album'

2023-05-01 23:58:09 -04:00
14 changed files with 232 additions and 282 deletions
--- a/404.html
+++ b/404.html
@ -1,179 +0,0 @@
-<!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>
--- a/README.md
+++ b/README.md
@ -1 +1,2 @@
-# Página de Ventas Salaudio
+# pagina_ventas_salaudio
+
--- a/img/bateria_clutchverde.jpeg
+++ b/img/bateria_clutchverde.jpeg
--- a/img/bateria_esponjabujepromo.jpeg
+++ b/img/bateria_esponjabujepromo.jpeg
--- a/img/bateria_esponjas.jpeg
+++ b/img/bateria_esponjas.jpeg
--- a/img/chyna_zjn.jpg
+++ b/img/chyna_zjn.jpg
--- a/img/chyna_zjn1.jpg
+++ b/img/chyna_zjn1.jpg
--- a/img/gtr_cuerdas.jpeg
+++ b/img/gtr_cuerdas.jpeg
--- a/img/pedal_bosscs31.jpeg
+++ b/img/pedal_bosscs31.jpeg
--- a/img/pedal_hardwire1.jpeg
+++ b/img/pedal_hardwire1.jpeg
--- a/img/pedal_metalmuff.jpg
+++ b/img/pedal_metalmuff.jpg
--- a/img/pedal_metalmuff1.jpg
+++ b/img/pedal_metalmuff1.jpg
--- a/index.html
+++ b/index.html
@ -1,70 +1,230 @@
-<!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>
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <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>
+        </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>
+      </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>
--- a/style.css
+++ b/style.css
@ -1,32 +0,0 @@
-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;
-}