Re-worked the drop-in cards

Author: KeiranWDigital

events-drop-ins.html

@@ -1,99 +1,37 @@
-<div class="row">
-    <div class="col-md-12">
-        <a name="drop-ins"></a>
-        <h2>Drop-in sessions</h2>
-        <p>
-            Drop-in sessions are hosted by at least one mentor and
-            currently run over on our <a href="https://codewithpeople.slack.com">Slack Workspace</a> or through on jitsi
-            meeting.
-        </p>
-        <p>Jitsi links will be added on the day of the drop-in</p>
-    </div>
-</div>
-<div class="row">
-    <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
-        <div class="row">
-            <div class="card">
-
-                <div class="event-date">
-                    <span class="event-date-month">TBC</span>
-                    <span class="event-date-day"></span>
+<h2>Drop-in sessions</h2>
+<p>
+    Drop-in sessions are hosted by at least one mentor and
+    currently run over on our <a href="https://codewithpeople.slack.com">Slack Workspace</a> or through on jitsi
+    meeting.
+</p>
+<p>Jitsi links will be added on the day of the drop-in</p>
+<section id="events">
+    <div class="row card">
+        <div class="col-12">
+            <div class="row">
+                <div class="col-sm-4 col-lg-2 event-date">
+                    <span class="event-date-month">SEP</span>
+                    <span class="event-date-day">TBC</span>
                 </div>
-                <h4>
-                    National Coing Week
-                </h4>
-                <p>
-                    <a href="">Jitsi link</a>
-                </p>
-            </div>
-            <div class="card">
-
-                <div class="event-date">
-                    <span class="event-date-month">TBC</span>
-                    <span class="event-date-day"></span>
+                <div class="col-sm-8 col-lg-10 event-title">
+                    <span class="event-title">National Coding Week</span>
                 </div>
-                <h4>
-                    National Coing Week
-                </h4>
-                <p>
-                    <a href="">Jitsi link</a>
-                </p>
             </div>
-            <div class="card">
-
-                <div class="event-date">
-                    <span class="event-date-month">TBC</span>
-                    <span class="event-date-day"></span>
+            <div class="row">
+                <div class="col-md-12 col-lg-9 event-description">
+                    <span class="event-description">
+                        A drop in for anyone who would like help with coding. This can be something related to one of
+                        our workshops or anything else! </span>
                 </div>
-                <h4>
-                    National Coing Week
-                </h4>
-                <p>
-                    <a href="">Jitsi link</a>
-                </p>
-            </div>
-            <div class="card">
+                <div class="col-md-12 col-lg-3 event-book-button">
+                    <button class="btn btn-primary float-right" type="button">Jitsi Link <span
+                            class="fas fa-link"></span></button>
 
-                <div class="event-date">
-                    <span class="event-date-month">TBC</span>
-                    <span class="event-date-day"></span>
-                </div>
-                <h4>
-                    National Coing Week
-                </h4>
-                <p>
-                    <a href="">Jitsi link</a>
-                </p>
-            </div>
-            <div class="card">
 
-                <div class="event-date">
-                    <span class="event-date-month">TBC</span>
-                    <span class="event-date-day"></span>
-                </div>
-                <h4>
-                    National Coing Week
-                </h4>
-                <p>
-                    <a href="">Jitsi link</a>
-                </p>
-            </div>
-            <!--  <div class="card">
 
-                <div class="event-date">
-                    <span class="event-date-month">SEP</span>
-                    <span class="event-date-day">15</span>
                 </div>
-                <h4>
-                    Mentors
-                </h4>
-                <p>
-                    Keiran Wilkinson
-                </p>
-                <p>
-                    <a href="">Jitsi link</a>
-                </p>
-            </div> -->
+            </div>
         </div>
     </div>
-</div>
+
+</section>