Css info cards | css info cards using html and css
.png "Css info cards | css info cards using html and css")
Css info cards | css info cards using html and css
Welcome to all..Today we are creating CSS info card using HTML and CSS.
You need basic knowledge of Html and Css for Creating CSS info card .So, lets begin to the Project.
Before that you should know that what is Css info card.Css info card have small detail or information of which you are making cards for example- profile cards, place card, business card etc…It will show the photo title and info of photo in this card.
Code:
In this card we use html and css. we are making city card which is modern and fancy.
In html it have basic layout like we want to give only title and class.
and in css we want to make html design with css like background colour, position marging weight height etc that given in css code.
Html code:-
<div class="wrap">
<div class="card">
<div class="footer">
<div class="content">
<div class="title">Shanghai</div>
<div class="text">Worlds largest city.</div>
</div>
</div>
</div>
<div class="card">
<div class="footer">
<div class="content">
<div class="title">New York</div>
<div class="text">The city that never sleeps.</div>
</div>
</div>
</div>
<div class="card">
<div class="footer">
<div class="content">
<div class="title">Seattle</div>
<div class="text">The Emerald City.</div>
</div>
</div>
</div>
</div> HTML Output:-
Css code:-
@import url('https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap');
html, body{
background: #f7f7f7;
margin: 0px;
}
.wrap{
& .card{
position: relative;
margin: 40px auto;
width: 350px;
height: 220px;
overflow: hidden;
border-radius: 6px;
box-shadow: 0px 10px 20px rgba(0,0,0,0.15);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
transition: 200ms cubic-bezier(0.5, 0.5, 0.0, 1.0);
&:hover{
box-shadow: 0px 20px 20px rgba(0,0,0,0.25);
transform: translateY(-10px);
}
&:after{
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
&:nth-child(1){
background-image: url("https://images.unsplash.com/photo-1455459182396-ae46100617cb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
&:after{
background: linear-gradient(225deg, rgba(235,73,225,0.7) 0, rgba(85,0,215,0.3) 75%);
}
& .footer{
background: linear-gradient(225deg,#eb49e1 0,#5500d7 75%);
}
}
&:nth-child(2){
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
&:after{
background: linear-gradient(225deg, rgba(255,143,0,0.7) 0, rgba(255,220,0,0.3) 75%);
}
& .footer{
background: linear-gradient(225deg,#ff8f00 0,#ffdc00 75%);
}
}
&:nth-child(3){
background-image: url("https://images.unsplash.com/photo-1538097304804-2a1b932466a9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
&:after{
background: linear-gradient(225deg, rgba(0,220,192,0.7) 0, rgba(0,90,240,0.3) 75%);
}
& .footer{
background: linear-gradient(225deg,#00dcc0 0,#005af0 75%);
}
}
& .footer{
font-family: ZCOOL XiaoWei;
color: #fff;
position: absolute;
z-index: 1;
bottom: 0px;
left: 0px;
width: 100%;
box-shadow: 0px 0px 0px rgba(0,0,0,0);
transform: translate(0%, 100%);
transition: 200ms cubic-bezier(0.5, 0.5, 0.0, 1.0);
transition-delay: 300ms;
& .content{
padding: 10px 30px;
z-index: 2;
& .title{
font-size: 21px;
font-weight: 600;
padding: 0px 0px 10px 0px;
}
& .text{
}
}
}
&:hover .footer{
box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
transform: translate(0%, 0%);
}
}
}
Final output:-
yes it ready CSS INFO CARD you can easily share the information of city or anything.
hope you understand and like it.If any mistake or doubt drop a comment.
written by:- Sayali Kharat
code by:-Tibix
