Advertisement
Guest User

CSS footer

a guest
Oct 14th, 2019
131
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.49 KB | None | 0 0
  1. .site-footer
  2. {
  3.   background-color:#26272b;
  4.   padding:45px 0 20px;
  5.   font-size:15px;
  6.   line-height:24px;
  7.   color:#737373;
  8. }
  9. .site-footer hr
  10. {
  11.   border-top-color:#bbb;
  12.   opacity:0.5
  13. }
  14. .site-footer hr.small
  15. {
  16.   margin:20px 0
  17. }
  18. .site-footer h6
  19. {
  20.   color:#fff;
  21.   font-size:16px;
  22.   text-transform:uppercase;
  23.   margin-top:5px;
  24.   letter-spacing:2px
  25. }
  26. .site-footer a
  27. {
  28.   color:#737373;
  29. }
  30. .site-footer a:hover
  31. {
  32.   color:#3366cc;
  33.   text-decoration:none;
  34. }
  35. .footer-links
  36. {
  37.   padding-left:0;
  38.   list-style:none
  39. }
  40. .footer-links li
  41. {
  42.   display:block
  43. }
  44. .footer-links a
  45. {
  46.   color:#737373
  47. }
  48. .footer-links a:active,.footer-links a:focus,.footer-links a:hover
  49. {
  50.   color:#3366cc;
  51.   text-decoration:none;
  52. }
  53. .footer-links.inline li
  54. {
  55.   display:inline-block
  56. }
  57. .site-footer .social-icons
  58. {
  59.   text-align:right
  60. }
  61. .site-footer .social-icons a
  62. {
  63.   width:40px;
  64.   height:40px;
  65.   line-height:40px;
  66.   margin-left:6px;
  67.   margin-right:0;
  68.   border-radius:100%;
  69.   background-color:#33353d
  70. }
  71. .copyright-text
  72. {
  73.   margin:0
  74. }
  75. @media (max-width:991px)
  76. {
  77.   .site-footer [class^=col-]
  78.   {
  79.     margin-bottom:30px
  80.   }
  81. }
  82. @media (max-width:767px)
  83. {
  84.   .site-footer
  85.   {
  86.     padding-bottom:0
  87.   }
  88.   .site-footer .copyright-text,.site-footer .social-icons
  89.   {
  90.     text-align:center
  91.   }
  92. }
  93. .social-icons
  94. {
  95.   padding-left:0;
  96.   margin-bottom:0;
  97.   list-style:none
  98. }
  99. .social-icons li
  100. {
  101.   display:inline-block;
  102.   margin-bottom:4px
  103. }
  104. .social-icons li.title
  105. {
  106.   margin-right:15px;
  107.   text-transform:uppercase;
  108.   color:#96a2b2;
  109.   font-weight:700;
  110.   font-size:13px
  111. }
  112. .social-icons a{
  113.   background-color:#eceeef;
  114.   color:#818a91;
  115.   font-size:16px;
  116.   display:inline-block;
  117.   line-height:44px;
  118.   width:44px;
  119.   height:44px;
  120.   text-align:center;
  121.   margin-right:8px;
  122.   border-radius:100%;
  123.   -webkit-transition:all .2s linear;
  124.   -o-transition:all .2s linear;
  125.   transition:all .2s linear
  126. }
  127. .social-icons a:active,.social-icons a:focus,.social-icons a:hover
  128. {
  129.   color:#fff;
  130.   background-color:#29aafe
  131. }
  132. .social-icons.size-sm a
  133. {
  134.   line-height:34px;
  135.   height:34px;
  136.   width:34px;
  137.   font-size:14px
  138. }
  139. .social-icons a.facebook:hover
  140. {
  141.   background-color:#3b5998
  142. }
  143. .social-icons a.twitter:hover
  144. {
  145.   background-color:#00aced
  146. }
  147. .social-icons a.linkedin:hover
  148. {
  149.   background-color:#007bb6
  150. }
  151. .social-icons a.dribbble:hover
  152. {
  153.   background-color:#ea4c89
  154. }
  155. @media (max-width:767px)
  156. {
  157.   .social-icons li.title
  158.   {
  159.     display:block;
  160.     margin-right:0;
  161.     font-weight:600
  162.   }
  163. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement