API tools faq
paste
Advertisement
ADL_Rodrigo_Silva

Untitled

ADL_Rodrigo_Silva
Apr 14th, 2022
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.53 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.  
  10.     <!-- Código de bootstrap -->
  11.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  12.  
  13.     <title>Document</title>
  14. </head>
  15.  
  16. <body>
  17.    
  18.     <!-- Código para el NavBar -->
  19.     <nav class="navbar navbar-expand-lg navbar-light bg-light">
  20.         <div class="container-fluid">
  21.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
  22.             <span class="navbar-toggler-icon"></span>
  23.           </button>
  24.           <a class="navbar-brand" href="#">Menu Principal</a>
  25.           <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
  26.             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  27.               <li class="nav-item">
  28.                 <a class="nav-link active" aria-current="page" href="#">Home</a>
  29.               </li>
  30.               <li class="nav-item">
  31.                 <a class="nav-link" href="#">Link</a>
  32.               </li>
  33.               <li class="nav-item">
  34.                 <a class="nav-link disabled">Disabled</a>
  35.               </li>
  36.             </ul>
  37.             <form class="d-flex">
  38.               <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  39.               <button class="btn btn-outline-success" type="submit">Search</button>
  40.             </form>
  41.           </div>
  42.         </div>
  43.       </nav>
  44.       <br>
  45.       <br>
  46.       <!-- Fin Código para el NavBar -->
  47.  
  48.     <!-- Código del conteiner -->
  49.  
  50.     <div class="container">
  51.      
  52.         <div class="container">
  53.             <div class="row">
  54.               <div class="col">
  55.                 <div class="card" style="width: 18rem;">
  56.                     <img src="https://www.purina-latam.com/sites/g/files/auxxlc391/files/styles/kraken_generic_max_width_960/public/download-21.png?itok=xwvQwAhn" class="card-img-top" alt="Foto de Perrito">
  57.                     <div class="card-body">
  58.                       <h5 class="card-title">Card title</h5>
  59.                       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  60.                       <a href="#" class="btn btn-primary">Go somewhere</a>
  61.                     </div>
  62.                   </div>
  63.               </div>
  64.               <div class="col">
  65.                 <div class="card" style="width: 18rem;">
  66.                     <img src="https://www.petdarling.com/wp-content/uploads/2021/01/cachorros.jpg" class="card-img-top" alt="...">
  67.                     <div class="card-body">
  68.                       <h5 class="card-title">Card title</h5>
  69.                       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  70.                       <a href="#" class="btn btn-primary">Go somewhere</a>
  71.                     </div>
  72.                   </div>
  73.               </div>
  74.               <div class="col">
  75.                 <div class="card" style="width: 18rem;">
  76.                     <img src="https://cdn2.excelsior.com.mx/media/styles/image800x600/public/pictures/2021/06/09/2592367.jpg" class="card-img-top" alt="...">
  77.                     <div class="card-body">
  78.                       <h5 class="card-title">Card title</h5>
  79.                       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  80.                       <a href="#" class="btn btn-primary">Go somewhere</a>
  81.                     </div>
  82.                   </div>
  83.               </div>
  84.             </div>
  85.           </div>
  86.     <br>
  87.     <br>
  88.  
  89.     <!-- Inicio del Carrusel -->
  90.  
  91.     <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  92.         <div class="carousel-indicators">
  93.           <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  94.           <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
  95.           <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  96.         </div>
  97.         <div class="carousel-inner">
  98.           <div class="carousel-item active">
  99.             <img src="https://www.feelcats.com/wp-content/uploads/2019/03/gatitos.jpg" class="d-block w-100" alt="...">
  100.             <div class="carousel-caption d-none d-md-block">
  101.               <h5>Primeros gatitos</h5>
  102.               <p>Esta foto me la robé</p>
  103.             </div>
  104.           </div>
  105.           <div class="carousel-item">
  106.             <img src="https://www.feelcats.com/wp-content/uploads/2019/03/fotos-de-gatitos.jpg" class="d-block w-100" alt="...">
  107.             <div class="carousel-caption d-none d-md-block">
  108.               <h5>Segundos gatitos</h5>
  109.               <p>Foto también robada</p>
  110.             </div>
  111.           </div>
  112.           <div class="carousel-item">
  113.             <img src="https://www.feelcats.com/wp-content/uploads/2019/03/gatitos-bebe.jpg" class="d-block w-100" alt="...">
  114.             <div class="carousel-caption d-none d-md-block">
  115.               <h5>Terceros gatitos</h5>
  116.               <p>Foto igualmente robada</p>
  117.             </div>
  118.           </div>
  119.         </div>
  120.         <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
  121.           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  122.           <span class="visually-hidden">Previous</span>
  123.         </button>
  124.         <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
  125.           <span class="carousel-control-next-icon" aria-hidden="true"></span>
  126.           <span class="visually-hidden">Next</span>
  127.         </button>
  128.       </div>
  129.    
  130.     <!-- Fin del carrusel -->
  131.  
  132.  
  133.     </div>
  134.  
  135.     <!-- Llamada a las ibrerías de bootstrap -->
  136.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  137.  
  138. </body>
  139.  
  140. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!