Responsive Birthday Card Design using HTML and CSS

0































Hello Developers, We provide you with a dynamic and eye-catching responsive birthday card design using HTML and CSS that presents your information in an easy-to-read format. This footer snippet has been designed with accuracy using HTML & CSS. Celebrate your special day with a personalized birthday card with HTML & CSS. Our digital birthday card snippet is the perfect combination of creativity & technology. With vibrant colours, a colourful background & a heartfelt message inside, it's more than just a card. It's a virtual celebration to make the recipient's day even more special. Send this personalized birthday card to spread joy & happiness. This birthday card snippet is fully responsive so it can be displayed on any device including desktop, laptop, tablet, or smartphone. By using this HTML & CSS birthday card design snippet, you're not only sharing information but also showing your dedication to professionalism & contemporary web design. Note: In this Snippet, we have used Glass Morphism. If you would like to change the Blur in the CSS File, you can do so in the CSS File -- >. right-containers-card -- >background-filter: blur();

How to make Responsive Birthday Card Design 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>Birthday Card UI design - learningrobo</title> <meta name="description" content="Birthday Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="birthday card,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="container-card"> <div class="left-container-card"> <img src="https://cdn.pixabay.com/photo/2016/09/23/03/07/happy-birthday-1688783_1280.jpg"> </div> <div class="right-container-card"> <h1>Happy Birthday!!</h1> <p>May your birthday brings a lot of smile to your face, happiness to your heart, and many blessings to your whole life💌</p> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> </div> </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. 


/** 
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=Fira+Sans:wght@200;400&family=Mukta:wght@300&family=Nunito+Sans:opsz,wght@6..12,300&family=Satisfy&display=swap');
*{
    box-sizing: border-box;
}
body{
    background:url(https://cdn.pixabay.com/photo/2013/10/27/17/14/snowfall-201496_1280.jpg);
    background-position:center;
    background-size:cover;
    background-repeat: no-repeat;
    background-attachment:fixed;
}
.container{
    min-height: 100vh;
    max-height:fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}
.container-card{
    display: flex;
    flex-direction: row;
    align-items: center;
    width:900px;
    height:350px;
}
.left-container-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:300px;
    height:350px;
    border-radius:10px;
}
.left-container-card img{
    width:300px;
    height:350px;
    border-radius:10px;
}
.right-container-card{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    backdrop-filter:blur(25px);
    background-color:rgba(255,255,255,0.1);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width:600px;
    height:350px;
    margin:1vw  ;
    border-radius:10px;
}
.right-container-card h1{
    font-family: 'Satisfy', cursive;
    margin:10px;
    padding:10px;
    font-size:45px;
}
.right-container-card p{
    font-family: 'Fira Sans', sans-serif;
    text-align:center;
    margin:35px;
    padding:0px 30px;
    font-size:18px;
}
@media only screen and (max-width: 1024px){
    .container-card{
        display: flex;
        flex-direction:column;  
        width:450px;
        height:auto;
    }
    .left-container-card{
        width:450px;
        height:300px;
    }
    .left-container-card img{
        width:450px;
        height:350px;
    }
    .right-container-card{
        width:450px;
        height:400px;
        margin:1vh;
    }
    .right-container-card p{
        margin:20px;
        padding:20px;
    }
    .credit{
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 630px){
    .container-card{
        display: flex;
        flex-direction:column;  
        width:100%;
        height:fit-content;
    }
    .left-container-card{
        width:95%;
        height:250px;
    }
    .left-container-card img{
        width:100%;
        height:250px;
    }
    .right-container-card{
        width:95%;
        height:300px;
        margin:1vh;
    }
    .right-container-card h1{
        margin:10px;
        padding:10px;
        font-size:25px;
    }
    .right-container-card p{
        margin:10px;
        padding:10px;
    }
    .credit{
        margin-bottom: 10px;
    }
}
.credit a{
    text-decoration: none;
    color: #000;
    font-weight: 800;
}
.credit{
    color: #000;
    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 Responsive Birthday Card Design using HTML and CSS.

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