UZFOR
kr_master
Besthakker, 
  1. <!DOCTYPE html>
  5. * {
  6.          box-sizing: border-box;
  7.       }
  8.       html, body {
  9.          margin: 0;
  10.          padding: 0;
  11.       }
  12.       body {
  13.          display: flex;
  14.          min-height: 100vh;
  15.          flex-direction: column;
  16.       }
  17.       main {
  18.          flex: 1 0 auto;
  19.       }
  20.       footer {
  21.          color: #fff;
  22.          background: #333;
  23.          position: relative; /* required to position the copyright at the bottom */
  24.          font-size: 80%;
  25.       }
  26.       .footer-copyright {
  27.          width: 100%;
  28.          height: 40px;
  29.          background: #111;
  30.          /* positions the copyright at the bottom of the footer */
  31.          padding: 10px;
  32.          position: absolute;
  33.          bottom: 0px;
  34.          left: 0px;
  35.       }
  36.       .footer-body {
  37.          margin-bottom: 40px;
  38.          padding: 30px;
  39.       }
  40.       .footer-body > div:first-child {
  41.          font-size: 150%;
  42.       }
  43.       .footer-body ul {
  44.          list-style-type: none;
  45.          margin: 0px;
  46.          padding: 0px;
  47.          text-align: center;
  48.       }
  49.       .footer-body li > a {
  50.          color: white;
  51.          text-decoration: none;
  52.          margin-bottom: 7px;
  53.       }
  54.    </style>
  55. </head>
  56. <body>   
  58.    <main></main>
  60.       <div class="footer-body">
  61.          <div> Your Brand Here. </div>
  62.          <div>
  63.             <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis interdum dignissim nisl posuere efficitur. </p>
  64.             <ul>
  65.                <li><a href="#"> About </a></li>
  66.                <li><a href="#"> Contact </a></li>
  67.                <li><a href="#"> Terms & Conditions </a></li>
  68.                <li><a href="#"> Privacy Policy </a></li>
  69.             </ul>
  70.          </div>
  71.       </div>
  72.       <div class="footer-copyright">
  73.          © Copyright goes here. 
  74.       </div>
  75.    </footer>
0 Mavzuga qaytish