How to make Contact Us 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
**/
*{
box-sizing: border-box;
}
.container{
height: 100vh;
width: 100vw;
background-color: rgb(250, 150, 150);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.p1{
height: 80%;
width: 70%;
display: flex;
margin: auto;
justify-content: center;
align-items: center;
font-family: 'Ubuntu', sans-serif;
}
.d1{
height: 100%;
width: 35%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.d2{
height: 100%;
width: 65%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.sub{
height: 20%;
width: 90%;
background-color: antiquewhite;
border-radius: 10px;
display: flex;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(0, 0, 0, 0.7);
}
.info{
height: 92%;
width: 95%;
background-color: antiquewhite;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 20px ;
justify-content: space-evenly;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(0, 0, 0, 0.7);
}
.cir{
height: 100%;
width:35% ;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
height: 60px;
width: 60px;
border: 2px solid rgb(101, 100, 100);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6em;
background-color: rgb(250, 150, 150);
}
.content{
height: 100%;
width: 65%;
display: flex;
flex-direction: column;
justify-content: center;
color: black;
}
#head{
font-size: 15px;
font-weight: 800;
}
#about{
font-size: 12px;
font-weight: 500;
color: rgb(84, 83, 83);
}
#title{
font-size: 17px;
font-weight: 800;
}
#words{
font-size: 13px;
font-weight: 400;
color: grey;
}
.input-row{
width: 100%;
display: flex;
justify-content: space-between;
}
.input-row input{
height: 40px;
width: 49%;
}
.full{
display: flex;
flex-direction: column;
}
.full input{
margin-bottom: 10px;
height: 40px;
}
input{
padding: 10px;
font-family: 'Ubuntu', sans-serif;
color:rgb(222, 131, 131) ;
font-weight: 600;
border: 2px solid rgb(240, 185, 185);
border-radius: 10px;
}
textarea{
padding: 10px;
font-family: 'Ubuntu', sans-serif;
height: 150px;
width: auto;
color:rgb(222, 131, 131) ;
font-weight: 600;
border: 2px solid rgb(240, 185, 185);
border-radius: 10px;
}
button{
height: 40px;
width: 140px;
border-radius: 500px;
border: none;
background-color: rgb(250, 150, 150);
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
button:hover{
background-color: rgb(247, 64, 64);
transform: scale(1.1);
}
.sub:hover{
transform: scale(1.1);
}
@media screen and (max-width:900px){
.container{
height: auto;
width: auto;
}
.p1{
flex-direction: column;
height: 1000px;
width: auto;
}
.d1{
width: 65%;
}
.sub{
width: 95%;
}
.input-row{
flex-direction: column;
}
.input-row input{
height: auto;
width: auto;
}
}
.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 Contact Us 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