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 6: / Line 6: @@
      background-position: center;
      background-repeat: no-repeat;
-     min-height: 100vh; /* Ensure the background covers the full height */
+     min-height: 100vh;
      display: flex;
      flex-direction: column;
-     justify-content: flex-start; /* Align items closer to the top */
+     justify-content: flex-start;
      align-items: center;
-    padding-top: 40px; /* Space at the top for the top box */
+}
-  }
+.top-box {
-  .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: 7em;
-  }
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out forwards;
-  .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;
-  }
+    opacity: 0;
+    animation: fadeIn 1.5s ease-out 0.5s forwards;
-  .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 71: @@
      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="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>
+        <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>