Bootcamp/Levels
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(19 intermediate revisions by the same user not shown)
Line 36: Line 36:
         align-items: center;
         align-items: center;
         margin: 20px 0;
         margin: 20px 0;
        animation: fadeInUp 1s ease-in-out forwards;
     }
     }
     .section {
     .section {
         border-radius: 20px;
         border-radius: 20px;
         padding: 20px;
         padding: 50px;
         box-sizing: border-box;
         box-sizing: border-box;
         cursor: pointer;
         cursor: pointer;
Line 48: Line 49:
         flex-direction: column;
         flex-direction: column;
         justify-content: center;
         justify-content: center;
        text-decoration: none;
        color: inherit;
        text-align: left;
     }
     }
     .section:hover {
     .section:hover {
         transform: scale(1.05);
         transform: scale(1.05);
     }
     }
    .section:link,
    .section:visited,
    .section:hover,
    .section:active {
            text-decoration: none;
            color: inherit;
        }
     .beginner {
     .beginner {
         background: rgba(255, 218, 187, 0.60);
         background: rgba(255, 218, 187, 0.60);
        margin-right: 20px;
     }
     }
     .intermediate {
     .intermediate {
         background: rgba(217, 217, 217, 0.45);
         background: rgba(217, 217, 217, 0.45);
        margin-left: 20px;
     }
     }
     .advanced {
     .advanced {
         background: #112B3C;
         background: #112B3C;
         color: white;
         color: white !important;
        margin-right: 20px;
     }
     }
     .section-title {
     .section-title {
Line 80: Line 88:
         background-repeat: no-repeat;
         background-repeat: no-repeat;
         margin: 0 20px;
         margin: 0 20px;
        animation: fadeInScale 1s ease-in-out forwards;
     }
     }
    .icon-1 {
 
        background-image: url('https://newwikicopy.mdriven.net/images/0/0e/MDrivenBootcamp_1.svg');
  .mw-body-content {
    }
  background-color:#E2F5FA;
    .icon-2 {
 
        background-image: url('https://newwikicopy.mdriven.net/images/4/41/Welcome_Video_-_MDrivenBootcamp_%281%29_1.svg');
}
    }
 
    .icon-3 {
.section-container:nth-child(2) {
        background-image: url('https://newwikicopy.mdriven.net/images/2/23/Welcome_Video_-_MDrivenBootcamp_%282%29_1.svg');
    animation-delay: 0.2s;
    }
}
.section-container:nth-child(3) {
    animation-delay: 0.4s;
}


/* Media queries for mobile responsiveness */
/* Media queries for mobile responsiveness */
Line 123: Line 135:
         }
         }
     }
     }
@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>
</style>
</head>
<script>
<body>
        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>
 
<div class="bootcamp-container">
<div class="bootcamp-container">
     <div class="header">
     <div class="header">
Line 134: Line 187:


<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">
         <div 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>
         </div>
         </a>
     </div>
     </div>


<div class="section-container">
<div class="section-container">
         <div class="section intermediate" onclick="choosePath('intermediate')">
         <a href="/index.php/Bootcamp/Intermediate" class="section 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>
         </div>
         </a>
         <div class="icon-placeholder icon-2"></div>
         <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">
         <div 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>
         </div>
         </a>
     </div>
     </div>
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 23:34, 9 August 2024

This page was edited 174 days ago on 08/10/2024. What links here