MyCharBook

Condividi codice - Captain America - Excelsior

Anteprima

CSS

<style>
            @import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
    .main_table{
        position: relative;
        width:1024px;
        height:500px;
        margin: 0 auto;
        background-image:url(https://i.ibb.co/HxQ5Vdx/cap-bg.png);
        background-size: cover;
        background-position: center;
        z-index: 1;
        font-family: 'Fira Mono', monospace;
        color: white;
    }
    .title {
        position: absolute;
        top: 80%;
        right: 65%;
        text-align: center;
        font-size: 24px; /* Dimensione del testo */
        margin: 0;
        letter-spacing: 2px; /* Spaziatura tra le lettere */
        color: #ffffff; /* Colore del testo bianco */
         font-weight: bold; /* Testo in grassetto */

        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), 0 0 8px #0033A0; /* Ombra blu scuro per risalto */
        font-family: 'Bebas Neue', sans-serif; /* Sostituire con il font scelto */
    }
    .text_box {
        position: absolute;
        top: 10%;
        left: 65%;
        width: 290px;
        height: 400px;
        background-color: #001F3F; /* Blu molto scuro */
        opacity: 0.9; /* Leggera opacità per un effetto traslucido */
        z-index: 2;
        padding: 15px; /* Aumentato per maggiore spazio interno */
        border-radius: 10px; /* Angoli arrotondati per un aspetto più morbido */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Ombra esterna per rilievo */
        overflow: auto;
        transition: opacity 0.5s ease;
        scrollbar-color: #C8102E #001F3F; /* Colori della scrollbar: rosso e blu scuro */
        scrollbar-width: thin; /* Barra di scorrimento sottile */
        color: #ffffff; /* Testo bianco per un buon contrasto */
        font-family: 'Arial', sans-serif; /* Font semplice e leggibile */
        line-height: 1.6; /* Spaziatura tra le righe per migliorare la leggibilità */
    }

    .text_box::-webkit-scrollbar {
        width: 8px; /* Larghezza della scrollbar */
    }

    .text_box::-webkit-scrollbar-thumb {
        background-color: #C8102E; /* Colore del "pollice" della scrollbar */
        border-radius: 10px; /* Angoli arrotondati per la scrollbar */
    }

    .text_box::-webkit-scrollbar-track {
        background-color: #001F3F; /* Colore dello sfondo della scrollbar */
        border-radius: 10px; /* Angoli arrotondati per la scrollbar */
    }

    .main_table:hover .text_box {
        opacity: 0.8;
    }
    .description {
        text-align: justify;
        font-size: 12px; /* Dimensione del testo leggermente più grande per una lettura migliore */
        line-height: 1.6; /* Spaziatura tra le righe per migliorare la leggibilità */
        color: #ffffff; /* Colore del testo bianco */
        font-family: "Oswald", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
    }

    .event-date {
        font-weight: bold; /* Grassetto per le date */
        color: #C8102E; /* Colore rosso scuro per le date */
    }

    .event-description {
        margin-bottom: 10px; /* Spazio tra i paragrafi per una migliore separazione */
    }</style>

HTML

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Exo:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap" rel="stylesheet">
<div class="main_table">
    <h1 class="title">«I can do this all day.»</h1>
    <div class="text_box">
        <div class=description>
            <span class="event-date">1918:</span> Steve nasce a Brooklyn, New York, in una famiglia di origini irlandesi. Cresce in un ambiente difficile durante il periodo post-Prime Guerra Mondiale. La sua infanzia è segnata dalla povertà e dalla malattia: perde entrambi i genitori in giovane età, il padre in guerra e la madre a causa dell'influenza spagnola.<br><br>

            <span class="event-date">1941:</span> Durante la Seconda Guerra Mondiale, nonostante la sua struttura fisica fragile e numerosi problemi di salute, Steve cerca ripetutamente di arruolarsi nell'esercito per combattere i nazisti. Viene scelto per il Progetto Rinascita a causa del suo coraggio e della sua volontà indomita. Il siero del super soldato lo trasforma fisicamente, rendendolo più forte, veloce e resistente.<br><br>

            <span class="event-date">1942-1945:</span> Steve viene utilizzato inizialmente come strumento di propaganda, ma desidera ardentemente combattere al fronte. Dopo aver dimostrato il suo valore salvando un gruppo di soldati prigionieri di HYDRA, viene inviato in missioni operative per combattere il Teschio Rosso e la sua organizzazione. Forma la squadra d'élite Howling Commandos e partecipa a numerose operazioni chiave, diventando un simbolo di speranza e resistenza.<br><br>

            <span class="event-date">1945:</span> Nella battaglia finale contro il Teschio Rosso, Capitan America sacrifica se stesso per impedire che un aereo carico di armi di distruzione di massa si schianti negli Stati Uniti. Si schianta nell'Artico, dove rimane congelato e considerato morto per quasi 70 anni. Questo evento lo rende un eroe di guerra leggendario, ma lo priva della vita che avrebbe potuto avere.<br><br>

            <span class="event-date">2011:</span> Steve viene ritrovato e scongelato dallo S.H.I.E.L.D. nel presente. Si ritrova in un mondo completamente cambiato e deve affrontare il trauma di aver perso tutto ciò che conosceva. Viene rapidamente coinvolto nelle attività dello S.H.I.E.L.D., ma lotta per trovare il suo posto in questo nuovo tempo.<br><br>

            <span class="event-date">2012:</span> Si unisce ai Vendicatori per affrontare la minaccia di Loki e dei Chitauri a New York. Dimostra di essere un leader naturale e una figura morale centrale per il team. La battaglia di New York lo costringe a confrontarsi con l’idea di una minaccia globale e con la tecnologia e le armi avanzate del nuovo mondo.<br><br>

            <span class="event-date">2014:</span> Steve scopre che HYDRA si è infiltrata nello S.H.I.E.L.D. e sta pianificando un colpo di stato. Durante la lotta, scopre che il suo vecchio amico Bucky Barnes è vivo ed è stato trasformato in un assassino controllato mentalmente noto come il Soldato d'Inverno. Questa scoperta lo scuote profondamente e rafforza la sua determinazione a smantellare le organizzazioni corrotte.<br><br>

            <span class="event-date">2015:</span> Partecipa alla lotta contro Ultron, un'intelligenza artificiale creata da Tony Stark che minaccia l'intera umanità. Dopo la vittoria contro Ultron, assume un ruolo più attivo come leader dei Vendicatori e aiuta a formare una nuova squadra per proteggere il mondo.<br><br>

            <span class="event-date">2016:</span> Si oppone agli Accordi di Sokovia, una legislazione che cerca di mettere i supereroi sotto il controllo governativo. La sua posizione lo mette in conflitto diretto con Tony Stark e divide i Vendicatori. Scopre anche che Bucky è stato incastrato per l'attentato che ha causato gli Accordi e lotta per proteggere il suo amico. Alla fine, diventa un fuggitivo, rinunciando allo scudo e alla sua identità come Capitan America.<br><br>

            <span class="event-date">2018:</span> Riappare come Nomad, senza lo scudo, per aiutare i Vendicatori a difendere il mondo da Thanos. Combatte con tutto il suo coraggio, ma non riesce a impedire lo schiocco di Thanos che decima metà della vita nell'universo. Questa sconfitta lo lascia abbattuto e disilluso.<br><br>

            <span class="event-date">2019:</span> Dopo cinque anni dalla sconfitta di Thanos, partecipa alla missione di viaggio nel tempo per recuperare le Gemme dell'Infinito e riportare in vita tutti coloro che sono stati cancellati. Durante questa missione, ha l'opportunità di rivisitare il suo passato e di vedere Peggy Carter. Dopo la vittoria contro Thanos, decide di tornare indietro nel tempo e vivere la vita che non ha mai avuto, restando nel passato con Peggy. Ritorna nel presente come un uomo anziano e passa lo scudo a Sam Wilson, affidandogli il ruolo di nuovo Capitan America.
            <hr><b>Da modificare per vedere come rendere ufficiale la versione al pubblico</b>

        </div>
    </div>
</div>