The card design can be a convenient means of displaying contents that include various information pictures or icons of the particular information that what has to be displayed or conveyed, title and description.
In this blog (Responsive Birthday Card Design) on the webpage, there is the title as 'happy birthday!' with the awesome font and a description with the happy birthday image. The @media query property is used to make the web page responsive. We have done this card for the birthday wishes, you can do this card for any kind of wishes with the respective picture and title. You can create as many cards as you need.
The source code of this Responsive Birthday Card Design is given below, and you can copy the source code of this program. You can use this code of Responsive Birthday Card Design with your creativity and can take this card to the subsequent level.
Responsive Birthday Card Design [Source Code]
To make this website (Responsive Birthday Card Design), you need to create 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.
* {
transition: all 0.2s ease-in-out;
}
body {
background: #DCE35B;
background: -webkit-linear-gradient(to right, #45B649, #DCE35B);
background: linear-gradient(to right, #45B649, #DCE35B);
display: grid;
place-items: center;
height: 100vh;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.card {
background: #12192c;
border-radius: 30px;
height: 85vh;
width: 80vw;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
overflow: hidden;
color:#DCE35B;
}
@media only screen and (min-width: 1000px) {
.card {
flex-direction: row-reverse;
}
.card img.birthday {
width: 60%;
max-width: 50vw;
max-height: unset;
border-radius: 30px;
}
}
@media only screen and (max-height: 640px) {
.card {
flex-direction: row-reverse;
}
.card img.birthday {
width: 100%;
max-width: 50vw;
max-height: unset;
}
}
img.birthday {
max-height: 40vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.text {
padding: 3em;
}
.text h1{
font-family:cursive;
font-size: 40px;
}
.space {
height: 100px;
}
.credit a{
text-decoration: none;
color: #fff;
}
.credit {
margin-top: 10px;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Birthday Card Design using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team