Portfolio Web Developer by @carmian - Codewith.it

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

References

multipart/form-dataCodifica dei caratteri di un form
<ol>Crea liste ordinate o numerate.
<label>Mostrare un testo di etichetta per un elemento di input.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<th>Definisce una cella di intestazione di una tabella HTML.

Users

Log in to search for users

Explore

Find inspiration

ESERCIZI PER CASA

Page not found - Codewith.it

Heads Or Tails Random Tally

CodeMirror preview

educazione civica info

Sito Progetto Italiano

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