Bootcamp
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(41 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;
            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;
     text-align: right;
     display: flex;
     display: flex;
     justify-content: flex-end;
    flex-direction: column;
     justify-content: flex-start;
    align-items: flex-start;
    padding: 2em;
}
}


.section-arrow svg {
.top-box {
     transition: transform 0.3s ease;
     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;
}
}


.section-arrow svg.collapsed {
.top-box-title {
     transform: rotate(90deg);
     font-weight: bold;
    font-size: 1.5em;
}
}


.section-content {
.top-box-subtitle {
     display: none;
     font-weight: bold;
    font-size: 1.8em;
     margin-top: 10px;
     margin-top: 10px;
}
}


.section-content.expanded {
.top-box-description {
     display: block;
    font-size: 1.2em;
    margin-top: 10px;
}
 
.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;
}
}
    </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(section) {
        const arrowContainer = section.querySelector('.section-arrow');
        const content = section.nextElementSibling;
        const isExpanded = content.classList.toggle('expanded');
     
        if (isExpanded) {
            arrowContainer.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="33" viewBox="0 0 39 33" fill="none">
                    <path d="M3.97048 10.9169C4.42569 10.5302 5.043 10.313 5.68667 10.313C6.33033 10.313 6.94764 10.5302 7.40285 10.9169L19.4186 21.1262L31.4343 10.9169C31.8921 10.5412 32.5053 10.3333 33.1418 10.338C33.7782 10.3427 34.387 10.5596 34.8371 10.942C35.2872 11.3244 35.5425 11.8417 35.548 12.3825C35.5535 12.9233 35.3088 13.4442 34.8667 13.8332L21.1348 25.5008C20.6796 25.8875 20.0622 26.1047 19.4186 26.1047C18.7749 26.1047 18.1576 25.8875 17.7024 25.5008L3.97048 13.8332C3.51541 13.4465 3.25977 12.9219 3.25977 12.375C3.25977 11.8281 3.51541 11.3036 3.97048 10.9169Z" fill="black"/>
                </svg>`;
        } else {
            arrowContainer.innerHTML = `
                <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>`;
        }
    }
</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