Dashboard v1 by @jadierb - Codewith.it

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

Referenze

<strong>Definisce una parte del testo importante con formattazione in grassetto.
multipleConverte in lista a selezione multipla
valueValore alfanumerico o booleano contenuto in un elemento
<q>Indica una parte di testo come citazione breve
text/plainDefinisce un metodo di non codifica dei valori di un form
classDefinisce una o più classi per elemento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione n.1

Costruzione di un form

Riprova verifica di progr(2)

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) */