Portfolio Web Developer by @carmian - Codewith.it

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

Referenze

<canvas>Tag per disegnare grafica dinamica su pagine web.
disabledImpedisce la modifica di un input
<h1>Titolo di intestazione di primo livello
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<tbody>Definisce il contenuto principale di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Progetto DAPPS(2)

portfolio-Davide-Cantore.html

Le meraviglie d\\

esercitazione 1

Il museo di Leonardo

prova ennesima tabella

REVIEW: For Loops

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="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Web Developer</title>
    <link href="styles.css" rel="stylesheet"> <!-- Collegamento al file CSS -->
    <link href="https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <a href="#chi-sono">Chi Sono</a>
            <a href="#come-trovarmi">Come Trovarmi</a>
        </nav>
    </header>
    <div id="sidebar">
        <nav>
            <a href="#progetto1">Progetto 1</a>
            <a href="#progetto2">Progetto 2</a>
            <a href="#progetto3">Progetto 3</a>
        </nav>
    </div>
    <main>
        <section id="chi-sono">
            <h1>Chi Sono</h1>
            <p>Inserisci qui il tuo curriculum e la tua storia personale.</p>
        </section>
        <section id="come-trovarmi">
            <h1>Come Trovarmi</h1>
            <p>Inserisci qui le tue informazioni di contatto.</p>
        </section>
        <section id="progetto1">
            <h2>Progetti</h2>
            <div class="projects">
                <div class="project">
                    <img src="path_to_image1.jpg" alt="Anteprima Progetto 1">
                    <h3>Progetto 1</h3>
                    <p>Descrizione del Progetto 1.</p>
                </div>
                <div class="project">
                    <img src="path_to_image2.jpg" alt="Anteprima Progetto 2">
                    <h3>Progetto 2</h3>
                    <p>Descrizione del Progetto 2.</p>
                </div>
                <div class="project">
                    <img src="path_to_image3.jpg" alt="Anteprima Progetto 3">
                    <h3>Progetto 3</h3>
                    <p>Descrizione del Progetto 3.</p>
                </div>
                <div class="project">
                    <img src="path_to_image4.jpg" alt="Anteprima Progetto 4">
                    <h3>Progetto 4</h3>
                    <p>Descrizione del Progetto 4.</p>
                </div>
            </div>
        </section>
    </main>
    <script src="scripts.js"></script> <!-- Collegamento al file JavaScript -->
</body>
</html>

body {
    font-family: 'Bitter', serif;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #222; /* Sfondo ancora più scuro */
    color: #eee; /* Testo chiaro */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #111;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

header nav {
    display: flex;
    justify-content: center;
}

header nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #eee;
    font-size: 18px;
    transition: all 0.3s ease;
}

header nav a:hover {
    background-color: #eee;
    color: #111;
    padding: 5px 10px;
    border-radius: 5px;
    transform: scale(1.1);
}

#sidebar {
    position: fixed;
    left: 0;
    top: 60px; /* Al di sotto dell'header */
    width: 200px;
    height: calc(100% - 60px);
    background-color: #111;
    padding-top: 20px;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.5);
}

#sidebar a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #eee;
    font-size: 16px;
    transition: all 0.3s ease;
}

#sidebar a:hover {
    background-color: #eee;
    color: #111;
    transform: scale(1.05);
}

main {
    margin-left: 220px; /* Larghezza della sidebar + margine */
    padding: 80px 20px 20px; /* Aggiunto padding superiore per evitare sovrapposizione con l'header */
    flex-grow: 1;
}

h1, h2, h3, p {
    margin: 0 0 15px;
}

section {
    margin-bottom: 40px;
}

.projects {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.project {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    width: calc(30% - 20px); /* Due colonne con gap di 20px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.project:hover {
    transform: scale(1.05);
    background-color: #444;
}

.project img {
    width: 100%;
    border-radius: 10px;
}

.project h3 {
    margin-top: 10px;
    font-size: 20px;
}

.project p {
    font-size: 16px;
}