Dashboard v1 by @jadierb - Codewith.it

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

References

<ol>Crea liste ordinate o numerate.
<iframe>Crea un frame all'interno di una pagina HTML.
animationDefinisce i parametri dell'animazione di un elemento o selettore
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<em>Formatta il testo in corsivo/italico enfatizzato
getDefinisce un metodo di invio di dati al server

Users

Log in to search for users

Explore

Find inspiration

FuturaDesign - Design che Definisc

Pagina Test-A D&D story

Elenchi puntati con HTML

pagina di prova

Le meraviglie d\\\\

Array of Colors

Dario Di Fazio - Portfolio CV & Co

Color Assigment

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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