Portfolio Web Developer by @carmian - Codewith.it

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

Referenze

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<meta>Definisce i meta dati di una pagina web.
<h2>Titolo di intestazione di secondo livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Botteghe on-line

esercizio perfetto

Countdown Passaporto 1

Design, Marketing & AI News (Portf

Ricetta Cous Cous

affettiminoriwill

Simple Calculator(2)

Review of Functions I

Selezione Telefoni

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