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;
+}

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>

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>

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>

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();
+})();