Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

halo pak, saya lagi belajar github fork di channel wpu unpas #25

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

halo pak, saya lagi belajar github fork di channel wpu unpas #25

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 165 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>landing page</title>
<!-- tampilan daisy ui dari tailwind -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.0/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

</head>
<body class="bg-white">
<nav>
<div class="navbar bg-base-100 w-full">
<div class="flex-1">
<a class="btn btn-ghost normal-case text-xl">daisyUI</a>
</div>
<div class="flex-none">
<ul class="menu menu-horizontal px-1">
<li><a>Sign In</a></li>
<li>
<details>
<summary>
Get In Touch
</summary>
<ul class="p-2 bg-base-100">
<li><a>lorem</a></li>
<li><a>lorem</a></li>
</ul>
</details>
</li>
</ul>
</div>
</div>
</nav>

<section class="w-full flex flex-wrap gap-8 justify-center py-10">

<div class="card 1">
<div class="card card-compact w-64 h-72 bg-base-100 shadow-xl rounded-lg">
<figure><img src="https://images.pexels.com/photos/977842/pexels-photo-977842.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="dummy image" /></figure>
<div class="card-body h-40">
<h2 class="card-title text-sm">Lorem ipsum dolor sit!</h2>
<p class="text-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe impedit, consectetur voluptates ducimus iste</p>
<div class="card-actions justify-end">
<button class="btn btn-primary text-xs ">Lihat Sekarang</button>
</div>
</div>
</div>
</div>

<div class="card 2">
<div class="card card-compact w-64 h-72 bg-base-100 shadow-xl rounded-lg">
<figure><img src="https://images.pexels.com/photos/322338/pexels-photo-322338.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="dummy image" /></figure>
<div class="card-body h-40">
<h2 class="card-title text-sm">Lorem ipsum dolor sit!</h2>
<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat eum excepturi iusto odit voluptatum fugiat incidunt</p>
<div class="card-actions justify-end">
<button class="btn btn-primary text-xs ">Lihat Sekarang</button>
</div>
</div>
</div>
</div>

<div class="card 3">
<div class="card card-compact w-64 h-72 bg-base-100 shadow-xl rounded-lg">
<figure><img src="https://images.pexels.com/photos/270669/pexels-photo-270669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="dummy image" /></figure>
<div class="card-body h-40">
<h2 class="card-title text-sm">Lorem ipsum dolor sit!</h2>
<p class="text-xs">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi quae in quam sunt aperiam ratione aut repellendus</p>
<div class="card-actions justify-end">
<button class="btn btn-primary text-xs mb-5 ">Lihat Sekarang
</button>
</div>
</div>
</div>
</div>

</section>

<section>

<div class="chat chat-start ml-20">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeholder.com/600x400" />
</div>
</div>
<div class="chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">12:45</time>
</div>
<div class="chat-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing 🤩
</div>
<div class="chat-footer opacity-50">
Delivered
</div>
</div>

<div class="chat chat-end mr-20">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeholder.com/600x400" />
</div>
</div>
<div class="chat-header">
Anakin
<time class="text-xs opacity-50">12:46</time>
</div>
<div class="chat-bubble">Lorem ipsum dolor sit amet consectetur 👍</div>
<div class="chat-footer opacity-50">
Seen at 12:46
</div>
</div>

<div class="chat chat-end mr-20">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeholder.com/600x400" />
</div>
</div>
<div class="chat-header">
Anakin
<time class="text-xs opacity-50">12:46</time>
</div>
<div class="chat-bubble">Lorem ipsum dolor sit amet consectetur 🤩</div>
<div class="chat-footer opacity-50">
Seen at 12:46
</div>
</div>

<div class="chat chat-start ml-20">
<div class="chat-image avatar">
<div class="w-10 rounded-full">
<img src="https://placeholder.com/600x400" />
</div>
</div>
<div class="chat-header">
Obi-Wan Kenobi
<time class="text-xs opacity-50">12:45</time>
</div>
<div class="chat-bubble">Lorem ipsum dolor sit amet, consectetur adipisicing 😊</div>
<div class="chat-footer opacity-50">
Delivered
</div>
</div>

</section>

<footer class="footer p-10 bg-neutral text-neutral-content">
<div>
<svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg>
<p>ACME Industries Ltd.<br/>Providing reliable tech since 1992</p>
</div>
<div>
<span class="footer-title">Social</span>
<div class="grid grid-flow-col gap-4">
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a>
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
</div>
</div>
</footer>
</body>
</html>