HTML FOOTER 바닥글

HTML FOOTER 바닥글   <!DOCTYPE html>  <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Responsive Footer HTML and CSS | CodingNepal</title>          <link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css</a>" />     <link rel="stylesheet" href="style.css" />     <style>     /* Importing Google font - Open Sans */ @import‎ url('<a href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');</a> * {   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Open Sans', sans-serif; } .footer {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   max-width: 1280px;   width: 95%;   background: #10182F;   border-radius: 6px; } .footer .footer-row {   display: flex;   flex-wrap: wrap;   justify-content: space-between;   gap: 3.5rem;   padding: 60px; } .footer-row .footer-col h4 {   color: #fff;   font-size: 1.2rem;   font-weight: 400; } .footer-col .links {   margin-top: 20px; } .footer-col .links li {   list-style: none;   margin-bottom: 10px; } .footer-col .links li a {   text-decoration: none;   color: #bfbfbf; } .footer-col .links li a:hover {   color: #fff; } .footer-col p {   margin: 20px 0;   color: #bfbfbf;   max-width: 300px; } .footer-col form {   display: flex;   gap: 5px; } .footer-col input {   height: 40px;   border-radius: 6px;   background: none;   width: 100%;   outline: none;   border: 1px solid #7489C6 ;   caret-color: #fff;   color: #fff;   padding-left: 10px; } .footer-col input::placeholder {   color: #ccc; }  .footer-col form button {   background: #fff;   outline: none;   border: none;   padding: 10px 15px;   border-radius: 6px;   cursor: pointer;   font-weight: 500;   transition: 0.2s ease; } .footer-col form button:hover {   background: #cecccc; } .footer-col .icons {   display: flex;   margin-top: 30px;   gap: 30px;   cursor: pointer; } .footer-col .icons i {   color: #afb6c7; } .footer-col .icons i:hover  {   color: #fff; } @media (max-width: 768px) {   .footer {     position: relative;     bottom: 0;     left: 0;     transform: none;     width: 100%;     border-radius: 0;   }   .footer .footer-row {     padding: 20px;     gap: 1rem;   }   .footer-col form {     display: block;   }   .footer-col form :where(input, button) {     width: 100%;   }   .footer-col form button {     margin: 10px 0 0 0;   } }          </style>   </head>   <body>     <section class="footer">       <div class="footer-row">         <div class="footer-col">           <h4>Info</h4>           <ul class="links">             <li><a href="#">About Us</a></li>             <li><a href="#">Compressions</a></li>             <li><a href="#">Customers</a></li>             <li><a href="#">Service</a></li>             <li><a href="#">Collection</a></li>           </ul>         </div>         <div class="footer-col">           <h4>Explore</h4>           <ul class="links">             <li><a href="#">Free Designs</a></li>             <li><a href="#">Latest Designs</a></li>             <li><a href="#">Themes</a></li>             <li><a href="#">Popular Designs</a></li>             <li><a href="#">Art Skills</a></li>             <li><a href="#">New Uploads</a></li>           </ul>         </div>         <div class="footer-col">           <h4>Legal</h4>           <ul class="links">             <li><a href="#">Customer Agreement</a></li>             <li><a href="#">Privacy Policy</a></li>             <li><a href="#">GDPR</a></li>             <li><a href="#">Security</a></li>             <li><a href="#">Testimonials</a></li>             <li><a href="#">Media Kit</a></li>           </ul>         </div>         <div class="footer-col">           <h4>Newsletter</h4>                        Subscribe to our newsletter for a weekly dose             of news, updates, helpful tips, and             exclusive offers.                      <form action="#">             <input type="text" placeholder="Your email" required>             <button type="submit">SUBSCRIBE</button>           </form>           <div class="icons">             <i class="fa-brands fa-facebook-f">             <i class="fa-brands fa-twitter">             <i class="fa-brands fa-linkedin">             <i class="fa-brands fa-github">           </div>         </div>       </div>     </section>   </body> </html>      HTML