Bootcamp
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(55 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!DOCTYPE html>
<html>
<html lang="en">
<style>
<head>
#mw-content-text.mw-body-content.mw-content-ltr {
    <meta charset="UTF-8">
     background-image: url('https://wiki.mdriven.net/images/background_desktop.webp');
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     background-size: cover;
     <title>Styled Div</title>
    background-position: center;
</head>
    background-repeat: no-repeat;
<body>
    min-height: 100vh;
     <div style="width: 2251px; height: 2403px; position: relative">
    display: flex;
        <div style="width: 601px; height: 116px; left: 825px; top: 138px; position: absolute; text-align: center; color: black; font-size: 96px; font-family: Outfit; font-weight: 700; word-wrap: break-word">BOOTCAMP</div>
    flex-direction: column;
        <div style="width: 942px; height: 126px; left: 655px; top: 286px; position: absolute; background: rgba(255, 218.31, 187, 0.45)"></div>
    justify-content: flex-start;
        <div style="width: 844px; height: 58px; left: 702px; top: 320px; position: absolute; text-align: center; color: black; font-size: 48px; font-family: Outfit; font-weight: 700; word-wrap: break-word">BEFORE STARTING GUIDE</div>
    align-items: flex-start;
        <div style="width: 1879px; height: 385px; left: 186px; top: 478px; position: absolute">
    padding: 2em;
            <div style="width: 371px; height: 47px; left: 473px; top: 146px; position: absolute; color: black; font-size: 40px; font-family: Outfit; font-weight: 700; word-wrap: break-word">EXPECTATIONS</div>
}
            <div style="width: 38.84px; height: 33px; left: 1087px; top: 160px; position: absolute">
 
                <div style="width: 32.29px; height: 15.79px; left: 11.23px; top: 34.21px; position: absolute; transform: rotate(-89.01deg); transform-origin: 0 0; background: black"></div>
.top-box {
            </div>
    border-radius: 35px;
            <div style="width: 256px; height: 280px; left: 176px; top: 30px; position: absolute">
    background: rgba(255, 255, 255, 0.50);
                <!-- Placeholder for icon 1 -->
    padding: 20px;
                <div style="width: 254.05px; height: 278.88px; left: 0px; top: 0px; position: absolute; background: black"></div>
    max-width: 80%;
                <div style="width: 254.05px; height: 278.54px; left: 0px; top: 0px; position: absolute; background: white"></div>
    width: 100%;
            </div>
    text-align: left;
        </div>
    font-size: 1.2em;
        <div style="width: 1879px; height: 385px; left: 184px; top: 863px; position: absolute">
    color: #000;
            <div style="width: 367px; height: 47px; left: 478px; top: 146px; position: absolute; color: black; font-size: 40px; font-family: Outfit; font-weight: 700; word-wrap: break-word">INSTALLATION</div>
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            <div style="width: 444px; height: 360px; left: 27px; top: 6px; position: absolute">
    margin-bottom: 4em;
                <!-- Placeholder for icon 2 -->
    opacity: 0;
                <div style="width: 443.52px; height: 359.62px; left: 0px; top: 0px; position: absolute; background: black"></div>
    animation: fadeIn 1.5s ease-out forwards;
                <div style="width: 443.91px; height: 359.62px; left: 0px; top: 0px; position: absolute; background: white"></div>
}
                <div style="width: 285px; height: 212.61px; left: 99px; top: 74px; position: absolute">
 
                    <img style="width: 285.75px; height: 212.90px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/286x213" />
.top-box-title {
                    <img style="width: 285.75px; height: 212.90px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/286x213" />
    font-weight: bold;
                </div>
    font-size: 1.5em;
            </div>
}
            <div style="width: 38.84px; height: 33px; left: 1083px; top: 153px; position: absolute">
 
                <div style="width: 32.29px; height: 15.79px; left: 11.23px; top: 34.21px; position: absolute; transform: rotate(-89.01deg); transform-origin: 0 0; background: black"></div>
.top-box-subtitle {
            </div>
    font-weight: bold;
        </div>
    font-size: 1.8em;
        <div style="width: 1879px; height: 385px; left: 182px; top: 1248px; position: absolute">
    margin-top: 10px;
            <div style="width: 367px; height: 47px; left: 488px; top: 146px; position: absolute; color: black; font-size: 40px; font-family: Outfit; font-weight: 700; word-wrap: break-word">MATERIALS</div>
}
            <div style="width: 181px; height: 50px; left: 155px; top: 146px; position: absolute; text-align: center; color: black; font-size: 40px; font-family: Outfit; font-weight: 700; word-wrap: break-word">IMAGE</div>
 
            <div style="width: 326px; height: 287px; left: 110px; top: 49px; position: absolute">
.top-box-description {
                <!-- Placeholder for icon 3 -->
    font-size: 1.2em;
                <div style="width: 324.67px; height: 284.87px; left: -0px; top: 0.35px; position: absolute; background: black"></div>
    margin-top: 10px;
                <div style="width: 325.07px; height: 284.87px; left: 0px; top: 0px; position: absolute; background: white"></div>
}
                <div style="width: 281.65px; height: 203.80px; left: 22.99px; top: 15.69px; position: absolute; background: black"></div>
 
                <div style="width: 281.79px; height: 202.38px; left: -0.03px; top: 0.01px; position: absolute; background: #F1A241"></div>
.video-container {
            </div>
    text-align: left;
            <div style="width: 38.84px; height: 33px; left: 1091px; top: 160px; position: absolute">
    margin-bottom: 60px;
                <div style="width: 32.29px; height: 15.79px; left: 11.23px; top: 34.21px; position: absolute; transform: rotate(-89.01deg); transform-origin: 0 0; background: black"></div>
    opacity: 0;
            </div>
    animation: fadeIn 1.5s ease-out 0.5s forwards;
        </div>
}
        <div style="width: 1879px; height: 385px; left: 186px; top: 1633px; position: absolute">
 
            <div style="width: 406px; height: 47px; left: 477px; top: 146px; position: absolute; color: black; font-size: 40px; font-family: Outfit; font-weight: 700; word-wrap: break-word">TROUBLESHOOTING</div>
.video-container iframe {
            <div style="width: 280px; height: 279px; left: 119px; top: 30px; position: absolute">
    width: 100%;
                <!-- Placeholder for icon 4 -->
    max-width: 800px;
                <div style="width: 279.27px; height: 278.01px; left: 0.35px; top: -0px; position: absolute; background: black"></div>
    height: 450px;
                <div style="width: 279.27px; height: 278.48px; left: 0px; top: 0px; position: absolute; background: white"></div>
    border: none;
            </div>
    border-radius: 15px;
            <div style="width: 38.84px; height: 33px; left: 1078px; top: 153px; position: absolute">
}
                <div style="width: 32.29px; height: 15.79px; left: 11.23px; top: 34.21px; position: absolute; transform: rotate(-89.01deg); transform-origin: 0 0; background: black"></div>
 
            </div>
.next-step-button {
        </div>
    display: inline-block;
         <div style="width: 1879px; height: 385px; left: 190px; top: 2018px; position: absolute">
    margin-top: 20px;
            <div style="width: 367px; height: 47px; left: 469px; top: 146px; position: absolute; color: black; font-size: 40px; font-family: Outfit; font-weight: 700; word-wrap: break-word">COMMUNICATION</div>
    padding: 10px 20px;
            <div style="width: 308px; height: 296px; left: 105px; top: 22px; position: absolute">
    border-radius: 25px;
                <!-- Placeholder for icon 5 -->
    background: #E2F5FA;
                <div style="width: 307.68px; height: 295.79px; left: 0.08px; top: 0.08px; position: absolute; background: black"></div>
    color: #000;
                <div style="width: 307.34px; height: 295.79px; left: 0px; top: 0px; position: absolute; background: white"></div>
    font-size: 1.1em;
                <div style="width: 134.83px; height: 159.73px; left: 54.04px; top: 88.74px; position: absolute; background: black"></div>
    font-weight: bold;
                <div style="width: 66.23px; height: 49.86px; left: 173.48px; top: 129.39px; position: absolute; background: black"></div>
    text-decoration: none;
                <div style="width: 60.92px; height: 60.93px; left: 121.64px; top: 62.09px; position: absolute; background: black"></div>
    text-align: center;
                <div style="width: 10.34px; height: 10.32px; left: 160.92px; top: 85.30px; position: absolute; background: black"></div>
    opacity: 0;
                <div style="width: 10.33px; height: 10.31px; left: 146.93px; top: 85.32px; position: absolute; background: black"></div>
    animation: fadeIn 1.5s ease-out 1s forwards;
                <div style="width: 10.32px; height: 10.31px; left: 132.87px; top: 85.32px; position: absolute; background: black"></div>
}
            </div>
 
            <div style="width: 38.84px; height: 33px; left: 1074px; top: 153px; position: absolute">
.video-container iframe {
                <div style="width: 32.29px; height: 15.79px; left: 11.23px; top: 34.21px; position: absolute; transform: rotate(-89.01deg); transform-origin: 0 0; background: black"></div>
    width: 100%;
            </div>
    max-width: 640px;
        </div>
    height: 360px;
    border: none;
    border-radius: 15px;
}
 
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@media (max-width: 767px) {
    #mw-content-text.mw-body-content.mw-content-ltr {
        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 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>
</body>
</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