Table of Contents

Page footer html

Share Now :

Title : Page footer html | W3pupil

Description

Hello W3PUPIL!!! We offer you a dynamic and visually appealing Page footer html that presents your information at a glance. This Page footer html snippet was created with precision using HTML and CSS.
We have created a footer where you can add all important links. It’s where important information is displayed and where the user’s experience is enhanced. You can create a footer that’s informative and eye-catching with a good HTML and CSS design. The footer typically contains information like a logo, social media info, links to relevant pages, link for company info and some other helpful links. A good footer adds to the overall look and feel of your website and makes it look professional. It also gives the user a smooth and informative end to their browsing experience. This snippet is completely responsive, so you can view it on any device. Your footer will always be presented in an organized way whether it’s a desktop, a laptop, a tablet, or a smartphone.
So by using this HTML and CSS Page footer html snippet, you’re not just sharing information – you’re demonstrating your dedication to professionalism and contemporary web design. Overall, show off and interact with the world with this innovative and creative Page footer html snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is critical for smooth development. Below is a step-by-step guide.

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After successfully completing the download and installation, open Visual Studio Code.
  • Create a new folder on your desktop.
  • Go to the file and then open the folder you created.
  • Then add a file for HTML with the extension “.html” or “.htm”.
  • Also add another file for CSS with the extension “.css”.
  • Now you have an empty HTML file and a CSS file ready for your code.

Let's know how to open a downloaded file..

  • After you download the snippet file from W3pupil, you will get a zip file.
  • After unzipping, you can open the file in Visual Studio Code.
  • Now you have the HTML file and the CSS file to work with.
  • Take your time to fully understand the functionality of the code before making the changes you want in the Page footer html snippet.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  <!--Hello Future Developer Thanks for Using w3pupil.com, Share & Support us-->
<div class="container">
<div class="box">
    <div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/"> W3pupil</a></div>
    <div class="section1">
        <div class="head1">
            <div class="in1">
                <i class="fa-solid fa-shield-halved fa-2xl" style="color: #ffffff"></i>
            </div>
            <div class="in2">
                <p>100% SECURE</p>
                <p>CHECKOUT</p>
            </div>
        </div>
        <div class="head2">
            <div class="in1">
                <i class="fa-solid fa-plane-departure fa-2xl" style="color: #ffffff"></i>
            </div>
            <div class="in2">
                <p>SHIPPING TO OVER 70</p>
                <p>cOUNTRIES</p>
            </div>
        </div>
        <div class="head3">
            <div class="in1">
                <i class="fa-solid fa-headphones fa-2xl" style="color: #ffffff"></i>
            </div>
            <div class="in2">
                <p>OUTSTANDING</p>
                <p>SUPPORT</p>
            </div>
        </div>
    </div>
    <div class="section2">
        <div class="content1">
            <div class="company">
                <i class="fa-brands fa-slack fa-2xl" style="color: #000000"></i>
                <p>YOUR LOGO</p>
            </div>
        </div>
        <div class="content2">
            <h5>Find us in social media</h5>
            <div class="logo">
                <i class="fa-brands fa-instagram fa-xl" style="color: #000000"></i>
                <i class="fa-brands fa-facebook-f fa-xl" style="color: #000000"></i>
                <i class="fa-brands fa-twitter fa-xl" style="color: #000000"></i>
                <i class="fa-brands fa-linkedin-in fa-xl" style="color: #000000"></i>
            </div>
        </div>
        <div class="content3">
            <h5>COMMUNITY</h5>
            <p><a href="#">Blog</a></p>
            <p><a href="#">Community</a></p>
            <p><a href="#">Ideas</a></p>
            <p><a href="#">Developers</a></p>
        </div>
        <div class="content4">
            <h5>COMPANY</h5>
            <p><a href="#">About us</a></p>
            <p><a href="#">Team</a></p>
            <p><a href="#">Where to Buy</a></p>
            <p><a href="#">Reseliers</a></p>
            <p><a href="#">Influencers</a></p>
            <p><a href="#">Affilates</a></p>
            <p><a href="#">Media</a></p>
        </div>
        <div class="content5">
            <h5>USEFUL LINKS</h5>
            <p><a href="#">Warranty</a></p>
            <p><a href="#">Product Declarations</a></p>
            <p><a href="#">Terms of Use</a></p>
            <p><a href="#">Privacy Policy</a></p>
            <p><a href="#">Cookie Policy</a></p>
            <p><a href="#">Cookie Settings</a></p>
        </div>
    </div>
</div>
</div>
<!--Check our website Regularly For New Snippets Post-->  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

  /** 
Hello Future Developer Thanks for Using w3pupil.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
*{
    box-sizing: border-box;
}
body{
    font-family: 'Red Hat Display', sans-serif;
    margin: 0%;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 100vh;
    background-color:#ddd;
}
.box{
    width: 100%;
    height: 85vh;
    display: flex;
    flex-direction: column;
}
.section1{
    width: 100%;
    height: 20vh;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.head1{
    width: 33.3%;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
}
.head2{
    width: 33.3%;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
}
.head3{
    width: 33.3%;
    display: flex;
    flex-direction: row;
    column-gap: 10px;
}
.in1{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.in2{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.in2 p{
    margin: 0%;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
}
.section2{
    width: 100%;
    height: 65vh;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.content1{
    width: 20%;
    height: 65vh;
    display: flex;
    column-gap: 10px;
}
.company{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 30px;
}
.content2{
    width: 20%;
    height: 65vh;
    display: flex;
    flex-direction: column;
}
.logo{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
    column-gap: 40px;
    margin-left: 10px;
    margin-top: 30px;
}
.content3{
    width: 20%;
    height: 65vh;
    display: flex;
    flex-direction: column;
}
.content4{
    width: 20%;
    height: 65vh;
    display: flex;
    flex-direction: column;
}
.content5{
    width: 20%;
    height: 65vh;
    display: flex;
    flex-direction: column;
}
a{
    text-decoration: none;
    color: grey;
}
h5{
    margin: 20px 10px;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bold;
}
p{
    margin: 10px 10px;
    font-size: 18px;
    font-weight: 600;
}
@media screen and (max-width:1024px){
    .box{
        height: fit-content;
    }
    .section1{
        height: fit-content;
    }
}
@media screen and (max-width:630px){
    .container{
        height:fit-content;
    }
    .box{
        height: fit-content;
    }
    .head1,.head2,.head3{
        width:80%;
        align-items:center;
    }
    .section1{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 60px;
    }
    .section2{
        height: fit-content;
        flex-direction: column;
    }
    .content1{
        width: 100%;
        height: max-content;
        justify-content: center;
        align-items: center;
    }
    .content2{
        width: 100%;
        height: 30vh;
        justify-content: center;
        align-items: center;
    }
    .logo{
        justify-content: center;
        align-items: center;
    }
    .content3{
        width: 100%;
        height: max-content;
        justify-content: center;
        align-items: center;
    }
    .content4{
        width: 100%;
        height: max-content;
        justify-content: center;
        align-items: center;
    }
    .content5{
        width: 100%;
        height: max-content;
        justify-content: center;
        align-items: center;
    }
}
.credit a{
    text-decoration: none;
    color: black;
    font-weight: 800;
}
.credit{
    color: black;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}  

Note :

  • We have coded CSS in a separate file and linked to the HTML file for creating Page footer html snippet.

Download :

Share and Support W3pupil.com

Conclusion :

To change the code, you can download the source code files of the snippet. To improve your HTML and CSS skills, you can try rebuilding other creative HTML and CSS snippets available on W3pupil. If you have any technical questions, feel free to contact W3pupil. As soon as possible, we will do our best to resolve your request.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :