Guest User

copia

a guest
Dec 13th, 2019
120
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