HTML Components
Last components generated by our users
a basic report page that displays cloud infrastructure drift. The top of the page should display the number of resources in the project, how many resources are managed, and how many are unmanaged. The main content of the page should be a table displaying the project resources such as servers and disk drives. marc dicarlo
about 2 hours ago
Before and after hair treatment with slide that we can drag Bruno Gaiteiro
about 2 hours ago
幫我生成如圖中的版型，需要響應式，Tailwind CSS + html Can you create a user status submission form, similar to how you send a tweet, which has a users avatar a stutus box, a media upload icon and a send button Dan James
about 12 hours ago
A user profile component. The company will have a basic details section. A user avatar and a image cover. Dan James
about 15 hours ago
generate a html page with beautiful login screen with username and password and submit button and register link below. Minhajul Aminine Emon
about 16 hours ago
create html page with todo input element at top , todo list in middle and pagination at the bottom Minhajul Aminine Emon
about 16 hours ago
Here’s a comprehensive prompt tailored to your choices and preferences, designed for Tailwind AI:
"Design a clean, minimalistic, and responsive portfolio website using Tailwind CSS with the following sections and features:
Sections:
Home:
A welcoming hero section with:
My name prominently displayed.
A catchy tagline.
A professional photo.
A responsive navbar with links to all sections: 'Home,' 'About Me,' 'Skills,' 'Projects,' 'Resume,' and 'Contact.'
About Me:
A brief description of my background, skills, and goals.
Include a professional photo and a visually appealing background image.
Skills:
Showcase technical skills using visually engaging elements like progress bars or icons (use Font Awesome or similar libraries).
Projects:
A grid or card-based layout to highlight projects.
Each project card should include:
A title.
Description of the project.
The tech stack used.
An image of the project.
Links for a live demo and GitHub repository.
Resume:
Include a button to download my resume in PDF format.
Contact:
A contact form with fields for:
Name.
Email.
Message.
Include links to my social media profiles with icons.
Use Formspree or EmailJS for handling form submissions.
Design Style:
Clean and minimalistic with responsive layouts for both desktop and mobile views.
Subtle hover effects and animations for interactivity (e.g., buttons, links, and project cards).
Light and dark mode toggle for user preference.
Features:
Navbar:
Sticky at the top while scrolling.
Collapsible hamburger menu for mobile devices.
Animations and Transitions:
Smooth animations using CSS or a library like GSAP for elements like progress bars, project cards, and section transitions.
Responsiveness:
Ensure the design adapts perfectly to all screen sizes (desktop, tablet, and mobile).
Dark Mode:
Include a toggle for light and dark themes.
Technologies:
Use HTML for structure, CSS (Tailwind CSS) for styling, and JavaScript for interactivity.
Optional: Incorporate React.js for a dynamic experience.
Use Formspree or EmailJS for the contact form backend.
Ensure the design is modern and visually appealing, keeping my preferences in mind. Make all sections cohesive and polished for a portfolio that showcases my work and skills effectively." 10 Varun Joshi
about 17 hours ago
"Design a responsive navbar with Tailwind CSS, featuring the following elements:
Background: A light blue background spanning the width of the page.
Navbar Shape: A white pill-shaped container in the center, with rounded corners and a slight shadow for elevation.
Left Oval:
A smaller, pill-shaped oval with a green dot and the text 'available for projects' inside.
Ensure it is aligned to the left of the main navbar and visually complements it.
Right Oval:
Another pill-shaped oval on the right side with an email icon and text 'hey@zenwood.studio.'
Add an icon resembling a clipboard or copy functionality.
Navbar Links:
Center-aligned navigation links inside the main navbar: 'Works,' 'Benefits,' 'About,' 'Process,' 'Pricing,' 'Contact,' 'FAQ.'
A simple black icon on the left to represent a logo.
Styling:
All text is black with a clear and readable font.
Subtle hover effects on the links, such as text underline or color change.
Icons should be simple and minimalistic.
Proper spacing between all items for a balanced layout.
Ensure the design is mobile-friendly, with the navbar collapsing into a hamburger menu or stacking vertically on smaller screens." 10 Varun Joshi
about 17 hours ago
Create a same to same, ditto navbar as in the below link
https://zenwood.studio/ 10 Varun Joshi
about 17 hours ago
Buat halaman indeks saya tampak modern dan menarik dengan tema abu abu muda , font yang elegan, dan animasi gulir yang menakjubkan. Gunakan skema warna gelap yang kontras, seperti abu-abu gelap, biru tua, dan putih. Pilih font sans-serif yang modern dan mudah dibaca. Tambahkan efek transisi gulir yang halus dan menarik, seperti fade-in, zoom-in, atau slide-up. Anda juga dapat mempertimbangkan efek paralaks untuk menambahkan kedalaman visual.
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional IT Portfolio - Muhammad Arapat Rahman</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<style>
/* Animasi fadeIn */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }
/* Gradient text */
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #4F46E5, #9333EA);
}
/* Optimasi CSS untuk animasi */
.card, .skill-card, .experience-card, .project-card, .biodata-item {
will-change: transform, opacity;
}
/* Responsive design */
@media (max-width: 768px) {
.avatar { margin-top: 40px; }
.hero-title { font-size: 2rem; }
.hero-description { font-size: 1rem; }
}
/* Animasi wave */
@keyframes waveAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-25%);
}
100% {
transform: translateX(0);
}
}
.wave-animation {
animation: waveAnimation 10s linear infinite;
}
.wave-animation-2 {
animation: waveAnimation 15s linear infinite;
}
</style>
</head>
<body class="font-sans bg-base-100 text-base-content">
<!-- Navigation -->
<div class="navbar bg-gradient-to-r from-pink-500 to-orange-400 shadow-lg fixed top-0 z-50">
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a href="#biodata">Biodata</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#hasil-project">My Project</a></li>
</ul>
</div>
<a class="btn btn-ghost normal-case text-xl text-white">Muhammad Arapat Rahman</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="#biodata" class="text-white hover:bg-pink-600/20">Biodata</a></li>
<li><a href="#education" class="text-white hover:bg-pink-600/20">Education</a></li>
<li><a href="#skills" class="text-white hover:bg-pink-600/20">Skills</a></li>
<li><a href="#experience" class="text-white hover:bg-pink-600/20">Experience</a></li>
<li><a href="#hasil-project" class="text-white hover:bg-pink-600/20">My Project</a></li>
</ul>
</div>
<div class="navbar-end">
<label class="swap swap-rotate">
<input type="checkbox" class="theme-controller" value="synthwave" />
<svg class="swap-on fill-current w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
</svg>
<svg class="swap-off fill-current w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
</svg>
</label>
</div>
</div>
<!-- Hero Section with Wave Animation -->
<section class="pt-24 min-h-screen flex items-center justify-center px-4 opacity-0 transition-opacity duration-1000" id="hero-section">
<div class="max-w-4xl mx-auto text-center relative z-10">
<div class="avatar mb-8">
<div class="w-48 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
<img src="pas_foto.png" alt="Muhammad Arapat Rahman">
</div>
</div>
<h1 class="text-5xl font-bold hero-title">Muhammad Arapat Rahman, S.Kom.</h1>
<p class="py-6 hero-description">Experienced Web Developer and IT Professional specializing in network infrastructure, system administration, and technical leadership.</p>
<div class="flex justify-center gap-6">
<a href="#biodata" class="btn bg-gradient-to-r from-purple-600 to-blue-500 text-white border-none hover:from-purple-700 hover:to-blue-600 hover:shadow-xl transition-all duration-300 transform hover:scale-105">
<svg class="svg-inline--fa fa-magnifying-glass mr-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"></path></svg>
Explore More
</a>
<a href="/mycv.pdf" class="btn bg-gradient-to-r from-pink-500 to-orange-400 text-white border-none hover:from-pink-600 hover:to-orange-500 hover:shadow-xl transition-all duration-300 transform hover:scale-105" download="mycv.pdf">
<svg class="svg-inline--fa fa-download mr-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="..."></path></svg>
Download CV
</a>
</div>
</div>
<!-- SVG Waves -->
<div class="absolute bottom-0 left-0 w-full overflow-hidden leading-none transform rotate-180">
<svg class="relative block w-full h-20 wave-animation" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-current text-purple-500 opacity-50"></path>
</svg>
</div>
<div class="absolute bottom-0 left-0 w-full overflow-hidden leading-none">
<svg class="relative block w-full h-20 wave-animation-2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-current text-purple-700 opacity-30"></path>
</svg>
</div>
</section>
<!-- Biodata Section -->
<section id="biodata" class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center gradient-text mb-12">Biodata</h2>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="space-y-4">
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fas fa-phone"></i>
</div>
<p><strong>Mobile Phone:</strong> 0853 7860 1404</p>
</div>
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fab fa-whatsapp"></i>
</div>
<p><strong>Whatsapp:</strong> 0853 7860 1404</p>
</div>
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fas fa-calendar-alt"></i>
</div>
<p><strong>Place/Date of Birth:</strong> Jambi, 20 December 1991</p>
</div>
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fas fa-pray"></i>
</div>
<p><strong>Religion:</strong> Islam</p>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fas fa-user"></i>
</div>
<p><strong>Status:</strong> Single</p>
</div>
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fas fa-venus-mars"></i>
</div>
<p><strong>Gender:</strong> Male</p>
</div>
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fas fa-map-marker-alt"></i>
</div>
<p><strong>Address:</strong> Jl. TP SRIWIJAYA RT 09 NO 11, Kec. Alam Barajo, Jambi</p>
</div>
<div class="flex items-center space-x-4 biodata-item">
<div class="w-10 h-10 flex items-center justify-center rounded-full bg-primary text-primary-content">
<i class="fas fa-envelope"></i>
</div>
<p><strong>Email:</strong> Arafat.forestry@yahoo.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section id="education" class="py-16 bg-base-200">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center gradient-text mb-12">Education</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Education Card 1 -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body flex items-start">
<i class="fa-solid fa-graduation-cap text-4xl text-blue-500 mr-4"></i>
<div>
<h3 class="text-xl font-semibold mb-2">Bachelor of Computer Science</h3>
<p class="text-sm text-gray-600 mb-4">STIKOM DINAMIKA BANGSA, 2010 - 2015</p>
<p class="text-base">Majoring in Computer Systems</p>
</div>
</div>
</div>
<!-- Education Card 2 -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body flex items-start">
<i class="fa-solid fa-school text-4xl text-green-500 mr-4"></i>
<div>
<h3 class="text-xl font-semibold mb-2">High School Diploma</h3>
<p class="text-sm text-gray-600 mb-4">SMAN 4 Jambi, 2004 - 2007</p>
</div>
</div>
</div>
<!-- Education Card 3 -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body flex items-start">
<i class="fa-solid fa-book text-4xl text-yellow-500 mr-4"></i>
<div>
<h3 class="text-xl font-semibold mb-2">Junior High School</h3>
<p class="text-sm text-gray-600 mb-4">SMP ISLAM Al-FALAH, 2004 - 2007</p>
</div>
</div>
</div>
<!-- Education Card 4 -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body flex items-start">
<i class="fa-solid fa-chalkboard text-4xl text-red-500 mr-4"></i>
<div>
<h3 class="text-xl font-semibold mb-2">Elementary School</h3>
<p class="text-sm text-gray-600 mb-4">SD ISLAM Al-FALAH, 1999 - 2004</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center gradient-text mb-12">Technical Skills</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Skill Cards -->
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fas fa-code text-primary"></i> PHP
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fas fa-database text-primary"></i> MySQL
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fab fa-html5 text-primary"></i> HTML
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fab fa-css3-alt text-primary"></i> CSS
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fab fa-js text-primary"></i> JavaScript
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fab fa-node-js text-primary"></i> Node.js
</h3>
</div>
</div>
</div>
<!-- Networking Skills -->
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fas fa-network-wired text-primary"></i> Mikrotik
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fas fa-network-wired text-primary"></i> Cisco
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fas fa-sitemap text-primary"></i> IPv4
</h3>
</div>
</div>
</div>
<!-- Additional Skills -->
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fas fa-server text-primary"></i> Windows Server
</h3>
</div>
</div>
</div>
<div class="card bg-base-100 shadow-xl skill-card">
<div class="card-body">
<div class="flex items-center justify-between mb-4">
<h3 class="card-title flex items-center gap-2">
<i class="fas fa-video text-primary"></i> CCTV
</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-16 bg-base-200">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center gradient-text mb-12">Professional Experience</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<a href="it-staff.html" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300 experience-card">
<div class="card-body">
<h3 class="card-title text-primary">IT Staff</h3>
<p class="text-sm font-medium">PT. Universal Support Mining</p>
<p class="text-xs">September 2022 - Present</p>
<p class="text-sm mt-4">Leading IT infrastructure and systems management, implementing cutting-edge solutions for mining operations.</p>
</div>
</a>
<a href="it-support.html" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300 experience-card">
<div class="card-body">
<h3 class="card-title text-primary">IT Support</h3>
<p class="text-sm font-medium">PT. Thriveni Mining Group LTD</p>
<p class="text-xs">September 2019 - September 2020</p>
<p class="text-sm mt-4">Providing comprehensive IT support and maintaining critical systems for mining operations.</p>
</div>
</a>
<a href="it-supervisor.html" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300 experience-card">
<div class="card-body">
<h3 class="card-title text-primary">IT Supervisor</h3>
<p class="text-sm font-medium">PT. Bangun Rimba Sejahtera</p>
<p class="text-xs">August 2015 - June 2019</p>
<p class="text-sm mt-4">Supervising IT operations and leading infrastructure development projects.</p>
</div>
</a>
</div>
</div>
</section>
<!-- Project Section -->
<section id="hasil-project" class="py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center gradient-text mb-12">Project Web Timbangan</h2>
<div class="card bg-base-100 shadow-xl max-w-2xl mx-auto project-card">
<div class="card-body text-center">
<p class="mb-6">Berikut adalah salah satu projek web timbangan yang telah saya kembangkan. Silakan kunjungi tautan di bawah ini untuk melihat hasilnya:</p>
<a href="http://scale.kesug.com/login.php" target="_blank" class="btn btn-primary">
Lihat Project Web Timbangan
<i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer footer-center p-10 bg-base-200 text-base-content rounded">
<div class="grid grid-flow-col gap-4">
<a href="https://www.linkedin.com/in/muhammad-arapat-rahman-43004714b/" class="link link-hover">LinkedIn</a>
<a href="mailto:arafat.forestry@yahoo.com" class="link link-hover">Email</a>
</div>
<div>
<div class="grid grid-flow-col gap-4">
<a href="https://www.linkedin.com/in/muhammad-arapat-rahman-43004714b/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
</a>
<a href="mailto:arafat.forestry@yahoo.com">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</svg>
</a>
</div>
</div>
<div>
<p>© 2025 Muhammad Arapat Rahman. All rights reserved.</p>
</div>
</footer>
<script>
document.addEventListener("DOMContentLoaded", function () {
const heroSection = document.getElementById("hero-section");
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
heroSection.classList.add("opacity-100");
observer.unobserve(heroSection); // Berhenti mengamati setelah animasi selesai
}
});
},
{
threshold: 0.5, // Trigger animasi saat 50% elemen terlihat
}
);
observer.observe(heroSection);
});
</script>
<!-- Script untuk animasi dan smooth scroll -->
<script>
// Konfigurasi Lenis untuk smooth scroll
const lenis = new Lenis({
duration: 1.2, // Durasi transisi scroll
smoothWheel: true, // Aktifkan smooth scroll untuk mouse
smoothTouch: false, // Matikan smooth scroll untuk touch (jika perlu)
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// Fungsi untuk animasi smooth scroll
const smoothScrollAnimation = () => {
const observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Jalankan animasi hanya saat elemen terlihat
anime({
targets: entry.target,
opacity: [0, 1], // Fade-in
translateY: [30, 0], // Bergerak dari bawah ke atas
duration: 800, // Durasi animasi
easing: 'easeOutQuad', // Easing yang halus
delay: anime.stagger(100), // Delay antar elemen
});
observer.unobserve(entry.target); // Hentikan pengamatan setelah animasi
}
});
},
{ threshold: 0.1 } // Mulai animasi saat elemen 10% terlihat
);
// Pilih elemen yang akan dianimasikan
const elements = document.querySelectorAll(
'.biodata-item, .card, .skill-card, .experience-card, .project-card'
);
elements.forEach((el) => observer.observe(el));
};
// Jalankan animasi setelah halaman dimuat
document.addEventListener('DOMContentLoaded', smoothScrollAnimation);
</script>
</body>
</html> Generate the interface for a web banking application that meets these requirements: work on the home page and presentation of the banking application, registration, login and logout, as well as error handling. It uses an animated, friendly and modern style, and is responsive for all types of devices. 2. Wat is de vraag aan jou?
Je gaat een sfeervolle bezorgapp ontwerpen voor Yume Ramen, het Japanse afhaal- en
bezorgrestaurant. De app moet er mooi uitzien en een duidelijke link hebben met de
Japanse cultuur. Gebruikers moeten snel en makkelijk het menu kunnen bekijken en hun
ramen thuis laten bezorgen. De app moet goed en soepel werken.
Creër een sfeervolle en optimaal functionerende bezorg app voor
Yume Ramen, hét Japanse afhaal- en bezorg restaurant voor Ramen
Noodles.
3. Wie is de doelgroep?
De doelgroep bestaat uit:
- Mensen die van Japanse Ramen Noodles houden
- Mensen die graag eten laten of willen laten bezorgen
- Jong en oud, zowel ramenliefhebbers als nieuwe klanten
4. Wat is het doel?
Het doel van de app is om klanten een fijne ervaring te geven waarmee ze snel en
makkelijk ramen kunnen bestellen voor thuisbezorging. De app moet een Japanse sfeer
hebben en soepel en gebruiksvriendelijk werken..
Het creëren van een sfeervolle en optimale functionerende bezorg
app voor Japanse Ramen Noodles. <!-- Total Courses and Top Teachers -->
<section class="mb-8">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<!-- Total Courses Card -->
<div class="card bg-gradient-to-br from-blue-50 to-white">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Total Number of Created Courses</h3>
<div class="flex items-center space-x-3">
<span class="text-4xl font-bold text-blue-600"><?php echo $totalCourses; ?></span>
<span class="text-lg text-gray-600">courses</span>
</div>
</div>
<!-- Top Teachers Card -->
<div class="card bg-gradient-to-br from-purple-50 to-white">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Top 3 Teachers</h3>
<ul class="space-y-3">
<?php foreach ($topTeachers as $teacher): ?>
<li class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors duration-200">
<span class="text-md text-gray-700 font-medium"><?php echo htmlspecialchars($teacher['username']); ?></span>
<span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm font-medium">
<?php echo $teacher['course_count']; ?> courses
</span>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</section>
<!-- Approved Courses Table -->
<section class="mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Approved Courses</h2>
<?php if ($approvedCourses): ?>
<div class="card overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course Title</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teacher</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<?php foreach ($approvedCourses as $course): ?>
<tr class="hover:bg-gray-50 transition-colors duration-200">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($course['title']); ?></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-600"><?php echo htmlspecialchars($course['teacher']); ?></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<a href="../Teacher/courseDetail.php?course_id=<?php echo $course['course_id']; ?>"
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200">
View Details
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php else: ?>
<div class="card text-center py-8">
<p class="text-lg text-gray-600">No approved courses yet.</p>
</div>
<?php endif; ?>
</section>
<!-- Pending Courses Table -->
<section class="mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Pending Courses</h2>
<?php if ($pendingCourses): ?>
<div class="card overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Course Title</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teacher</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<?php foreach ($pendingCourses as $course): ?>
<tr class="hover:bg-gray-50 transition-colors duration-200">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($course['title']); ?></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-600"><?php echo htmlspecialchars($course['teacher']); ?></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<a href="../Teacher/courseDetail.php?course_id=<?php echo $course['course_id']; ?>"
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-200">
Review Course
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php else: ?>
<div class="card text-center py-8">
<p class="text-lg text-gray-600">No pending courses at the moment.</p>
</div>
<?php endif; ?>
</section>
make them beautifly structured , styled well and good for ui (html tailwind custom css) Rayan Elguerdaoui
1 day ago
make an awsome login page improve it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link href="./output.css" rel="stylesheet" />
</head>
<body class="font-poppins font-semibold">
<nav class="container flex items-center justify-between p-4 mb-36">
<h1 class="text-2xl">Cars.</h1>
<ul class="flex items-center gap-4 z-10">
<li class="text-blue-600 cursor-pointer">Home</li>
<li class="hover:text-blue-600 cursor-pointer">About</li>
<li class="hover:text-blue-600 cursor-pointer">Reviews</li>
<li class="hover:text-blue-600 cursor-pointer">Features</li>
<li class="hover:text-blue-600 cursor-pointer">contact</li>
</ul>
<div class="flex items-center gap-6 z-10">
<i
class="fa-brands fa-facebook-f hover:scale-105 cursor-pointer duration-150"
style="color: #000000"
></i>
<i
class="fa-brands fa-instagram hover:scale-105 cursor-pointer duration-150"
style="color: #000000"
></i>
<i
class="fa-brands fa-twitter hover:scale-105 cursor-pointer duration-150"
style="color: #000000"
></i>
</div>
</nav>
<section>
<div class="container flex items-center justify-center gap-5">
<div class="flex flex-1 flex-col justify-center">
<h1 class="text-4xl font-bold mt-2">Car Dealing Experience.</h1>
<h1 class="text-4xl font-bold text-blue-600 mb-4">Redifined!</h1>
<p class="text-lg text-slate-600 w-full mb-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
repellendus quae, natus quas dolores voluptates officia.
</p>
<button
class="bg-blue-600 border-2 border-blue-600 rounded-lg px-4 py-2 text-white hover:bg-white hover:text-blue-600 duration-150 w-32"
>
Exlore Cars
</button>
</div>
<div class="relative flex flex-1 justify-center z-10">
<img
class="flex flex-1 justify-center z-10 h-[450px] w-[450px]"
src="./car.png"
alt=""
/>
<div
class="absolute bottom-0 right-0 rotate-45 w-full h-80 bg-blue-600"
></div>
</div>
</div>
</section>
</body>
</html>
<body class="font-sans">
<!-- Navigation -->
<nav class="container mx-auto px-4 py-6 mb-20">
<div class="flex items-center justify-between">
<!-- Logo -->
<h1 class="text-2xl font-bold">Cars.</h1>
<!-- Desktop Navigation -->
<ul class="hidden md:flex items-center space-x-8">
<li><a href="#" class="text-blue-600">Home</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">About</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">Reviews</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">Features</a></li>
<li><a href="#" class="hover:text-blue-600 transition-colors">Contact</a></li>
</ul>
<!-- Social Icons -->
<div class="hidden md:flex items-center space-x-6">
<a href="#" class="hover:scale-110 transition-transform">
<i class="fab fa-facebook-f text-gray-800"></i>
</a>
<a href="#" class="hover:scale-110 transition-transform">
<i class="fab fa-instagram text-gray-800"></i>
</a>
<a href="#" class="hover:scale-110 transition-transform">
<i class="fab fa-twitter text-gray-800"></i>
</a>
</div>
<!-- Mobile Menu Button -->
<button class="md:hidden">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between gap-12">
<!-- Left Content -->
<div class="flex-1 space-y-6">
<h1 class="text-4xl md:text-5xl font-bold leading-tight">
Car Dealing Experience
<span class="text-blue-600 block">Redefined!</span>
</h1>
<p class="text-gray-600 text-lg max-w-xl">
Experience the future of car buying with our innovative platform.
We combine cutting-edge technology with exceptional service to make
your car buying journey seamless and enjoyable.
</p>
<button class="bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold
border-2 border-blue-600 hover:bg-transparent hover:text-blue-600
transition-colors duration-300">
Explore Cars
</button>
</div>
<!-- Right Content -->
<div class="flex-1 relative">
<img src="./car.png" alt="Luxury Car"
class="relative z-10 w-full max-w-lg mx-auto"/>
<div class="absolute bottom-0 right-0 w-full h-80 bg-blue-600
transform rotate-45 -z-0 md:h-96">
</div>
</div>
</div>
</section>
<!-- Mobile Menu (Hidden by default) -->
<div class="hidden fixed inset-0 bg-white z-50 md:hidden">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-end">
<button class="text-2xl">
<i class="fas fa-times"></i>
</button>
</div>
<ul class="flex flex-col items-center space-y-6 mt-20">
<li><a href="#" class="text-2xl text-blue-600">Home</a></li>
<li><a href="#" class="text-2xl hover:text-blue-600">About</a></li>
<li><a href="#" class="text-2xl hover:text-blue-600">Reviews</a></li>
<li><a href="#" class="text-2xl hover:text-blue-600">Features</a></li>
<li><a href="#" class="text-2xl hover:text-blue-600">Contact</a></li>
</ul>
<div class="flex justify-center space-x-8 mt-12">
<a href="#"><i class="fab fa-facebook-f text-2xl"></i></a>
<a href="#"><i class="fab fa-instagram text-2xl"></i></a>
<a href="#"><i class="fab fa-twitter text-2xl"></i></a>
</div>
</div>
</div>
<script>
// Mobile menu toggle
const menuButton = document.querySelector('button.md\\:hidden');
const mobileMenu = document.querySelector('.fixed.inset-0');
const closeButton = mobileMenu.querySelector('button');
menuButton.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
});
closeButton.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
</script>
</body>
</html> A list of product categories with image, name and description. I wan a reconcilation form page that take two inputs:
1- Bank statement excel file.
2- Payment gateway report csv file
عبدالإله الحصيّن
2 days ago
Create a good Admin Panel Login Create a chat-like interface with the avatar on the left, bubble-like content on the right, time (in timeago format) at the bottom of the content, and a group of commentators’ avatars at the bottom right. write me a tailwindcss dashboard with header, leftsidebar and content area. for the mobile the content area should be 100% I want to build a dashboard for managing products, stocks, sales and customers. Can you design the layout with header, left sidebar, theme switching options A landing page hero section with a heading, leading text and an opt-in form. 
