Footer UI using HTML and CSS

0

































Hello Developers, We provide you with a dynamic and eye-catching Footer HTML template that shows your info at a glance. The Footer HTML template snippet has been designed with accuracy using HTML & CSS. We have designed the Footer where all important links can be inserted. A well-designed HTML & CSS footer can help you create an informative & visually appealing footer. A footer usually includes information such as your logo, important social media info, links to relevant pages, links for your company info and some other helpful links. A great footer adds to the overall look & feel of your website, makes it look professional, and provides a seamless & informative end of the user's browsing experience. This footer is fully responsive, so it can be displayed on any device, whether it's a desktop, laptop, tablet or smartphone. By using this HTML & CSS Footer HTML Template Snippet, you're not just sharing info – you're showing your dedication to professionalism & contemporary web design. All in all, use this innovative & creative Footer HTML Snippet to show off and engage with the world. Note: We have coded CSS in a separate file and linked it to the HTML file to create a footer HTML template snippet.

How to make Footer UI using html and css.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Footer UI design - learningrobo</title> <meta name="description" content="Footer UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="footer,responsive,learningrobo.com,html & css projects"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="p1"> <div class="d1"> <div class="sub1"> <h1>learningrobo</h1> <h3>FRONT-END LIBRARY</h3> </div> <div class="sub2"> <h5>RESONANT THEMES</h5> <h5>COMMON FAQS</h5> <h5>CREATIVE DESIGNS</h5> </div> <div class="sub3"> <h5>SERVICES</h5> <h5>COLOR PALLETES</h5> <h5>RESOURCES</h5> </div> <div class="sub4"> <h5>HTML</h5> <h5>CSS</h5> <h5>JAVA SCRIPT</h5> </div> <div class="sub5"> <h5>ABOUT US</h5> <h5>PATENTS</h5> <h5>OUR PARTNERS</h5> </div> </div> <hr> <div class="d2"> <div class="facebook"> <ion-icon name="logo-facebook"></ion-icon> </div> <div class="instagram"> <ion-icon name="logo-instagram"></ion-icon> </div> <div class="github"> <ion-icon name="logo-github"></ion-icon> </div> <div class="google"> <ion-icon name="logo-google"></ion-icon> </div> </div> <div class="cp"> <span>©Copyright.All Rights Reserved</span> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


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

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    margin:0px;
}
.container{
    height: 100vh;
    width: 100%;
    background: rgba(229, 238, 240, 0.696);
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:end;
}
.p1{
    height: 55vh;
    width:98%;
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    color: #121212;
}
.d1{
    height:calc(55vh/2);
    width:100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: #000;
}
hr{
    width:100%;
    outline: none;
    border:1px solid #000;
}
.d2{
    display: flex;
    width:100%;
    color: #121212;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}
.sub1{
    display: flex;
    flex-direction: column;
}
.facebook{
    display: flex;
    margin: 13px;
    cursor: pointer;
}
.instagram{
    display: flex;
    cursor: pointer;
    margin: 13px;
}
.github{
    display: flex;
    cursor: pointer;
    margin: 13px;
}
.google{
    display: flex;
    cursor: pointer;
    margin: 13px;
}
.tooltip{
    font-size: 12px;
}
h5{
    cursor: pointer;
    transition: 0.3s;
}
.cp{
    display: flex;
    width:100%;
    justify-content: center;
    font-size: 13px;
    color: rgb(36, 53, 58);
}
@media screen and (max-width: 630px){
    .container{
        width: 100%;
        padding:10px 0px;
        height:fit-content;
    }
    .p1{
        width: 96%;
        padding:20px;
        font-size: 13px;
        height:fit-content;
    }
    .d1{
        align-items: start;
        flex-direction: column;
        height: fit-content;
    }
}
.credit a{
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
.credit{
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}
We hope you would like this Footer UI using html and css.

Thank you for reading our blog. If you face any problem in Creating a Footer UI using html and css., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome