Dashboard v1 by @jadierb - Codewith.it

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

Referenze

heightDetermina l'altezza di un elemento HTML in pixel
<video>Integra e controlla video in una pagina HTML
<i>Formatta il testo in corsivo/italico non enfatizzato
<h6>Titolo di intestazione di sesto livello
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

pagina_completa.html

AirPods Shop LOGIN

esame di informatica

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