Zadanie JS 1

Zadanie JS 1
Zadanie: Używając omawianych do tej pory elementów HTML zbuduj stronę SPA (single page application) będącą wizytówką firmy lub osobistą. Strona powinna zawierać większość omawianych elementów w tym Nawigację / menu oraz zakładki wewnątrz dokumentu, tytuły, treści a w nich listy i osadzone obrazki i multimedia Nie zapomnijcie o dostępności i strukturze semantycznej dokumentu podzieleniu go na logiczne sekcje i artykuły, nagłówek i stopkę Obrazki powinny występować w 2 rozmiarach (mały w treści i większy po kliknięciu) Zaplanujcie stronę w taki sposób, żeby można było dodawać do niej następne sekcje w przyszłości
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Portfolio Adrianny Pytlarz, fotografki specjalizującej się w fotografii analogowej i cyfrowej. Zobacz moje prace, sprzęt i pasję.">
    <meta name="author" content="Adzianna Pytlarz">
    <title>Fotografia Analogowa i Cyfrowa - Portfolio Adrianny Pytlarz</title>
</head>
<body>

    <a href="#main-content" style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">Przejdź do głównej treści</a>

    <header>
        <h1>Fotografia Analogowa i cyfrowa</h1>
        <p>Portfolio Adrianny Pytlarz</p>
        
        <nav aria-label="Główna nawigacja">
            <ul>
                <li><a href="#o-mnie" aria-current="page">O mnie</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#sprzet">Mój sprzęt i proces</a></li>
                <li><a href="#multimedia">Multimedia</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main id="main-content">

        <section id="o-mnie">
            <h2>O mnie - magia kliszy i piksela</h2>
            <article>
                <p>
                    Witaj w moim świecie! Nazywam się Adrianna i jestem pasjonatką fotografii. Łączę dwa światy: <strong>fotografię analogową</strong> i <strong>cyfrową</strong>.
                </p>
                <p>
                    W dobie cyfrowej perfekcji, wciąż odnajduję piękno w <em>nieprzewidywalności i ziarnie</em> tradycyjnej kliszy. Każde zdjęcie analogowe to dla mnie unikalna historia, uchwycona w świetle i chemii.
                </p>
                <p>
                    Jednocześnie doceniam precyzję i elastyczność, jaką daje mi fotografia cyfrowa. Pozwala mi ona na eksperymenty i uchwycenie chwil z idealną ostrością.
                </p>
                
                <img src="images/adrianna-portret.png" alt="Zbliżenie na twarz Adrianny Pytlarz z zielonymi oczami i kroplami deszczu na skórze." width="400" height="500">
            
            </article>
        </section>
        
        <hr>

        <section id="portfolio">
            <h2>Portfolio</h2>
            
            <article>
                <h3>Portret w czerni i bieli</h3>
                <p>Zdjęcie wykonane aparatem średnioformatowym na filmie Fotopan 400.</p>
                
                <a href="images/portret-bw-golebie.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Portret w czerni i bieli'">
                    <img src="images/portret-bw-golebie.png" alt="Czarno-białe zdjęcie kobiety stojącej w alei, otoczonej przez lecące gołębie." width="300" height="375">
                </a>
            </article>

            <article>
                <h3>Portret miejski</h3>
                <p>Mój autoportret w kolorze, wykonany aparatem cyfrowym w plenerze miejskim.</p>
                
                <a href="images/portret-miejski-neon.png" target="_blank" title="Zobacz powiększenie zdjęcia 'Portret miejski'">
                    <img src="images/portret-miejski-neon.png" alt="Kolorowy autoportret kobiety w okularach na tle rozmytych, neonowych świateł miasta w nocy." width="300" height="450">
                </a>
            </article>
        </section>

        <hr>

        <section id="sprzet">
            <h2>Mój sprzęt i proces</h2>
            <p>W fotografii narzędzia mają duszę. Oto czego używam najczęściej:</p>
            <dl>
                <dt>Canon AE-1 Program</dt>
                <dd>Mój wierny towarzysz, klasyczny aparat SLR na film 35mm. Idealny do fotografii ulicznej i portretów.</dd>
                
                <dt>Chinon CM-5</dt>
                <dd>Średnioformatowy aparat, który daje niesamowitą jakość i obraz.</dd>
                
                <dt>Sony HX300</dt>
                <dd>Mój aparat cyfrowy typu bridge. Niezwykle wszechstronny, idealny do uchwycenia detali z daleka dzięki potężnemu zoomowi.</dd>
                
                <dt>Filmy (Analogowe)</dt>
                <dd>
                    <ul>
                        <li><strong>Kolor:</strong> Kodak Portra 400, Cinestill 800T</li>
                        <li><strong>Czarno-białe:</strong> Ilford HP5+, Fomapan 400</li>
                    </ul>
                </dd>
            </dl>
        </section>

        <hr>

        <section id="multimedia">
            <h2>Multimedia</h2>
            
            <article>
                <h3>Proces wywoływania filmu w mojej ciemni</h3>
                
                <video controls width="640" height="360">
                    <source src="media/wykonywanie-odbitek.mp4" type="video/mp4">
                    Twoja przeglądarka nie obsługuje odtwarzania wideo.
                </video>
            </article>
            
            <article>
                <h3>Podcast: Analog vs Cyfra - moje przemyślenia</h3>
                
                <audio controls style="width:100%;">
                    <source src="media/podcast.mp3" type="audio/mpeg">
                    Twoja przeglądarka nie obsługuje odtwarzania audio.
                </audio>
            </article>
        </section>

        <hr>

        <section id="kontakt">
            <h2>Kontakt</h2>
            <p>Chcesz nawiązać współpracę lub po prostu porozmawiać o fotografii? Zapraszam!</p>
            
            <p>
                Adrianna Pytlarz<br>
                Email: <a href="mailto:[email protected]">[email protected]</a><br>
                Telefon: <a href="tel:+48123456789">+48 123 456 789</a>
            </p>
        </section>

    </main>
    
    <footer>
        <nav aria-label="Media społecznościowe">
            <ul>
                <li><a href="https://instagram.com" target="_blank">Instagram</a></li>
                <li><a href="https://facebook.com" target="_blank">Facebook</a></li>
            </ul>
        </nav>
        <p>&copy; 2025 Adrianna Pytlarz. Wszystkie prawa zastrzeżone.</p>
    </footer>

</body>
</html>