Modèle HTML CSS pour site Web de développeur

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

6 November 2024

Exemple de page Web de portefeuille

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevHub - Where Developers Connect</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9fafb;
        }
        
        a {
            text-decoration: none;
            color: #3b82f6;
        }
        
        /* Container */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        header {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            font-size: 24px;
            font-weight: 700;
            color: #2563eb;
        }
        
        .logo span {
            color: #333;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            font-weight: 500;
            transition: color 0.3s;
            color: #4b5563;
        }
        
        .nav-links a:hover {
            color: #2563eb;
        }
        
        .cta-button {
            background-color: #2563eb;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: 500;
            transition: background-color 0.3s;
        }
        
        .cta-button:hover {
            background-color: #1d4ed8;
            color: white;
        }
        
        /* Hero Section */
        .hero {
            padding: 80px 0;
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 20px;
            max-width: 600px;
            margin: 0 auto 40px;
            opacity: 0.9;
        }
        
        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .primary-button {
            background-color: white;
            color: #2563eb;
            padding: 15px 30px;
            border-radius: 5px;
            font-weight: 600;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .primary-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .secondary-button {
            background-color: transparent;
            color: white;
            padding: 15px 30px;
            border-radius: 5px;
            font-weight: 600;
            border: 2px solid white;
            transition: background-color 0.3s;
        }
        
        .secondary-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        /* Features Section */
        .features {
            padding: 100px 0;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-header h2 {
            font-size: 36px;
            margin-bottom: 15px;
            color: #1f2937;
        }
        
        .section-header p {
            font-size: 18px;
            color: #6b7280;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
        
        .feature-card {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            background-color: #eff6ff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .feature-icon i {
            color: #2563eb;
            font-size: 24px;
        }
        
        .feature-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: #1f2937;
        }
        
        .feature-card p {
            color: #6b7280;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 100px 0;
            background-color: #f3f4f6;
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .testimonial-card {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .testimonial-content {
            font-size: 16px;
            color: #4b5563;
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #dbeafe;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: #2563eb;
        }
        
        .author-info h4 {
            font-size: 18px;
            margin-bottom: 5px;
            color: #1f2937;
        }
        
        .author-info p {
            font-size: 14px;
            color: #6b7280;
        }
        
        /* Pricing */
        .pricing {
            padding: 100px 0;
        }
        
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .pricing-card {
            background-color: white;
            border-radius: 10px;
            padding: 40px 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .pricing-card.popular {
            transform: scale(1.05);
            border: 2px solid #2563eb;
        }
        
        .pricing-card.popular::before {
            content: "Most Popular";
            position: absolute;
            top: 12px;
            right: -35px;
            background-color: #2563eb;
            color: white;
            padding: 5px 40px;
            transform: rotate(45deg);
            font-size: 12px;
            font-weight: 600;
        }
        
        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .pricing-card.popular:hover {
            transform: scale(1.05) translateY(-5px);
        }
        
        .pricing-header {
            margin-bottom: 30px;
        }
        
        .pricing-header h3 {
            font-size: 24px;
            color: #1f2937;
            margin-bottom: 10px;
        }
        
        .price {
            font-size: 48px;
            font-weight: 700;
            color: #2563eb;
            margin-bottom: 10px;
        }
        
        .price span {
            font-size: 16px;
            font-weight: 400;
            color: #6b7280;
        }
        
        .pricing-features {
            list-style: none;
            margin-bottom: 30px;
        }
        
        .pricing-features li {
            padding: 10px 0;
            border-bottom: 1px solid #e5e7eb;
            color: #4b5563;
        }
        
        .pricing-features li:last-child {
            border-bottom: none;
        }
        
        /* CTA Section */
        .cta {
            padding: 80px 0;
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            text-align: center;
        }
        
        .cta h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .cta p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto 40px;
            opacity: 0.9;
        }
        
        /* Footer */
        footer {
            background-color: #1f2937;
            color: #e5e7eb;
            padding: 70px 0 20px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }
        
        .footer-col h4 {
            font-size: 18px;
            margin-bottom: 20px;
            color: white;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #9ca3af;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #374151;
            color: #9ca3af;
            font-size: 14px;
        }
        
        /* Responsive styles */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 36px;
            }
            
            .hero p {
                font-size: 18px;
            }
            
            .hero-buttons {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-links {
                display: none;
            }
            
            .pricing-card.popular {
                transform: scale(1);
            }
            
            .pricing-card.popular:hover {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body>
    
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">Dev<span>Hub</span></a>
                <ul class="nav-links">
                    <li><a href="#features">Features</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="#" class="cta-button">Sign Up</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <h1>Build, Connect, and Grow<br>with Fellow Developers</h1>
            <p>DevHub is your all-in-one platform for coding collaboration, knowledge sharing, and career advancement.</p>
            <div class="hero-buttons">
                <a href="#" class="primary-button">Get Started Free</a>
                <a href="#" class="secondary-button">See How It Works</a>
            </div>
        </div>
    </section>

<section class="features" id="features">
        <div class="container">
            <div class="section-header">
                <h2>Powerful Features for Developers</h2>
                <p>Everything you need to code efficiently, collaborate seamlessly, and grow your skills</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <span></span>
                    </div>
                    <h3>Cloud IDE</h3>
                    <p>Code from anywhere with our powerful cloud-based integrated development environment. Supports over 40+ programming languages.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <span></span>
                    </div>
                    <h3>Real-time Collaboration</h3>
                    <p>Pair program with teammates in real-time. Share your workspace and debug together, no matter where you are.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <span></span>
                    </div>
                    <h3>Version Control</h3>
                    <p>Seamless Git integration with visual diff tools, merge conflict resolution, and repository management.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <span></span>
                    </div>
                    <h3>One-Click Deployment</h3>
                    <p>Deploy your applications to the cloud with a single click. Includes CI/CD pipelines and environment management.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <span></span>
                    </div>
                    <h3>Code Analytics</h3>
                    <p>Get insights into your code quality, performance metrics, and suggestions for improvements.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <span></span>
                    </div>
                    <h3>Learning Resources</h3>
                    <p>Access a vast library of tutorials, courses, and documentation to level up your programming skills.</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-header">
                <h2>Loved by Developers Worldwide</h2>
                <p>Join thousands of developers who've transformed their coding workflow with DevHub</p>
            </div>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <p class="testimonial-content">"DevHub has completely transformed how our team collaborates. The real-time editing feature has cut our development time in half."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar">AS</div>
                        <div class="author-info">
                            <h4>Alex Smith</h4>
                            <p>Senior Developer at TechCorp</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <p class="testimonial-content">"As a freelancer, DevHub gives me everything I need to manage multiple projects efficiently. The deployment tools are especially impressive."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar">JD</div>
                        <div class="author-info">
                            <h4>Jamie Dunn</h4>
                            <p>Freelance Web Developer</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <p class="testimonial-content">"I've tried many development platforms, but DevHub stands out with its intuitive interface and powerful features. Worth every penny!"</p>
                    <div class="testimonial-author">
                        <div class="author-avatar">ML</div>
                        <div class="author-info">
                            <h4>Maria Lopez</h4>
                            <p>Full-stack Developer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="pricing" id="pricing">
        <div class="container">
            <div class="section-header">
                <h2>Simple, Transparent Pricing</h2>
                <p>Choose the plan that fits your needs, from solo developers to large teams</p>
            </div>
            <div class="pricing-grid">
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Starter</h3>
                        <div class="price">$0<span>/month</span></div>
                        <p>Perfect for beginners and hobbyists</p>
                    </div>
                    <ul class="pricing-features">
                        <li>1 Active Project</li>
                        <li>Basic Cloud IDE</li>
                        <li>5GB Storage</li>
                        <li>Community Support</li>
                        <li>Basic Deployment Tools</li>
                    </ul>
                    <a href="#" class="cta-button">Get Started</a>
                </div>
                <div class="pricing-card popular">
                    <div class="pricing-header">
                        <h3>Pro</h3>
                        <div class="price">$19<span>/month</span></div>
                        <p>For serious developers and small teams</p>
                    </div>
                    <ul class="pricing-features">
                        <li>Unlimited Projects</li>
                        <li>Advanced Cloud IDE</li>
                        <li>50GB Storage</li>
                        <li>Priority Support</li>
                        <li>CI/CD Pipelines</li>
                        <li>Team Collaboration</li>
                    </ul>
                    <a href="#" class="cta-button">Choose Pro</a>
                </div>
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Enterprise</h3>
                        <div class="price">$49<span>/user/month</span></div>
                        <p>For teams and organizations</p>
                    </div>
                    <ul class="pricing-features">
                        <li>Everything in Pro</li>
                        <li>Unlimited Storage</li>
                        <li>24/7 Dedicated Support</li>
                        <li>Advanced Security</li>
                        <li>Custom Integrations</li>
                        <li>Team Management Tools</li>
                    </ul>
                    <a href="#" class="cta-button">Contact Sales</a>
                </div>
            </div>
        </div>
    </section>

<section class="cta">
        <div class="container">
            <h2>Ready to Transform Your Development Workflow?</h2>
            <p>Join thousands of developers who've already made the switch to DevHub.</p>
            <a href="#" class="primary-button">Sign Up for Free</a>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4>DevHub</h4>
                    <ul class="footer-links">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Press</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Product</h4>
                    <ul class="footer-links">
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Pricing</a></li>
                        <li><a href="#">Security</a></li>
                        <li><a href="#">Roadmap</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Resources</h4>
                    <ul class="footer-links">
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">Tutorials</a></li>
                        <li><a href="#">Webinars</a></li>
                        <li><a href="#">Community</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Support</h4>
                    <ul class="footer-links">
                        <li><a href="#">Help Center</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Status</a></li>
                        <li><a href="#">Terms of Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2025 DevHub. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Modèle HTML CSS pour site Web de développeur

Recommandé

Effet de texte 3D

passage de charrette

Exemple de page Web de portefeuille

HTML

CSS

JS

Recommandé

Effet de texte 3D

passage de charrette

Exemple de page Web de portefeuille

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS