martawijaya

Project css

Apr 21st, 2019
191
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
C++ 3.82 KB | None | 0 0
  1. /*
  2. IMM GRID CONTENT TEMPLATE
  3. */
  4.  
  5. .imm-content-grid.template-1:before {
  6.     content: "";
  7.     position: absolute;
  8.     width: 100%;
  9.     height: 100vh;
  10.     left: 0;
  11.     top: 70px;
  12.     background: #8888881c;
  13. }
  14.  
  15.  
  16. /* IMAGE COLUMN */
  17.  
  18. .imm-image-column {
  19.   margin: 100px 100px;
  20. }
  21.  
  22. .imm-image-column .gallery-section {
  23.   position: relative;
  24.   overflow: hidden;
  25. }
  26.  
  27. .imm-image-column .image-column-item{
  28.   width: 50%;
  29.   display: inline-block;
  30.   float: left;
  31. }
  32.  
  33. .imm-image-column .image-column-item img{
  34.   width: 100%;
  35.   padding: 0 25px 25px 0;
  36.   object-fit: cover;
  37. }
  38.  
  39. .imm-image-column .item-1 img, .imm-image-column .item-2 img, .image-column-item.item-6 img {
  40.   height: 700px;
  41. }
  42.  
  43. .image-column-item.item-3 {
  44.   width: 100%;
  45. }
  46.  
  47. .image-column-item.item-3 img {
  48.   height: 317px;
  49. }
  50.  
  51. .image-column-item.item-4 img, .image-column-item.item-5 img {
  52.   height: 383px;
  53. }
  54.  
  55. .imm-background-image {
  56.   background-size: cover;
  57.   background-repeat: no-repeat;
  58.   background-position: center;
  59. }
  60.  
  61. /* imm-paragraph-gallery */
  62.  
  63. .imm-paragraph-gallery .paragraph-wrap {
  64.   background-color: #f2f2f2;
  65.   padding: 45px 0;
  66. }
  67.  
  68. .imm-paragraph-gallery .paragraph-col {
  69.   padding-left: 20px;
  70.   padding-right: 140px;
  71. }
  72.  
  73. .imm-paragraph-gallery .paragraph-wrap p {
  74.   font-family: 'Open Sans';
  75.   font-size: 14px;
  76.   font-weight: 400;
  77.   text-align: justify;
  78. }
  79.  
  80. .imm-paragraph-gallery .gallery-column-wrap {
  81.   margin-top: -280px;
  82. }
  83.  
  84. .imm-paragraph-gallery .gallery-column-wrap .row {
  85.   margin: 0 100px;
  86. }
  87.  
  88. .imm-paragraph-gallery .gallery-column-left {
  89.   padding-left: 0;
  90.   padding-right: 30px
  91. }
  92.  
  93. .imm-paragraph-gallery .gallery-column-right {
  94.   padding-left: 0;
  95.   padding-right: 30px
  96. }
  97.  
  98. .imm-paragraph-gallery .image-gallery-item {
  99.   margin-bottom: 30px;
  100. }
  101.  
  102. .imm-paragraph-gallery .image-gallery-item img {
  103.   width: 100%
  104. }
  105.  
  106.  
  107. /* Nav post project */
  108.  
  109. .nav-post-project {
  110.   margin: 150px 100px 50px 100px;
  111. }
  112.  
  113. .nav-post-project a {
  114.   position: relative;
  115.   top: 0;
  116.   left: 0;
  117.   right: 0;
  118.   bottom: 0;
  119.   width: 100%;
  120.   display: block;
  121. }
  122.  
  123. .nav-post-project .thumbnail-nav-project {
  124.   text-align: center;
  125. }
  126.  
  127. .nav-post-project .thumbnail-nav-project img {
  128.   width: 200px;
  129.   height: 120px;
  130.   margin: 0 auto;
  131.   object-fit: cover;
  132. }
  133.  
  134. .nav-post-project p {
  135.   text-align: center;
  136.   margin-top: 15px;
  137.   margin-bottom : 0;
  138.   font-family: 'Open Sans';
  139. }
  140.  
  141. .nav-post-project .arrow-link-project {
  142.   width: 50px;
  143.   height: 50px;
  144.   padding-left: 20px;
  145.   position: absolute;
  146.   top: 50%;
  147.   left: 0;
  148.   transform: translate(0, -49%);
  149. }
  150.  
  151. .nav-post-project .previous-post .arrow-link-project {
  152.   left: -20px;
  153. }
  154.  
  155. .nav-post-project .next-post .arrow-link-project {
  156.   left: unset;
  157.   right: -20px;
  158.   transform: translate(0px, -50%) rotate(180deg)
  159. }
  160.  
  161. .nav-post-project .arrow-link-project span {
  162.   width: 2px;
  163.   height: 35px;
  164.   background: #000;
  165.   display: block;
  166. }
  167.  
  168. .nav-post-project .arrow-link-project span:nth-child(1) {
  169.   transform: rotate(45deg) translate(0, 0px);
  170. }
  171.  
  172. .nav-post-project .arrow-link-project span:nth-child(2) {
  173.   transform: rotate(-45deg) translate(8px, -7px)
  174. }
  175.  
  176. /* */
  177. .wrap-project-construction .project-construction-des {
  178.   width: 100%;
  179.   top: 50%;
  180.   transform: translateY(-50%);
  181. }
  182.  
  183. .wrap-project-construction .project-construction-img {
  184.   height: 60vh;
  185. }
  186.  
  187.  
  188. /* image column full width */
  189.  
  190. .imm-image-column-full {
  191.   margin: 100px 0;
  192.   margin-bottom: 0;
  193. }
  194.  
  195. .imm-image-column-full .image-column-wrap {
  196.   overflow: hidden;
  197. }
  198.  
  199. .imm-image-column-full .image-column-item {
  200.   display: inline-block;
  201.   width: 50%;
  202.   float: left;
  203. }
  204.  
  205. .imm-image-column-full .image-column-item img {
  206.   width: 100%;
  207. }
  208.  
  209. .imm-image-column-full .image-column-item.item-1 img{
  210.   padding-right: 15px;
  211. }
  212.  
  213. .imm-image-column-full .image-column-item.item-2 img {
  214.   padding-left: 15px
  215. }
Advertisement
Add Comment
Please, Sign In to add comment