• 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.

    Recent Pastes

    Cartoon Sexy

    Энергонадзор

    Kentalsusumanis

    Susukental

    Pinoy Sexy Videos

    Hot Clips From[...]

    2013 - 2021[...]

    Tiktok Sexy

    Arab Sexy Video

    Asia Sexy

    Raw Paste

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

    Copyright © 2021 Paste. All rights reserved.
    Powered by Stikked | pastebin