Training:Bootcamp/Main: Difference between revisions

Bootcamp/Main

Revision as of 11:49, 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>
-html, body {
+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;
      display: flex;
      flex-direction: column;
      align-items: center;
-}
-.content {
-    display: none; /* Initially hide content */
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
      padding-top: 60px;
 }
@@ Line 34: / Line 25: @@
      color: #000;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-     margin-bottom: 60px;
+     margin-bottom: 60px; /* Increased space */
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out forwards;
 }
@@ Line 55: / Line 48: @@
 .video-container {
      text-align: center;
-     margin-bottom: 60px;
+     margin-bottom: 60px; /* Increased space */
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out 0.5s forwards;
 }
@@ Line 61: / Line 56: @@
      width: 100%;
      max-width: 800px;
-     height: 450px;
+     height: 450px; /* Increased height */
      border: none;
      border-radius: 15px;
@@ Line 77: / Line 72: @@
      text-decoration: none;
      text-align: center;
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out 1s forwards;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 </style>
-     <div class="content">
+     <div class="top-box">
-        <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>
 <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>
      </div>
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        var img = new Image();
-        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>