Training:Bootcamp/Main: Difference between revisions

Bootcamp/Main

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