Simple Colorful Cards Using CSS for Beginners

Cards Using CSS

These Cards are very easy to Create Any Beginner can create these cards and these Cards are really good for practicing CSS Cards Because from these cards you can understand what the best way to represent data and also going to help in developing CSS Skills.

Code :

<!DOCTYPE html>
<html>
<head>
 <title>Simple Card</title>
<style type="text/css">
 
 *{
  margin: 0px;
  padding: 0px;
 }

 body{
  font-family: "yu gothic";
  font-weight: lighter;
 }

 .container{
  background-color: #a0a0a04a;
  text-align: center;

 }

 .card{
  width: 460px;
  height: auto;
  display: inline-block;
  margin: 10px;
  padding-top: 80px;
  padding-bottom: 80px;
 }

 .card-1{
  background-color: royalblue;

 }

 .card-2{
  background-color: lightgreen;
 }

 .card-3{
  background-color: orange;
 }

 .text{
  font-size: 19px;
  color: white;
 }

 .button{
  background-color: transparent;
  border: 3px solid white;
  border-radius: 20px;
  padding: 10px;
  color: white;
  transition: all .5s;
  cursor: pointer;
  margin: 40px;
 }

 .button:hover{
  background-color: white;
  transform: rotateY(360deg);
  width: 200px;
 }

 .button-1:hover{
        color: royalblue;  
 }

 .button-2:hover{
     color: lightgreen; 
 }


 .button-3:hover{
     color: orange; 
 }
    
    .main-text{
     text-align: center;
     color: grey;
     font-size: 21px;
     padding: 30px;
    }


</style>
</head>
<body>

 <div class="container">

  <h1 class="main-text">
Cards Using HTML and CSS</h1>
<div class="card card-1">
         
<h1 class="text">
“The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.”<br/>
-Mark Caine
</h1>
<button class="button button-1">Read More</button>
         </div>
<div class="card card-2">
          <h1 class="text">
“When one door of happiness closes, another opens; but often we look so long at the closed door that we do not see the one which has been opened for us.”<br/>
-Helen Keller</h1>
<button class="button button-2">Read More</button>
         </div>
<div class="card card-3">
          <h1 class="text">
“When I dare to be powerful – to use my strength in the service of my vision, then it becomes less and less important whether I am afraid.”<br/>
-Audre Lorde</h1>
<button class="button button-3">Read More</button>
         </div>
</div>
</body>
</html>

reecry