Skip to content

Instantly share code, notes, and snippets.

@K-Vishwak

K-Vishwak/card.html

Last active May 19, 2023 15:23
Show Gist options
  • Save K-Vishwak/7ec0e297513d16924a62c5bddd3d5ac3 to your computer and use it in GitHub Desktop.
Save K-Vishwak/7ec0e297513d16924a62c5bddd3d5ac3 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Card
Raw
card.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.main-card {
width: 45rem;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"
></script>
<title>Basic Calendar</title>
</head>
<body>
<div class="main-card center">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-md-6">
<div class="d-flex align-items-center w-75">
<div>
<img
class="border border-light rounded"
src="https://www.w3schools.com/html/smiley.gif"
alt="alt"
/>
</div>
<div class="ms-5">
<h1 class="h1 card-title d-block" style="font-size: 20px">
Vishwak Kurapati
</h1>
<h6 class="card-subtitle text-secondary">UI/UX Designer</h6>
</div>
</div>
</div>
<div class="col-md-6">
<div style="float: right">
<a href="" class="btn btn-primary bg-gradient border-0">Edit</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row text-center">
<div class="col-3">
<h1><strong>69</strong></h1>
<span class="text-secondary">Shorts</span>
</div>
<div class="col-3">
<h1><strong>2747</strong></h1>
<span class="text-secondary">Followers</span>
</div>
<div class="col-3">
<h1><strong>679</strong></h1>
<span class="text-secondary">Following</span>
</div>
<div class="col-3">
<h1><strong>78</strong></h1>
<span class="text-secondary">Lightning</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div
class="col-6 d-flex flex-row align-items-center justify-content-center"
>
<img
src="https://img.icons8.com/?size=28&id=12623&format=png&color=0275d8"
/>
<span class="text-primary p-2"><strong>MESSAGE</strong></span>
</div>
<div class="col-6 d-flex justify-content-end">
<a href="" class="btn btn-light">Follow</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment