Advertisement
Guest User

Untitled

a guest
Jan 18th, 2019
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.92 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Test site &bull; Thijmen</title>
  7. <link rel="stylesheet"
  8. href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
  9. <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
  10. <!-- <link rel="stylesheet" href="styles/debug.css"> -->
  11. <style>
  12.  
  13. .center {
  14. display: flex;
  15. justify-content: center;
  16. align-items: center;
  17. }
  18.  
  19. </style>
  20. </head>
  21. <body>
  22.  
  23. <!-- .hero -->
  24. <section class="hero has-background-black">
  25. <div class="hero-body">
  26. <div class="container">
  27. <figure class="image center">
  28. <img src="images/goldhost-logo.jpg" style="max-width: 256px;">
  29. </figure>
  30. </div>
  31. </div>
  32. </section>
  33. <!-- /.hero -->
  34.  
  35. <!-- /.section -->
  36. <section class="section">
  37. <div class="container">
  38. <div class="columns">
  39. <div class="column">
  40. <div class="notification">
  41. <p class="is-size-5">
  42. Bulma is a modern CSS framework from @jgthms, based on Flexbox.
  43. Using Bulma, we can describe our website's design using just classes. ᕕ( ᐛ )ᕗ
  44. </p>
  45. </div>
  46. </div>
  47. <div class="column">
  48. <div class="notification">
  49. <p class="is-size-5">
  50. Flexbox is a CSS spec that makes sectioning and aligning more natural.
  51. We don't need to know Flexbox but it's how Bulma works behind-the-scenes. ⦤(^ー^)⦥
  52. </p>
  53. </div>
  54. </div>
  55. <div class="column">
  56. <div class="notification">
  57. <p class="is-size-5">
  58. Instead of writing our CSS per-element, we can use predefined classes.
  59. With enough classes, we can describe our website design using semantics. ٩(^ᴗ^)۶
  60. </p>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </section>
  66. <!-- /.section -->
  67.  
  68. </body>
  69. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement