Bootcamp/Levels
No edit summary
Tags: Reverted 2017 source edit
No edit summary
Tag: 2017 source edit
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
        body {
    body {
            margin: 0;
        margin: 0;
            padding: 0;
        padding: 0;
            font-family: 'Outfit', sans-serif;
        font-family: 'Outfit', sans-serif;
    }
    .bootcamp-container {
        width: 100%;
        position: relative;
        margin: auto;
        padding: 10px;
        box-sizing: border-box;
    }
    .header {
        width: 100%;
        height: 70px;
        background: #E2F5FA;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    .header-text {
        font-family: 'Outfit', sans-serif;
        font-size: 28px;
        font-weight: 600;
        text-transform: uppercase;
        text-align: center;
    }
    .orange-text {
        color: #FFAE6D;
    }
    .section-container {
        display: flex;
        align-items: center;
        margin: 20px 0;
        animation: fadeInUp 1s ease-in-out forwards;
    }
    .section {
        border-radius: 20px;
        padding: 50px;
        box-sizing: border-box;
        cursor: pointer;
        transition: transform 0.3s ease;
        flex: 1;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-decoration: none;
        color: inherit;
        text-align: left;
    }
    .section:hover {
        transform: scale(1.05);
    }
    .section:link,
    .section:visited,
    .section:hover,
    .section:active {
            text-decoration: none;
            color: inherit;
         }
         }
         .bootcamp-container {
    .beginner {
            width: 100%;
        background: rgba(255, 218, 187, 0.60);
            max-width: 1125px;
    }
            position: relative;
    .intermediate {
            margin: auto;
        background: rgba(217, 217, 217, 0.45);
            padding: 10px;
    }
             box-sizing: border-box;
    .advanced {
        background: #112B3C;
        color: white !important;
    }
    .section-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
    }
    .section-content {
         font-size: 20px;
        font-weight: 400;
    }
    .icon-placeholder {
        width: 250px;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 20px;
        animation: fadeInScale 1s ease-in-out forwards;
    }
 
  .mw-body-content {
  background-color:#E2F5FA;
 
}
 
.section-container:nth-child(2) {
    animation-delay: 0.2s;
}
.section-container:nth-child(3) {
    animation-delay: 0.4s;
}
 
/* Media queries for mobile responsiveness */
    @media screen and (max-width: 768px) {
        .header-text {
             font-size: 22px;
         }
         }
         .header {
         .section-title {
             width: 100%;
             font-size: 20px;
            height: 70px;
            background: #E2F5FA;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
         }
         }
         .header-text {
         .section-content {
            font-family: 'Outfit', sans-serif;
             font-size: 16px;
             font-size: 28px;
            font-weight: 600;
            text-transform: uppercase;
            text-align: center;
         }
         }
         .orange-text {
         .icon-placeholder {
             color: #FFAE6D;
             width: 100px;
            height: 100px;
            margin: 10px auto;
         }
         }
         .section-container {
         .section-container {
             display: flex;
             flex-direction: column;
             align-items: center;
             align-items: center;
            margin: 20px 0;
         }
         }
         .section {
         .section {
             border-radius: 20px;
             width: 100%;
            padding: 30px;
             margin: 10px 0;
            box-sizing: border-box;
             text-align: center;
            cursor: pointer;
             transition: transform 0.3s ease;
             flex: 1;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-decoration: none;
            color: inherit;
         }
         }
        .section:hover {
         .beginner, .advanced {
            transform: scale(1.05);
             margin: 0;
        }
         .beginner {
            background: rgba(255, 218, 187, 0.60);
             margin-right: 20px;
         }
         }
         .intermediate {
         .intermediate {
            background: rgba(217, 217, 217, 0.45);
             margin: 0;
            margin-left: 20px;
        }
        .advanced {
            background: #112B3C;
            color: white;
            margin-right: 20px;
        }
        .section-title {
            font-size: 24px;
            font-weight: 700;
             margin-bottom: 10px;
        }
        .section-content {
            font-size: 20px;
            font-weight: 400;
        }
        .icon-placeholder {
            width: 150px;
            height: 150px;
            background-size: contain;
            background-repeat: no-repeat;
            margin: 0 20px;
        }
        .icon-1 {
            background-image: url('https://newwikicopy.mdriven.net/images/0/0e/MDrivenBootcamp_1.svg');
        }
        .icon-2 {
            background-image: url('https://newwikicopy.mdriven.net/images/0/0e/MDrivenBootcamp_1.svg');
        }
        .icon-3 {
            background-image: url('https://newwikicopy.mdriven.net/images/0/0e/MDrivenBootcamp_1.svg');
         }
         }
    }
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
</style>
<script>
        window.addEventListener('load', () => {
            document.querySelector('.header').classList.add('loaded');
            document.querySelectorAll('.section-container').forEach((element) => {
                element.classList.add('loaded');
            });
            document.querySelectorAll('.icon-placeholder').forEach((element) => {
                element.classList.add('loaded');
            });
        });
    </script>


/* Media queries for mobile responsiveness */
<div class="bootcamp-container">
        @media screen and (max-width: 768px) {
    <div class="header">
            .header-text {
        <div class="header-text">
                font-size: 22px;
            <span class="orange-text">Choose</span> the right option for you
            }
            .section-title {
                font-size: 20px;
            }
            .section-content {
                font-size: 16px;
            }
            .icon-placeholder {
                width: 100px;
                height: 100px;
                margin: 10px auto;
            }
            .section-container {
                flex-direction: column;
                align-items: center;
            }
            .section {
                width: 100%;
                margin: 10px 0;
                text-align: center;
                padding: 20px;
            }
            .section-container .icon-placeholder {
                margin-bottom: 10px;
            }
            .beginner, .advanced, .intermediate {
                margin: 0;
            }
            .section-container .section-container {
                margin-bottom: 10px;
            }
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        a:hover {
            color: inherit;
        }
    </style>
    <div class="bootcamp-container">
        <div class="header">
            <div class="header-text">
                <span class="orange-text">Choose</span> the right option for you
            </div>
         </div>
         </div>
    </div>


<div class="section-container">
<div class="section-container">
            <div class="icon-placeholder icon-1"></div>
      <img src="https://wiki.mdriven.net/images/6/6e/Person_beginner.png" alt="Beginner Icon" class="icon-placeholder">
            <a href="#" class="section beginner" onclick="choosePath('beginner')">
        <a href="/index.php/Bootcamp/Beginner" class="section beginner">
                <div class="section-title">BEGINNER</div>
            <div class="section-title">BEGINNER</div>
                <div class="section-content">You are brand new to MDriven modeling and tools and you've got a lot of questions. This is the place to start - right from the basics!</div>
            <div class="section-content">You want to learn software modeling using the MDriven tools and you’ve got a lot of questions. This is the place to start - right from the basics!</div>
            </a>
        </a>
        </div>
    </div>


<div class="section-container">
<div class="section-container">
            <div class="icon-placeholder icon-2"></div>
        <a href="/index.php/Bootcamp/Intermediate" class="section intermediate">
            <a href="#" class="section intermediate" onclick="choosePath('intermediate')">
            <div class="section-title">INTERMEDIATE</div>
                <div class="section-title">INTERMEDIATE</div>
            <div class="section-content">You have some understanding of models but you need to brush up on what you know and learn what else is new. Join the trail from here!</div>
                <div class="section-content">You have some understanding of models but you need to brush up on what you know and learn what else is new. Join the trail from here!</div>
        </a>
            </a>
         <img src="https://wiki.mdriven.net/images/0/00/Person_intermediate.png" alt="Intermediate Icon" class="icon-placeholder">
         </div>
    </div>


<div class="section-container">
<div class="section-container">
            <div class="icon-placeholder icon-3"></div>
        <img src="https://wiki.mdriven.net/images/6/66/Person_advanced.png" alt="Advanced Icon" class="icon-placeholder">
            <a href="#" class="section advanced" onclick="choosePath('advanced')">
        <a href="/index.php/Bootcamp/Advanced" class="section advanced">
                <div class="section-title">ADVANCED</div>
            <div class="section-title">ADVANCED</div>
                <div class="section-content">You are very familiar with modeling and now you just want to understand how MDriven does it. Dive right in with the more advanced concepts behind the MDriven tools.</div>
            <div class="section-content">You are very familiar with modeling and now you just want to understand how MDriven does it. Dive right in with the more advanced concepts behind the MDriven tools.</div>
            </a>
        </a>
        </div>
     </div>
     </div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 23:34, 9 August 2024

Choose the right option for you
Beginner Icon
BEGINNER
You want to learn software modeling using the MDriven tools and you’ve got a lot of questions. This is the place to start - right from the basics!
INTERMEDIATE
You have some understanding of models but you need to brush up on what you know and learn what else is new. Join the trail from here!
 Intermediate Icon
Advanced Icon
ADVANCED
You are very familiar with modeling and now you just want to understand how MDriven does it. Dive right in with the more advanced concepts behind the MDriven tools.

This page was edited 174 days ago on 08/10/2024. What links here
Retrieved from "https://newwikicopy.mdriven.net/index.php?title=Training:Bootcamp/Levels&oldid=19114"

© MDRIVEN . All Rights Reserved

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

© MDRIVEN . All Rights Reserved