Advertisement
Guest User

Untitled

a guest
Jul 28th, 2016
68
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.71 KB | None | 0 0
  1. /*** TestimonialS Slider - Free Weebly Widget by Baamboo Studio - Style 2 ***/
  2. .testimonial_slider_2{
  3. width:100%;
  4. border: 0px solid #ebebeb;
  5. overflow:hidden;
  6. box-sizing:border-box;
  7. padding-bottom:0px;
  8. }
  9. .testimonial_slider_2 input {
  10. display: none;
  11. }
  12.  
  13. .testimonial_slider_2 #slide_2_1:checked ~ .boo_inner { margin-left:0; }
  14. .testimonial_slider_2 #slide_2_2:checked ~ .boo_inner { margin-left:-100%; }
  15. .testimonial_slider_2 #slide_2_3:checked ~ .boo_inner { margin-left:-200%; }
  16. .testimonial_slider_2 #slide_2_4:checked ~ .boo_inner { margin-left:-300%; }
  17. .testimonial_slider_2 .boo_inner {
  18. width:400%;
  19. -webkit-transform: translateZ(0);
  20. -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  21. -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  22. -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  23. -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  24. transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  25.  
  26. -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  27. -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  28. -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  29. -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  30. transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  31. }
  32. .testimonial_slider_2 .slide_content{
  33. width:25%;
  34. float:left;
  35. }
  36. .testimonial_slider_2 #controls {
  37. text-align:center;
  38. }
  39. .testimonial_slider_2 #controls label{
  40. width:8px;
  41. height:8px;
  42. margin:0 5px;
  43. display:inline-block;
  44. background:#999; /* Change controls background color */
  45. border-radius:4px;
  46. -moz-border-radius:4px;
  47. -webkit-border-radius:4px;
  48. }
  49. .testimonial_slider_2 #slide_2_1:checked ~ #controls label:nth-child(1),
  50. .testimonial_slider_2 #slide_2_2:checked ~ #controls label:nth-child(2),
  51. .testimonial_slider_2 #slide_2_3:checked ~ #controls label:nth-child(3),
  52. .testimonial_slider_2 #slide_2_4:checked ~ #controls label:nth-child(4){
  53. background:#000; /* Change controls background color when mouse click */
  54. }
  55. .testimonial_2 {
  56. font-size: 16px !important;
  57. color: #333; /* Change testimonial paragraph text color */
  58. padding:30px 30px 23px;
  59. }
  60. .content_2 {
  61. position: relative;
  62. padding-left: 30px;
  63. margin-bottom: 30px;
  64. }
  65. .content_2:before,
  66. .content_2:after {
  67. content: "";
  68. height: 15px;
  69. width: 19px;
  70. position: absolute;
  71. }
  72. .content_2:before {
  73. background: url(icon_testimonial_2_before.png) 0 0 no-repeat;
  74. left: 0;
  75. }
  76. .content_2:after {
  77. background: url(icon_testimonial_2_after.png) 0 0 no-repeat;
  78. margin: 5px 10px;
  79. }
  80. .testimonial_2 p {
  81. display: inline;
  82. }
  83. .author_2 {
  84. margin-left: 30px;
  85. }
  86. .author_2 h3 {
  87. color: #333; /* Change author text color */
  88. font-size: 20px;
  89. font-weight: 600px;
  90. padding: 0 0 5px;
  91. }
  92. .author_2 h4 {
  93. color: #333; /* Change author text color */
  94. font-size: 20px;
  95. font-weight: 400;
  96. padding: 0 0 5px;
  97. }
  98. .author_2 h4 a {
  99. color: #999; /* Change company text link color */
  100. text-decoration: none;
  101. position: relative;
  102. padding-bottom: 1px;
  103. overflow: hidden;
  104. border-bottom: 1px solid;
  105. }
  106. .author_2 h4 a:after {
  107. background: #999; /* Change company border link background color */
  108. height: 1px;
  109. content: "";
  110. position: absolute;
  111. left: 0;
  112. bottom: -1px;
  113. width: 0;
  114. -o-transition: all .3s;
  115. -moz-transition: all .3s;
  116. -webkit-transition: all .3s;
  117. transition: all .3s;
  118. }
  119. .author_2 h4 a:hover {
  120. color: #000; /* Change company text link color when mouse over */
  121. border: none;
  122. }
  123. .author_2 h4 a:hover:after {
  124. border-color: #000;
  125. width: 100%;
  126. }
  127.  
  128. <!-- TestimonialS Slider - Free Weebly Widget by Baamboo Studio - Style 2 -->
  129. <div class="testimonial_slider_2">
  130. <input type="radio" name="slider_2" id="slide_2_1" checked />
  131. <input type="radio" name="slider_2" id="slide_2_2" />
  132. <input type="radio" name="slider_2" id="slide_2_3" />
  133. <input type="radio" name="slider_2" id="slide_2_4" />
  134. <div class="boo_inner clearfix">
  135. <div class="slide_content">
  136. <div class="testimonial_2">
  137. <div class="content_2">
  138. <p><i>
  139. This is the best eCommerce shop in Lebanon that truly does what it says. I purchased some stuff from their store and they arrived the next day as claimed! Will definitely re-purchase again.</i></p>
  140. </div>
  141. <div class="author_2">
  142. <h3>Sarah Hokayem</h3>
  143. <h4> Job Position / <a href="#">Company Name</a>
  144. </div>
  145. </div>
  146. </div>
  147. <div class="slide_content">
  148. <div class="testimonial_2">
  149. <div class="content_2">
  150. <p><i>I would like to say thank you for this amazing team behind for delivering the goods I had ordered on time. One of the rare companies in Lebanon that does eCommerce the right way.</i></p>
  151. </div>
  152. <div class="author_2">
  153. <h3>Mark Faddoul</h3>
  154. <h4> Job Position / <a href="#">Company Name</a></h4>
  155. </div>
  156. </div>
  157. </div>
  158. <div class="slide_content">
  159. <div class="testimonial_2">
  160. <div class="content_2">
  161. <p><i>This couldn't be any better than that! I ordered some Pasante condoms from my mobile phone and they arrived the same day to where I live. Highly recommend them to anyone!</i></p>
  162. </div>
  163. <div class="author_2">
  164. <h3>Bassil Freyha</h3>
  165. <h4> Job Position / <a href="#">Company Name</a></h4>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="slide_content">
  170. <div class="testimonial_2">
  171. <div class="content_2">
  172. <p><i>I stumbled across this website on Google, and thankfully found what I was looking for. I must say, this store looks amazing, has phenomenal support, has the best prices, and delivered promptly!</i></p>
  173. </div>
  174. <div class="author_2">
  175. <h3>Lara Assaf</h3>
  176. <h4> Job Position / <a href="#">Company Name</a></h4>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. <div id="controls">
  182. <label for="slide_2_1"></label>
  183. <label for="slide_2_2"></label>
  184. <label for="slide_2_3"></label>
  185. <label for="slide_2_4"></label>
  186. </div>
  187. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement