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
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<aside>Definisce un contenuto separato dal testo perincipale
<a>Inserisce link e collegamenti ipertestuali
<th>Definisce una cella di intestazione di una tabella HTML.
getDefinisce un metodo di invio di dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Editor di testo HTML

Esercitazione 1ù

Grafico a torta

formattazione_testo.html.(2)

Elenchi numerati con HTML

Informazioni Cliente - Quiz a Rami

pag 4 progetto inf

Amazing Strange Rope Police

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