How to make Footer 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;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
display: flex;
justify-content: end;
align-items: end;
}
.p1{
height: 50vh;
width: 100%;
background-color: rgb(0, 0, 0);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-family: 'Roboto', sans-serif;
border-radius: 10px;
}
.d1{
height: 100px;
width: 90%;
background-color: white;
translate: 0 -29px;
display: flex;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.left{
height: 100%;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
#ready{
font-size: 1.2em;
font-weight: 600;
margin-bottom: 10px;
margin-left: 20px;
color: rgb(153, 153, 245);
}
#start{
font-size: .9em;
font-weight: 500;
margin-left: 20px;
}
.right{
height: 100%;
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
.right span ion-icon{
translate: 10px 2px;
font-size: 1em;
}
button{
height: 40px;
width: 150px;
border-radius: 50px;
border: none;
background-color: rgb(153, 153, 245);
color: aliceblue;
cursor: pointer;
transition: all .4s;
}
button span{
font-weight: 600;
}
button:hover{
background-color: rgb(100, 100, 248);
}
.d2{
height: 50%;
width: 100%;
color: aliceblue;
display: flex;
}
.sub1{
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 18%;
}
.sub1 span{
margin-bottom: 10px;
}
.sub2{
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 28%;
}
.cir{
height: 30px;
width: 30px;
border-radius: 50%;
justify-content: center;
display: flex;
align-items: center;
color: rgb(255, 255, 255);
background-color: rgb(79, 70, 251);
font-size: 1.1em;
margin-top: 20px;
cursor: pointer;
transition: all .4s;
}
.cir:hover{
transform: scale(1.1);
box-shadow: rgba(255, 255, 255, 0.3) 0px 5px 10px, rgba(254, 253, 253, 0.22) 0px 3px 7px;
}
.logos{
display: flex;
justify-content: space-evenly;
height: 80%;
width: 100%;
display: flex;
}
#content{
font-size: .8em;
font-family: 800;
color: aliceblue;
cursor: pointer;
transition: all .4s;
}
#content:hover{
transform: scale(1.1);
color: rgb(110, 110, 110);
}
#head{
color:rgb(161, 161, 243);
font-size: 1em;
font-weight: 600;
}
#name{
color:rgb(161, 161, 243);
font-size: 1.1em;
font-weight: 800;
}
@media screen and (max-width:790px){
.container{
height: auto;
width: auto;
align-items: end;
justify-content: end;
display: flex;
}
.p1{
height: 650px;
width: 100%;
align-items: center;
justify-content: center;
}
.d1{
height: 100px;
width: 90%;
align-items: center;
flex-direction: column;
justify-content: center;
translate: 0;
}
.d2{
flex-direction: column;
height: auto;
width: 100%;
align-items: center;
}
.sub1,.sub2{
height: auto;
width: 100%;
margin-top: 20px;
}
.sub2{
margin-bottom: 30px;
}
}
@media screen and (max-width:620px){
.d1{
height: 150px;
}
.right {
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 Footer 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