Css info cards | css info cards using html and css

Table of Contents

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:-

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

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