Training:Bootcamp/Main: Difference between revisions

Bootcamp/Main

Latest revision as of 12:06, 12 August 2024

MDriven Learn 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;
-        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: center;
+    align-items: center;
-        padding-top: 40px; /* Space at the top for the top box */
+}
-    }
+.top-box {
-    .top-box {
+    border-radius: 35px;
-        border-radius: 35px;
+    background: rgba(255, 255, 255, 0.50);
-        background: rgba(255, 255, 255, 0.50);
+    padding: 20px;
-        padding: 20px;
+    max-width: 80%;
-        max-width: 80%; /* Large width but still responsive */
+    width: 100%;
-        width: 100%;
+    margin: 0 10%;
-        margin: 0 10%; /* Center the box horizontally */
+    text-align: left;
-        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: 7em;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    opacity: 0;
-        margin-bottom: 40px; /* Increased space between the top box and the video */
+     animation: fadeIn 1.5s ease-out forwards;
-     }
+}
-    .top-box-title {
+.top-box-title {
-        font-weight: bold;
+    font-weight: bold;
-        font-size: 1.5em;
+    font-size: 1.5em;
-    }
+}
-    .top-box-subtitle {
+.top-box-subtitle {
-        font-weight: bold;
+    font-weight: bold;
-        font-size: 1.8em;
+    font-size: 1.8em;
-        margin-top: 10px;
+    margin-top: 10px;
-    }
+}
-    .top-box-description {
+.top-box-description {
-        font-size: 1.2em;
+    font-size: 1.2em;
-        margin-top: 10px;
+    margin-top: 10px;
-    }
+}
-    .video-container {
+.video-container {
-        text-align: center;
+    text-align: center;
-        margin-top: auto; /* Pushes the video towards the middle of the remaining space */
+    margin-bottom: 60px;
-        margin-bottom: 30px; /* Increased space between the video and the button */
+    opacity: 0;
-     }
+     animation: fadeIn 1.5s ease-out 0.5s forwards;
+}
-    .video-container iframe {
-        width: 100%;
+.video-container iframe {
-        max-width: 800px;
+    width: 100%;
-        height: 450px; /* Increased height of the iframe */
+    max-width: 800px;
-        border: none;
+    height: 450px;
-        border-radius: 15px; /* Optional: round the video corners */
+    border: none;
-    }
+    border-radius: 15px;
+}
-    .next-step-button {
-        display: inline-block;
+.next-step-button {
-        margin-top: 20px;
+    display: inline-block;
-        padding: 10px 20px;
+    margin-top: 20px;
-        border-radius: 25px;
+    padding: 10px 20px;
-        background: #E2F5FA;
+    border-radius: 25px;
-        color: #000;
+    background: #E2F5FA;
-        font-size: 1.1em;
+    color: #000;
-        font-weight: bold;
+    font-size: 1.1em;
-        text-decoration: none;
+    font-weight: bold;
-        text-align: center;
+    text-decoration: none;
-     }
+    text-align: center;
-     </style>
+     opacity: 0;
+    animation: fadeIn 1.5s ease-out 1s forwards;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+     to { opacity: 1; }
+}
+</style>
      <div class="top-box">
-         <span class="top-box-title">MDrivenLearn presents:</span><br>
+         <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-subtitle">BOOTCAMP</span><br>
          <span class="top-box-description">Learn how to model, prototype and build anything.</span>
      </div>
-    <div class="video-container">
+<div class="video-container">
-         <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_HERE" allowfullscreen></iframe>
+         <iframe src="https://www.youtube.com/embed/video" allowfullscreen></iframe>
-         <a href="YOUR_NEXT_STEP_LINK" class="next-step-button">NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE</a>
+         <a href="/index.php/Training:Bootcamp/Start" class="next-step-button">NEXT STEP - BOOTCAMP: BEFORE STARTING GUIDE</a>
      </div>
 </html>