Instagram Widget

Create Cards in HTML and CSS

Cards can be used in profiling,  Real time messaging, search, archiving & more. So, let us see how we can create a card in HTML and CSS.

We have to achieve something like this:


<html lang="en">
  <title>Slacker Card</title>
  <link href=",300" rel="stylesheet" type="text/css"></link>
    * {
      box-sizing: border-box;
    body {
      font-family: 'Open Sans', sans-serif;
      color: #222;
    .card {
      height: 475px;
      width: 325px;
      box-shadow: 0px 5px 15px 0px rgba(153,153,153,0.5);
      border-radius: 4px;
    .top {
      height: 55%;
      border-radius: 4px 4px 0px 0px;
      border: 1px solid #ddd;
      /* Setting a background image */
      background-image: url("");
      padding: 0px 16px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    .name {
      padding-top: calc(475px * 0.40);
      margin: 0px;
      color: blue;
    .status {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-left: 4px;

      border-radius: 5px;
      background-color: #60D156;
    .title {
      margin-top: 8px;
      color: blue;
    .middle {
      height: 5%;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      padding: 0px 16px;
    .time {
      color: #444;
      font-size: 0.8em;
      padding-top: 0.2em;
    .bottom {
      height: 40%;
      border-radius: 0px 0px 4px 4px;
      border: 1px solid #ddd;
      padding: 8px 16px;
    .profile-action {
      display: block;
      width: 100%;
      height: 32px;

      font-family: inherit;
      font-size: 1em;
      text-align: left;
      border-radius: 4px;
      border: 0px;
      background-color: white;
      cursor: pointer;
    .profile-action:hover {
      background-color: #00A5D2;
      color: white;
    <div class="card">
      <div class="top">
        <h3 class="name">
Aleem Raja <span class="status"></span></h3>
<div class="title">
Full Stack Developer</div>
<div class="middle">
        <div class="time">
12:34 PM local time</div>
<div class="bottom">
<button class="profile-action">History</button>
        <button class="profile-action">Account</button>
        <button class="profile-action">Edit your profile</button>
        <button class="profile-action">View your files</button>
        <button class="profile-action">Logout</button>

Post a Comment