Bootcamp
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(43 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
    <style>
<style>
        body {
#mw-content-text.mw-body-content.mw-content-ltr {
         
    background-image: url('https://wiki.mdriven.net/images/background_desktop.webp');
        }
    background-size: cover;
     
    background-position: center;
        .title {
    background-repeat: no-repeat;
            font-size: 48px;
    min-height: 100vh;
            font-weight: 700;
    display: flex;
            margin: 20px 0;
    flex-direction: column;
        }
    justify-content: flex-start;
        .subtitle {
    align-items: flex-start;
            background: rgba(255, 218, 187, 0.45);
    padding: 2em;
            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;
        }
  .section-arrow.collapsed {
    transform: rotate(90deg);
}
}


.section-content {
.top-box {
     display: none;
     border-radius: 35px;
    background: rgba(255, 255, 255, 0.50);
    padding: 20px;
    max-width: 80%;
    width: 100%;
    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;
}
 
.top-box-title {
    font-weight: bold;
    font-size: 1.5em;
}
 
.top-box-subtitle {
    font-weight: bold;
    font-size: 1.8em;
    margin-top: 10px;
}
 
.top-box-description {
    font-size: 1.2em;
     margin-top: 10px;
     margin-top: 10px;
}
}


.section-content.expanded {
.video-container {
     display: block;
    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;
}
}
    </style>
    <div class="container">
        <div class="title">BOOTCAMP</div>
        <div class="subtitle">BEFORE STARTING GUIDE</div>
     
      <div class="section" onclick="toggleSection(this)">
    <div class="section-icon">
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
    </div>
    <div class="section-text">EXPECTATIONS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>
<div class="section-content">
    <p>Content for EXPECTATIONS goes here...</p>
</div>


<div class="section">
.next-step-button {
     <div class="section-icon">
     display: inline-block;
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
    margin-top: 20px;
     </div>
     padding: 10px 20px;
     <div class="section-text">EXPECTATIONS</div>
     border-radius: 25px;
     <div class="section-arrow">
     background: #E2F5FA;
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
    color: #000;
            <g clip-path="url(#clip0_2800_1942)">
    font-size: 1.1em;
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
    font-weight: bold;
            </g>
    text-decoration: none;
            <defs>
    text-align: center;
                <clipPath id="clip0_2800_1942">
    opacity: 0;
                    <rect width="38.8387" height="33" fill="white"/>
     animation: fadeIn 1.5s ease-out 1s forwards;
                </clipPath>
}
            </defs>
        </svg>
     </div>
</div>


<div class="section">
.video-container iframe {
     <div class="section-icon">
     width: 100%;
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
     max-width: 640px;
     </div>
     height: 360px;
     <div class="section-text">EXPECTATIONS</div>
     border: none;
     <div class="section-arrow">
    border-radius: 15px;
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
}
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>


<div class="section">
@keyframes fadeIn {
     <div class="section-icon">
     from { opacity: 0; }
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
     to { opacity: 1; }
    </div>
}
     <div class="section-text">EXPECTATIONS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>


<div class="section">
@media (max-width: 767px) {
    <div class="section-icon">
    #mw-content-text.mw-body-content.mw-content-ltr {
        <img src="https://newwikicopy.mdriven.net/images/f/fa/Rectangle.svg" alt="Icon" width="100px" height="100px" />
        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>
    <div class="section-text">EXPECTATIONS</div>
    <div class="section-arrow">
        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
            <g clip-path="url(#clip0_2800_1942)">
                <path d="M11.8465 33.5138C11.4678 33.052 11.2613 32.431 11.2725 31.7875C11.2836 31.1439 11.5115 30.5304 11.9059 30.082L22.3217 18.2447L12.3217 6.05412C11.954 5.58987 11.7568 4.97319 11.7725 4.33691C11.7882 3.70062 12.0156 3.09564 12.4057 2.65226C12.7959 2.20888 13.3175 1.96259 13.8583 1.96641C14.3991 1.97024 14.9158 2.22389 15.2971 2.67272L26.7253 16.6045C27.104 17.0663 27.3105 17.6873 27.2994 18.3308C27.2882 18.9744 27.0604 19.5879 26.6659 20.0363L14.7625 33.5643C14.3679 34.0126 13.839 34.2591 13.2922 34.2497C12.7454 34.2402 12.2254 33.9755 11.8465 33.5138Z" fill="black"/>
            </g>
            <defs>
                <clipPath id="clip0_2800_1942">
                    <rect width="38.8387" height="33" fill="white"/>
                </clipPath>
            </defs>
        </svg>
    </div>
</div>


<button class="start-button">Click here to START BOOTCAMP</button>
<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>
     </div>
<script>
    function toggleSection() {
        const arrow = document.querySelector('.section-arrow');
        const content = document.querySelector('.section-content');
        content.classList.toggle('expanded');
        arrow.classList.toggle('collapsed');
    }
</script>
</html>
</html>

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

Retrieved from "https://newwikicopy.mdriven.net/index.php?title=Training:Bootcamp&oldid=19368"

© MDRIVEN . All Rights Reserved

Glossary API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved