Portfolio Web Developer by @carmian - Codewith.it

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

References

classDefinisce una o più classi per elemento
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
typeSpecifica la tipologia/funzione di un elemento.
hreflangConsente di dichiarare la lingua del documento collegato.
<br>Inserisce uno spazio vuoto tra due elementi HTML.

Users

Log in to search for users

Explore

Find inspiration

Vendi Casa da Privato Guida Gratui

GUIDA GALATTICA PER AUTOSTOPPISTI

Download Firefox for PC Windows

Test dell identikit

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