Advertisement
martawijaya

imm blog

Apr 17th, 2019
242
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.76 KB | None | 0 0
  1. /*
  2. OLD BLOG
  3. */
  4.  
  5. .old-blog {
  6.   padding-top: 200px
  7. }
  8.  
  9. .old-blog .title-blog-post {
  10.   text-align: center;
  11.   border-bottom: 2px solid #989898;
  12.   margin-bottom: 40px;
  13. }
  14.  
  15. .old-blog .title-blog-post h1 {
  16.    color: #41C3FF;
  17.    margin-bottom: 30px
  18. }
  19.  
  20. /*
  21. OLD STYLE
  22. */
  23.  
  24. .blogpost-content-wrapper h2 {
  25.   margin: 30px 0
  26. }
  27.  
  28. .blogpost-content-wrapper h3 {
  29.   margin: 15px 0
  30. }
  31.  
  32. .blogpost-content-wrapper p {
  33.   font-size: 20px;
  34. }
  35.  
  36. .blogpost-content-wrapper a {
  37.   font-size: unset
  38. }
  39.  
  40. .blogpost-content-wrapper img {
  41.   width: 100%;
  42.   margin: 15px 0;
  43.   object-fit: cover;
  44. }
  45.  
  46.  
  47. /*
  48. SIDEBAR
  49. */
  50.  
  51. .blogpost-sidebar-wrapper .search-form button {
  52.     background-color: #41C3FF;
  53.     border: none;
  54. }
  55.  
  56. .blogpost-sidebar-wrapper ul{
  57.   list-style: none;
  58. }
  59.  
  60. /*
  61. BACKGROUND POST
  62. */
  63. .blog-post-thumb-bg {
  64.   height: 100vh;
  65.   position: relative;
  66.   background-position: center;
  67.   background-size: cover;
  68.   background-repeat: no-repeat;
  69.   margin-bottom: 100px
  70. }
  71.  
  72. .heading-blog-post {
  73.   position: relative;
  74.   height: 100vh;
  75. }
  76.  
  77. .heading-blog-post h1 {
  78.   position: absolute;
  79.   top: 80%;
  80.   left: 0;
  81.   transform: translate(0%, -80%);
  82.   color: #41C3FF;
  83.   font-size: 45px;
  84. }
  85.  
  86. .heading-blog-post h1 span:nth-child(1) {
  87.   color: #fff;
  88.   display: block;
  89. }
  90.  
  91. /* SINGLE MODERN BLOG */
  92.  
  93. .imm-blog-heading .title-blog-heading h2 {
  94.   color: #A5CD39;
  95.   margin-bottom: 15px;
  96.   display: block;
  97.   font-weight: bold;
  98.   font-size: 3rem;
  99. }
  100.  
  101. .imm-blog-heading .blog-breadcrumb {
  102.   font-size: 1.4rem;
  103.   font-weight: 600;
  104. }
  105.  
  106. .imm-blog-heading .blog-breadcrumb .blue-text{
  107.   color: #41C3FF;
  108. }
  109.  
  110. .imm-blog-heading .description-blog {
  111.   margin-top: 50px;
  112.   padding: 0 20% 0 0;
  113.   line-height: 1.7;
  114. }
  115.  
  116. .imm-blog-heading .description-blog h3 {
  117.   color: #157282;
  118.   margin-bottom: 15px;
  119.   display: block;
  120.   font-weight: bold;
  121.   line-height: 1.7;
  122.   font-size: 2.5rem;
  123. }
  124.  
  125. .imm-blog-heading .description-blog img {
  126.   width: 100%;
  127.   height: auto;
  128.   margin: 30px 0 50px 0
  129. }
  130.  
  131. /*
  132. * IMM QNA
  133. */
  134.  
  135. .imm-qna-wrapper {
  136.   padding: 100px 0;
  137. }
  138.  
  139. .imm-qna-wrapper .question-text p{
  140.   font-weight: 600;
  141.   font-size: 22px
  142. }
  143.  
  144. .imm-qna-wrapper .answer-text {
  145.   position: relative;
  146.   padding: 40px 20% 40px 0;
  147.   font-weight: bold;
  148. }
  149.  
  150. .imm-qna-wrapper .answer-text p {
  151.   font-size: 28px;
  152. }
  153.  
  154. .imm-qna-wrapper .desc-quote {
  155.   line-height: 1.8;
  156. }
  157.  
  158. .imm-qna-wrapper .desc-quote p {
  159.   font-size: 0.9em;
  160. }
  161.  
  162. .imm-qna-wrapper .quote-logo-top {
  163.   position: absolute;
  164.   left: -30px;
  165.   top: 10px;
  166.   transform: scale(1.5);
  167.   color: #cccccc;
  168. }
  169. .imm-qna-wrapper .quote-logo-bottom {
  170.   position: absolute;
  171.   right: 20%;
  172.   bottom: 40px;
  173.   transform: scale(1.5) rotate(180deg);
  174.   color: #cccccc;
  175. }
  176.  
  177.  
  178. /*
  179. *BLOG CHECKLIST
  180. */
  181.  
  182. .imm-checklist .checklist-title {
  183.   margin-bottom: 50px;
  184. }
  185. .imm-checklist .checklist-title h2 {
  186.   color: #157282;
  187.   margin-bottom: 15px;
  188.   display: block;
  189.   font-weight: bold;
  190.   font-size: 3rem;
  191. }
  192.  
  193. .imm-checklist .checklist-wrap {
  194.   margin: 0 0px 50px 0;
  195.   display: block;
  196.   overflow: auto;
  197. }
  198.  
  199. .imm-checklist .checlist-img, .imm-checklist .checklist-text {
  200.   display: inline-block;
  201.   float: left;
  202. }
  203.  
  204. .imm-checklist .checlist-img {
  205.   width: 10%;
  206. }
  207.  
  208. .imm-checklist .checklist-text {
  209.   width: 80%;
  210.   line-height: 1.7
  211. }
  212.  
  213. .imm-checklist .checlist-img i {
  214.   font-size: 2em;
  215.   color: #A5CD39;
  216. }
  217.  
  218. /*
  219. * BLOG FULL IMAGE
  220. */
  221.  
  222. .blog-background-image {
  223.   background-size: cover;
  224.   background-position: center;
  225.   background-repeat: no-repeat;
  226. }
  227.  
  228.  
  229. /* IMM NAVIGATION */
  230. .blog-navigation {
  231.   padding: 40px 0;
  232. }
  233. .blog-navigation .nav-arrow {
  234.   margin-bottom: 10px;
  235. }
  236.  
  237. .blog-navigation .nav-arrow .arrow-wrap {
  238.   display: inline-block;
  239.   height: 100%;
  240.   position: relative;
  241.   height: 15px;
  242.   width: 25px;
  243.   line-height: 1;
  244.   vertical-align: middle;
  245.   -webkit-transition: all .5s ease;
  246.   -o-transition: all .5s ease;
  247.   transition: all .5s ease;
  248. }
  249.  
  250. .blog-navigation .nav-arrow .arrow-wrap span{
  251.     width: 26px;
  252.     position: absolute;
  253.     right: 0;
  254.     top: 0;
  255.     -webkit-transition: all .3s ease;
  256.     -o-transition: all .3s ease;
  257.     transition: all .3s ease;
  258.     content: "";
  259.     position: absolute;
  260.     background: #A5CD39;
  261.     height: 1px;
  262. }
  263.  
  264. .blog-navigation .nav-arrow .arrow-wrap span:first-child {
  265.    top: 5px;
  266. }
  267.  
  268. .blog-navigation .nav-arrow .arrow-wrap span:nth-child(2) {
  269.    right: 0;
  270.     top: 2px;
  271.     width: 9px;
  272.     -webkit-transform: rotate(40deg);
  273.     -ms-transform: rotate(40deg);
  274.     transform: rotate(40deg);
  275. }
  276.  
  277. .blog-navigation .nav-arrow .arrow-wrap span:nth-child(3) {
  278.     right: 0;
  279.     top: 8px;
  280.     width: 9px;
  281.     bottom: 0;
  282.     -webkit-transform: rotate(-40deg);
  283.     -ms-transform: rotate(-40deg);
  284.     transform: rotate(-40deg);
  285. }
  286.  
  287. .blog-navigation .sign-wrap {
  288.   display: inline-block
  289. }
  290.  
  291. .blog-navigation .previous-post .arrow-wrap {
  292.   transform: rotate(180deg) translate(0px, 2px)
  293. }
  294.  
  295. .blog-navigation .sign-wrap {
  296.   font-size: 15px;
  297.   font-weight: 600;
  298.   margin-left: 15px
  299. }
  300.  
  301. .blog-navigation .title-prev span, .blog-navigation .title-next span {
  302.   font-size: 14px;
  303.   color: #157282;
  304.   font-weight: bold;
  305.   display: block;
  306.   padding-right: 50px;
  307. }
  308.  
  309. .blog-navigation .next-post .sign-wrap{
  310.   margin-left: 0;
  311.   margin-right: 15px
  312. }
  313.  
  314. .blog-navigation .next-post .nav-arrow .arrow-wrap {
  315.   transform: translate(0, 2px)
  316. }
  317.  
  318. .social-media-wrap span {
  319.   font-size: 15px;
  320.   font-weight: 600;
  321.   margin-bottom: 20px;
  322.   display: block;
  323. }
  324.  
  325. .social-media-wrap .social-media-list {
  326.   list-style: none;
  327.   padding: 0;
  328. }
  329.  
  330. .social-media-wrap .social-media-list li {
  331.   display: inline-block;
  332. }
  333.  
  334. .social-media-wrap .social-media-list li a {
  335.   color: #fff;
  336.   font-size: 12px;
  337.   text-align: center;
  338.   padding: 10px;
  339.   background: #41C3FF;
  340.   margin-right: 8px;
  341. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement