Tailwind
Card
Profil
Developpeur
Html
Carte Tailwind CSS de profil développeur senior avec compétences, stack technique et liens portfolio.
https://codepen.io/gulamqadir0410/pen/gbYGmPO
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<title>Tailwind Card 01 | AngularForAll</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=SUSE:wght@100..800&display=swap"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
html,
body {
margin: 0;
height: 100%;
background-color: #fcc2c2;
font-family: Roboto;
}
</style>
</head>
<body>
<div class="main h-screen w-full">
<div class="card-container flex flex-wrap gap-2 justify-around">
<div class="card p-1 mt-6 h-72 w-64 bg-white rounded-xl">
<div class="cardheader w-full h-[75%] bg-cyan-100 rounded-t-xl">
<div class="card-headings flex justify-between px-4 items-center w-full h-[25%] rounded-t-xl">
<h4 class="text-xs font-semibold">$120/hr</h4>
<i class="ri-bookmark-line text-xl"></i>
</div>
<div class="cardtitles flex justify-between p-4 w-full h-[60%]">
<h1 class="text-[1.63em] font-normal leading-8 w-40">Senior UI Developer</h1>
<i class="ri-arrow-right-line mt-14 text-xl"></i>
</div>
<div class="dots w-100 h-[15%] flex items-center justify-center">
<i class="ri-circle-fill text-[7px] ms-1"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
</div>
</div>
<div class="cardfooter p-2 w-full h-[25%] flex items-center justify-between">
<div class="subtitle flex items-center py-2">
<i class="ri-arrow-down-circle-fill text-4xl"></i>
<h4 class="text-[0.73em] font-semibold w-7/12 ml-2">Senior UI Developer</h4>
</div>
<div class="viewbutton bg-black w-12 h-8 flex items-center justify-center rounded-full">
<p class="text-white text-[0.7em]">View</p>
</div>
</div>
</div>
<div class="card p-1 mt-6 h-72 w-64 bg-white rounded-xl">
<div class="cardheader w-full h-[75%] bg-purple-100 rounded-t-xl">
<div class="card-headings flex justify-between px-4 items-center w-full h-[25%] rounded-t-xl">
<h4 class="text-xs font-semibold">$150/hr</h4>
<i class="ri-bookmark-line text-xl"></i>
</div>
<div class="cardtitles flex justify-between p-4 w-full h-[60%]">
<h1 class="text-[1.63em] font-normal leading-8 w-40">Senior Backend Engineer</h1>
<i class="ri-arrow-right-line mt-14 text-xl"></i>
</div>
<div class="dots w-100 h-[15%] flex items-center justify-center">
<i class="ri-circle-fill text-[7px] ms-1"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
</div>
</div>
<div class="cardfooter p-2 w-full h-[25%] flex items-center justify-between">
<div class="subtitle flex items-center py-2">
<i class="ri-arrow-down-circle-fill text-4xl"></i>
<h4 class="text-[0.73em] font-semibold w-7/12 ml-2">Senior Backend Engineer</h4>
</div>
<div class="viewbutton bg-black w-12 h-8 flex items-center justify-center rounded-full">
<p class="text-white text-[0.7em]">View</p>
</div>
</div>
</div>
<div class="card p-1 mt-6 h-72 w-64 bg-white rounded-xl">
<div class="cardheader w-full h-[75%] bg-yellow-100 rounded-t-xl">
<div class="card-headings flex justify-between px-4 items-center w-full h-[25%] rounded-t-xl">
<h4 class="text-xs font-semibold">$120/hr</h4>
<i class="ri-bookmark-line text-xl"></i>
</div>
<div class="cardtitles flex justify-between p-4 w-full h-[60%]">
<h1 class="text-[1.63em] font-normal leading-8 w-40">Azure Cloud Engineer</h1>
<i class="ri-arrow-right-line mt-14 text-xl"></i>
</div>
<div class="dots w-100 h-[15%] flex items-center justify-center">
<i class="ri-circle-fill text-[7px] ms-1"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
</div>
</div>
<div class="cardfooter p-2 w-full h-[25%] flex items-center justify-between">
<div class="subtitle flex items-center py-2">
<i class="ri-arrow-down-circle-fill text-4xl"></i>
<h4 class="text-[0.73em] font-semibold w-7/12 ml-2">Azure Cloud Engineer</h4>
</div>
<div class="viewbutton bg-black w-12 h-8 flex items-center justify-center rounded-full">
<p class="text-white text-[0.7em]">View</p>
</div>
</div>
</div>
<div class="card p-1 mt-6 h-72 w-64 bg-white rounded-xl">
<div class="cardheader w-full h-[75%] bg-red-100 rounded-t-xl">
<div class="card-headings flex justify-between px-4 items-center w-full h-[25%] rounded-t-xl">
<h4 class="text-xs font-semibold">$120/hr-150/hr</h4>
<i class="ri-bookmark-line text-xl"></i>
</div>
<div class="cardtitles flex justify-between p-4 w-full h-[60%]">
<h1 class="text-[1.63em] font-normal leading-8 w-40">Senior Backend Engineer</h1>
<i class="ri-arrow-right-line mt-14 text-xl"></i>
</div>
<div class="dots w-100 h-[15%] flex items-center justify-center">
<i class="ri-circle-fill text-[7px] ms-1"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
</div>
</div>
<div class="cardfooter p-2 w-full h-[25%] flex items-center justify-between">
<div class="subtitle flex items-center py-2">
<i class="ri-arrow-down-circle-fill text-4xl"></i>
<h4 class="text-[0.73em] font-semibold w-7/12 ml-2">Senior Backend Engineer</h4>
</div>
<div class="viewbutton bg-black w-12 h-8 flex items-center justify-center rounded-full">
<p class="text-white text-[0.7em]">View</p>
</div>
</div>
</div>
<div class="card p-1 mt-6 h-72 w-64 bg-white rounded-xl">
<div class="cardheader w-full h-[75%] bg-green-100 rounded-t-xl">
<div class="card-headings flex justify-between px-4 items-center w-full h-[25%] rounded-t-xl">
<h4 class="text-xs font-semibold">$120/hr-170/hr</h4>
<i class="ri-bookmark-line text-xl"></i>
</div>
<div class="cardtitles flex justify-between p-4 w-full h-[60%]">
<h1 class="text-[1.63em] font-normal leading-8 w-40">Data Scientist & Analyst</h1>
<i class="ri-arrow-right-line mt-14 text-xl"></i>
</div>
<div class="dots w-100 h-[15%] flex items-center justify-center">
<i class="ri-circle-fill text-[7px] ms-1"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
</div>
</div>
<div class="cardfooter p-2 w-full h-[25%] flex items-center justify-between">
<div class="subtitle flex items-center py-2">
<i class="ri-arrow-down-circle-fill text-4xl"></i>
<h4 class="text-[0.73em] font-semibold w-7/12 ml-2">Data Scientist & Analyst</h4>
</div>
<div class="viewbutton bg-black w-12 h-8 flex items-center justify-center rounded-full">
<p class="text-white text-[0.7em]">View</p>
</div>
</div>
</div>
<div class="card p-1 mt-6 h-72 w-64 bg-white rounded-xl">
<div class="cardheader w-full h-[75%] bg-blue-100 rounded-t-xl">
<div class="card-headings flex justify-between px-4 items-center w-full h-[25%] rounded-t-xl">
<h4 class="text-xs font-semibold">$120/hr</h4>
<i class="ri-bookmark-line text-xl"></i>
</div>
<div class="cardtitles flex justify-between p-4 w-full h-[60%]">
<h1 class="text-[1.63em] font-normal leading-8 w-40">Senior Backend Engineer</h1>
<i class="ri-arrow-right-line mt-14 text-xl"></i>
</div>
<div class="dots w-100 h-[15%] flex items-center justify-center">
<i class="ri-circle-fill text-[7px] ms-1"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
<i class="ri-circle-fill text-[7px] ms-1 text-slate-400"></i>
</div>
</div>
<div class="cardfooter p-2 w-full h-[25%] flex items-center justify-between">
<div class="subtitle flex items-center py-2">
<i class="ri-arrow-down-circle-fill text-4xl"></i>
<h4 class="text-[0.73em] font-semibold w-7/12 ml-2">Senior Backend Engineer</h4>
</div>
<div class="viewbutton bg-black w-12 h-8 flex items-center justify-center rounded-full">
<p class="text-white text-[0.7em]">View</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- Thanks For Visiting -->
<!-- Contact on gulamqadir0410@gmail.com -->
<!------------------------------------------------------------------------------------------------------------>
<div class="ag-format-container">
<div class="ag-courses_box">
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">UI/Web&Graph design for teenagers 11-17 years old</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">04.11.2022</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">UX/UI Web-Design + Mobile Design</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">04.11.2022</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">Annual package "Product+UX/UI+Graph designer 2022"</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">04.11.2022</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">Graphic Design</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">04.11.2022</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">Motion Design</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">30.11.2022</span>
</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">Front-end development + jQuery + CMS</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">Digital Marketing</div>
</a>
</div>
<div class="ag-courses_item">
<a href="#" class="ag-courses-item_link">
<div class="ag-courses-item_bg"></div>
<div class="ag-courses-item_title">Interior Design</div>
<div class="ag-courses-item_date-box">
Start:
<span class="ag-courses-item_date">31.10.2022</span>
</div>
</a>
</div>
</div>
</div>
<style>
.ag-format-container {
width: 1142px;
margin: 0 auto;
}
body {
background-color: #000;
}
.ag-courses_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 50px 0;
}
.ag-courses_item {
-ms-flex-preferred-size: calc(33.33333% - 30px);
flex-basis: calc(33.33333% - 30px);
margin: 0 15px 30px;
overflow: hidden;
border-radius: 28px;
}
.ag-courses-item_link {
display: block;
padding: 30px 20px;
background-color: #121212;
overflow: hidden;
position: relative;
}
.ag-courses-item_link:hover,
.ag-courses-item_link:hover .ag-courses-item_date {
text-decoration: none;
color: #fff;
}
.ag-courses-item_link:hover .ag-courses-item_bg {
-webkit-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
}
.ag-courses-item_title {
min-height: 87px;
margin: 0 0 25px;
overflow: hidden;
font-weight: bold;
font-size: 30px;
color: #fff;
z-index: 2;
position: relative;
}
.ag-courses-item_date-box {
font-size: 18px;
color: #fff;
z-index: 2;
position: relative;
}
.ag-courses-item_date {
font-weight: bold;
color: #f9b234;
-webkit-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.ag-courses-item_bg {
height: 128px;
width: 128px;
background-color: #f9b234;
z-index: 1;
position: absolute;
top: -75px;
right: -75px;
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ag-courses_item:nth-child(2n) .ag-courses-item_bg {
background-color: #3ecd5e;
}
.ag-courses_item:nth-child(3n) .ag-courses-item_bg {
background-color: #e44002;
}
.ag-courses_item:nth-child(4n) .ag-courses-item_bg {
background-color: #952aff;
}
.ag-courses_item:nth-child(5n) .ag-courses-item_bg {
background-color: #cd3e94;
}
.ag-courses_item:nth-child(6n) .ag-courses-item_bg {
background-color: #4c49ea;
}
@media only screen and (max-width: 979px) {
.ag-courses_item {
-ms-flex-preferred-size: calc(50% - 30px);
flex-basis: calc(50% - 30px);
}
.ag-courses-item_title {
font-size: 24px;
}
}
@media only screen and (max-width: 767px) {
.ag-format-container {
width: 96%;
}
}
@media only screen and (max-width: 639px) {
.ag-courses_item {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.ag-courses-item_title {
min-height: 72px;
line-height: 1;
font-size: 24px;
}
.ag-courses-item_link {
padding: 22px 40px;
}
.ag-courses-item_date-box {
font-size: 16px;
}
}
</style>