Advertisement
Katsiree

Untitled

Apr 30th, 2019
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.48 KB | None | 0 0
  1.  
  2.   .wrapper {
  3.     margin: 30px auto;
  4.     width: 100%;
  5.   }
  6.   .page {
  7.     background: #FFF;
  8.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  9.   }
  10.  
  11.   .title {
  12.     display: inline-block;
  13.     font-size: 1.6em;
  14.     line-height: 1.25em;
  15.     background: #1b7700;
  16.     color: #FFF;
  17.     margin: 10px 0 0 -20px;
  18.     padding: 10px 30px;
  19.     position: relative;
  20.     font-weight: 500;
  21.     z-index: 1;
  22.     position: absolute;
  23.   }
  24.  
  25.   .title:before {
  26.     bottom: -20px;
  27.     left: 0;
  28.     content: " ";
  29.     width: 0;
  30.     height: 0;
  31.     border-style: solid;
  32.     border-width: 0 20px 20px 0;
  33.     border-color: rgba(0, 0, 0, 0) #002F12 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  34.     position: absolute;
  35.     z-index: 0;
  36.   }
  37.  
  38. .box_news{
  39.     width:401px;
  40.     display:inline-block;
  41.     margin: 1px 0px;
  42.     border-radius: 0px;
  43. }
  44.  
  45. .box_news_mini{
  46.     width:266px;
  47.     display:inline-block;
  48.     margin: 1px 0px;
  49.     border-radius: 0px;
  50. }
  51.  
  52.  
  53. figure.snip1 {
  54.     position: relative;
  55.     overflow: hidden;
  56.     margin: 5px;
  57.     width: 100%;
  58.     height: 407px;
  59.     background: #000000;
  60.     text-align: left;
  61.     color: #ffffff;
  62.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  63. }
  64.  
  65. figure.snip2 {
  66.     position: relative;
  67.     overflow: hidden;
  68.     margin: 3px;
  69.     background: #000000;
  70.     text-align: left;
  71.     color: #ffffff;
  72.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  73.     height: 180px;
  74. }
  75.  
  76. figure.snip3 {
  77.     position: relative;
  78.     overflow: hidden;
  79.     margin: 3px;
  80.     height: 220px;
  81.     background: #000000;
  82.     text-align: left;
  83.     color: #ffffff;
  84.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  85. }
  86.  
  87. figure.snip1 img,
  88. figure.snip2 img,
  89. figure.snip3 img {
  90.     width: 100%;
  91.     vertical-align: top;
  92.     position: relative;
  93.     box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
  94.     -webkit-transition: all 0.15s ease-in-out;
  95.     -moz-transition: all 0.15s ease-in-out;
  96.     -ms-transition: all 0.15s ease-in-out;
  97.     -o-transition: all 0.15s ease-in-out;
  98.     transition: all 0.15s ease-in-out;
  99. }
  100.  
  101. figure.snip1 img:hover,
  102. figure.snip2 img:hover,
  103. figure.snip3 img:hover {
  104.     -moz-transform: scale(1.1);
  105.     -webkit-transform: scale(1.1);
  106.     -o-transform: scale(1.1);
  107.     -ms-transform: scale(1.1);
  108.     transform: scale(1.1);
  109. }
  110.  
  111.  
  112. figure.snip1 figcaption {
  113.     background-color: rgba(0, 0, 0, 0.5);
  114.     position: absolute;
  115.     bottom: 0;
  116.     left: 0;
  117.     width: 100%;
  118.     padding: 15px 20px;
  119. }
  120.  
  121. figure.snip2 figcaption,
  122. figure.snip3 figcaption {
  123.     background-color: rgba(0, 0, 0, 0.5);
  124.     position: absolute;
  125.     bottom: 0;
  126.     left: 0;
  127.     width: 100%;
  128.     padding: 5px 10px;
  129. }
  130.  
  131. figure.snip1 figcaption h3,
  132. figure.snip2 figcaption h3,
  133. figure.snip3 figcaption h3,
  134. figure.snip1 figcaption p,
  135. figure.snip2 figcaption p,
  136. figure.snip3 figcaption p {
  137.     margin: 0 0 5px;
  138. }
  139.  
  140. figure.snip1 figcaption h3,
  141. figure.snip2 figcaption h3,
  142. figure.snip3 figcaption h3 {
  143.     color: #fff;
  144.     font-weight: 600;
  145.     padding: 0 15px;
  146. }
  147.  
  148. figure.snip1 figcaption h3{
  149.     color: #fff;
  150.     font-weight: 600;
  151. }
  152.  
  153. figure.snip2 figcaption h3,
  154. figure.snip3 figcaption h3 {
  155.     color: #fff;
  156.     font-weight: 600;
  157.     font-size: 15px;
  158. }
  159.  
  160. figure.snip1 figcaption p,
  161. figure.snip3 figcaption p {
  162.     color: #fff;
  163.     font-size: 13px;
  164. }
  165.  
  166. figure.snip2 figcaption p,
  167. figure.snip3 figcaption p {
  168.     color: #fff;
  169.     font-size: 11px;
  170. }
  171.  
  172. .hotnews_head {
  173.     background: #1b7700;
  174.     color: #FFF;
  175.     font-size: 22px;
  176.     width: 200px;
  177.     padding: 10px;
  178.     margin: 20px 0px 0px 0px;
  179. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement