How to Create Beautiful Card UI Using CSS

Learn how to create beautiful card using css, this video can be followed by any beginners or intermediate.

Tutorial

Code :

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

body{
 font-family: "Arial";
}

.card{
 width: 440px;
 height: 240px;
 background: linear-gradient(to right, #F44336, #E91E63);
 margin: 15%;
 border-radius: 10px;
 box-shadow: 0px 0px 10px #E91E63;

}

.card-image{
 background-color: #e4e4e4;
 width: 140px;
 height: 140px;
 border-radius: 50%;
 position: relative;
 top: 50px;
 left: -70px;
 box-shadow: 0px 0px 10px white;
}

.image{
 width: 170px;
 height: auto;
 position: relative;
 left: -10px;
 transform: rotate(30deg);
}

.card-info{
 background-color: none;
 margin-left: 90px;
 position: relative;
 top: -125px;
}

.view-button, .buy-button{
 width: 150px;
 font-size: 21px;
 outline: none;
 border-radius: 5px;
 border: none;
 padding: 10px;
 cursor: pointer;
}

.buy-button{
 background-color: yellow;
 transition: .5s;
}

.buy-button:hover{
   background-color: black;
   color: white;
}

h1,p{
 color: white;
 font-weight: lighter;
}

 </style>
</head>
<body>

<div class="card">

 <div class="card-image">
  <img src="https://lh3.googleusercontent.com/-fbf1Va1Kgc0/XGer3LXmExI/AAAAAAAAAy8/u8VLUzlhJwImETianzlwAkdaazZWAhrnQCLcBGAs/h120/nike.png" class="image">
 </div>
<div class="card-info">
  <h1>
Nike O9Q</h1>
<p>Sell By Nike Cop</p>
<br/>
  <h1>
Price : 200 $</h1>
<p>It is a Original Nike Shoe called O9Q, It is Made up of strongest Material.</p>
<br/>
  <button class="view-button">View</button>
  <button class="buy-button">Buy</button>
 </div>
</div>
</body>
</html>

reecry

Next Create CSS Animated Button using Hover effect »

Previous « CSS Card Design Tutorial with Code

View Comments

Elakiya says:

February 27, 2019 at 7:57 am

Thank you for the valuable information. The Way of Your article presentation is very effective and very easy to understand about the process. Keep Blogging!
White Label Website Builder
Elakiya says:

February 28, 2019 at 1:22 pm

Thank you for the valuable information. Keep Blogging!
Private Label Website Builder
Arya Kumar says:

November 13, 2019 at 12:38 pm

This is great article it's inspiring so many people. Thank you sharing such a great article. Website Design Company in Kolkata
Sam Parker says:

November 13, 2019 at 12:38 pm

The classic game of cards known as Solitaire has so many different variations that the original and most recognizable variant is now referred to as Solo Solitaire. This is game that uses the “tableaux” format of seven spaces, four foundation rows, a draw pile and a discard pile.