- Podgląd strony
- kod
<!--SINGLE PAGE APPLICATION zadanie domowe 1 Kasia Puszkarczuk-->
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moje Portfolio</title>
</head>
<body>
<a href="#main-content">Skocz do bloga</a>
<header>
<h1>Portfolio Kasi</h1>
<nav aria-label="Główna Nawigacja">
<ul>
<li><a href="#glowna">Strona główna</a></li>
<li>
<a href="portfolio">Realizacje</a>
<ul>
<li><a href="/portfolio/beauty">Beauty</a></li>
<li><a href="/portfolio/indywidualne">Marki Osobiste</a></li>
</ul></li>
<li><a href="#about">O mnie</a></li>
<li><a href="#contact">Kontakt</a></li></li>
</ul>
</nav>
<hr>
<form action="/search" method="get" role="search">
<fieldset>
<legend>Wyszukiwanie w serwisie</legend>
<label for="query">Szukana fraza:</label>
<input type="search"
id="query"
name="q"
placeholder="Wpisz słowa kluczowe..."
required>
<button type="submit">Szukaj</button>
</fieldset>
</form>
</header>
<main id="main-content">
<hr>
<img src="obrazek.avif" alt="hackerman" width="500">
<figure>
<figcaption>
<h2>Siemka! To moja wideoprezentacja</h2>
<p>Odpowiadam na pytanie dlaczego warto powierzyć mi stowrzenie twojej unikalnej strony www</p>
</figcaption>
<video controls width="720" height="405">
<source src="/video/html-forms-tutorial.mp4" type="video/mp4">
<source src="/video/html-forms-tutorial.webm" type="video/webm">
<track kind="subtitles" src="/tracks/subtitles-pl.vtt"
srclang="pl" label="Polskie napisy" default>
<track kind="descriptions" src="/tracks/descriptions-pl.vtt"
srclang="pl" label="Audiodeskrypcja">
<track kind="chapters" src="/tracks/chapters.vtt"
srclang="pl" label="Rozdziały">
Wideo niedostępne w Twojej przeglądarce.
</video>
</figure>
<hr>
<h2>Blog</h2>
<article>
<header>
<h2>Dobre praktyki kodowania stron www</h2>
<p>autor: Kasia</p>
<p>opublikowano 1.11.2025</p>
</header>
<section>
<h2>First Step- naucz się kodować strony bez użycia AI</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
Proin quam augue, fermentum facilisis tellus eu, cursus interdum nibh.
<br> Nunc a ipsum ac erat elementum euismod at sit amet leo.</p>
<img src="https://fastly.picsum.photos/id/8/5000/3333.jpg?hmac=OeG5ufhPYQBd6Rx1TAldAuF92lhCzAhKQKttGfawWuA"
alt="Laptop firmowy"
width="500"
height="200">
</section>
<section>
<h2>Kopiowanie kodu to nie nauka bo nie wiesz jak co działa</h2>
<p>
Etiam eu mi at augue ultrices iaculis. <br>
Integer nec orci viverra, ullamcorper est a, consectetur leo. <br>
Mauris tristique ultrices risus id sagittis.
</p>
</section>
<footer>
<p>stopka wpisu xoxoxoxo</p>
</footer>
</article>
<hr>
</h2>
<form action="/newsletter" method="post">
<fieldset>
<legend>Zapisz się do newslettera</legend>
<!-- Metoda 1: Atrybut for -->
<label for="subscriber-email">Twój adres email:</label>
<input type="email"
id="subscriber-email"
name="email"
placeholder="[email protected]"
required
aria-describedby="email-help">
<div id="email-help">
Wyślemy Ci maksymalnie 2 wiadomości miesięcznie
</div>
<hr>
</main>
<aside>
<nav aria-label="nawigacja boczna">
<h3>Podobne wpisy</h3>
<ul>
<li><a href="/blog/techno">Technologia zguba czy zbawienie współczesnego świata?</a></li>
<li><a href="blog/marka">Marketing a Marka Osobista</a></li>
</ul>
</nav>
</aside>
<hr>
<footer>
<nav aria-label="nawgigacja stopki">
<h3>stopka stopka
<ul>
<li><a href="#main-content"> skocz do góry wpisów </li>
<li><a href="mailto:[email protected]">Wyślij do mnie email</a></li>
<li><a href="https://mojadrugastrona.com" target="_blank">Moja strona o szyciu</a></li>
<li><a href="https://jakislink.com" target="_blank" rel="nofollow noopener">Link do zewnetrzenj strony xyz</a></li>
</ul>
</h3>
<h4>***Złote myśli***</h4>
<blockquote>It's not a bug, It's a feature</blockquote>
<blockquote>We don't make mistakes, just happy little accidents</blockquote>
</nav>
</footer>
<script>
</script>
</body>
</html>
