Minecraft-Download-Karte und mehr

819 The_Pro_of_68

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

15 October 2024

Schaltflächen für den Dunkelmodus und den Nachtmodus

26 March 2025

Mehrstufiges Formular mit Fortschrittsbalken unter Verwendung von jQuery und CSS3

13 June 2025

Benutzeroberfläche der Wecker- und Stoppuhr-App

HTML

<!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%;
            }
        }

Empfohlen

Schaltflächen für den Dunkelmodus und den Nachtmodus

Mehrstufiges Formular mit Fortschrittsbalken unter Verwendung von jQuery und CSS3

Benutzeroberfläche der Wecker- und Stoppuhr-App

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS