dev-resources.site

for different kinds of informations.

🎥Responsive Footer Section using Flexbox | HTML CSS🙌

Published at

12/20/2021

Categories

html

css

beginners

footer

Author

robsonmuniz16

Main Article

https://dev.to/robsonmuniz16/responsive-footer-section-using-flexbox-html-css-1m5p

Categories

4 categories in total

Author

13 person written this

🎥Responsive Footer Section using Flexbox | HTML CSS🙌

In this video, I have shown you how you can create a responsive footer section using HTML and CSS only.

Source Code:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Footer</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

  <section>
    <h1>Your Content Here!</h1>
  </section>

  <footer>
    <div class="main-content">
      <div class="left box">
        <h2>About us</h2>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sunt saepe maxime consequatur, architecto cum quos quo ut id totam laborum veritatis quaerat esse atque, doloremque facere hic. Odit, eum.</p>
          <div class="social">
            <a href=""><span class="fab fa-facebook-f"></span></a>
            <a href=""><span class="fab fa-instagram"></span></a>
            <a href=""><span class="fab fa-twitter"></span></a>
            <a href=""><span class="fab fa-youtube"></span></a>
          </div>
        </div>
      </div>
      <div class="center box">
        <h2>Adress</h2>
        <div class="content">
          <div class="place">
            <span class="fas fa-map-marker-alt"></span>
            <span class="text">London, UK</span>
          </div>
          <div class="phone">
            <span class="fas fa-phone-alt"></span>
            <span class="text">+089-5689754993</span>
          </div>
          <div class="email">
            <span class="fas fa-envelope"></span>
            <span class="text">[email protected]</span>
          </div>
        </div>
      </div>
      <div class="right box">
        <h2>Contact US</h2>
        <div class="content">
          <form action="#">
            <div class="email">
              <div class="text">Email:</div>
              <input type="email" required>
            </div>
            <div class="msg">
              <div class="text">Message:</div>
              <textarea name="" id="" cols="25" required rows="2"></textarea>
            </div>
            <div class="btn">
              <button type="submit">Send</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="bottom">
      <center>
        <span class="credit">
          Created by <a href="">WebDev</a> |
        </span>
        <span class="far fa-copyright"></span>
        <span>2021 All Rights Reserved.</span>
      </center>
    </div>

  </footer>

</body></html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  background-color: bisque;
}

section {
  /* Just for parent demo size */
  height: 65vh;
  display: grid;
  place-items: center;
}

h1 {
  font-size: 48px;
  color: black;
}

footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: #111;
}

.main-content {
  display: flex;
}

.main-content .box {
  flex-basis: 50%;
  padding: 10px 20px;
}

.box h2 {
  font-size: 1.125;
  font-weight: 600;
  text-transform: uppercase;
}

.box .content {
  margin: 20px 0 0 0;
  position: relative;
}

.box .content::before {
  position: absolute;
  content: "";
  /*  border: 2px solid red;*/
  /*  Show them the file*/
  top: -10px;
  height: 4px;
  width: 100%;
  background-color: #1a1a1a;
}

.box .content::after {
  position: absolute;
  content: "";
  height: 3px;
  width: 20%;
  background: #f12020;
  top: -10px;
}

.left .content .social {
  margin: 20px 0 0 0;
}

.left .content .social a {
  padding: 0 2px;
}

.left .content .social a span {
  height: 40px;
  width: 40px;
  background-color: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}

.left .content .social a span:hover {
  background: #f12020;
}

.center .content .fas {
  font-size: 1.4375rem;
  background-color: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: .3s;
}

.center .content .fas:hover {
  background-color: #f12020;
}

/*Now we grab the text*/

.center .content .text {
  font-size: 1.07rem;
  font-weight: 500;
  padding-left: 10px;
}

.center .content .phone {
  margin: 8px 0;
}

.right form .text {
  font-size: 1.07rem;
  margin-bottom: 2px;
  color: #656565;
}

.right form .msg {
  margin-top: 10px;
}

.right form input,
.right form textarea {
  width: 100%;
  font-size: 1.07rem;
  background-color: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}

.right form input:focus,
.right form textarea:focus {
  outline-color: #3498db;
}

.right form input {
  height: 35px;
}

.right form .btn {
  margin-top: 10px;
}

.right form .btn button {
  height: 40px;
  width: 100%;
  border-radius: 5px;
  border: none;
  outline: none;
  background-color: #f12020;
  font-size: 1.07rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}

.right form .btn button:hover {
  background-color: #000;
}

.bottom center {
  padding: 5px;
  font-size: 0.94rem;
  background-color: #151515;
}

.bottom center span {
  color: #656565;
}

.bottom center a {
  color: #f12020;
  text-decoration: none;
}

.bottom center a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 900px) {
  footer {
    position: relative;
    bottom: 0px;
  }

  .main-content {
    flex-wrap: wrap;
    flex-direction: column;
  }

  .main-content .box {
    margin: 5px 0;
  }
}

footer Article's

24 articles in total

Responsive Footer using React with Tailwind CSS and React Icons

Comment ajouter un en-tête et un pied de page à Word avec Python

Understanding Word Header and Footer: Professional Advice for java developers

Java-How to Add or Remove Header and Footer in Word documents

🎥Responsive Footer Section using Flexbox | HTML CSS🙌

currently reading

How to create header/footer (using HTML) in each page

Help: Same nav and footer in the whole portfolio.

HTML tags | footer

[Java] Add Different Headers/Footers for Odd and Even Pages in Word

Insert Header and Footer to Word using Java

Keep footer at bottom of page - using flexbox

Fix the footer at the bottom of your web page

Footer bottom in GastbyJS

Java add image and text header/footer to Excel

Rounded Curved Footer Using Bootstrap 4

Automating the Date On Your Footer.

Add Header and Footer to an Existing PDF Document in Java

Sticky Footer with Flexbox

Sticky Footer in GatsbyJS using Flexbox

Keeping the Footer at the Bottom with CSS-Grid

Keeping the footer at the bottom with CSS Flexbox

How to style footer semantically correct?

Add Headers and Footers to Word Document in Java

The curious case of the infinite page with a footer

Featured ones:

abubakersiddique761