Hugging Face's logo

Spaces:
Tommass
/
simone-dark-clone-deluxe
Running

App Files Community
simone-dark-clone-deluxe / elements.html
Tommass's picture
Tommass
can you give me code for this page?
3a06e53 verified
Raw History Blame Contribute Delete
20.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simone - Elements</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #1a1a1a;
color: #ffffff;
}
.active {
color: #20c997 !important;
}
.progress-bar {
height: 4px;
background-color: #20c997;
}
.contact-form input,
.contact-form textarea {
background-color: #2a2a2a;
border: 1px solid #3a3a3a;
color: #ffffff;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: #20c997;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion.active .accordion-content {
max-height: 500px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body class="relative">
<!-- Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold text-white">Sim<span class="text-emerald-400">one</span></a>
<div class="hidden md:flex space-x-8">
<a href="index.html#home" class="text-white hover:text-emerald-400 transition-colors duration-300">Home</a>
<a href="index.html#about" class="text-white hover:text-emerald-400 transition-colors duration-300">About</a>
<a href="index.html#services" class="text-white hover:text-emerald-400 transition-colors duration-300">Services</a>
<a href="index.html#portfolio" class="text-white hover:text-emerald-400 transition-colors duration-300">Portfolio</a>
<a href="index.html#testimonial" class="text-white hover:text-emerald-400 transition-colors duration-300">Testimonial</a>
<a href="index.html#contact" class="text-white hover:text-emerald-400 transition-colors duration-300">Contact</a>
<a href="elements.html" class="text-white hover:text-emerald-400 transition-colors duration-300 active">Elements</a>
<a href="portfolio-copy.html" class="text-white hover:text-emerald-400 transition-colors duration-300">Portfolio Copy</a>
<a href="dataops.html" class="text-white hover:text-emerald-400 transition-colors duration-300">DataOps</a>
</div>
<button class="md:hidden text-white focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Elements Section -->
<section class="pt-32 pb-20 px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-16 text-white">Elements <span class="text-emerald-400">Page</span></h2>
<!-- Typography Section -->
<div class="mb-16">
<h3 class="text-2xl font-bold mb-8 text-white border-b border-gray-700 pb-4">Typography</h3>
<div class="space-y-6">
<h1 class="text-5xl font-bold text-white">Heading 1</h1>
<h2 class="text-4xl font-bold text-white">Heading 2</h2>
<h3 class="text-3xl font-bold text-white">Heading 3</h3>
<h4 class="text-2xl font-bold text-white">Heading 4</h4>
<h5 class="text-xl font-bold text-white">Heading 5</h5>
<h6 class="text-lg font-bold text-white">Heading 6</h6>
<p class="text-gray-300">This is a regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
<p class="text-gray-400">This is a muted paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
<p class="text-emerald-400">This is a primary colored text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Buttons Section -->
<div class="mb-16">
<h3 class="text-2xl font-bold mb-8 text-white border-b border-gray-700 pb-4">Buttons</h3>
<div class="flex flex-wrap gap-4 items-center">
<button class="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300">
Primary Button
</button>
<button class="border border-emerald-500 text-emerald-500 hover:bg-emerald-500 hover:text-white font-medium py-2 px-6 rounded-full transition-colors duration-300">
Outline Button
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300">
Secondary Button
</button>
<button class="bg-transparent text-white hover:text-emerald-400 font-medium py-2 px-6 rounded-full transition-colors duration-300">
Text Button
</button>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300 flex items-center">
<i data-feather="download" class="mr-2 w-4 h-4"></i> With Icon
</button>
</div>
</div>
<!-- Progress Bars Section -->
<div class="mb-16">
<h3 class="text-2xl font-bold mb-8 text-white border-b border-gray-700 pb-4">Progress Bars</h3>
<div class="space-y-6">
<div>
<div class="flex justify-between mb-2">
<span class="text-gray-300">HTML/CSS</span>
<span class="text-emerald-400">95%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="progress-bar rounded-full h-2" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="text-gray-300">JavaScript</span>
<span class="text-emerald-400">85%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="progress-bar rounded-full h-2" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="text-gray-300">React</span>
<span class="text-emerald-400">80%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2">
<div class="progress-bar rounded-full h-2" style="width: 80%"></div>
</div>
</div>
</div>
</div>
<!-- Tabs Section -->
<div class="mb-16">
<h3 class="text-2xl font-bold mb-8 text-white border-b border-gray-700 pb-4">Tabs</h3>
<div class="bg-gray-800 rounded-lg overflow-hidden">
<div class="flex border-b border-gray-700">
<button class="tab-btn px-6 py-3 text-white font-medium hover:bg-gray-700 transition-colors duration-300 active" data-tab="tab1">Tab 1</button>
<button class="tab-btn px-6 py-3 text-white font-medium hover:bg-gray-700 transition-colors duration-300" data-tab="tab2">Tab 2</button>
<button class="tab-btn px-6 py-3 text-white font-medium hover:bg-gray-700 transition-colors duration-300" data-tab="tab3">Tab 3</button>
</div>
<div class="p-6">
<div id="tab1" class="tab-content active">
<p class="text-gray-300">Content for Tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
</div>
<div id="tab2" class="tab-content">
<p class="text-gray-300">Content for Tab 2. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</div>
<div id="tab3" class="tab-content">
<p class="text-gray-300">Content for Tab 3. Donec vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.</p>
</div>
</div>
</div>
</div>
<!-- Accordion Section -->
<div class="mb-16">
<h3 class="text-2xl font-bold mb-8 text-white border-b border-gray-700 pb-4">Accordion</h3>
<div class="space-y-4">
<div class="accordion bg-gray-800 rounded-lg overflow-hidden active">
<button class="accordion-btn w-full flex justify-between items-center p-4 text-left text-white font-medium hover:bg-gray-700 transition-colors duration-300">
<span>Accordion Item 1</span>
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform duration-300 rotate-180"></i>
</button>
<div class="accordion-content px-4 pb-4 text-gray-300">
<p>Content for Accordion Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
</div>
</div>
<div class="accordion bg-gray-800 rounded-lg overflow-hidden">
<button class="accordion-btn w-full flex justify-between items-center p-4 text-left text-white font-medium hover:bg-gray-700 transition-colors duration-300">
<span>Accordion Item 2</span>
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform duration-300"></i>
</button>
<div class="accordion-content px-4 pb-4 text-gray-300">
<p>Content for Accordion Item 2. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
</div>
</div>
<div class="accordion bg-gray-800 rounded-lg overflow-hidden">
<button class="accordion-btn w-full flex justify-between items-center p-4 text-left text-white font-medium hover:bg-gray-700 transition-colors duration-300">
<span>Accordion Item 3</span>
<i data-feather="chevron-down" class="w-5 h-5 transform transition-transform duration-300"></i>
</button>
<div class="accordion-content px-4 pb-4 text-gray-300">
<p>Content for Accordion Item 3. Donec vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante.</p>
</div>
</div>
</div>
</div>
<!-- Form Elements Section -->
<div class="mb-16">
<h3 class="text-2xl font-bold mb-8 text-white border-b border-gray-700 pb-4">Form Elements</h3>
<form class="contact-form space-y-6 max-w-2xl">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-gray-300 mb-2">Text Input</label>
<input type="text" placeholder="Enter your name" class="w-full px-4 py-3 rounded-lg focus:outline-none">
</div>
<div>
<label class="block text-gray-300 mb-2">Email Input</label>
<input type="email" placeholder="Enter your email" class="w-full px-4 py-3 rounded-lg focus:outline-none">
</div>
</div>
<div>
<label class="block text-gray-300 mb-2">Select Box</label>
<select class="w-full px-4 py-3 rounded-lg focus:outline-none bg-gray-700 border-gray-600 text-white">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div>
<label class="block text-gray-300 mb-2">Textarea</label>
<textarea rows="4" placeholder="Enter your message" class="w-full px-4 py-3 rounded-lg focus:outline-none"></textarea>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded bg-gray-700 border-gray-600 text-emerald-500 focus:ring-emerald-500">
<span class="ml-2 text-gray-300">Checkbox</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="radio" name="radio" class="rounded-full bg-gray-700 border-gray-600 text-emerald-500 focus:ring-emerald-500">
<span class="ml-2 text-gray-300">Radio Button 1</span>
</label>
<label class="inline-flex items-center ml-6">
<input type="radio" name="radio" class="rounded-full bg-gray-700 border-gray-600 text-emerald-500 focus:ring-emerald-500">
<span class="ml-2 text-gray-300">Radio Button 2</span>
</label>
</div>
<button type="submit" class="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-3 px-6 rounded-full transition-colors duration-300">
Submit Form
</button>
</form>
</div>
<!-- Icons Section -->
<div class="mb-16">
<h3 class="text-2xl font-bold mb-8 text-white border-b border-gray-700 pb-4">Icons</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
<div class="text-center p-4 bg-gray-800 rounded-lg">
<i data-feather="home" class="w-8 h-8 mx-auto text-emerald-400 mb-2"></i>
<span class="text-gray-300 text-sm">home</span>
</div>
<div class="text-center p-4 bg-gray-800 rounded-lg">
<i data-feather="user" class="w-8 h-8 mx-auto text-emerald-400 mb-2"></i>
<span class="text-gray-300 text-sm">user</span>
</div>
<div class="text-center p-4 bg-gray-800 rounded-lg">
<i data-feather="settings" class="w-8 h-8 mx-auto text-emerald-400 mb-2"></i>
<span class="text-gray-300 text-sm">settings</span>
</div>
<div class="text-center p-4 bg-gray-800 rounded-lg">
<i data-feather="mail" class="w-8 h-8 mx-auto text-emerald-400 mb-2"></i>
<span class="text-gray-300 text-sm">mail</span>
</div>
<div class="text-center p-4 bg-gray-800 rounded-lg">
<i data-feather="phone" class="w-8 h-8 mx-auto text-emerald-400 mb-2"></i>
<span class="text-gray-300 text-sm">phone</span>
</div>
<div class="text-center p-4 bg-gray-800 rounded-lg">
<i data-feather="message-square" class="w-8 h-8 mx-auto text-emerald-400 mb-2"></i>
<span class="text-gray-300 text-sm">message</span>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 px-4 bg-gray-900 text-center">
<div class="container mx-auto">
<p class="text-gray-400">&copy; 2023 Simone. All Rights Reserved.</p>
<div class="flex justify-center mt-4 space-x-4">
<a href="#" class="text-gray-400 hover:text-emerald-400 transition-colors duration-300">
<i data-feather="arrow-up" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-emerald-400 transition-colors duration-300">
<i data-feather="github" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-emerald-400 transition-colors duration-300">
<i data-feather="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="text-gray-400 hover:text-emerald-400 transition-colors duration-300">
<i data-feather="linkedin" class="w-5 h-5"></i>
</a>
</div>
</div>
</footer>
<script>
// Initialize Feather Icons
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
// Tab functionality
const tabBtns = document.querySelectorAll('.tab-btn');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tabId = btn.getAttribute('data-tab');
// Remove active class from all tabs and buttons
document.querySelectorAll('.tab-btn').forEach(tabBtn => {
tabBtn.classList.remove('active');
});
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// Add active class to clicked tab and button
btn.classList.add('active');
document.getElementById(tabId).classList.add('active');
});
});
// Accordion functionality
const accordionBtns = document.querySelectorAll('.accordion-btn');
accordionBtns.forEach(btn => {
btn.addEventListener('click', () => {
const accordion = btn.closest('.accordion');
const icon = btn.querySelector('i');
// Toggle accordion active state
accordion.classList.toggle('active');
// Rotate icon
if (accordion.classList.contains('active')) {
icon.style.transform = 'rotate(180deg)';
} else {
icon.style.transform = 'rotate(0deg)';
}
});
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
});
</script>
</body>
</html>