Portfolio de designer créatif - Alex

Ouvrir dans l'éditeur Publiez votre code

Recommandé

8 December 2024

Interface utilisateur de l'application Réveil et Chronomètre

27 November 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex - Creative Designer</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --bg-light: #F8F6FF;
            --purple-accent: #8A2BE2; /* Mor */
            --purple-light: rgba(138, 43, 226, 0.1);
            --purple-soft: rgba(138, 43, 226, 0.3);
            --violet: #9400D3; /* Fila */
            --violet-light: rgba(148, 0, 211, 0.1);
            --text-dark: #2C2C2C;
            --text-gray: #666;
            --white: #ffffff;
            --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
        }

body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
        }

/* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(248, 246, 255, 0.95);
            backdrop-filter: blur(20px);
            z-index: 1000;
            padding: 1rem 0;
            transition: all 0.3s ease;
        }

.nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--purple-accent);
            text-decoration: none;
        }

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

.nav-links a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 400;
            position: relative;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: 25px;
        }

.nav-links a:hover {
            color: var(--purple-accent);
            background: var(--purple-light);
            transform: translateY(-2px);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--purple-accent);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

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

/* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 2rem 4rem;
            position: relative;
            overflow: hidden;
        }

.hero-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

.hero-content h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
        }

.hero-content .highlight {
            color: var(--purple-accent);
            position: relative;
        }

.hero-content p {
            font-size: 1.2rem;
            color: var(--text-gray);
            margin-bottom: 2rem;
            font-weight: 300;
        }

.cta-button {
            display: inline-block;
            background: var(--purple-accent);
            color: var(--white);
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-soft);
        }

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
            background: var(--violet);
        }

.hero-image {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.profile-container {
            position: relative;
            z-index: 10;
        }

.profile-photo {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: var(--shadow-soft);
            border: 4px solid var(--white);
        }

.bg-shape {
            position: absolute;
            border-radius: 50%;
            z-index: 1;
        }

.shape-1 {
            width: 200px;
            height: 200px;
            background: var(--purple-soft);
            top: -20px;
            right: -30px;
            animation: float 6s ease-in-out infinite;
        }

.shape-2 {
            width: 150px;
            height: 150px;
            background: var(--purple-light);
            bottom: -40px;
            left: -40px;
            animation: float 8s ease-in-out infinite reverse;
        }

.shape-3 {
            width: 100px;
            height: 100px;
            background: var(--violet-light);
            top: 50px;
            left: -50px;
            animation: float 10s ease-in-out infinite;
        }

.social-links {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

.social-links a {
            width: 50px;
            height: 50px;
            background: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--purple-accent);
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }

.social-links a:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
            background: var(--purple-accent);
            color: var(--white);
        }

/* Blog Section */
        .blog-section {
            padding: 4rem 2rem;
            background: var(--white);
        }

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

.section-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 3rem;
            color: var(--text-dark);
        }

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

.blog-card {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            cursor: pointer;
        }

.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

.blog-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, var(--purple-light), var(--purple-soft));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--purple-accent);
        }

.blog-content {
            padding: 1.5rem;
        }

.blog-date {
            color: var(--text-gray);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

.blog-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

.blog-excerpt {
            color: var(--text-gray);
            font-size: 0.95rem;
            line-height: 1.6;
        }

/* Podcast Section */
        .podcast-section {
            padding: 4rem 2rem;
            background: var(--bg-light);
        }

.podcast-container {
            background: var(--white);
            border-radius: 30px;
            padding: 3rem;
            box-shadow: var(--shadow-soft);
            text-align: center;
        }

.audio-player {
            background: var(--bg-light);
            border-radius: 20px;
            padding: 2rem;
            margin: 2rem 0;
            display: flex;
            align-items: center;
            gap: 1rem;
            justify-content: center;
        }

.play-button {
            width: 60px;
            height: 60px;
            background: var(--purple-accent);
            border: none;
            border-radius: 50%;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.play-button:hover {
            transform: scale(1.1);
            background: var(--violet);
        }

.track-info {
            flex: 1;
            text-align: left;
        }

.track-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

.track-duration {
            color: var(--text-gray);
            font-size: 0.9rem;
        }

/* Newsletter Section */
        .newsletter-section {
            padding: 4rem 2rem;
            background: var(--white);
        }

.newsletter-container {
            background: linear-gradient(135deg, var(--purple-accent), var(--violet));
            border-radius: 30px;
            padding: 3rem;
            text-align: center;
            color: var(--white);
        }

.newsletter-form {
            display: flex;
            max-width: 400px;
            margin: 2rem auto 0;
            gap: 1rem;
        }

.email-input {
            flex: 1;
            padding: 1rem;
            border: none;
            border-radius: 25px;
            font-size: 1rem;
            outline: none;
        }

.subscribe-btn {
            background: var(--white);
            color: var(--purple-accent);
            border: none;
            padding: 1rem 2rem;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.subscribe-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
        }

/* Footer */
        .footer {
            background: var(--text-dark);
            color: var(--white);
            padding: 3rem 2rem 2rem;
            text-align: center;
        }

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

.footer-social a {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--white);
            transition: all 0.3s ease;
        }

.footer-social a:hover {
            background: var(--purple-accent);
            transform: translateY(-3px);
        }

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

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

.hero-container {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }

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

.profile-photo {
                width: 250px;
                height: 250px;
            }

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

.newsletter-form {
                flex-direction: column;
            }

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

.audio-player {
                flex-direction: column;
                text-align: center;
            }

.track-info {
                text-align: center;
            }
        }

@media (max-width: 480px) {
            .nav-container {
                padding: 0 1rem;
            }

.hero {
                padding: 6rem 1rem 2rem;
            }

.hero-content h1 {
                font-size: 2rem;
            }

.hero-content p {
                font-size: 1rem;
            }

.profile-photo {
                width: 200px;
                height: 200px;
            }

.podcast-container,
            .newsletter-container {
                padding: 2rem;
            }
        }
    </style>
</head>
<body>
    
    <header class="header">
        <div class="nav-container">
            <a href="#" class="logo">Alex</a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#podcast">Podcast</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-container">
            <div class="hero-content">
                <h1>Creative <span class="highlight">Designer</span> & Visual Storyteller</h1>
                <p>I craft beautiful digital experiences that inspire and engage. Welcome to my creative journey where design meets innovation.</p>
                <a href="#" class="cta-button">View My Work</a>
                <div class="social-links">
                    <a href="#" aria-label="Behance">B</a>
                    <a href="#" aria-label="Dribbble">D</a>
                    <a href="#" aria-label="Instagram">I</a>
                    <a href="#" aria-label="LinkedIn">L</a>
                </div>
            </div>
            <div class="hero-image">
                <div class="profile-container">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%238A2BE2;stop-opacity:0.8' /%3E%3Cstop offset='100%25' style='stop-color:%239400D3;stop-opacity:0.8' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='150' fill='url(%23grad)' /%3E%3Ctext x='150' y='165' text-anchor='middle' fill='white' font-size='80' font-family='serif'%3EA%3C/text%3E%3C/svg%3E" alt="Alex Profile" class="profile-photo">
                </div>
                <div class="bg-shape shape-1"></div>
                <div class="bg-shape shape-2"></div>
                <div class="bg-shape shape-3"></div>
            </div>
        </div>
    </section>

<section class="blog-section" id="blog">
        <div class="section-container">
            <h2 class="section-title">Latest Blog Posts</h2>
            <div class="blog-grid">
                <article class="blog-card">
                    <div class="blog-image">D</div>
                    <div class="blog-content">
                        <div class="blog-date">June 20, 2025</div>
                        <h3 class="blog-title">The Art of Minimalist Design</h3>
                        <p class="blog-excerpt">Exploring how less can truly be more in modern design philosophy and practical applications.</p>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-image">C</div>
                    <div class="blog-content">
                        <div class="blog-date">June 15, 2025</div>
                        <h3 class="blog-title">Color Psychology in Branding</h3>
                        <p class="blog-excerpt">Understanding how colors influence emotions and decision-making in brand experiences.</p>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-image">I</div>
                    <div class="blog-content">
                        <div class="blog-date">June 10, 2025</div>
                        <h3 class="blog-title">Creative Process Insights</h3>
                        <p class="blog-excerpt">A deep dive into my personal creative workflow and the tools that spark innovation.</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

<section class="podcast-section" id="podcast">
        <div class="section-container">
            <div class="podcast-container">
                <h2 class="section-title">Design Conversations</h2>
                <p>Weekly discussions about creativity, design trends, and the stories behind great work.</p>
                <div class="audio-player">
                    <button class="play-button" onclick="togglePlay()">▶</button>
                    <div class="track-info">
                        <div class="track-title">Episode 15: The Future of Design</div>
                        <div class="track-duration">24:30</div>
                    </div>
                </div>
                <a href="#" class="cta-button">Listen on Spotify</a>
            </div>
        </div>
    </section>

<section class="newsletter-section">
        <div class="section-container">
            <div class="newsletter-container">
                <h2 class="section-title" style="color: white; margin-bottom: 1rem;">Stay Inspired</h2>
                <p>Get weekly design insights, creative tips, and exclusive content delivered to your inbox.</p>
                <form class="newsletter-form" onsubmit="subscribe(event)">
                    <input type="email" class="email-input" placeholder="Enter your email" required>
                    <button type="submit" class="subscribe-btn">Subscribe</button>
                </form>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="section-container">
            <div class="footer-social">
                <a href="#" aria-label="Behance">B</a>
                <a href="#" aria-label="Dribbble">D</a>
                <a href="#" aria-label="Instagram">I</a>
                <a href="#" aria-label="LinkedIn">L</a>
                <a href="#" aria-label="Twitter">T</a>
            </div>
            <p>© 2025 Alex. All rights reserved. Crafted with passion and creativity.</p>
        </div>
    </footer>

// Header background opacity on scroll
        window.addEventListener('scroll', () => {
            const header = document.querySelector('.header');
            const scrolled = window.pageYOffset;
            const opacity = Math.min(scrolled / 100, 1);
            header.style.background = `rgba(248, 246, 255, ${0.95 + opacity * 0.05})`;
        });

// Play button toggle
        function togglePlay() {
            const button = document.querySelector('.play-button');
            const isPlaying = button.textContent === '⏸';
            button.textContent = isPlaying ? '▶' : '⏸';
            
            // Add animation
            button.style.transform = 'scale(0.9)';
            setTimeout(() => {
                button.style.transform = 'scale(1)';
            }, 150);
        }

// Newsletter subscription
        function subscribe(event) {
            event.preventDefault();
            const email = event.target.querySelector('.email-input').value;
            const button = event.target.querySelector('.subscribe-btn');
            
            button.textContent = 'Subscribed!';
            button.style.background = '#4CAF50';
            
            setTimeout(() => {
                button.textContent = 'Subscribe';
                button.style.background = '';
                event.target.reset();
            }, 2000);
        }

// Blog card hover animations
        document.querySelectorAll('.blog-card').forEach(card => {
            card.addEventListener('mouseenter', () => {
                card.style.transform = 'translateY(-10px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'translateY(0) scale(1)';
            });
        });

// Intersection Observer for scroll animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Animate elements on scroll
        document.querySelectorAll('.blog-card, .podcast-container, .newsletter-container').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'all 0.6s ease';
            observer.observe(el);
        });
    </script>
</body>
</html>

Portfolio de designer créatif - Alex

Recommandé

Un code par smartfunction186

Interface utilisateur de l'application Réveil et Chronomètre

générateur de citations

HTML

CSS

JS

Recommandé

Un code par smartfunction186

Interface utilisateur de l'application Réveil et Chronomètre

générateur de citations

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS