2026-07-16 14:40:36 +02:00
parent a78c7aa1be
commit 145dee58e6
39 changed files with 1553 additions and 31 deletions
--- a/03_dom/uebungen/u14_awesome-tours/assets/css/awesome-tours.css
+++ b/03_dom/uebungen/u14_awesome-tours/assets/css/awesome-tours.css
@@ -0,0 +1,86 @@
+.main-wrapper {
+  margin: 5rem auto;
+  width: 650px;
+  padding: 1rem;
+  border: 1px solid black;
+}
+
+.tours-grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 200px 200px 0.5fr;
+  gap: 1rem;
+  grid-template-areas:
+    'item1 item2'
+    'item1 item3'
+    'item4 item4';
+}
+
+#fr {
+  grid-area: item1;
+}
+
+#uk {
+  grid-area: item2;
+}
+
+#it {
+  grid-area: item3;
+}
+
+#info {
+  grid-area: item4;
+
+  border: 2px solid #000077;
+  padding: 0.5rem;
+  border-radius: 10px;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.tours {
+  position: relative;
+}
+
+.m-tours #info img {
+  width: 30px;
+}
+
+.flag {
+  font-size: 1.5rem;
+}
+
+.french-flag::before {
+  content: '';
+  display: inline-block;
+  width: 50px;
+  height: 30px;
+  background: red url('../img/fr.png') no-repeat;
+  background-size: cover;
+  margin-right: 0.5rem;
+}
+
+.union-jack::before {
+  content: '';
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  background: red url('../img/uk.png') no-repeat;
+  background-size: cover;
+  margin-right: 0.5rem;
+}
+
+.italian-flag::before {
+  content: '';
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  background: red url('../img/it.png') no-repeat;
+  background-size: cover;
+  margin-right: 0.5rem;
+}
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/colosseum.jpg
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/colosseum.jpg
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/eiffelturm.jpg
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/eiffelturm.jpg
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/fr.png
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/fr.png
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/fr.svg
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/fr.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-fr" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v480H0z"/>
+  <path fill="#000091" d="M0 0h213.3v480H0z"/>
+  <path fill="#e1000f" d="M426.7 0H640v480H426.7z"/>
+</svg>
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/it.png
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/it.png
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/it.svg
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/it.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v480H0z"/>
+    <path fill="#009246" d="M0 0h213.3v480H0z"/>
+    <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
+  </g>
+</svg>
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/tower_bridge.jpg
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/tower_bridge.jpg
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/uk.png
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/uk.png
--- a/03_dom/uebungen/u14_awesome-tours/assets/img/uk.svg
+++ b/03_dom/uebungen/u14_awesome-tours/assets/img/uk.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
+  <path fill="#012169" d="M0 0h640v480H0z"/>
+  <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+  <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+  <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+  <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+</svg>
--- a/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js
+++ b/03_dom/uebungen/u14_awesome-tours/assets/js/awesome-tours.js
@@ -0,0 +1,17 @@
+'use strict';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = () => {};
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+
+  init();
+})();
--- a/03_dom/uebungen/u14_awesome-tours/index.html
+++ b/03_dom/uebungen/u14_awesome-tours/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Übung 14: awesome tours</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="assets/css/awesome-tours.css" />
+    <script src="assets/js/awesome-tours.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="main-wrapper">
+        <h1>Übung 14: awesome tours</h1>
+
+        <div class="m-tours tours-grid">
+          <div id="fr">
+            <img
+              src="assets/img/eiffelturm.jpg"
+              alt="Eiffel Tower"
+              data-description="The Eiffel Tower (/ˈaɪfəl ˈtaʊər/ eye-fəl towr; French: Tour Eiffel French pronunciation: [tuʁ‿ɛfɛl] About this sound listen) is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower..."
+              data-country-code="fr"
+              data-flag-name="French-Flag" />
+          </div>
+
+          <div id="uk">
+            <img
+              src="assets/img/tower_bridge.jpg"
+              alt="Tower Bride"
+              data-description="Tower Bridge (built 1886–1894) is a combined bascule and suspension bridge in London. The bridge crosses the River Thames close to the Tower of London and has become an iconic symbol of London. Tower Bridge is one of five London bridges now owned..."
+              data-country-code="uk"
+              data-flag-name="Union-Jack" />
+          </div>
+
+          <div id="it">
+            <img
+              src="assets/img/colosseum.jpg"
+              alt="Colosseum"
+              data-description="The Colosseum or Coliseum (/kɒləˈsiːəm/ kol-ə-see-əm), also known as the Flavian Amphitheatre (Latin: Amphitheatrum Flavium; Italian: Anfiteatro Flavio [amfiteˈaːtro ˈflaːvjo] or Colosseo [kolosˈsɛːo]), is an oval amphitheatre in the centre of the city of Rome, Italy. Built of concrete and sand,[1] it is the largest amphitheatre ever built. The Colosseum is situated just east of the Roman Forum. Construction began..."
+              data-country-code="it"
+              data-flag-name="Italian-Flag" />
+          </div>
+          <section id="info">
+            <p>Move your mouse pointer over the images to read the descriptions here!</p>
+          </section>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>