style.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <title></title>
  8. <style>
  9. html, body{
  10. color: #223;
  11. font-size: 21pt;
  12. margin: 0; padding: 0;
  13. }
  14. nav{
  15. font-size: 21pt;
  16. line-height: 1.5em;
  17. position: fixed;
  18. bottom: 0; left: 0;
  19. }
  20. nav a{ color: inherit; }
  21. .col{
  22. text-align: center;
  23. width: 50%;
  24. float: left;
  25. box-sizing: border-box;
  26. }
  27. h4{ text-align: center;}
  28. .container{
  29. outline: 1px solid #eed;
  30. font-size: 42pt;
  31. padding: 37.5vh 12.5vw;
  32. }
  33. .block{
  34. background: #223;
  35. color: #eed;
  36. line-height: 25vh;
  37. text-align: right;
  38. padding: 0 42pt;
  39. position: relative;
  40. }
  41. span{
  42. background: #eed;
  43. color: #223;
  44. line-height: 25vh;
  45. text-align: left;
  46. padding: 0 42pt;
  47. display: block;
  48. width: 50%;
  49. position: absolute;
  50. top: 0; left: 0;
  51. box-sizing: border-box;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <section>
  57. <div class="col">
  58. <div id="21" class="container"><div class="block">#1<span class="rellax" data-rellax-percentage="0.5" style="background:#b02; color:#fff;">#1</span></div></div>
  59. <div id="22" class="container"><div class="block">#2<span class="rellax" data-rellax-percentage="0.5">#2</span></div></div>
  60. <div id="23" class="container"><div class="block">#3<span class="rellax" data-rellax-percentage="0.5">#3</span></div></div>
  61. <div id="24" class="container"><div class="block">#4<span class="rellax" data-rellax-percentage="0.5">#4</span></div></div>
  62. <div id="25" class="container"><div class="block">#5<span class="rellax" data-rellax-percentage="0.5">#5</span></div></div>
  63. <div id="26" class="container"><div class="block">#6<span class="rellax" data-rellax-percentage="0.5" style="background:#b02; color:#fff;">#6</span></div></div>
  64. </div>
  65. <div class="col">
  66. <div id="21" class="container"><div class="block">#1<span class="rellax" style="background:#b02; color:#fff;">#1</span></div></div>
  67. <div id="22" class="container"><div class="block">#2<span class="rellax">#2</span></div></div>
  68. <div id="23" class="container"><div class="block">#3<span class="rellax">#3</span></div></div>
  69. <div id="24" class="container"><div class="block">#4<span class="rellax" style="background:#b02; color:#fff;">#4</span></div></div>
  70. <div id="25" class="container"><div class="block">#5<span class="rellax">#5</span></div></div>
  71. <div id="26" class="container"><div class="block">#6<span class="rellax">#6</span></div></div>
  72. </div>
  73. </section>
  74. <!-- Scripts -->
  75. <script src="../rellax.js"></script>
  76. <script>
  77. var rellax = new Rellax();
  78. </script>
  79. </body>
  80. </html>