Advertisement
vitareinforce

swiper css

Jan 19th, 2023
29
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.33 KB | None | 0 0
  1. #home-clients {
  2. background-color: #ffffff;
  3. margin-top: 0px;
  4. .container-fluid {
  5. padding: 56px 152px 48px 140px;
  6. .row {
  7. display: flex;
  8. align-items: start;
  9. justify-content: start;
  10. .col-lg-5 {
  11. .h1 {
  12. font-family: 'Open Sans';
  13. font-size: 32px;
  14. font-weight: 400;
  15. b {
  16. font-weight: 700;
  17. }
  18. }
  19. p {
  20. font-family: 'Open Sans';
  21. font-size: 20px;
  22. font-weight: 400;
  23. }
  24. }
  25. }
  26. }
  27. .swiper.clients {
  28. user-select: none;
  29. box-sizing: border-box;
  30. overflow: hidden;
  31. width: 800px;
  32. height: 800px;
  33. padding-top: 0px;
  34. padding-bottom: 0px;
  35. .swiper-wrapper {
  36. .swiper-slide {
  37. display: flex;
  38. align-items: center;
  39. justify-content: center;
  40. width: 100%;
  41. height: 100%;
  42. color: #fff;
  43. overflow: hidden;
  44. position: relative;
  45. box-sizing: border-box;
  46. border-radius: 0px;
  47. padding: 48px 48px 48px 48px;
  48. .swiper-slide-content {
  49. width: 100%;
  50. height: 100%;
  51. display: flex;
  52. flex-direction: column;
  53. position: relative;
  54. z-index: 1;
  55. box-sizing: border-box;
  56. align-items: center;
  57. justify-content: flex-end;
  58. text-align: center;
  59. background-color: #1B3165;
  60. .swiper-description {
  61. background: rgba(255, 255, 255, 0.2);
  62. border-radius: 16px;
  63. box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  64. backdrop-filter: blur(5px);
  65. -webkit-backdrop-filter: blur(5px);
  66. border: 1px solid rgba(255, 255, 255, 0.3);
  67. margin: 48px 48px 48px 48px;
  68. padding: 15px 15px 15px 15px;
  69. height: auto;
  70. .swiper-slide-title {
  71. font-size: 21px;
  72. font-weight: bold;
  73. letter-spacing: 0.03em;
  74. color: rgba(255, 255, 255, 1);
  75. }
  76.  
  77. .swiper-slide-text {
  78. max-width: 640px;
  79. font-size: 14px;
  80. line-clamp: 2;
  81. color: rgba(255, 255, 255, 1);
  82. }
  83.  
  84. .swiper-slide-title + .swiper-slide-text {
  85. margin-top: 8px;
  86. }
  87.  
  88. .swiper-description-expand {
  89. max-width: 640px;
  90. font-size: 14px;
  91. line-height: 1.4;
  92. color: rgba(255, 255, 255, 1);
  93. }
  94. }
  95.  
  96. .swiper-slide-image {
  97. margin: 48px 48px 48px 48px;
  98. width: 400px;
  99. height: 400px;
  100. bottom: 20%;
  101. object-fit: contain;
  102. position: absolute;
  103. display: flex;
  104. align-items: center;
  105. justify-content: center;
  106. }
  107. }
  108. }
  109. }
  110. }
  111. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement