Leggere Lolita a Teheran Azar Nafi by @nikpok - Codewith.it

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

Referenze

widthImposta la larghezza di un elemento HTML
<table>Tag primario per la creazione di tabelle
<canvas>Tag per disegnare grafica dinamica su pagine web.
formnovalidateImpedisce la convalida di un singolo elemento input
<h4>Titolo di intestazione di quarto livello
<td>Definisce una cella di una tabella HTML.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Web Design Final

DEMO: Hi-Lo Game

ex informatica 2

Pizzafy - Calcolatore di Pizza

Portfolio Web Developer

portfolio_marco_mantovani.html

99 Bottles of Beer

black - social bar

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>Leggere Lolita a Teheran — Azar Nafisi</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <style>
        body { font-family: sans-serif; }
        .font-serif { font-family: 'Playfair Display', serif; }
        .bg-custom-image {
            background-color: #1a1a1a;
            background-image: url('https://images.unsplash.com/photo-1516979187457-637abb4f9353?q=80&w=2070&auto=format&fit=crop');
        }
    </style>
</head>
<body class="bg-slate-950 text-slate-100">

    <div class="fixed inset-0 -z-10 bg-custom-image bg-cover bg-center opacity-40"></div>
    <div class="fixed inset-0 -z-10 bg-gradient-to-b from-black/60 via-black/40 to-black/80"></div>

    <main class="relative min-h-screen">
        
        <section class="flex min-h-screen flex-col items-center justify-center px-6 text-center">
            <p class="mb-6 text-xs uppercase tracking-[0.4em] text-slate-400">
                Azar Nafisi · Teheran, giovedì mattina
            </p>
            <h1 class="font-serif text-5xl leading-tight tracking-tight md:text-7xl lg:text-8xl">
                Leggere Lolita<br>
                <span class="italic text-slate-300">a Teheran</span>
            </h1>
            <p class="mt-8 max-w-xl text-base text-slate-400 md:text-lg">
                Una stanza, sette donne, alcuni romanzi proibiti.<br>
                I concetti che attraversano il libro.
            </p>
            <div class="mt-16 animate-bounce text-slate-500 text-xs tracking-widest uppercase">
                Scorri per esplorare
            </div>
        </section>

        <section class="mx-auto max-w-5xl px-6 pb-20">
            <div class="grid gap-px bg-slate-800 md:grid-cols-2 border border-slate-800">
                
                <article class="group bg-slate-900/80 p-10 backdrop-blur-md transition-colors duration-500 hover:bg-slate-800">
                    <div class="mb-6 font-mono text-xs tracking-widest text-slate-500">01</div>
                    <h2 class="mb-4 font-serif text-2xl leading-snug md:text-3xl text-white">Immaginazione come libertà</h2>
                    <p class="text-sm leading-relaxed text-slate-400 md:text-base">In una Teheran che vieta, leggere romanzi diventa un atto di resistenza: l'immaginazione apre uno spazio dove il regime non può entrare.</p>
                </article>

                <article class="group bg-slate-900/80 p-10 backdrop-blur-md transition-colors duration-500 hover:bg-slate-800">
                    <div class="mb-6 font-mono text-xs tracking-widest text-slate-500">02</div>
                    <h2 class="mb-4 font-serif text-2xl leading-snug md:text-3xl text-white">Il velo e l'identità</h2>
                    <p class="text-sm leading-relaxed text-slate-400 md:text-base">Quando le donne si tolgono il chador nella stanza di Azar, riemergono i colori, i volti, le voci individuali soffocate fuori da quelle pareti.</p>
                </article>

                <article class="group bg-slate-900/80 p-10 backdrop-blur-md transition-colors duration-500 hover:bg-slate-800">
                    <div class="mb-6 font-mono text-xs tracking-widest text-slate-500">03</div>
                    <h2 class="mb-4 font-serif text-2xl leading-snug md:text-3xl text-white">Lolita come metafora</h2>
                    <p class="text-sm leading-relaxed text-slate-400 md:text-base">Le studentesse si riconoscono in Lolita: vite confiscate da un altro, costrette a vivere il sogno — o l'incubo — di qualcun altro.</p>
                </article>

                <article class="group bg-slate-900/80 p-10 backdrop-blur-md transition-colors duration-500 hover:bg-slate-800">
                    <div class="mb-6 font-mono text-xs tracking-widest text-slate-500">04</div>
                    <h2 class="mb-4 font-serif text-2xl leading-snug md:text-3xl text-white">Empatia attraverso la lettura</h2>
                    <p class="text-sm leading-relaxed text-slate-400 md:text-base">Austen, James, Fitzgerald, Nabokov: la grande letteratura insegna a vedere il mondo dagli occhi dell'altro. È questo che la dittatura teme.</p>
                </article>

                <article class="group bg-slate-900/80 p-10 backdrop-blur-md transition-colors duration-500 hover:bg-slate-800">
                    <div class="mb-6 font-mono text-xs tracking-widest text-slate-500">05</div>
                    <h2 class="mb-4 font-serif text-2xl leading-snug md:text-3xl text-white">La stanza come rifugio</h2>
                    <p class="text-sm leading-relaxed text-slate-400 md:text-base">Sette donne, ogni giovedì, attorno a un tavolo. Uno spazio privato che diventa politico semplicemente esistendo.</p>
                </article>

                <article class="group bg-slate-900/80 p-10 backdrop-blur-md transition-colors duration-500 hover:bg-slate-800">
                    <div class="mb-6 font-mono text-xs tracking-widest text-slate-500">06</div>
                    <h2 class="mb-4 font-serif text-2xl leading-snug md:text-3xl text-white">Memoria e testimonianza</h2>
                    <p class="text-sm leading-relaxed text-slate-400 md:text-base">Scrivere è ricordare: salvare le voci, i libri e i giorni che la Repubblica Islamica avrebbe voluto cancellare.</p>
                </article>

            </div>

            <blockquote class="mx-auto mt-32 max-w-3xl text-center font-serif text-2xl italic leading-relaxed text-slate-300 md:text-3xl">
                "Non leggevamo per cercare la felicità,<br>ma per resistere alla disperazione."
                <footer class="mt-6 text-xs not-italic uppercase tracking-[0.3em] text-slate-500">
                    — Azar Nafisi
                </footer>
            </blockquote>

            <footer class="mt-40 pt-10 border-t border-slate-800/50 text-center">
                <p class="text-[10px] uppercase tracking-[0.5em] text-slate-500 mb-4">
                    Progetto a cura di
                </p>
                <p class="font-serif text-lg text-slate-300 tracking-wide">
                    Nicola Pochiero <span class="mx-2 text-slate-600">&</span> Alessandro Ivaldi
                </p>
            </footer>

        </section>
    </main>

</body>
</html>