JavaScript zadanie 2
Zadanie 1 uzupełnione o tabele dotyczącą składania zlecenia
<!DOCTYPE html>
<html lang="pl" dir="ltr"> <!-- język i lewostronny tekst-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- dopasowanie szerokości strony do szerokości urządzenia i skalowanie-->
<title> Usługi fotograficzne "Go-foto"</title> <!-- tytuł widoczny na pasku przeglądarki-->
<link rel="icon" type="image/x-icon" href="https://img.icons8.com/?size=100&id=u6A1fcsd1q2J&format=png&color=000000"> <!-- favicon - ikonka na pasku przeglądarki-->
</head>
<body>
<header> <!-- nagłówek z tytułem strony na środku, obrazkiem oraz z menu nawigacyjnym poniżej odsyłającym do poszczególnych miejsc na stronie -->
<h1> Firma fotograficzna Go-foto </h1>
<img src="..\..\zadania-domowe\zadanie-1\images\front-banner.png"
alt="widok gór z nazwą firmy">
<nav id="menu" role="navigation" aria-label="Menu główne">
<ul>
<li> <a href="#menu">Menu główne</a></li>
<li> <a href="#about"> O nas </a></li>
<li> <a href="#projects"> Nasze projekty
<ul>
<li a href="#photos"> Zdjęcia </li>
<li a href="#wideos"> Filmy </li>
<li a href="#mp3"> Realizacje projektów dźwiękowych </li>
</ul>
</a></li>
<li> <a href="#partners"> Nasi partnerzy</a></li>
<li><a href="#cennik"> Cennik </a></li>
<li><a href="#formularz"> Zgłoś się do nas</a></li>
<li> <a href="#contact"> Kontakt </a></li>
</nav>
</header>
<main>
<section id="about" aria-label="O nas">
<h2> O nas </h2>
<p>Jesteśmy zespołem pasjonatów obrazu i dźwięku, dla których każdy projekt to szansa na stworzenie czegoś wyjątkowego. Nasze studio powstało z miłości do fotografii i filmu – i właśnie tę pasję widać w każdym kadrze, który oddajemy w Wasze ręce. </p>
<p>Realizujemy zarówno kameralne sesje indywidualne, jak i duże projekty promocyjne. Fotografujemy w plenerze, tworzymy ujęcia z drona, przygotowujemy materiały reklamowe dla firm i relacje z eventów. Dzięki doświadczeniu i nowoczesnemu zapleczu technicznemu możemy zaoferować kompleksową obsługę – od zdjęć i nagrań, aż po montaż z oprawą muzyczną w formacie mp3. </p>
<p>Wierzymy, że dobre ujęcie to nie tylko technika, ale przede wszystkim emocja i historia. Dlatego pracujemy tak, aby każdy projekt – czy to rodzinne zdjęcia, firmowa prezentacja czy dynamiczna relacja z wydarzenia – opowiadał własną, niepowtarzalną historię. </p>
<p><strong>Wasze pomysły są dla nas inspiracją, a naszym celem jest zamienić je w obrazy, które zostaną na długo w pamięci.</strong></p>
</section>
<section id="projects" aria-label="Nasze projekty">
<h2> Nasze projekty </h2>
<p> Każdy projekt to dla nas nowe wyzwanie i okazja, by pokazać świat w niepowtarzalny sposób. Tworzymy materiały, które łączą estetykę, emocje i profesjonalizm. Dzięki różnorodnym doświadczeniom możemy realizować zarówno kameralne sesje zdjęciowe, jak i rozbudowane produkcje dla firm czy wydarzeń. </p>
<p> W naszych realizcjach znajdziesz:
<ul>
<li><strong> Sesje plenerowe</strong>, które podkreślają charakter i osobowość</li>
<li><strong> Ujęcia z drona</strong>, ukazujące perspektywy, których nie widać na co dzień</li>
<li><strong> Fotorelacje i filmy z eventów</strong>, pozwalające wrócić do wyjątkowych chwil</li>
<li><strong> Materiały promocyjne dla firm</strong>, wspierające wizerunek i komunikację marki</li>
<li><strong> Oprawę muzyczną i montaż audio-wideo</strong>, które nadają całości dynamiczny charakter.</li>
</ul>
</p>
<p> Nasze projekty mówią same za siebie – to historie zapisane w obrazach i dźwiękach. Poniżej możesz zapoznać się ze szczegółową ofertą naszej firmy oraz przejrzeć galerię naszych prac.</p>
<section aria-label="Zdjęcia">
<h3 id="photos"> Zdjęcia </h3>
<a href="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68" target="_blank">
<img src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"
alt="Zdjęcie widoku"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" target="_blank">
<img src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ"
alt="Zdjęcie widoku 2"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s" target="_blank">
<img src="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
alt="Zdjęcie widoku 3"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/15/2500/1667.jpg?hmac=Lv03D1Y3AsZ9L2tMMC1KQZekBVaQSDc1waqJ54IHvo4" target="_blank">
<img src="https://fastly.picsum.photos/id/15/2500/1667.jpg?hmac=Lv03D1Y3AsZ9L2tMMC1KQZekBVaQSDc1waqJ54IHvo4"
alt="Zdjęcie widoku 4"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/85/1280/774.jpg?hmac=h_HHpvfhMmLP6uOSrHS7HSlXVRuMKfBbc8HFKd1Acv4" target="_blank">
<img src="https://fastly.picsum.photos/id/85/1280/774.jpg?hmac=h_HHpvfhMmLP6uOSrHS7HSlXVRuMKfBbc8HFKd1Acv4"
alt="Zdjęcie widoku 5"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/29/4000/2670.jpg?hmac=rCbRAl24FzrSzwlR5tL-Aqzyu5tX_PA95VJtnUXegGU" target="_blank">
<img src="https://fastly.picsum.photos/id/29/4000/2670.jpg?hmac=rCbRAl24FzrSzwlR5tL-Aqzyu5tX_PA95VJtnUXegGU"
alt="Zdjęcie widoku 6"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/33/5000/3333.jpg?hmac=h5NVRcUXmsWm612YQOroHSA5n9R7gxZgoP60LHBPHtw" target="_blank">
<img src="https://fastly.picsum.photos/id/33/5000/3333.jpg?hmac=h5NVRcUXmsWm612YQOroHSA5n9R7gxZgoP60LHBPHtw"
alt="Zdjęcie widoku 7"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/37/2000/1333.jpg?hmac=vpYLNsQZwU2szsZc4Uo17cW786vR0GEUVq4icaKopQI" target="_blank">
<img src="https://fastly.picsum.photos/id/37/2000/1333.jpg?hmac=vpYLNsQZwU2szsZc4Uo17cW786vR0GEUVq4icaKopQI"
alt="Zdjęcie widoku 8"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/38/1280/960.jpg?hmac=HBrgyJHQOGVicaWoXgvdSfTakkAyv4BxAt4rF0DhWkU" target="_blank">
<img src="https://fastly.picsum.photos/id/38/1280/960.jpg?hmac=HBrgyJHQOGVicaWoXgvdSfTakkAyv4BxAt4rF0DhWkU"
alt="Zdjęcie widoku 9"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/40/4106/2806.jpg?hmac=MY3ra98ut044LaWPEKwZowgydHZ_rZZUuOHrc3mL5mI" target="_blank">
<img src="https://fastly.picsum.photos/id/40/4106/2806.jpg?hmac=MY3ra98ut044LaWPEKwZowgydHZ_rZZUuOHrc3mL5mI"
alt="Zdjęcie noska kota"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/46/3264/2448.jpg?hmac=ZHE8nk-Q9uRp4MxgKNvN7V7pYFvA-9BCv99ltY3HBv4" target="_blank">
<img src="https://fastly.picsum.photos/id/46/3264/2448.jpg?hmac=ZHE8nk-Q9uRp4MxgKNvN7V7pYFvA-9BCv99ltY3HBv4"
alt="Zdjęcie widoku 10"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/49/1280/792.jpg?hmac=NnUJy0O9-pXHLmY2loqVs2pJmgw9xzuixgYOk4ALCXU" target="_blank">
<img src="https://fastly.picsum.photos/id/49/1280/792.jpg?hmac=NnUJy0O9-pXHLmY2loqVs2pJmgw9xzuixgYOk4ALCXU"
alt="Zdjęcie widoku 11"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/50/4608/3072.jpg?hmac=E6WgCk6MBOyuRjW4bypT6y-tFXyWQfC_LjIBYPUspxE" target="_blank">
<img src="https://fastly.picsum.photos/id/50/4608/3072.jpg?hmac=E6WgCk6MBOyuRjW4bypT6y-tFXyWQfC_LjIBYPUspxE"
alt="Zdjęcie widoku 12"
width="200"
height="200">
</a>
<a href="https://fastly.picsum.photos/id/54/3264/2176.jpg?hmac=blh020fMeJ5Ru0p-fmXUaOAeYnxpOPHnhJojpzPLN3g" target="_blank">
<img src="https://fastly.picsum.photos/id/54/3264/2176.jpg?hmac=blh020fMeJ5Ru0p-fmXUaOAeYnxpOPHnhJojpzPLN3g"
alt="Zdjęcie widoku 13"
width="200"
height="200">
</a>
</section>
<h3 id="videos"> Filmy </h3>
<video width="640" height="360" controls>
<source="https://file-examples.com/storage/fe139e1de868d999da0d4e0/2017/04/file_example_MP4_640_3MG.mp4" type="video/mp4">
<p> Twoja przeglądarka nie obsługuje tagu video. </p>
</video>
<h3 id="mp3"> Realizacje projektów dźwiekowych </h3>
<figure>
<figcaption>
<h3> Nasz podkład pod wideo </h3>
<p> Format: MP3 | Rozmiar: 48MB | Możliwość podłożenia pod wideo </p>
</figcaption>
<audio controls>
<source src="https://file-examples.com/storage/fe139e1de868d999da0d4e0/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
<p> Twoja przeglądarka nie obsługuje odtwarzania audio. </p>
</audio>
</figure>
</section>
<section id="partners" aria-label="Nasi partnerzy">
<h2> Nasi partnerzy</h2>
<a href="https://www.ferrari.com/en-PL" target="_blank">
<img src="https://img.icons8.com/?size=100&id=38731&format=png&color=000000"
alt="logo firmy 1"
width="40"
height="40">
</a>
<a href="https://www.apple.com/pl/?afid=p240%7Cgo~cmp-218875324~adg-17346801004~ad-773344405664_kwd-55617481~dev-c~ext-~prd-~mca-~nt-search&cid=aos-pl-kwgo-brand--" target="_blank">
<img src="https://img.icons8.com/?size=100&id=p2y8Ul4lQV8D&format=png&color=000000"
alt="logo firmy 2"
width="40"
height="40">
</a>
<a href="https://www.amazon.pl/?&tag=pltxtgoabkde-21&ref=pd_sl_7r6v6gl32s_e&adgrpid=152891916413&hvpone=&hvptwo=&hvadid=672254816601&hvpos=&hvnetw=g&hvrand=14023503844030101976&hvqmt=e&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9067414&hvtargid=kwd-10573980&hydadcr=6125_2377120&language=pl_PL" target="_blank">
<img src="https://img.icons8.com/?size=100&id=2nt5XhjL7jBK&format=png&color=000000"
alt="logo firmy 3"
width="40"
height="40">
</a>
</section>
<section id="cennik" aria-label="Cennik">
<h2> Cennik usług </h2>
<table>
<caption> Cennik usług realizowanych przez studio - ceny w złotych </caption>
<thead>
<tr>
<th scope="col"> Usługa </th>
<th scope="col"> Czas trwania</th>
<th scope="col"> Cena</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Sesja zdjęciowa w studio</th>
<td> Minimum 1h</td>
<td> 250 zł/1h</td>
</tr>
<tr>
<th scope="row"> Sesja zdjęciowa w plenerze</th>
<td> Minimum 1h</td>
<td> 350 zł/1h</td>
</tr>
<tr>
<th scope="row"> Sesja zdjęciowa ślubna</th>
<td> Podczas ślubu</td>
<td> 400 zł/1h</td>
</tr>
<tr>
<th scope="row"> Film ślubny</th>
<td> Podczas ślubu</td>
<td> 450 zł/1h</td>
</tr>
<tr>
<th scope="row"> Ujęcia z drona</th>
<td> Minimum 1h</td>
<td> 500 zł/1h</td>
</tr>
<tr>
<th scope="row"> Montaż oraz oprawa audio</th>
<td> Około 2 tygodni</td>
<td> 800 zł</td>
</tr>
</tbody>
</table>
</section>
<section id="formularz" aria-label="Formularz">
<h2> Zgłoś się do nas </h2>
<!-- formularz z zaawansowaną walidacją -->
<form action="/advanced-form" method="POST">
<fieldset>
<legend> Dane osobowe </legend>
<!-- Imię i nazwisko składającego wniosek -->
<label for="full-name"> Imię i Nazwisko </label>
<input type="text" id="full-name" name="fullname"
required placeholder="Jan Kowalski"> <br>
<!-- dane mailowe i kontaktowe -->
<label for="contact-email"> Email: </label>
<input type="email" id="contact-email" name="email"
required placeholder="[email protected]"> <br>
<label for="phone numer"> Numer telefonu (+48) </label>
<input type="text" id="phone-number" name="phone"
pattern="[0-9]{9}"
placeholder="123 456 789" required> <br>
<!-- podawanie wieku i daty urodzenia -->
<label for="age"> Wiek </label>
<input type="number" id="age" name="age"
required>
<label for="birthDate"> Data urodzenia </label>
<input type="date" id="birthDate" name="birthDate"
required> <br>
</fieldset>
<fieldset>
<legend> Preferowany sposób kontaktu </legend>
<!-- jednokrotny wybór opcji -->
<input type="radio" id="contact-email"
name="contact-method" value="email" checked>
<label for="contact-email"> Email </label>
<input type="radio" id="contact-phone"
name="contact-method" value="phone">
<label for="contact-phone"> Telefon </label>
<input type="radio" id="contact-sms"
name="contact-method" value="sms">
<label for="contact-sms"> SMS </label>
</fieldset>
<fieldset>
<legend> Typ usługi </legend>
<!-- lista rozwijalna z podziałem na usługi -->
<label for="product-select"> Usługa </label>
<select id="product-select" name="product" required>
<option value="">-- Wybierz typ usługi --</option>
<optgroup label="Zdjęcia">
<option value="photo-studio"> Zdjęcia w studio</option>
<option value="photo-plener"> Zdjęcia w plenerze</option>
<option value="photo-portfolio"> Zdjęcia do kompozytki</option>
</optgroup>
<optgroup label="Filmy">
<option value="film-studio"> Nagranie studyjne</option>
<option value="film-plener"> Nagranie plenerowe</option>
<option value="film-drone"> Nagranie z drona</option>
<option value="film-add"> Nagranie do reklamy</option>
</optgroup>
<optgroup label="Inne zlecenia">
<option value="photo-develop">Wywołanie zdjęć</option>
<option value="film-render"> Obróbka filmu</option>
<option value="photo-render"> Obróbka zdjęć</option>
<option value="film-changer"> Zgranie filmu na inny nośnik danych</option>
<option value="other"> Inne zlecenie</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend> Dodatkowe informacje </legend>
<!-- Pole tekstowe z dodatkowymi informacjami -->
<label for="additional"> Dodatkowe informacje do zlecenia </label>
<textarea id="additional" name="additional" rows="5"
placeholder="Napisz dodatkowe informacje dotyczące zlecenia..."></textarea>
</fieldset>
<button type="submit"> Zatwierdź </button>
</form>
</section>
</main>
<footer id="contact" role="contentinfo">
<section>
<h2> Informacje kontaktowe</h2>
<address>
<strong> Centrum handlowe ASTRA</strong><br>
ul. Fotogenicznych 18 <br>
50-150 Wrocław <br>
Telefon: <a href="tel:+48678987123"> +48 678 987 123 </a><br>
Email: <a href="[email protected]"> [email protected] </a>
</address>
</section>
<p><small>© Go-foto. Wszelkie prawa zastrzeżone.</small></p>
</footer>
</body>
</html> 