SHARE
TWEET

copia

a guest Dec 13th, 2019 89 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.  
  4. <head>
  5.   <!-- Meta tags Obrigat√≥rias -->
  6.   <meta charset="utf-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9.   <!-- Bootstrap CSS -->
  10.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  11.     integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  12.  
  13.   <title>Ol√°, mundo!</title>
  14. </head>
  15.  
  16. <body>
  17.   <header>
  18.     <nav class="navbar navbar-expand-lg navbar-light bg-light">
  19.       <div class="container">
  20.         <a class="navbar-brand" href="#">Navbar</a>
  21.       </div>
  22.  
  23.     </nav>
  24.   </header>
  25.   <div class="container">
  26.     <div class="row">
  27.       <div class="col-md-3">
  28.         <div class="sticky-top pt-5 sidebar">
  29.           <div class="avatar">
  30.             <img src="https://i.imgur.com/BNjxa4n.jpg" class="img-fluid">
  31.           </div>
  32.         </div>
  33.       </div>
  34.       <div class="col-md-9">
  35.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  36.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  37.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  38.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  39.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  40.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  41.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  42.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  43.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  44.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores, a quam recusandae dolores dolorum sapiente, magni temporibus atque ad aperiam deserunt et eos aut iusto autem. Ab quod magni explicabo earum eum corrupti, officia aspernatur doloremque, sequi ad illum, repellat tenetur. Doloremque qui ab, harum cum aliquid nobis doloribus?</p>
  45.       </div>
  46.     </div>
  47.  
  48.   </div>
  49.  
  50.   <!-- JavaScript (Opcional) -->
  51.   <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
  52.   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  53.     integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  54.     crossorigin="anonymous"></script>
  55.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
  56.     integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
  57.     crossorigin="anonymous"></script>
  58.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
  59.     integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
  60.     crossorigin="anonymous"></script>
  61. </body>
  62.  
  63. </html>
RAW Paste Data
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!
 
Top