Guest User

Untitled

a guest
Dec 10th, 2018
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.56 KB | None | 0 0
  1. <div class="div-wrap">
  2. <div class="div-wrap-txt">
  3. <div class="div-txt" style="padding-right: 35px;">
  4. <p class="label">Connt</p>
  5. <p style="color: #6B7684;">shoulders, turn<br> on it and connect application <br>with device.</p>
  6. </div>
  7. <div class="div-txt" style="padding-right: 35px; margin-top: 50px;">
  8. <p class="label">Calib</p>
  9. <p style="color: #6B7684;">calibration to help device remember your upright and slouch positions.</p>
  10. </div>
  11. </div>
  12. <div class="div-img">
  13. </div>
  14. <div class="div-wrap-txt">
  15. <div class="div-txt" style="text-align: left; padding-left: 25px;">
  16. <p class="label">Train</p>
  17. <p style="color: #6B7684;">posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
  18. </div>
  19. <div class="div-txt" style="text-align: left; padding-left: 25px; margin-top: 50px;">
  20. <p class="label">Anale</p>
  21. <p style="color: #6B7684;">Statistics let track the <br>progress you’ve made from first <br>training to the last.</p>
  22. </div>
  23. </div>
  24. </div>
  25.  
  26. .div-img img {
  27. position: absolute;
  28. top: 0;
  29. left: 50%;
  30. display: block;
  31. transform: translateX(-50%);
  32. opacity: 0;
  33. animation-duration: calc(var(--time) * 1s);
  34. animation-iteration-count: infinite;
  35. animation-name: fade;
  36. }
  37.  
  38. .div-img img:nth-child(1) {
  39. animation-delay: 0s;
  40. }
  41.  
  42. .div-img img:nth-child(2) {
  43. animation-delay: calc(var(--time) / 8 * 1s);
  44. }
  45.  
  46. .div-img img:nth-child(3) {
  47. animation-delay: calc(var(--time) / 4 * 1s);
  48. }
  49.  
  50. .div-img img:nth-child(4) {
  51. animation-delay: calc(var(--time) / 2.66 * 1s);
  52. }
  53.  
  54. .div-img img:nth-child(5) {
  55. animation-delay: calc(var(--time) / 2 * 1s);
  56. }
  57.  
  58. .div-img img:nth-child(6) {
  59. animation-delay: calc(var(--time) / 1.6 * 1s);
  60. }
  61.  
  62. .div-img img:nth-child(7) {
  63. animation-delay: calc(var(--time) / 1.33 * 1s);
  64. }
  65.  
  66. .div-img img:nth-child(8) {
  67. animation-delay: calc(var(--time) / 1.14 * 1s);
  68. }
  69.  
  70. .div-txt {
  71. animation-duration: calc(var(--time) * 1s);
  72. animation-iteration-count: infinite;
  73. animation-name: color-change;
  74. text-align: right;
  75. }
  76.  
  77. @keyframes color-change {
  78. 0%,
  79. 25%,
  80. 100% {
  81. background-color: #fff;
  82. box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  83. }
  84. 1%,
  85. 24% {
  86. box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
  87. }
  88. }
  89.  
  90. @keyframes fade {
  91. 0%,
  92. 20%,
  93. 100% {
  94. opacity: 0;
  95. z-index: auto;
  96. }
  97. 1%,
  98. 99% {
  99. z-index: 1;
  100. }
  101. 8%,
  102. 12% {
  103. opacity: 1;
  104. }
  105. }
  106.  
  107. @media all and (min-width: 1170px) {
  108. .div-wrap {
  109. flex-flow: row nowrap;
  110. justify-content: space-around;
  111. }
Add Comment
Please, Sign In to add comment