Scribd Logo
Upload

Welcome to Scribd!

  • Copia de Bootstrap

    Uploaded by

    orjuelaacunas
    0 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    0 views3 pages

    Copia de Bootstrap

    Uploaded by

    orjuelaacunas

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    <!

    DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tienda de Bicicletas</title>
    <!-- Bootstrap CSS -->
    <link
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    rel="stylesheet">
    </head>
    <body>
    <!-- Barra de navegación -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">BiciTienda</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-
    target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
    label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
    <a class="nav-link" href="#">Inicio <span
    class="sr-only">(actual)</span></a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Bicicletas</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Repuestos</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Contacto</a>
    </li>
    </ul>
    </div>
    </nav>

    <!-- Contenido principal -->


    <div class="container mt-5">
    <div class="jumbotron">
    <h1 class="display-4">¡Bienvenido a BiciTienda!</h1>
    <p class="lead">Encuentra las mejores bicicletas y repuestos al mejor
    precio.</p>
    <hr class="my-4">
    <p>Explora nuestra amplia gama de productos y disfruta de ofertas
    exclusivas.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Ver más</a>
    </div>

    <!-- Sección de Bicicletas -->


    <h2 class="mt-5">Bicicletas</h2>
    <div class="row">
    <div class="col-md-4">
    <div class="card mb-4">
    <img src="https://via.placeholder.com/150" class="card-img-top"
    alt="Bicicleta de Montaña">
    <div class="card-body">
    <h5 class="card-title">Bicicleta de Montaña</h5>
    <p class="card-text">Perfecta para terrenos difíciles.</p>
    <a href="#" class="btn btn-primary">Comprar</a>
    </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card mb-4">
    <img src="https://via.placeholder.com/150" class="card-img-top"
    alt="Bicicleta de Carretera">
    <div class="card-body">
    <h5 class="card-title">Bicicleta de Carretera</h5>
    <p class="card-text">Ideal para largas distancias.</p>
    <a href="#" class="btn btn-primary">Comprar</a>
    </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card mb-4">
    <img src="https://via.placeholder.com/150" class="card-img-top"
    alt="Bicicleta Híbrida">
    <div class="card-body">
    <h5 class="card-title">Bicicleta Híbrida</h5>
    <p class="card-text">Versátil y cómoda para la ciudad.</p>
    <a href="#" class="btn btn-primary">Comprar</a>
    </div>
    </div>
    </div>
    </div>

    <!-- Sección de Repuestos -->


    <h2 class="mt-5">Repuestos</h2>
    <div class="row">
    <div class="col-md-4">
    <div class="card mb-4">
    <img src="https://via.placeholder.com/150" class="card-img-top"
    alt="Llantas">
    <div class="card-body">
    <h5 class="card-title">Llantas</h5>
    <p class="card-text">Alta durabilidad y rendimiento.</p>
    <a href="#" class="btn btn-primary">Comprar</a>
    </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card mb-4">
    <img src="https://via.placeholder.com/150" class="card-img-top"
    alt="Frenos">
    <div class="card-body">
    <h5 class="card-title">Frenos</h5>
    <p class="card-text">Seguridad y control en cada frenada.</p>
    <a href="#" class="btn btn-primary">Comprar</a>
    </div>
    </div>
    </div>
    <div class="col-md-4">
    <div class="card mb-4">
    <img src="https://via.placeholder.com/150" class="card-img-top"
    alt="Cadenas">
    <div class="card-body">
    <h5 class="card-title">Cadenas</h5>
    <p class="card-text">Resistentes y de fácil mantenimiento.</p>
    <a href="#" class="btn btn-primary">Comprar</a>
    </div>
    </div>
    </div>
    </div>
    </div>

    <!-- Pie de página -->


    <footer class="bg-light text-center text-lg-start mt-5">
    <div class="container p-4">
    <p class="text-center">&copy; 2024 BiciTienda. Todos los derechos
    reservados.</p>
    </div>
    </footer>

    <!-- Bootstrap JS y dependencias -->


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script
    src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></
    script>
    <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
    script>
    </body>
    </html>

    You might also like