hotovo

src/App.vue

@@ -2,7 +2,7 @@ Letenka
 
  <template>
   <div id="app">
-    <h1 style="text-align: center;">Letenka</h1>
+    <div class="header"><h1>Letenka</h1></div> 
     <div class="wrapper">
       <div class="col1">
         <div class="card">
@@ -49,8 +49,8 @@ Letenka
             <SeatPicker v-model="chosenSeats" :seats="seats" :classType="classType" :personCount="personCount" />
             <button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button>
           </div>
-          </div>
         </div>
+      </div>
         
         
 
@@ -73,13 +73,17 @@ Letenka
               Datum odletu: 
               {{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }}
             </p>
-            <p v-else-if="travelType.value == 'R'">
+            <div v-else-if="travelType.value == 'R'">
+              <p>
               Datum odletu: 
               {{ deparatureRangeDate.start.getDate() }}. {{ deparatureRangeDate.start.getMonth() + 1 }}. {{ deparatureRangeDate.start.getFullYear() }} 
-
+              </p>
+              <p>
               Datum příletu: 
               {{ deparatureRangeDate.end.getDate() }}. {{ deparatureRangeDate.end.getMonth() + 1 }}. {{ deparatureRangeDate.end.getFullYear() }} 
-            </p>
+              </p>  
+            </div>
+
             <p>
               Počet cestujcích: {{ personCount }}
             </p>
@@ -92,6 +96,11 @@ Letenka
         </div>     
       </div>
     </div>
+    <div class="footer">
+      <p>levnewebovky s.r.o</p>
+      <p>tel. 725 607 001</p>
+      <p>mail: levnewebovky@seznam.cz</p>
+    </div>
   </div>
 </template>
 
@@ -161,11 +170,40 @@ export default {
 </script>
 
 <style>
+.header {
+  color: white;
+  background-color: #000033;
+  margin-bottom: none;
+  text-align: center;
+  padding: none;
+  height: 50px;
+}
+
+.header .h1 {
+  text-align: center;
+}
+
+.wrapper {
+  margin-top: none;
+  background-image: url(./assets/img.jpg);
+
+}
 
 .card {
-    margin-left: 100px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  color: black;
 }
 
+.footer {
+  text-align: center;
+  color: white;
+  background-color: #000033;
+  height: 150px;
+  padding-top: 15px;
+}
+
+
 
   @media only screen and (max-width: 1000px) {
     .wrapper {

src/components/SeatPicker.vue

@@ -49,7 +49,7 @@ text-align: center;
 .seat {
 display: inline-block;
 width: 30px;
-border: 1px solid gray;
+border: 1px solid grey;
 margin: 2px;
 }
 .seat div:hover {