Advertisement
Guest User

Untitled

a guest
Nov 19th, 2017
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.87 KB | None | 0 0
  1. <!--FEEDBACKS-->   
  2.         <section class="s-article">
  3.             <div class="container">
  4.                 <div class="wrapper">
  5.                     <div class="wrapper catalog-name">
  6.                         <h1>Отзывы</h1>
  7.                     </div> 
  8. <!--LUTO-->
  9.                     <div class="w-feedbacks-frame">
  10.                         <div class="wrapper w-feedbacks-list">
  11.                             <div class="w-item">
  12.                                 <a href="" class="block__link">
  13.                                     <div class="responsive-box contain _140">
  14.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  15.                                     </div>
  16.                                     <span class="name">Название отзыва</span>
  17.                                 </a>
  18.                             </div>
  19.                             <div class="w-item">
  20.                                 <a href="" class="block__link">
  21.                                     <div class="responsive-box contain _140">
  22.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  23.                                     </div>
  24.                                     <span class="name">Название отзыва</span>
  25.                                 </a>
  26.                             </div>
  27.                             <div class="w-item">
  28.                                 <a href="" class="block__link">
  29.                                     <div class="responsive-box contain _140">
  30.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  31.                                     </div>
  32.                                     <span class="name">Название отзыва</span>
  33.                                 </a>
  34.                             </div>
  35.                             <div class="w-item">
  36.                                 <a href="" class="block__link">
  37.                                     <div class="responsive-box contain _140">
  38.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  39.                                     </div>
  40.                                     <span class="name">Название отзыва</span>
  41.                                 </a>
  42.                             </div>
  43.                             <div class="w-item">
  44.                                 <a href="" class="block__link">
  45.                                     <div class="responsive-box contain _140">
  46.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  47.                                     </div>
  48.                                     <span class="name">Название отзыва</span>
  49.                                 </a>
  50.                             </div>
  51.                             <div class="w-item">
  52.                                 <a href="" class="block__link">
  53.                                     <div class="responsive-box contain _140">
  54.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  55.                                     </div>
  56.                                     <span class="name">Название отзыва</span>
  57.                                 </a>
  58.                             </div>
  59.                             <div class="w-item">
  60.                                 <a href="" class="block__link">
  61.                                     <div class="responsive-box contain _140">
  62.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  63.                                     </div>
  64.                                     <span class="name">Название отзыва</span>
  65.                                 </a>
  66.                             </div>
  67.                             <div class="w-item">
  68.                                 <a href="" class="block__link">
  69.                                     <div class="responsive-box contain _140">
  70.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  71.                                     </div>
  72.                                     <span class="name">Название отзыва</span>
  73.                                 </a>
  74.                             </div>
  75.                             <div class="w-item">
  76.                                 <a href="" class="block__link">
  77.                                     <div class="responsive-box contain _140">
  78.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  79.                                     </div>
  80.                                     <span class="name">Название отзыва</span>
  81.                                 </a>
  82.                             </div>
  83.                             <div class="w-item">
  84.                                 <a href="" class="block__link">
  85.                                     <div class="responsive-box contain _140">
  86.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  87.                                     </div>
  88.                                     <span class="name">Название отзыва</span>
  89.                                 </a>
  90.                             </div>
  91.                             <div class="w-item">
  92.                                 <a href="" class="block__link">
  93.                                     <div class="responsive-box contain _140">
  94.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  95.                                     </div>
  96.                                     <span class="name">Название отзыва</span>
  97.                                 </a>
  98.                             </div>
  99.                             <div class="w-item">
  100.                                 <a href="" class="block__link">
  101.                                     <div class="responsive-box contain _140">
  102.                                         <div class="responsive-image" style="background-image: url(http://placehold.it/630x900)"></div>
  103.                                     </div>
  104.                                     <span class="name">Название отзыва</span>
  105.                                 </a>
  106.                             </div>
  107.                         </div> 
  108.                     </div>
  109.  
  110. <style>
  111. .w-feedbacks-frame {
  112.     padding: 20px;
  113. }
  114. .w-feedbacks-list .block__link {
  115.     display: block;
  116.     text-decoration: none;
  117.     font-size: 14px;
  118.     line-height: 16px;
  119. }
  120. .w-feedbacks-list .name {
  121.     margin: 10px 0;
  122.     color: #e88a4b;
  123.     display: block;
  124. }
  125. .w-feedbacks-list .block__link:hover .name {
  126.     text-decoration: underline;
  127. }
  128. .w-feedbacks-list .block__link:hover .responsive-image {
  129.     opacity: 0.8;
  130. }
  131. .w-feedbacks-list {
  132.     width: 102%;
  133.     margin-left: -1%;
  134.     font-size: 0;
  135.     line-height: 0;
  136. }
  137. .w-feedbacks-list .w-item {
  138.     display: inline-block;
  139.     vertical-align: top;
  140.     width: 18%;
  141.     margin: 0 1% 15px 1%;
  142. }
  143. .responsive-box {
  144.   position: relative;
  145.   width: 100%;
  146.   background-color: #fff;
  147. }
  148. .responsive-box::before {
  149.   content: "";
  150.   display: block;
  151.   padding-top: 100%;
  152. }
  153. .responsive-box._140::before {
  154.   padding-top: 140%;
  155. }
  156. .responsive-box .responsive-image {
  157.   position: absolute;
  158.   top: 0;
  159.   left: 0;
  160.   right: 0;
  161.   bottom: 0;
  162.   background-position: center;
  163.   -webkit-background-size: cover;
  164.   background-size: cover;
  165.   background-repeat: no-repeat;
  166.   content: "";
  167. }
  168. .responsive-box .responsive-image.contain {
  169.   -webkit-background-size: contain;
  170.   background-size: contain;
  171. }
  172. @media (max-width: 1225px) {
  173.     .w-feedbacks-list .w-item {width: 23%;}
  174. }
  175. @media (max-width: 990px) {
  176.     .w-feedbacks-list .w-item {width: 31.1%;}
  177. }
  178. @media (max-width: 590px) {
  179.     .w-feedbacks-list .w-item {width: 48%;}
  180. }
  181. @media (max-width: 450px) {
  182.     .w-feedbacks-list {width: 100%; margin-left: 0;}
  183.     .w-feedbacks-list .w-item {width: 100%;}
  184. }
  185. </style>
  186. <!--LUTO END-->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement