Extract styles to style.css

CineSync/static/css/style.css

@@ -18,6 +18,21 @@
     position: absolute;
     top: 70%;
     border-radius: 3vw;
+    margin-left: 5%;
+    margin-top: 150px;
+}
+h6 {
+    text-align: center;
+    margin-top: 4px;
+}
+.seat_number {
+    width: 20px;
+    height: 18px;
+    text-align: center;
+}
+.buy_btn {
+    float: bottom;
+    margin-top: 40px;
 }
 .ticket_film_image {
     object-fit: cover;
@@ -58,7 +73,31 @@
     padding-bottom: 2vw;
     flex-direction: column;
 }
-.film_card, .seats_card {
+.seats_card {
+    width: 100%;
+    background-color: #eaeaea;
+    margin-top: 1vw;
+    margin-bottom: 1vw;
+    border-radius: 3vw;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+
+    width: 50%;
+    margin: 0 auto;
+    margin-top: 20px;
+}
+.card_body {
+    width: 80%;
+    margin-top: 180px;
+    margin: 0 auto;
+}
+.rows {
+    margin-top: 30%;
+}
+.film_card {
     width: 100%;
     background-color: #eaeaea;
     margin-top: 1vw;

CineSync/templates/timetable/session.html

@@ -10,25 +10,21 @@
   <img src="{{ session.film.image.url }}" class="film_session_image"
                    alt="Фотография фильма не найдена">
 </div>
-<div class="seats_card"
+<div class="seats_card" style="height: {{ height }}px;">
-     style="width: 50%; height:
+  <div class="card_body">
-     {{ height }}px;
-     margin: 0 auto; margin-top: 20px"
->
-  <div style="width: 80%; margin-top: 80px; margin: 0 auto;">
     <h1>{{ session.film.name }}</h1>
     {{ session.auditorium.number }}<br>
     {{ session.start_datetime }}
-    <div style="margin-top: 20%;">
+    <div class="rows">
-      <div class="line" style="margin-left: 5%; margin-top: 150px;">
+      <div class="line">
-        <h6 style="text-align: center; margin-top: 4px">Экран</h6>
+        <h6>Экран</h6>
       </div>
       {% for row in session.auditorium.row_count|get_range %}
         <div class="row">
           {% for seat in seats %}
-          <div class="film_card_row col">
+          <div class="film_card_row col-auto">
               <a class="film_session">
-                  <span style="width: 20px; height: 18px; text-align: center;">{{ seat.row_number }}</span>
+                  <span class="seat_number">{{ seat.row_number }}</span>
               </a>
           </div>
           {% endfor %}
@@ -37,7 +33,7 @@
       {% endfor %}
     </div>
     <div style="text-align: center">
-      <button class="btn btn-primary" style="float: bottom; margin-top: 40px;">Купить билет</button>
+      <button class="btn btn-primary buy_btn">Купить билет</button>
     </div>
   </div>
 </div>