Training:Bootcamp/Main: Difference between revisions

Bootcamp/Main

Revision as of 11:48, 12 August 2024

MDrivenLearn presents:
Bootcamp
Learn how to model, prototype and build anything.

NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE

This page was edited 160 days ago on 08/12/2024. What links here

@@ Line 1: / Line 1: @@
 <html>
 <style>
-#mw-content-text.mw-body-content.mw-content-ltr {
+html, body {
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
      background-image: url('https://wiki.mdriven.net/images/d/de/Bootcamp_background.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
-    min-height: 100vh; /* Ensure the background covers the full height */
      display: flex;
      flex-direction: column;
-    justify-content: flex-start; /* Align items closer to the top */
      align-items: center;
-     padding-top: 40px; /* Space at the top for the top box */
+}
-  }
+.content {
-  .top-box {
+     display: none; /* Initially hide content */
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding-top: 60px;
+}
+.top-box {
      border-radius: 35px;
      background: rgba(255, 255, 255, 0.50);
      padding: 20px;
-     max-width: 80%; /* Large width but still responsive */
+     max-width: 80%;
      width: 100%;
-     margin: 0 10%; /* Center the box horizontally */
+     margin: 0 10%;
-     text-align: left; /* Align text to the left */
+     text-align: left;
      font-family: Arial, sans-serif;
      font-size: 1.2em;
      color: #000;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-     margin-bottom: 20px; /* Space between the top box and the video */
+     margin-bottom: 60px;
-  }
+}
-  .top-box-title {
+.top-box-title {
      font-weight: bold;
      font-size: 1.5em;
-  }
+}
-  .top-box-subtitle {
+.top-box-subtitle {
      font-weight: bold;
      font-size: 1.8em;
      margin-top: 10px;
-  }
+}
-  .top-box-description {
+.top-box-description {
      font-size: 1.2em;
      margin-top: 10px;
-  }
+}
-  .video-container {
+.video-container {
      text-align: center;
-     margin-top: auto; /* Pushes the video towards the middle of the remaining space */
+     margin-bottom: 60px;
-  }
+}
-  .video-container iframe {
+.video-container iframe {
      width: 100%;
      max-width: 800px;
-     height: auto;
+     height: 450px;
      border: none;
-     border-radius: 15px; /* Optional: round the video corners */
+     border-radius: 15px;
-  }
+}
-  .next-step-button {
+.next-step-button {
      display: inline-block;
      margin-top: 20px;
@@ Line 69: / Line 77: @@
      text-decoration: none;
      text-align: center;
-  }
+}
+</style>
+    <div class="content">
+        <div class="top-box">
+            <span class="top-box-title">MDrivenLearn presents:</span><br>
+            <span class="top-box-subtitle">Bootcamp</span><br>
+            <span class="top-box-description">Learn how to model, prototype and build anything.</span>
+        </div>
-</style>
+<div class="video-container">
-    <div class="top-box">
+            <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_HERE" allowfullscreen></iframe>
-      <span class="top-box-title">MDrivenLearn presents:</span><br>
+            <a href="YOUR_NEXT_STEP_LINK" class="next-step-button">NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE</a>
-      <span class="top-box-subtitle">Bootcamp</span><br>
+        </div>
-      <span class="top-box-description">Learn how to model, prototype and build anything.</span>
      </div>
-     <div class="video-container">
+<script>
-      <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_HERE" allowfullscreen></iframe>
+     document.addEventListener("DOMContentLoaded", function() {
-      <a href="YOUR_NEXT_STEP_LINK" class="next-step-button">NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE</a>
+        var img = new Image();
-     </div>
+        img.onload = function() {
+            document.querySelector('.content').style.display = 'flex';
+        };
+        img.src = 'https://wiki.mdriven.net/images/d/de/Bootcamp_background.png';
+        if (img.complete) img.onload();
+    });
+     </script>
 </html>