Portfolio Web Developer by @carmian - Codewith.it

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

References

<caption>Definisce didascalie all'interno di una tabella
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
multipart/form-dataCodifica dei caratteri di un form
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<map>Inserisce immagini mappa cliccabili in un documento

Users

Log in to search for users

Explore

Find inspiration

Micheal Jackson fanpage - Codewith

Costruzione form

I giornali online

Esercizi 05/03/2024 es6

Noleggio Auto es esame

Heads Or Tails Random Tally

esercizio informatica 5

Lista con ricerca

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="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;
}