Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="div-wrap">
- <div class="div-wrap-txt">
- <div class="div-txt" style="padding-right: 35px;">
- <p class="label">Connt</p>
- <p style="color: #6B7684;">shoulders, turn<br> on it and connect application <br>with device.</p>
- </div>
- <div class="div-txt" style="padding-right: 35px; margin-top: 50px;">
- <p class="label">Calib</p>
- <p style="color: #6B7684;">calibration to help device remember your upright and slouch positions.</p>
- </div>
- </div>
- <div class="div-img">
- </div>
- <div class="div-wrap-txt">
- <div class="div-txt" style="text-align: left; padding-left: 25px;">
- <p class="label">Train</p>
- <p style="color: #6B7684;">posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
- </div>
- <div class="div-txt" style="text-align: left; padding-left: 25px; margin-top: 50px;">
- <p class="label">Anale</p>
- <p style="color: #6B7684;">Statistics let track the <br>progress you’ve made from first <br>training to the last.</p>
- </div>
- </div>
- </div>
- .div-img img {
- position: absolute;
- top: 0;
- left: 50%;
- display: block;
- transform: translateX(-50%);
- opacity: 0;
- animation-duration: calc(var(--time) * 1s);
- animation-iteration-count: infinite;
- animation-name: fade;
- }
- .div-img img:nth-child(1) {
- animation-delay: 0s;
- }
- .div-img img:nth-child(2) {
- animation-delay: calc(var(--time) / 8 * 1s);
- }
- .div-img img:nth-child(3) {
- animation-delay: calc(var(--time) / 4 * 1s);
- }
- .div-img img:nth-child(4) {
- animation-delay: calc(var(--time) / 2.66 * 1s);
- }
- .div-img img:nth-child(5) {
- animation-delay: calc(var(--time) / 2 * 1s);
- }
- .div-img img:nth-child(6) {
- animation-delay: calc(var(--time) / 1.6 * 1s);
- }
- .div-img img:nth-child(7) {
- animation-delay: calc(var(--time) / 1.33 * 1s);
- }
- .div-img img:nth-child(8) {
- animation-delay: calc(var(--time) / 1.14 * 1s);
- }
- .div-txt {
- animation-duration: calc(var(--time) * 1s);
- animation-iteration-count: infinite;
- animation-name: color-change;
- text-align: right;
- }
- @keyframes color-change {
- 0%,
- 25%,
- 100% {
- background-color: #fff;
- box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
- }
- 1%,
- 24% {
- box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
- }
- }
- @keyframes fade {
- 0%,
- 20%,
- 100% {
- opacity: 0;
- z-index: auto;
- }
- 1%,
- 99% {
- z-index: 1;
- }
- 8%,
- 12% {
- opacity: 1;
- }
- }
- @media all and (min-width: 1170px) {
- .div-wrap {
- flex-flow: row nowrap;
- justify-content: space-around;
- }
Add Comment
Please, Sign In to add comment