How To Make Responsive Footer For Website - Hamza Tech

byWorld Wide Information Center -
1

How To Make Responsive Footer For Website - Hamza Tech
how to make responsive footer and header

To make a footer for a website first create a file "index.html" and paste this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Footer & Header</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">L<span>o</span>G<span>o</span></div>
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
                <li>FAQs</li>
                <li>Support</li>
            </ul>
        </nav>
    </header>


    <div class="sp"></div>


    <footer>
        <div class="st">
            <div class="logO">L<span>o</span>G<span>o</span></div>
            <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat blanditiis magnam est voluptatibus error. Labore.</div>
        </div>
        <div class="nd">
            <p class="heading"><h2>Pages</h2></p>
            <ul>
                <li>Help</li>
                <li>Support</li>
                <li>Website</li>
                <li>Earning</li>
            </ul>
        </div>
        <div class="rd">
            <p class="heading"><h2>UseFul</h2></p>
            <ul>
                <li>Fiverr</li>
                <li>YouTube</li>
                <li>Blogging</li>
                <li>Facebook</li>
            </ul>
        </div>
    </footer>
   
</body>
</html>

Now Add "Style.css" file and paste this code:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    transition: all .3s ease-out;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    background: linear-gradient(45deg, rgb(48, 4, 99), rgb(161, 23, 173));
    padding: 30px;
}

.logo {
    font-size: 30px;
    font-weight: 600;
}

span {
    color: rgb(179, 255, 0);
}

header ul {
    display: flex;
}

header li {
    margin: 0 15px;
    list-style: none;
    cursor: pointer;
}

li:hover {
    color: rgb(179, 255, 0);
}

/*
Footer Setting
*/

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: auto;
    background: linear-gradient(45deg, rgb(48, 4, 99), rgb(161, 23, 173));
    color: white;
    line-height: 1.5;
}

.logO {
    font-size: 25px;
    font-weight: bolder;
}

.st,
.nd,
.rd {
    width: 33.3%;
    padding: 10px 20px;
}

.nd {
    margin-left: 100px;
}

h2 {
    margin-left: -15px;
    position: relative;
}
h2::before{
    content: '';
    position: absolute;
    height: 2px;
    width: 60px;
    background: rgb(179, 255, 0);
    top: 33px;
}
.sp{
    height: 61.3vh;
}
@media only screen and (max-width: 720px) {
    footer{
        flex-direction: column;
        padding: 10px;
    }
    .nd,.rd{
        margin-left: 30px;
    }
    .st,.nd,.rd {
        width: 100%;
    }
    header{
        flex-direction: column;
    }
    header li{
        margin: 20px 10px 0 10px;
    }
}
Tags

1 Comments

Previous Post Next Post