How to make Profile 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.
/**
Hello Future Developer Thanks for Using learningrobo.com,
Check our website Regularly For New Snippets Post.
Share & Support us
**/
body{
font-family: 'Roboto', sans-serif;
}
.box{
width: 45%;
height: 750px;
margin: auto;
/* background-color: cornflowerblue; */
display: flex;
flex-direction: column;
}
.p1{
width: 100%;
height: 375px;
/* background-color: antiquewhite; */
display: flex;
flex-direction: row;
}
.c1{
width: 50%;
height: 375px;
/* background-color: bisque; */
display: flex;
flex-direction: column;
}
.c1 img{
width: 100%;
height: 375px;
}
.c2{
width: 50%;
height: 375px;
background-color: #4B686F;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #d4d4d4;
}
.c2 h1,h4,p{
margin: 20px 35px;
}
.c2 h1{
color: white;
}
.c2 h4,p{
font-weight: lighter;
font-size: 15px;
}
.logo{
width: 35%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
margin-top: 10px;
}
.logo img{
width: 18px;
height: 18px;
}
.p2{
width: 100%;
height: 375px;
/* background-color: #6dffdf; */
display: flex;
flex-direction: row;
}
.c3{
width: 50%;
height: 375px;
background-color: #4B686F;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
color: white;
}
.c3 h3,h4,h5{
margin: 0%;
}
.c3 h3{
font-weight: bold;
}
.c3 h4{
font-weight: normal;
}
.c3 h5{
font-weight: lighter;
}
.c4{
width: 50%;
height: 375px;
background-color: #EDECE4;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.t1{
width: 50%;
height: 280px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 40px;
}
.t1 h1{
color: #4B686F;
font-size: 50px;
}
.t2 h1{
color: #4B686F;
font-size: 50px;
}
.t1 h1,h5{
margin: 0%;
}
.t2 h1,h5{
margin: 0%;
}
.t2{
width: 50%;
height: 280px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 40px;
}
@media (max-width:800px) {
.p1{
height: 750px;
flex-direction: column;
}
.c1{
width: 100%;
}
.c2{
width: 100%;
}
.c3{
width: 100%;
border-top: 1px solid #EDECE4;
}
.c4{
width: 100%;
}
.p2{
height: 750px;
flex-direction: column;
}
}
.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;
}
Thank you for reading our blog. If you face any problem in Creating a Profile 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
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.
In Our older post it doesnot work we working on that.
Post a Comment
Thank you
Learning robo team