Dashboard v1 by @jadierb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<a>Inserisce link e collegamenti ipertestuali
widthImposta la larghezza di un elemento HTML
<html>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

VERDERAME | Serra e Orto Botanico

La storia di Cappuccetto Rosso

Botteghe on-line

Quiz ristrutturazione

ricetta risotto primo tentativo

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Creative Dashboard</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <!-- Main container -->
    <div class="container">
        <!-- Header -->
        <header class="header">
            <h1>My Creative Dashboard</h1>
            <a href="#" class="logo">LOGO</a>
        </header>
        
        <!-- Navigation / Menu (optional) -->
        <nav class="nav">
            <a href="#">Home</a>
            <a href="#">Gallery</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
        
        <!-- Main content area -->
        <main class="content">
            <!-- Nested divs for different sections -->
            <div class="section featured">
                <h2>Featured</h2>
                <im src="https://res.cloudinary.com/hits-photos-archive/image/upload/v1736890930/legacy-migration/legacy-hitsdd_photo_gal__photo_1050318891.jpg" alt="a picture of the weekend"
                
                
            </div>
            <div class="section gallery">
                <!-- 10 images -->
                <img  src="https://i.pinimg.com/736x/ea/3b/a9/ea3ba98248a45f62a6c7639020a7a1cf.jpg" alt="Image 1"/>
                <img src="img2.jpg" alt="Image 2" />
                <img src="img3.jpg" alt="Image 3" />
                <img src="img4.jpg" alt="Image 4" />
                <img src="img5.jpg" alt="Image 5" />
                <img src="img6.jpg" alt="Image 6" />
                <img src="img7.jpg" alt="Image 7" />
                <img src="img8.jpg" alt="Image 8" />
                <img src="img9.jpg" alt="Image 9" />
                <img src="img10.jpg" alt="Image 10" />
            </div>
            <div class="section info">
                <h3>Information</h3>
                <p>This is some text content describing the theme.</p>
            </div>
        </main>
        
        <!-- Footer -->
        <footer class="footer">
            <p>&copy; 2025 My Creative Dashboard</p>
            <a href="#">Privacy Policy</a>
        </footer>
    </div>
</body>
</html>

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styles */
body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    background-color: #f0f0f0;
}

/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    border: 2px solid #ccc;
    padding: 20px;
    background-color: #fff;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background-color: #222;
    color: #fff;
}

.header h1 {
    font-size: 2em;
}

.logo {
    font-weight: bold;
    padding: 10px;
    background-color: #444;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.3s;
}

.logo:hover {
    background-color: #666;
}

/* Navigation */
.nav {
    display: flex;
    justify-content: center;
    background-color: #333;
    margin: 10px 0;
}

.nav a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    transition: background-color 0.3s;
}

.nav a:hover {
    background-color: #555;
}

/* Main content */
.content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sections */
.section {
    border: 2px solid #999;
    padding: 15px;
    border-radius: 10px;
    background-color: #fafafa;
    transition: transform 0.3s, box-shadow 0.3s;
}

.section:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Gallery images */
.gallery img {
    width: 140px;
    height: auto;
    margin: 5px;
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 
    transition: transform 0.3s, border-color 0.3s;
}

.gallery img:hover {
    transform: scale(1.05);
    border-color: #333;
}

/* Footer */
.footer {
    text-align: center;
    padding: 15px 0;
    background-color: #222;
    color: #fff;
    margin-top: 20px;
    border-top: 2px solid #444;
}

.footer a {
    color: #fff;
    margin: 0 10px;
    text-decoration: underline;
}

/* Animations (example) */
@keyframes pulse {
    0% { background-color: #eee; }
    50% { background-color: #ddd; }
    100% { background-color: #eee; }
}

/* Dynamic content example (simple hover animation) */