Footer Design UI using HTML and CSS





























Hello Developers, We offer you an exceptional Page Footer HTML snippet, meticulously crafted to present your information with style and efficiency. Our snippet is a testament to precision, utilizing HTML and CSS to create a visually appealing and functional footer. With our snippet, you can effortlessly incorporate all essential links, from social media profiles to company information, ensuring easy navigation for your users. A well-designed footer elevates the aesthetics of your website and provides a seamless conclusion to the browsing journey. Responsive and adaptable, our Page Footer HTML snippet guarantees optimal display across all devices, whether it's a desktop, laptop, tablet, or smartphone. By utilizing our HTML & CSS Page Footer HTML Snippet, you're not just sharing information – you're showcasing your commitment to professionalism and contemporary web design. It's your chance to shine and engage with the world. Experience the difference with our Page Footer HTML snippet and redefine your online presence today!

How to make Foteer Design 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 lang="en"> <head> <title>Responsive Footer card Using HTML & CSS</title> <meta name="description" content="Responsive Footer card Using HTML & CSSt. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="responsive,learningrobo.com,html & css projects,project,Footer card"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="p1"> <div class="card"> <div class="d1"> <div class="image"> <img src="https://cdn.pixabay.com/photo/2017/02/18/19/20/logo-2078018_1280.png" alt=""> </div> <div class="words"> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ex cumque, cum veritatis error !</span> </div> <h3>Follow Us</h3> <div class="logo"> <span><ion-icon name="logo-facebook"></ion-icon></span> <span><ion-icon name="logo-twitter"></ion-icon></span> <span><ion-icon name="logo-google"></ion-icon></span> <span><ion-icon name="logo-instagram"></ion-icon></span> <span><ion-icon name="logo-linkedin"></ion-icon></span> </div> </div> <div class="d2"> <div class="head"> <div class="icon"> <ion-icon name="map-outline"></ion-icon> </div> <span ><strong>Jaipur India</strong> <br> 2820 Road Nagar</span> </div> <div class="heading"> <h3>Useful Links</h3> <span></span> </div> <div class="options"> <div class="side1"> <span>About us</span> <span>Snippets</span> <span>Projects</span> <span>Our Team</span> </div> <div class="side2"> <span>Contact us</span> <span>Blog</span> <span>Our Works</span> <span>FAQ</span> </div> </div> </div> <div class="d3"> <div class="head"> <div class="icon"><ion-icon name="call-outline"></ion-icon></div> <span><strong>99883 99883</strong><br>Contact us</span> </div> <div class="heading"> <h3>Subscribe</h3> <span></span> </div> <div class="content"> <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid deserunt, quod tempora a omnis rem suscipit null</span> </div> <div class="mail"> <input type="email" placeholder="Email Address" class="input"> <button type="submit" >Get Started</button> </div> </div> </div> <div class="end"> <div class="left"> <span>© Copyright 2023. All rights reserved.</span> </div> <div class="right"> <span>Home </span> <span>Policy </span> <span>Terms </span> <span>Contacts </span> </div> </div> </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> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/">learningrobo</a></div> <!--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.


@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');
*{
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color: rgb(84, 82, 82);
    align-items: end;
}
.p1{
    height: 75vh ;
    width: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Nunito', sans-serif;
}
.card{
    height: 89%;
    width: 100%;
    display: flex;
    background-color: rgb(0, 0, 0);
    align-items: center;
    justify-content: center;
}
.d1{
    height: 95%;
    width: 300px;
    background-color: rgb(30, 27, 27);
    margin-right: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    color: aliceblue;
    align-items: center;

}
.d2{
    height: 90%;
    width: 250px;
    background-color: rgb(0, 0, 0);
    margin-right: 30px;
    border-radius: 10px;
    color: white;
}
.d3{
    height: 90%;
    width: 400px;
    background-color: rgb(0, 0, 0);
    margin-right: 30px;
    border-radius: 10px;
    color: white;
}
.end{
    height: 11%;
    width: 100%;
    background-color: black;
}
.image{
    height: 50%;
    width: 100%;
    background-color: transparent;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.image img{
    height:90%;
    width: 90%;
    object-fit: contain;
}
.logo{
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}
.words {
    height: 30%;
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.words span{
    margin-left:20px ;
    margin-right: 10px;
    font-weight: 500;
    font-size: 12px;
}
h3{
    margin-left: 20px;
}
.logo span{
    height: 40px ;
    width: 40px;
    border-radius: 50%;
    background-color: rgb(99, 93, 93);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
.logo span:hover{
    transform: scale(1.1);
    background-color: red;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.head{
    height: 20%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: left;
    align-items: center;
    color: aliceblue;
    cursor: pointer;
}
.head span{
    font-size: 12px;
}
.icon{
    height: 100%;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    color: red;
}
.heading{
    height: 20px;
    width: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: red;
}
.heading span{
    border: 1.3px solid transparent; 
    border-style: solid;
    width: 20%;
    border-color: white;
    margin-left: 20px;
    display: flex;
}
.options{
    height: 50%;
    display: flex;
}
.side1,.side2{
    display: flex;
    flex-direction: column;
    font-size: 13px;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    margin: 40px 30px;
}
.side1 span,.side2 span{
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.side1 span:hover,.side2 span:hover{
    transform: scale(1.1);
    color: red;
}
.content{
    height: 30%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
.content span{
    margin-left:20px ;
    margin-right: 10px;
    font-weight: 500;
    font-size: 12px;
}
.mail{
    display: flex;
    align-items: center;
    justify-content: center;
}
.mail input{
    width: 500px;
  height: 45px;
  border: none;
  outline: none;
  padding: 10px 30px;
  border-radius: 500px;
  margin: 10px;
  color: #fff;
  font-size: 15px;
  background-color: transparent;
  box-shadow: 3px 3px 10px rgba(0,0,0,1),
  -1px -1px 6px rgba(255, 255, 255, 0.4);
}
.input:focus {
    border: 2px solid transparent;
    color: #fff;
    box-shadow: 3px 3px 10px rgba(0,0,0,1),
    -1px -1px 6px rgba(255, 255, 255, 0.4),
    inset 3px 3px 10px rgba(0,0,0,1),
    inset -1px -1px 6px rgba(255, 255, 255, 0.4);
  }
.mail button{
    height: 40px;
    width: 60px;
    translate: -66px ;
    border-radius: 0 500px 500px 0;
    border: none;
    cursor: pointer;
    background-color: rgb(255, 0, 0);
}
.mail button:hover{
    background-color: rgb(245, 71, 71);
}
.end{
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(30, 27, 27);
}
.right {
    display: flex;
    justify-content: space-evenly;
}
.right span{
    margin-left: 29px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.right span:hover{
    transform: scale(1.1);
    color: red;
}
@media screen and (max-width:900px){
    .container{
        height: 100%;
        width: 100%;
        align-items: end;
    }
    .p1{
        height: 1300px;
        width: auto;
        flex-direction: column;
    }
    .card{
        flex-direction: column;
    }
    .end{
        height: 5%;
    }
}
.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:#000;
    font-size:20px;
}   
We hope you would like this Foteer Design UI Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Product Card 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.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

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