Skip to content

Instantly share code, notes, and snippets.

@dikiwidia

dikiwidia/latihan_1.php

Last active March 28, 2026 09:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dikiwidia/68fe1edba98fd488de649df580af7155 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dikiwidia/68fe1edba98fd488de649df580af7155 to your computer and use it in GitHub Desktop.
Download ZIP
Example Card
Raw
latihan_1.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
integrity="sha384-tViUnnbYAV00FLIhhi3v/dWt3Jxw4gZQcNoSCxCIFNJVCx7/D55/wXsrNIRANwdD" crossorigin="anonymous">
</head>
<body>
<div class="flex items-center justify-center min-h-screen w-full bg-slate-200 flex-wrap">
<?php
$datas = [
[
"name" => "Salman Alfarisi",
"position" => "IT Development System",
"followings" => 100,
"followers" => 3000,
"projects" => 89,
"description" => "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, odit alias! Nesciunt doloribus sapiente unde culpa atque similique laboriosam earum?",
"photo" => "https://picsum.photos/400/400",
"is_active" => true
],
[
"name" => "Moch Diki Widianto",
"position" => "UI/UX Designer",
"followings" => 2100,
"followers" => 2109,
"projects" => 32,
"description" => "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem, odit alias! Nesciunt doloribus sapiente unde culpa atque similique laboriosam earum?",
"photo" => "https://picsum.photos/300/300",
"is_active" => true
],
];
foreach ($datas as $data) {
$name = $data["name"];
$photo = $data["photo"];
$position = $data["position"];
$description = $data["description"];
$followings = $data["followings"];
$followers = $data["followers"];
$projects = $data["projects"];
$is_active = $data["is_active"];
?>
<div class="w-1/4 p-5">
<div class="flex flex-col w-full p-5 rounded-lg shadow bg-white">
<div class="w-full flex items-center justify-end">
<i class="bi bi-three-dots-vertical" class="text-md"></i>
</div>
<div class="flex flex-col items-center justify-center">
<div class="relative">
<div
class="flex items-center justify-center absolute w-6 h-6 right-0 bottom-2 rounded-full <?php echo $is_active ? "bg-green-500" : "bg-slate-500"; ?>">
<i class="bi bi-check" class="text-sm" style="color:white"></i>
</div>
<img src="<?php echo $photo; ?>" alt="" class="w-24 h-24 object-cover rounded-full">
</div>
<h3 class="text-xl font-medium mt-4">
<?php echo $name; ?>
</h3>
<span class="text-sm text-slate-500">
<?php echo $position; ?>
</span>
</div>
<div class="flex items-center justify-center w-full py-5">
<div class="flex flex-col items-center justify-center w-1/3">
<span class="text-sm text-slate-500">Projects</span>
<p class="text-lg"><?php echo number_format($projects); ?></p>
</div>
<div class="flex flex-col items-center justify-center w-1/3">
<span class="text-sm text-slate-500">Following</span>
<p class="text-lg"><?php echo number_format($followings); ?></p>
</div>
<div class="flex flex-col items-center justify-center w-1/3">
<span class="text-sm text-slate-500">Followers</span>
<p class="text-lg">
<?php echo number_format($followers); ?>
</p>
</div>
</div>
<div class="flex items-center justify-center w-full py-2">
<p class="text-sm text-slate-500 text-center"><?php echo $description; ?></p>
</div>
<div class="flex items-center justify-center w-full py-5 gap-2">
<div class="flex flex-col items-center justify-center w-7 h-7 rounded-full bg-blue-500">
<i class="bi bi-twitter" class="text-md" style="color: white"></i>
</div>
<div class="flex flex-col items-center justify-center w-7 h-7 rounded-full bg-blue-900">
<i class="bi bi-facebook" class="text-md" style="color: white"></i>
</div>
<div class="flex flex-col items-center justify-center w-7 h-7 rounded-full bg-red-500">
<i class="bi bi-google" class="text-md" style="color: white"></i>
</div>
<div class="flex flex-col items-center justify-center w-7 h-7 rounded-full bg-blue-700">
<i class="bi bi-behance" class="text-md" style="color: white"></i>
</div>
</div>
<div class="flex items-center justify-center mb-5">
<button
class="flex items-center justify-center inline-block px-4 py-2 bg-white cursor-pointer shadow rounded-full">View
Profile</button>
</div>
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment