API tools faq
paste
Advertisement
Socialking

Untitled

Socialking
Oct 25th, 2021
1,081
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.43 KB | None | 0 0
raw download clone embed print report
  1. @import 'variables', 'mixin';
  2.  
  3. /* Homepage */
  4.  
  5. @-webkit-keyframes top-bottom {
  6.     0% {
  7.         transform: translateY(0);
  8.     }
  9.  
  10.     50% {
  11.         transform: translateY(35px);
  12.     }
  13.  
  14.     100% {
  15.         transform: translateY(0);
  16.     }
  17. }
  18.  
  19. @-webkit-keyframes left-right {
  20.     0% {
  21.         transform: translateX(0);
  22.     }
  23.  
  24.     50% {
  25.         transform: translateX(35px);
  26.     }
  27.  
  28.     100% {
  29.         transform: translateX(0);
  30.     }
  31. }
  32.  
  33. .home {
  34.     .s1 {
  35.         position: relative;
  36.  
  37.         @include media-min(md) {
  38.             &:before {
  39.                 content: '';
  40.                 display: block;
  41.                 position: absolute;
  42.                 background-position: center;
  43.                 background-size: cover;
  44.                 background-repeat: no-repeat;
  45.                 background-image: url(/wp-content/uploads/2021/10/sg__slider_after.png);
  46.                 background-size: contain;
  47.                 background-repeat: repeat;
  48.                 bottom: auto;
  49.                 left: 50px;
  50.                 right: 0;
  51.                 margin-left: auto;
  52.                 margin-right: auto;
  53.                 top: -250px;
  54.                 width: 75px;
  55.                 z-index: 55;
  56.                 height: 144px;
  57.                 -webkit-animation: linear infinite alternate;
  58.                 -webkit-animation-name: top-bottom;
  59.                 -webkit-animation-duration: 5s;
  60.             }
  61.         }
  62.  
  63.         .col-md-4 {
  64.             display: flex;
  65.             flex-flow: row wrap;
  66.             align-items: stretch;
  67.             padding: 0;
  68.             margin: 0;
  69.  
  70.             @include media-min(md) {
  71.                 transform: translateY(50px);
  72.                 @include css3(transition, $transition);
  73.  
  74.                 &:hover {
  75.                     transform: translateY(30px);
  76.                 }
  77.             }
  78.         }
  79.  
  80.         &__img_box {
  81.             border-radius: 40px;
  82.             background-color: #E9E7F3;
  83.             position: relative;
  84.  
  85.             &:before {
  86.                 content: '';
  87.                 display: block;
  88.                 position: absolute;
  89.                 background-position: center;
  90.                 background-size: cover;
  91.                 background-repeat: no-repeat;
  92.                 background-image: url(/wp-content/uploads/2021/10/s1__before.png);
  93.                 background-size: contain;
  94.                 background-repeat: repeat;
  95.                 bottom: auto;
  96.                 left: auto;
  97.                 right: -100px;
  98.                 margin-left: auto;
  99.                 margin-right: auto;
  100.                 top: -90px;
  101.                 width: 167px;
  102.                 z-index: 55;
  103.                 height: 113px;
  104.             }
  105.  
  106.             @include media-max(md) {
  107.                 padding: 20px 10px;
  108.             }
  109.  
  110.             @include media-min(md) {
  111.                 max-height: 450px;
  112.                 margin-bottom: 150px;
  113.             }
  114.  
  115.             .s1__icon_box {
  116.                 padding: 0 30px;
  117.             }
  118.  
  119.             .s1__img_single_box {
  120.                 background-color: #fff;
  121.                 text-align: center;
  122.                 border-radius: 20px;
  123.                 filter: drop-shadow(0px 20px 30px rgba(54, 68, 119, 0.15));
  124.  
  125.                 @include media-max(md) {
  126.                     margin: 30px 0 0 0;
  127.                     padding: 30px;
  128.                 }
  129.  
  130.                 .title {
  131.                     margin-top: 30px;
  132.                     font-size: 20px;
  133.                     line-height: 1.4;
  134.                     color: #464748;
  135.                     font-weight: 600;
  136.                 }
  137.  
  138.                 .desc {
  139.                     font-size: 16px;
  140.                     line-height: 1.6;
  141.                     color: #6f7071;
  142.                     font-weight: 400;
  143.                 }
  144.  
  145.                 @include media-min(md) {
  146.                     margin: 0 40px;
  147.                     padding: 30px;
  148.  
  149.                     .desc {
  150.                         display: flex;
  151.                     }
  152.                 }
  153.             }
  154.         }
  155.     }
  156.  
  157.     .s2 {
  158.         position: relative;
  159.  
  160.         &:before {
  161.             content: '';
  162.             display: block;
  163.             position: absolute;
  164.             background-position: center;
  165.             background-size: cover;
  166.             background-repeat: no-repeat;
  167.             background-image: url(/wp-content/uploads/2021/10/s2_before.png);
  168.             background-size: contain;
  169.             background-repeat: repeat;
  170.             bottom: auto;
  171.             left: auto;
  172.             right: -350px;
  173.             top: -300px;
  174.             width: 620px;
  175.             height: 620px;
  176.             z-index: -1;
  177.  
  178.             @include media-max(md) {
  179.                 opacity: .2;
  180.                 top: 0;
  181.             }
  182.         }
  183.  
  184.         @include media-min(md) {
  185.             margin-top: 270px;
  186.         }
  187.  
  188.         @include media-max(md) {
  189.             &_panel_two {
  190.                 padding: 45px;
  191.             }
  192.         }
  193.  
  194.         .col-md-8 {
  195.             @include media-min(md) {
  196.                 padding-left: 40px;
  197.             }
  198.         }
  199.  
  200.         .nav-link {
  201.             border: unset !important;
  202.             border-radius: 50px;
  203.             margin-top: 5px;
  204.             @include css3(transition, $transition);
  205.  
  206.             &:hover {
  207.                 background-color: #D5D1E7;
  208.                 border-radius: 50px;
  209.             }
  210.  
  211.             img {
  212.                 margin-right: 15px;
  213.                 width: 60px;
  214.             }
  215.  
  216.             &.active {
  217.                 background-color: #D5D1E7;
  218.                 border-radius: 50px;
  219.                 color: $secondary-color;
  220.             }
  221.         }
  222.  
  223.         .tab-pane {
  224.  
  225.             .title {
  226.                 font-size: 32px;
  227.                 color: #464748;
  228.                 font-weight: 700;
  229.                 margin-top: 0;
  230.             }
  231.         }
  232.     }
  233.  
  234.     .s3 {
  235.         .s3-left-image {
  236.             margin-left: -70%;
  237.             position: relative;
  238.  
  239.             &:before {
  240.                 content: '';
  241.                 display: block;
  242.                 position: absolute;
  243.                 background-position: center;
  244.                 background-size: cover;
  245.                 background-repeat: no-repeat;
  246.                 background-image: url(/wp-content/uploads/2021/10/s1__before.png);
  247.                 background-size: contain;
  248.                 background-repeat: repeat;
  249.                 bottom: auto;
  250.                 left: 100px;
  251.                 right: auto;
  252.                 margin-left: auto;
  253.                 margin-right: auto;
  254.                 top: -90px;
  255.                 width: 167px;
  256.                 z-index: 55;
  257.                 height: 113px;
  258.                 transform: rotate(240deg);
  259.             }
  260.         }
  261.  
  262.         .col-right-text {
  263.             @include media-min(md) {
  264.                 padding-left: 50px;
  265.             }
  266.  
  267.             img {
  268.                 -webkit-animation: linear infinite alternate;
  269.                 -webkit-animation-name: left-right;
  270.                 -webkit-animation-duration: 5s;
  271.             }
  272.         }
  273.     }
  274.  
  275.     .s4 {
  276.  
  277.         position: relative;
  278.  
  279.         &:before {
  280.             content: '';
  281.             display: block;
  282.             position: absolute;
  283.             background-position: center;
  284.             background-size: cover;
  285.             background-repeat: no-repeat;
  286.             background-image: url(/wp-content/uploads/2021/10/s2_before.png);
  287.             background-size: contain;
  288.             background-repeat: repeat;
  289.             bottom: auto;
  290.             left: auto;
  291.             right: -350px;
  292.             top: -310px;
  293.             width: 620px;
  294.             height: 620px;
  295.             z-index: -1;
  296.  
  297.             -webkit-animation: linear infinite alternate;
  298.             -webkit-animation-name: top-bottom;
  299.             -webkit-animation-duration: 5s;
  300.  
  301.             @include media-max(md) {
  302.                 opacity: .2;
  303.                 top: 0;
  304.             }
  305.         }
  306.  
  307.         .swiper-box .swiper-button {
  308.             border-radius: 100%;
  309.             background-color: #fff;
  310.             width: 64px;
  311.             height: 64px;
  312.             box-shadow: 0px 15px 30px rgba(54, 68, 119, 0.3);
  313.  
  314.             &.swiper-button-prev {
  315.                 padding: 10px 15px 10px 13px;
  316.             }
  317.  
  318.             &.swiper-button-next {
  319.                 padding: 10px 13px 10px 15px;
  320.             }
  321.  
  322.             .svg-icon {
  323.                 width: 10px;
  324.                 stroke-width: 0px;
  325.                 stroke-linejoin: round;
  326.                 stroke-linecap: round;
  327.  
  328.                 &__path {
  329.                     fill: $primary-color;
  330.                 }
  331.             }
  332.         }
  333.  
  334.         .swiper-button-prev {
  335.             left: -80px;
  336.             right: auto;
  337.         }
  338.  
  339.         .swiper-button-next {
  340.             right: -80px;
  341.             left: auto;
  342.         }
  343.  
  344.         .swiper-slider.grid .swiper-slide {
  345.             display: flex;
  346.             align-items: center;
  347.             height: auto;
  348.             justify-content: center;
  349.         }
  350.  
  351.         .swiper-container {
  352.             margin-left: auto;
  353.             margin-right: auto;
  354.             position: relative;
  355.             overflow: hidden;
  356.             list-style: none;
  357.             padding: 0;
  358.             z-index: 1;
  359.             padding: 50px 0;
  360.  
  361.             .slide__content {
  362.                 width: 90% !important;
  363.                
  364.                 .slide__html{
  365.                     display: flex;
  366.                 }
  367.             }
  368.         }
  369.  
  370.         .s4_box {
  371.             display: flex;
  372.             justify-content: center;
  373.             align-items: center;
  374.             background-color: #fff;
  375.             flex-flow: column wrap;
  376.             padding: 50px 20px;
  377.             border-radius: 20px;
  378.             flex-grow: 1;
  379.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  380.  
  381.             .title {
  382.                 font-size: 18px;
  383.                 color: #464748;
  384.                 font-weight: 600;
  385.                 margin-top: 10px;
  386.                 margin-bottom: 25px;
  387.             }
  388.         }
  389.     }
  390.  
  391.     .s5 {
  392.         position: relative;
  393.  
  394.         .swiper-box {
  395.             margin-bottom: unset;
  396.         }
  397.  
  398.         &:after {
  399.             content: '';
  400.             display: block;
  401.             position: absolute;
  402.             background-position: center;
  403.             background-size: cover;
  404.             background-repeat: no-repeat;
  405.             background-image: url(/wp-content/uploads/2021/10/s2_before.png);
  406.             background-size: contain;
  407.             background-repeat: repeat;
  408.             bottom: auto;
  409.             right: auto;
  410.             left: -350px;
  411.             top: -200px;
  412.             width: 620px;
  413.             height: 620px;
  414.             z-index: -1;
  415.  
  416.             -webkit-animation: linear infinite alternate;
  417.             -webkit-animation-name: top-bottom;
  418.             -webkit-animation-duration: 5s;
  419.  
  420.             @include media-max(md) {
  421.                 opacity: .2;
  422.                 top: 0;
  423.             }
  424.         }
  425.  
  426.         .swiper-slider.type-custom:not(.grid) .slide {
  427.             height: unset;
  428.             justify-content: center;
  429.         }
  430.  
  431.         .swiper-box .swiper-button {
  432.             border-radius: 100%;
  433.             background-color: #fff;
  434.             width: 64px;
  435.             height: 64px;
  436.             box-shadow: 0px 15px 30px rgba(54, 68, 119, 0.3);
  437.  
  438.             &.swiper-button-prev {
  439.                 padding: 10px 15px 10px 13px;
  440.             }
  441.  
  442.             &.swiper-button-next {
  443.                 padding: 10px 13px 10px 15px;
  444.             }
  445.  
  446.             .svg-icon {
  447.                 width: 10px;
  448.                 stroke-width: 0px;
  449.                 stroke-linejoin: round;
  450.                 stroke-linecap: round;
  451.  
  452.                 &__path {
  453.                     fill: $primary-color;
  454.                 }
  455.             }
  456.         }
  457.  
  458.         .swiper-button-prev {
  459.             left: -15px;
  460.             right: auto;
  461.         }
  462.  
  463.         .swiper-button-next {
  464.             right: -15px;
  465.             left: auto;
  466.         }
  467.  
  468.         .swiper-slider.grid .swiper-slide {
  469.             display: flex;
  470.             align-items: center;
  471.             height: auto;
  472.             justify-content: center;
  473.         }
  474.  
  475.         .swiper-container {
  476.             margin-left: auto;
  477.             margin-right: auto;
  478.             position: relative;
  479.             overflow: hidden;
  480.             list-style: none;
  481.             padding: 0;
  482.             z-index: 1;
  483.             padding: 50px 0;
  484.  
  485.             .slide__content {
  486.                 width: 80% !important;
  487.                 padding: 30px;
  488.             }
  489.         }
  490.  
  491.         .testimonial {
  492.             text-align: center;
  493.             background-color: #fff;
  494.             border-radius: 30px;
  495.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  496.             padding: 0 50px 50px 50px;
  497.             width: 100%;
  498.  
  499.             .title {
  500.                 font-size: 25px;
  501.                 color: #464748;
  502.                 font-weight: 700;
  503.                 margin: 25px 0;
  504.             }
  505.  
  506.             .desc {
  507.                 font-size: 16px;
  508.                 line-height: 28px;
  509.                 color: #464748;
  510.                 font-weight: 400;
  511.  
  512.                 &:before {
  513.                     content: '"';
  514.                 }
  515.  
  516.                 &:after {
  517.                     content: '"';
  518.                 }
  519.             }
  520.         }
  521.     }
  522.  
  523.     .s6 {
  524.         @include media-max(md) {
  525.             padding: 0 30px;
  526.         }
  527.  
  528.         .newsletter-box {
  529.             border-radius: 20px;
  530.             background-image: url(/wp-content/uploads/2021/10/s6__bg.png);
  531.             background-size: cover;
  532.             background-position: center;
  533.             padding: 30px;
  534.  
  535.             .tnp-subscription {
  536.                 form {
  537.                     flex-flow: row nowrap;
  538.                     display: flex;
  539.                     justify-content: space-between;
  540.                     align-items: center;
  541.                     align-content: center;
  542.  
  543.                     .tnp-field {
  544.                         padding: 20px 0;
  545.                     }
  546.  
  547.                     .tnp-field-email {
  548.                         width: 100%;
  549.  
  550.                         input {
  551.                             border: 1px solid #fff;
  552.                             border-radius: 50px 0 0 50px;
  553.                             height: unset;
  554.                             background-color: #fff;
  555.                             border-color: #fff;
  556.                             padding: 20px 30px;
  557.                         }
  558.                     }
  559.  
  560.                     .tnp-submit {
  561.                         border-radius: 0 50px 50px 0;
  562.                         background-color: $primary-color;
  563.                         border-right: 1px solid $primary-color;
  564.                         border-top: 1px solid $primary-color;
  565.                         border-bottom: 1px solid $primary-color;
  566.                         border-left: unset;
  567.                         color: #fff;
  568.                         padding: 20px 35px;
  569.                         font-weight: 600;
  570.                         @include css3(transition, $transition);
  571.  
  572.                         &:hover {
  573.                             background-color: transparent;
  574.                             border-right: 1px solid #fff;
  575.                             border-top: 1px solid #fff;
  576.                             border-bottom: 1px solid #fff;
  577.                             border-left: unset;
  578.                             color: #fff;
  579.                         }
  580.                     }
  581.                 }
  582.             }
  583.         }
  584.     }
  585. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!