Scarica la mappa di Minecraft e altro ancora

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

24 November 2024

Modello HTML CSS per scheda profilo neumorfica

2 December 2024

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MC Downloads - Maps, Mods & Plugins pour Minecraft</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">MC<span>Downloads</span></div>
            <ul class="nav-links">
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Maps</a></li>
                <li><a href="#">Mods</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Textures</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <div class="search-bar">
        <input type="text" placeholder="Rechercher des maps, mods, plugins et plus encore...">
    </div>
    
    <main>
        <section class="category-section">
            <h2 class="section-title">Maps Populaires</h2>
            <div class="items-grid">
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Skyblock Adventure">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Skyblock Adventure</h3>
                        <p class="item-description">Une map Skyblock avec des défis uniques et des îles à explorer.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.19.2</span>
                            <span>28k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Survival Island">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Survival Island</h3>
                        <p class="item-description">Survivez sur une île isolée avec des ressources limitées.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.20.1</span>
                            <span>15k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Medieval Kingdom">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Medieval Kingdom</h3>
                        <p class="item-description">Explorez un royaume médiéval avec des châteaux et des villages.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.19.4</span>
                            <span>22k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Adventure Parkour">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Adventure Parkour</h3>
                        <p class="item-description">Une map de parkour avec plus de 100 niveaux à compléter.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.20.2</span>
                            <span>12k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="category-section">
            <h2 class="section-title">Mods à la Une</h2>
            <div class="items-grid">
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Twilight Forest">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Twilight Forest</h3>
                        <p class="item-description">Explorez une forêt mystérieuse remplie de nouvelles créatures.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.19.2</span>
                            <span>52k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Applied Energistics 2">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Applied Energistics 2</h3>
                        <p class="item-description">Système de stockage numérique pour tous vos objets.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.20.1</span>
                            <span>38k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Botania">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Botania</h3>
                        <p class="item-description">Mod de magie basé sur la nature et les fleurs.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.19.4</span>
                            <span>45k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Create">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Create</h3>
                        <p class="item-description">Mod d'automatisation et de machines mécaniques.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.20.1</span>
                            <span>60k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="category-section">
            <h2 class="section-title">Plugins Serveur</h2>
            <div class="items-grid">
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="EssentialsX">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">EssentialsX</h3>
                        <p class="item-description">Plugin essentiel avec plus de 100 commandes pour votre serveur.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.20.2</span>
                            <span>85k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="WorldEdit">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">WorldEdit</h3>
                        <p class="item-description">Outil d'édition in-game pour modifier votre monde rapidement.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.20.1</span>
                            <span>72k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="Vault">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">Vault</h3>
                        <p class="item-description">API pour la gestion des permissions et de l'économie.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.19.4</span>
                            <span>68k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
                
                <div class="item-card">
                    <div class="item-image">
                        <img src="/api/placeholder/240/150" alt="LuckPerms">
                    </div>
                    <div class="item-info">
                        <h3 class="item-title">LuckPerms</h3>
                        <p class="item-description">Système de permissions avancé pour votre serveur.</p>
                        <div class="item-meta">
                            <span class="version-badge">1.20.2</span>
                            <span>63k téléchargements</span>
                        </div>
                        <a href="#" class="download-btn">Télécharger</a>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>À propos</h3>
                <ul>
                    <li><a href="#">Qui sommes-nous</a></li>
                    <li><a href="#">Notre équipe</a></li>
                    <li><a href="#">Conditions d'utilisation</a></li>
                    <li><a href="#">Politique de confidentialité</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3>Support</h3>
                <ul>
                    <li><a href="#">Centre d'aide</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contacter le support</a></li>
                    <li><a href="#">Signaler un bug</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3>Communauté</h3>
                <ul>
                    <li><a href="#">Discord</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">YouTube</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3>Créateurs</h3>
                <ul>
                    <li><a href="#">Soumettre du contenu</a></li>
                    <li><a href="#">Programme partenaire</a></li>
                    <li><a href="#">Lignes directrices</a></li>
                    <li><a href="#">Ressources</a></li>
                </ul>
            </div>
        </div>
        
        <div class="copyright">
            <p>© 2025 MCDownloads. Tous droits réservés. Minecraft est une marque déposée de Mojang Studios.</p>
        </div>
    </footer>
</body>
</html>

CSS

:root {
            --color-primary: #3D1766;
            --color-secondary: #6F1AB6;
            --color-accent: #CD0DFD;
            --color-dark: #0D0D0D;
            --color-light: #f8f9fa;
            --color-gray: #343a40;
            --font-main: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--font-main);
        }
        
        body {
            background-color: var(--color-light);
            color: var(--color-dark);
            line-height: 1.6;
        }
        
        header {
            background-color: var(--color-dark);
            color: white;
            padding: 1.2rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .logo {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -1px;
            background: linear-gradient(45deg, var(--color-accent), #A56CC1);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .logo span {
            font-weight: 400;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            position: relative;
            padding-bottom: 0.3rem;
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--color-accent);
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .search-bar {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
            position: relative;
        }
        
        .search-bar input {
            width: 100%;
            padding: 1.2rem 1.5rem;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            background-color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        
        .search-bar input:focus {
            outline: none;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        
        main {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem 2rem;
        }
        
        .category-section {
            margin-bottom: 4rem;
        }
        
        .section-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 2rem;
            color: var(--color-dark);
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            width: 50%;
            height: 4px;
            bottom: -10px;
            left: 0;
            background: linear-gradient(90deg, var(--color-accent), transparent);
            border-radius: 4px;
        }
        
        .items-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }
        
        .item-card {
            background-color: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .item-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            border-color: rgba(0, 0, 0, 0.08);
        }
        
        .item-image {
            height: 180px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .item-image img {
            max-width: 100%;
            max-height: 100%;
            transition: transform 0.5s ease;
        }
        
        .item-card:hover .item-image img {
            transform: scale(1.05);
        }
        
        .item-info {
            padding: 1.5rem;
        }
        
        .item-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--color-dark);
        }
        
        .item-description {
            font-size: 0.95rem;
            color: #6c757d;
            margin-bottom: 1rem;
            line-height: 1.5;
        }
        
        .item-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .download-btn {
            display: block;
            background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
            color: white;
            text-align: center;
            padding: 0.75rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 1rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.85rem;
        }
        
        .download-btn:hover {
            background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
            box-shadow: 0 5px 15px rgba(111, 26, 182, 0.3);
            transform: translateY(-2px);
        }
        
        .version-badge {
            background: linear-gradient(45deg, var(--color-secondary), var(--color-accent));
            color: white;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        footer {
            background-color: var(--color-dark);
            color: white;
            padding: 4rem 2rem;
            margin-top: 4rem;
        }
        
        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 2rem;
        }
        
        .footer-column {
            flex: 1;
            min-width: 200px;
        }
        
        .footer-column h3 {
            margin-bottom: 1.5rem;
            color: white;
            font-weight: 600;
            position: relative;
            display: inline-block;
            padding-bottom: 0.5rem;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 3px;
            bottom: 0;
            left: 0;
            background-color: var(--color-accent);
            border-radius: 4px;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 0.8rem;
        }
        
        .footer-column a {
            color: #adb5bd;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-column a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #adb5bd;
            font-size: 0.85rem;
        }
        
        @media (max-width: 992px) {
            .items-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .section-title {
                font-size: 1.5rem;
            }
            
            .items-grid {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 1.5rem;
            }
            
            .footer-column {
                min-width: 45%;
            }
        }
        
        @media (max-width: 576px) {
            .items-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-column {
                min-width: 100%;
            }
        }

Scarica la mappa di Minecraft e altro ancora

Consigliato

Negozio di scarpe

Modello HTML CSS per scheda profilo neumorfica

Un codice di slowarray902

HTML

CSS

JS

Consigliato

Negozio di scarpe

Modello HTML CSS per scheda profilo neumorfica

Un codice di slowarray902

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS