yvette

vibes kbx

This tailwind example is contributed by Umutoniwase Yvette, on 25-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YVETTE  - Full Stack Developer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #fff;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            overflow-x: hidden;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            z-index: 1000;
            transition: all 0.3s ease;
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
        }

.logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            animation: glow 2s ease-in-out infinite alternate;
        }

@keyframes glow {
            from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00f; }
            to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00f; }
        }

.nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

.nav-links a {
            color: #fff;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"><animateTransform attributeName="transform" type="translate" values="0,0;800,600;0,0" dur="20s" repeatCount="indefinite"/></circle><circle cx="800" cy="300" r="150" fill="url(%23a)"><animateTransform attributeName="transform" type="translate" values="0,0;-600,400;0,0" dur="25s" repeatCount="indefinite"/></circle></svg>');
            animation: float 6s ease-in-out infinite;
        }

@keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

.hero-content {
            z-index: 2;
            position: relative;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0;
            animation: slideUp 1s ease forwards 0.5s;
        }

.hero p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0;
            animation: slideUp 1s ease forwards 1s;
        }

@keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.cta-button {
            display: inline-block;
            padding: 15px 30px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            opacity: 0;
            animation: slideUp 1s ease forwards 1.5s;
        }

.cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

section {
            padding: 100px 0;
            position: relative;
        }

.section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 3rem;
            position: relative;
        }

.section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            border-radius: 2px;
        }

.about {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

.about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

.about-text {
            font-size: 1.2rem;
            line-height: 1.8;
        }

.skills {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

.skill-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 15px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

.skill-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

.skill-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            display: block;
        }

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 3rem;
        }

.project-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
        }

.project-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
        }

.project-image {
            height: 200px;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: #fff;
        }

.project-content {
            padding: 2rem;
        }

.project-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

.project-description {
            margin-bottom: 1.5rem;
            opacity: 0.9;
        }

.project-tech {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

.tech-tag {
            background: rgba(255, 255, 255, 0.2);
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.9rem;
        }

.project-links {
            display: flex;
            gap: 1rem;
        }

.project-link {
            color: #4ecdc4;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

.project-link:hover {
            color: #ff6b6b;
        }

.contact {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

.contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

.contact-info {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

.contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.2rem;
        }

.contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.form-group {
            display: flex;
            flex-direction: column;
        }

.form-group label {
            margin-bottom: 0.5rem;
            font-weight: bold;
        }

.form-group input,
        .form-group textarea {
            padding: 1rem;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            transform: scale(1.02);
        }

.form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.submit-btn {
            padding: 1rem 2rem;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: #fff;
            border: none;
            border-radius: 50px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.submit-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

footer {
            background: rgba(0, 0, 0, 0.2);
            text-align: center;
            padding: 2rem;
            backdrop-filter: blur(10px);
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 1rem;
        }

.social-link {
            color: #fff;
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }

.social-link:hover {
            color: #4ecdc4;
            transform: scale(1.2);
        }

@media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero p {
                font-size: 1.2rem;
            }

.about-content,
            .contact-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

.projects-grid {
                grid-template-columns: 1fr;
            }

.section-title {
                font-size: 2rem;
            }
        }

.fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

.fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <a href="#" class="logo">AR</a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section id="home" class="hero">
        <div class="hero-content">
            <h1>My project</h1>
            <p>Full Stack Developer & UI/UX Designer</p>
            <a href="#projects" class="cta-button">View My Work</a>
        </div>
    </section>

<section id="about" class="about">
        <div class="container">
            <h2 class="section-title fade-in">About Me</h2>
            <div class="about-content">
                <div class="about-text fade-in">
                    <p>I am a person who likes to do things and I have the ability to do them. If you want to help me, I will go far and wide..</p>
                    <p> It's always good when someone does something and does it well and with passion, and that's when people really enjoy it.</p>
                <div class="skills fade-in">
                    <div class="skill-card">
                        <span class="skill-icon">⚛️</span>
                        <h3>Frontend</h3>
                        <p>React, Vue, TypeScript</p>
                    </div>
                    <div class="skill-card">
                        <span class="skill-icon">🚀</span>
                        <h3>Backend</h3>
                        <p>Node.js, Python, PostgreSQL</p>
                    </div>
                    <div class="skill-card">
                        <span class="skill-icon">☁️</span>
                        <h3>Cloud</h3>
                        <p>AWS, Docker, Kubernetes</p>
                    </div>
                    <div class="skill-card">
                        <span class="skill-icon">🎨</span>
                        <h3>Design</h3>
                        <p>Figma, Adobe XD, UI/UX</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="projects">
        <div class="container">
            <h2 class="section-title fade-in">Featured Projects</h2>
            <div class="projects-grid">
                <div class="project-card fade-in">
                    <div class="project-image">🛍️</div>
                    <div class="project-content">
                        <h3 class="project-title">E-Commerce Platform</h3>
                        <p class="project-description">A modern e-commerce solution with real-time inventory, payment processing, and admin dashboard.</p>
                        <div class="project-tech">
                            <span class="tech-tag">React</span>
                            <span class="tech-tag">Node.js</span>
                            <span class="tech-tag">MongoDB</span>
                            <span class="tech-tag">Stripe</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link">Live Demo</a>
                            <a href="#" class="project-link">GitHub</a>
                        </div>
                    </div>
                </div>

<div class="project-card fade-in">
                    <div class="project-image">📱</div>
                    <div class="project-content">
                        <h3 class="project-title">Social Media App</h3>
                        <p class="project-description">A full-featured social platform with real-time messaging, photo sharing, and community features.</p>
                        <div class="project-tech">
                            <span class="tech-tag">React Native</span>
                            <span class="tech-tag">Firebase</span>
                            <span class="tech-tag">Socket.io</span>
                            <span class="tech-tag">Redux</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link">Live Demo</a>
                            <a href="#" class="project-link">GitHub</a>
                        </div>
                    </div>
                </div>

<div class="project-card fade-in">
                    <div class="project-image">📊</div>
                    <div class="project-content">
                        <h3 class="project-title">Analytics Dashboard</h3>
                        <p class="project-description">A comprehensive business intelligence dashboard with interactive charts and real-time data visualization.</p>
                        <div class="project-tech">
                            <span class="tech-tag">Vue.js</span>
                            <span class="tech-tag">D3.js</span>
                            <span class="tech-tag">Python</span>
                            <span class="tech-tag">PostgreSQL</span>
                        </div>
                        <div class="project-links">
                            <a href="#" class="project-link">Live Demo</a>
                            <a href="#" class="project-link">GitHub</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title fade-in">Get In Touch</h2>
            <div class="contact-content">
                <div class="contact-info fade-in">
                    <div class="contact-item">
                        <span>📧</span>
                        <span>alex.rivera@email.com</span>
                    </div>
                    <div class="contact-item">
                        <span>📱</span>
                        <span>+1 (555) 123-4567</span>
                    </div>
                    <div class="contact-item">
                        <span>📍</span>
                        <span>San Francisco, CA</span>
                    </div>
                    <div class="contact-item">
                        <span>💼</span>
                        <span>Available for freelance</span>
                    </div>
                </div>
                <form class="contact-form fade-in">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" placeholder="Your name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" placeholder="your.email@example.com" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" rows="5" placeholder="Tell me about your project..." required></textarea>
                    </div>
                    <button type="submit" class="submit-btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="social-links">
            <a href="#" class="social-link">🐙</a>
            <a href="#" class="social-link">💼</a>
            <a href="#" class="social-link">🐦</a>
            <a href="#" class="social-link">📷</a>
        </div>
        <p>&copy; 2025 my project. All rights reserved.</p>
    </footer>

// Scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };

document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

// Header background on scroll
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 100) {
                header.style.background = 'rgba(0, 0, 0, 0.3)';
            } else {
                header.style.background = 'rgba(0, 0, 0, 0.1)';
            }
        });

// Form submission
        document.querySelector('.contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const formData = new FormData(this);
            const name = formData.get('name');
            const email = formData.get('email');
            const message = formData.get('message');
            
            // Simple validation
            if (name && email && message) {
                // Simulate form submission
                const submitBtn = this.querySelector('.submit-btn');
                submitBtn.textContent = 'Sending...';
                submitBtn.disabled = true;
                
                setTimeout(() => {
                    alert('Thank you for your message! I\'ll get back to you soon.');
                    this.reset();
                    submitBtn.textContent = 'Send Message';
                    submitBtn.disabled = false;
                }, 2000);
            }
        });

// Add some interactive particles
        function createParticle() {
            const particle = document.createElement('div');
            particle.style.position = 'fixed';
            particle.style.width = '4px';
            particle.style.height = '4px';
            particle.style.background = 'rgba(255, 255, 255, 0.5)';
            particle.style.borderRadius = '50%';
            particle.style.pointerEvents = 'none';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.top = window.innerHeight + 'px';
            particle.style.zIndex = '1';
            
            document.body.appendChild(particle);
            
            const animation = particle.animate([
                { transform: 'translateY(0px)', opacity: 1 },
                { transform: `translateY(-${window.innerHeight + 100}px)`, opacity: 0 }
            ], {
                duration: Math.random() * 3000 + 5000,
                easing: 'linear'
            });
            
            animation.onfinish = () => particle.remove();
        }

// Create particles periodically
        setInterval(createParticle, 300);
    </script>
</body>
</html>

Related Examples

Coffee
custom

Author:
Rebecca IRANKUNDA

4 weeks ago

42
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

3 months ago

668
Transparent Navbar

Author:
Rajesh Maheshwari

3 months ago

1.1k
navigation header
responsive navigation header

Author:
Abid Ullah

9 months ago

1.8k
Navbar with sub menus

Author:
Rajesh Maheshwari

3 months ago

1.3k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

4 weeks ago

107
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.8k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

125
header

Author:
alex_bel

1 year ago

3.3k
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2k
Creative Hero Section

Author:
Ijila Itunu

1 month ago

463
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components