News Grid (8) Footer

footer 마크업

    <!-- Footer -->
    <footer id="main-footer" class="py-2">
      <div class="container footer-container">
        <div>
          <img src="img/logo_light.png" alt="NewsGrid" />
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque,
            labore.
          </p>
        </div>
        <div>
          <h3>Email Newsletter</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum,
            maxime.
          </p>
          <form>
            <input type="email" name="" id="" placeholder="Enter Email..." />
            <input type="submit" value="Subscribe" class="btn btn-primary" />
          </form>
        </div>
        <div>
          <h3>Site Links</h3>
          <ul class="list">
            <li><a href="#">Help & Support</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
        <div>
          <h2>Join Our Club</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo,
            aut.
          </p>
          <a href="#" class="btn btn-secondary">Join Now</a>
        </div>
        <div>
          <p>Copyright &copy; 2020, All Rights Reserved</p>
        </div>
      </div>
    </footer>

 

 

style a main footer

#main-footer {
  background: var(--dark-color);
  color: #fff;
}

#main-footer img {
  width: 150px;
}

#main-footer a {
  color: #fff;
}

#main-footer .footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.5rem;
}

#main-footer .footer-container > *:last-child {
  background: #444;
  grid-column: 1 / span 4;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
}

#main-footer .footer-container input[type="email"] {
  width: 90%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

#main-footer .footer-container input[type="submit"] {
  width: 90%;
}

 

 

list item (in utility part)

.list li {
  padding: 0.5rem;
  border-bottom: #555 dotted 1px;
  width: 90%;
}

.list li a:hover {
  color: var(--primary-color) !important;
}