Training:Bootcamp: Difference between revisions

Bootcamp

Latest revision as of 00:54, 21 August 2024

MDriven Learn presents:
BOOTCAMP
Learn how to model, prototype and build anything.

NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE

@@ Line 1: / Line 1: @@
 <html>
-    <style>
+<style>
-        body {
+#mw-content-text.mw-body-content.mw-content-ltr {
-            font-family: Outfit, sans-serif;
+    background-image: url('https://wiki.mdriven.net/images/background_desktop.webp');
-            margin: 0;
+    background-size: cover;
-            padding: 0;
+    background-position: center;
-            display: flex;
+    background-repeat: no-repeat;
-            justify-content: center;
+    min-height: 100vh;
-            align-items: center;
+    display: flex;
-            background-color: #fff;
+    flex-direction: column;
-        }
+    justify-content: flex-start;
-        .container {
+    align-items: flex-start;
-            width: 600px;
+    padding: 2em;
-            text-align: center;
+}
-        }
-        .title {
-            font-size: 48px;
-            font-weight: 700;
-            margin: 20px 0;
-        }
-        .subtitle {
-            background: rgba(255, 218, 187, 0.45);
-            font-size: 24px;
-            font-weight: 700;
-            margin: 0 auto;
-            padding: 10px;
-        }
-        .section {
-            display: flex;
-            align-items: center;
-            margin: 20px 0;
-            padding: 10px;
-        }
-        .section-icon {
-            flex: 1;
-            text-align: left;
-        }
-        .section-text {
-            flex: 3;
-            font-size: 20px;
-            font-weight: 700;
-            text-align: left;
-        }
-        .section-arrow {
-            flex: 1;
-            font-size: 20px;
-            text-align: right;
-        }
-        .start-button {
-            background: rgba(255, 218, 187, 0.45);
-            font-size: 16px;
-            font-weight: 700;
-            padding: 10px;
-            border: none;
-            cursor: pointer;
-            margin-top: 20px;
-        }
-    </style>
-    <div class="container">
-        <div class="title">BOOTCAMP</div>
-        <div class="subtitle">BEFORE STARTING GUIDE</div>
-        <div class="section">
-            <div class="section-icon">
-                <img src="https://via.placeholder.com/40" alt="Icon" />
-            </div>
-            <div class="section-text">EXPECTATIONS</div>
-            <div class="section-arrow">></div>
-        </div>
-<div class="section">
+.top-box {
-            <div class="section-icon">
+    border-radius: 35px;
-                <img src="https://via.placeholder.com/40" alt="Icon" />
+    background: rgba(255, 255, 255, 0.50);
-            </div>
+    padding: 20px;
-            <div class="section-text">INSTALLATION</div>
+    max-width: 80%;
-            <div class="section-arrow">></div>
+    width: 100%;
-        </div>
+    text-align: left;
+    font-size: 1.2em;
+    color: #000;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 4em;
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out forwards;
+}
-<div class="section">
+.top-box-title {
-            <div class="section-icon">
+    font-weight: bold;
-                <img src="https://via.placeholder.com/40" alt="Icon" />
+    font-size: 1.5em;
-            </div>
+}
-            <div class="section-text">MATERIALS</div>
-            <div class="section-arrow">></div>
-        </div>
-<div class="section">
+.top-box-subtitle {
-            <div class="section-icon">
+    font-weight: bold;
-                <img src="https://via.placeholder.com/40" alt="Icon" />
+    font-size: 1.8em;
-            </div>
+    margin-top: 10px;
-            <div class="section-text">TROUBLESHOOTING</div>
+}
-            <div class="section-arrow">></div>
-        </div>
-<div class="section">
+.top-box-description {
-            <div class="section-icon">
+    font-size: 1.2em;
-                <img src="https://via.placeholder.com/40" alt="Icon" />
+    margin-top: 10px;
-            </div>
+}
-            <div class="section-text">COMMUNICATION</div>
-            <div class="section-arrow">></div>
-        </div>
-<button class="start-button">Click here to START BOOTCAMP</button>
+.video-container {
+    text-align: left;
+    margin-bottom: 60px;
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out 0.5s forwards;
+}
+.video-container iframe {
+    width: 100%;
+    max-width: 800px;
+    height: 450px;
+    border: none;
+    border-radius: 15px;
+}
+.next-step-button {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    border-radius: 25px;
+    background: #E2F5FA;
+    color: #000;
+    font-size: 1.1em;
+    font-weight: bold;
+    text-decoration: none;
+    text-align: center;
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out 1s forwards;
+}
+.video-container iframe {
+    width: 100%;
+    max-width: 640px;
+    height: 360px;
+    border: none;
+    border-radius: 15px;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+@media (max-width: 767px) {
+    #mw-content-text.mw-body-content.mw-content-ltr {
+        background-image: url('https://wiki.mdriven.net/images/bootcamp_background_mobile.webp');
+        padding: 1em;
+    }
+}
+</style>
+    <div class="top-box">
+        <span class="top-box-title">MDriven <span style="color:#F67A07;"> Learn </span> 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>
+<div class="video-container">
+        <iframe src="https://www.youtube.com/embed/xdbXkwVMz8c?si=rZuxuJbCBLlEwnrr"  allowfullscreen></iframe>
+        <a href="/index.php/Training:Bootcamp/Start" class="next-step-button">NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE</a>
      </div>
-</body>
 </html>