Advertisement
Suwandiaminsangaji

testimonials css

Mar 22nd, 2022
1,398
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.59 KB | None | 0 0
  1. /* testimonial */
  2. .testimonials{
  3.   margin-top: 20%;
  4.   margin-bottom: 10%;
  5. }
  6.  
  7. .testi-title h1{
  8. font-family: Helvetica;
  9. font-style: normal;
  10. font-weight: bold;
  11. font-size: 24px;
  12. line-height: 36px;
  13. color: #000000;
  14. }
  15. .testi-title p{
  16. font-family: Helvetica;
  17. font-style: normal;
  18. font-weight: 300;
  19. font-size: 14px;
  20. line-height: 20px;
  21. color: #000000;
  22. }
  23.  
  24. .shadow-effect {
  25. background: #F1F3FF;
  26. padding: 10px;
  27. border-radius: 4px;
  28. text-align: center;
  29. box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
  30. border-radius: 8px;
  31. }
  32. #testimonials-list .shadow-effect p {
  33. font-family: Helvetica;
  34. font-style: normal;
  35. font-weight: 300;
  36. font-size: 14px;
  37. line-height: 20px;
  38. color: #000000;
  39. flex: none;
  40. order: 1;
  41. flex-grow: 0;
  42. margin: 8px 0px;
  43.  
  44. }
  45. .testimonial-name {
  46. margin: -17px auto 0;
  47. display: table;
  48. width: auto;
  49. background: #0D28A6;
  50. padding: 9px 35px;
  51. border-radius: 12px;
  52. text-align: center;
  53. color: #fff;
  54. box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
  55. }
  56. #testimonials-list .item {
  57. text-align: center;
  58. /* padding: 50px; */
  59. margin-bottom:80px;
  60. opacity: .3;
  61. -webkit-transform: scale3d(0.8, 0.8, 1);
  62. transform: scale3d(0.8, 0.8, 1);
  63. transition: all 0.3s ease-in-out;
  64. }
  65.  
  66. #testimonials-list .owl-item.active.center .item {
  67. opacity: 1;
  68. -webkit-transform: scale3d(1.0, 1.0, 1);
  69. transform: scale3d(1.0, 1.0, 1);
  70. }
  71. .owl-carousel .owl-item img {
  72. -webkit-transform-style: preserve-3d;
  73.         transform-style: preserve-3d;
  74. max-width: 90px;
  75. border-radius: 50%;
  76. margin: 0 auto 17px;
  77. }
  78. #testimonials-list.owl-carousel .owl-dots .owl-dot.active span,
  79. #testimonials-list.owl-carousel .owl-dots .owl-dot:hover span {
  80. background: #0D28A6;
  81. -webkit-transform: translate3d(0px, -50%, 0px) scale(0.7);
  82.         transform: translate3d(0px, -50%, 0px) scale(0.7);
  83. }
  84. #testimonials-list.owl-carousel .owl-dots{
  85. display: inline-block;
  86. width: 100%;
  87. text-align: center;
  88. }
  89. #testimonials-list.owl-carousel .owl-dots .owl-dot{
  90. display: inline-block;
  91. }
  92. #testimonials-list.owl-carousel .owl-dots .owl-dot span {
  93. background: #0D28A6;
  94. display: inline-block;
  95. height: 20px;
  96. margin: 0 2px 5px;
  97. -webkit-transform: translate3d(0px, -50%, 0px) scale(0.3);
  98.         transform: translate3d(0px, -50%, 0px) scale(0.3);
  99. -webkit-transform-origin: 50% 50% 0;
  100.         transform-origin: 50% 50% 0;
  101. transition: all 250ms ease-out 0s;
  102. width: 20px;
  103. border-radius: 100%;
  104. }
  105.  
  106. .card{
  107.   width: 100%;
  108.   height: auto;
  109.  
  110. }
  111. .card-body-blue{
  112. width: 100%;
  113. height: 280px;
  114. background: #0D28A6;
  115. border-radius: 13px;
  116. }
  117. .card-title {
  118. font-family: Helvetica;
  119. font-style: normal;
  120. font-weight: bold;
  121. font-size: 36px;
  122. line-height: 150%;
  123. text-align: center;
  124. color: #FFFFFF;
  125. margin: 30px;
  126. }
  127. .card-body-blue p{
  128.   font-family: Helvetica;
  129.   font-style: normal;
  130.   font-weight: 300;
  131.   font-size: 14px;
  132.   line-height: 20px;
  133.   text-align: center;
  134.   color: #FFFFFF;
  135. }
  136. .tombol{
  137.   margin-top: 0;
  138. }
  139.  
  140. @media screen and (max-width: 768px){
  141.   .card-body-blue{
  142.     width: 100%;
  143.     height: 100%;
  144.     top: auto;
  145.     background: #0D28A6;
  146.     border-radius: 13px;
  147.     padding-bottom: 30px;
  148.    
  149.   }
  150.   .card-title {
  151.     font-family: Helvetica;
  152.     font-style: normal;
  153.     font-weight: bold;
  154.     font-size: 24px;
  155.     line-height: 150%;
  156.     text-align: center;
  157.     color: #FFFFFF;
  158.     margin: 30px;
  159.   }
  160.   .card-body-blue p{
  161.     font-family: Helvetica;
  162.     font-style: normal;
  163.     font-weight: 300;
  164.     font-size: 14px;
  165.     line-height: 20px;
  166.     text-align: center;
  167.     color: #FFFFFF;
  168.     padding-left: 15px;
  169.     padding-right: 15px;
  170.   }
  171.   .tombol{
  172.     margin-bottom: 20px;
  173.   }
  174. }
  175. /* end testimonial */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement