CSS 16
Footer2.css Guest on 6th February 2021 10:04:02 AM
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. footer {
  5.     clear:both;
  6.     width: 100%;
  7.     height: 52px;
  8.     color: #FFF;
  9.     letter-spacing: 0.03em;
  10.     padding: 20px 0px;
  11.     position: absolute;
  12.     left: 0;
  13.     bottom: 0;
  14.     background-color: #636363;
  15. }
  16.  
  17.  
  18. footer .wrapper {
  19.     height: 30px;
  20.     margin: 0 auto;
  21. }
  22.  
  23. footer a.logo {
  24.     background: url("/neuhome/images/logo-footer.png") no-repeat scroll left top transparent;
  25.     color: #FFFFFF;
  26.     float: left;
  27.     font-family: Georgia,Times,Arial,serif;
  28.     font-size: 18px;
  29.     height: 17px;
  30.     margin-right: 20px;
  31.     padding: 0;
  32.     text-decoration: none;
  33.     width: 173px;
  34. }
  35.  
  36. #footerlinks {
  37.     display: block;
  38.     width: 640px;
  39.     float: right;}
  40. .info {
  41.     display: inline;
  42.     float: left;
  43.     font-size: 12px;
  44.     list-style-type: none;
  45.     margin: 0px;
  46.     color: #CCC;
  47. }
  48.  
  49. footer .info a:link, footer .contact {
  50.     font-family: Arial,Verdana,Sans-Serif !important;
  51. }
  52.  
  53. .info li {
  54.     float: left;
  55.     margin-right: 15px;
  56. }
  57.  
  58. .info li:after {
  59.     content: "\00b7";
  60. }
  61.  
  62. .info li:last-child:after {
  63.     content: "";
  64.     margin-right: 0;
  65.     padding-right: 0;
  66. }
  67.  
  68. footer .info a {
  69.     margin-right: 15px;
  70. }
  71.  
  72. footer .info a:link, footer .info a:visited {
  73.     color: #FFF;
  74.     text-decoration: none;
  75. }
  76.    
  77. footer .info a:hover, footer .info a:active {
  78.     color: #CCC;
  79.     text-decoration: underline;
  80. }
  81.  
  82. footer .contact {
  83.     clear: both;
  84.     font-size: 100%;
  85.     height: auto;
  86.     margin: 25px 0px 0px 0px;
  87.     padding: 0;
  88.     color: #CCC;
  89. }    
  90. footer a:link, footer a:visited {
  91.     color: #FFF;
  92.     text-decoration: none;
  93. }
  94.  
  95. footer a:hover {
  96.     color: #FFF;
  97.     text-decoration: underline;
  98. }
  99.    
  100. footer p {
  101.     margin-bottom: 10px;
  102.     line-height: 100%;
  103.     color: #FFF;
  104. }
  105.  
  106.  
  107. /****************************************************************************************************************************
  108. * LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 *
  109. ****************************************************************************************************************************/
  110.  
  111. /*      Tablet Layout: 768px.
  112.         Gutters: 24px.
  113.         Outer margins: 28px.
  114.         Inherits styles from: Default Layout.
  115. -----------------------------------------------------------------
  116. cols    1     2      3      4      5      6      7      8
  117. px      68    160    252    344    436    528    620    712    */
  118.  
  119. @media only screen and (min-width: 768px) and (max-width: 991px) {
  120.    
  121.  
  122.  
  123. footer {
  124.     font-size: 10px;
  125.     margin-left: auto;
  126.     margin-right: auto;
  127.     text-align: left;
  128.     vertical-align: middle;
  129.     width: 100%;
  130. }
  131.  
  132. footer a.logo {
  133.     font-size: 14px;
  134.     margin-right: 20px;
  135.     padding: 0;
  136.     text-decoration: none;
  137. }
  138.  
  139. #footerlinks {
  140.     width: 440px;
  141. }
  142.  
  143. .info {
  144.     font-size: 10px;
  145.     padding-top: 5px;
  146.     margin-left: 0px;
  147. }
  148.  
  149. .info li {
  150.     margin-right: 5px;
  151. }
  152.  
  153. footer .info a {
  154.     margin-right: 5px;
  155. }
  156.  
  157. footer .contact {
  158.     margin: 20px 0px 0px 0px;
  159. }
  160.  
  161. .contact {
  162.     font-size: 10px;
  163. }
  164.  
  165.  
  166. }
  167.  
  168. /*************************************************************************************************************************
  169. * LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 *LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 *
  170. *************************************************************************************************************************/
  171.  
  172.  
  173. /*      Mobile Layout: 320px.
  174.         Gutters: 24px.
  175.         Outer margins: 34px.
  176.         Inherits styles from: Default Layout.
  177. ---------------------------------------------
  178. cols    1     2      3
  179. px      68    160    252    */
  180.  
  181. @media only screen and (max-width: 767px) {
  182.    
  183. #footerlinks {
  184.     display: inline;
  185.     float: left;
  186.     width: 240px;
  187. }
  188.  
  189. .info {
  190.     clear: left;
  191.     float: left;
  192.     font-size: 10px;
  193.     margin: 3px 0 0 0;
  194.     width: 50%;
  195. }
  196.  
  197. .info li:after {
  198.     content: "";
  199. }
  200.  
  201. .info li:after {
  202.     content: "";
  203. }
  204.  
  205. .info li {
  206.     float: none;
  207.     margin-right: 0;
  208.     padding: 2px 0;
  209. }
  210.  
  211. footer .info a {
  212.     margin-right: 4px;
  213. }
  214.  
  215. footer {
  216.     height: 200px;
  217.     margin-top: 0;
  218. }
  219.  
  220. footer .wrapper {
  221.     width: 87.5%;
  222.     max-width: 444px;
  223. }
  224.  
  225. footer .contact {
  226.     margin: 20px 0px 0px 0px;
  227. }
  228. footer a.logo {
  229. margin: 0px;
  230.  
  231. }
  232.  
  233.  
  234. }
  235.  
  236. /*************************************************************************************************************************
  237. * LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 *
  238. *************************************************************************************************************************/
  239.  
  240. /*      Wide Mobile Layout: 480px.
  241.         Gutters: 24px.
  242.         Outer margins: 22px.
  243.         Inherits styles from: Default Layout, Mobile Layout.
  244. ------------------------------------------------------------
  245. cols    1     2      3      4      5
  246. px      68    160    252    344    436    */
  247.  
  248. @media only screen and (min-width: 480px) and (max-width: 767px) {
  249.    
  250.  
  251.  
  252. footer {
  253.     width: 100%;
  254.     height: 85px;
  255.     margin: 0 auto;
  256.     font-size: 10px;
  257.     text-align: left;
  258.     vertical-align: middle;
  259. }
  260.  
  261. footer .wrapper {
  262.     padding: 5px 20px;
  263. }
  264.  
  265. footer a.logo {
  266.     font-size: 14px;
  267.     margin: 0px 20px 0px 0px;
  268.     padding: 0;
  269.     text-decoration: none;
  270. }
  271.  
  272. #footerlinks {
  273.     display: block;
  274.     float: left;
  275.     width: 480px;
  276. }
  277. .info {
  278.     clear: left;
  279.     width: 92%;
  280.     font-size: 9px;
  281.     margin-top: 3px;
  282. }
  283.  
  284. .info li {
  285.     float: left;
  286.     margin-right: 4px;
  287. }
  288.  
  289. .info li:after {
  290.     content: "\20\00b7";
  291. }
  292.  
  293. .info li:last-child:after {
  294.     content: "";
  295.     margin-right: 0;
  296.     padding-right: 0;
  297. }
  298.  
  299.  
  300. .social-media {
  301.     width: 17%;
  302.     margin-top: -17px;
  303. }
  304.  
  305. .contact {
  306.     margin: 0px;
  307. }
  308.  
  309.  
  310.    
  311. }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.