How to Create Beautiful Card UI Using CSS

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers

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


Code :

<!DOCTYPE html>
 <style type="text/css">
 margin: 0px;
 padding: 0px;

 font-family: "Arial";

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


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

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

 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;

 background-color: yellow;
 transition: .5s;

   background-color: black;
   color: white;

 color: white;
 font-weight: lighter;


<div class="card">

 <div class="card-image">
  <img src="" class="image">
<div class="card-info">
Nike O9Q</h1>
<p>Sell By Nike Cop</p>
Price : 200 $</h1>
<p>It is a Original Nike Shoe called O9Q, It is Made up of strongest Material.</p>
  <button class="view-button">View</button>
  <button class="buy-button">Buy</button>

Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers