Bootcamp/Levels
No edit summary Tag: 2017 source edit |
No edit summary Tags: Reverted 2017 source edit |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
body { | |||
margin: 0; | |||
padding: 0; | |||
font-family: 'Outfit', sans-serif; | |||
} | |||
.bootcamp-container { | |||
width: 100%; | |||
max-width: 1125px; | |||
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 { | .header-text { | ||
font-size: | 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; | |||
} | |||
.section { | |||
border-radius: 20px; | |||
padding: 30px; | |||
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; | |||
} | |||
.section:hover { | |||
transform: scale(1.05); | |||
} | |||
.beginner { | |||
background: rgba(255, 218, 187, 0.60); | |||
margin-right: 20px; | |||
} | |||
.intermediate { | |||
background: rgba(217, 217, 217, 0.45); | |||
margin-left: 20px; | |||
} | |||
.advanced { | |||
background: #112B3C; | |||
color: white; | |||
margin-right: 20px; | |||
} | } | ||
.section-title { | .section-title { | ||
font-size: | font-size: 24px; | ||
font-weight: 700; | |||
margin-bottom: 10px; | |||
} | } | ||
.section-content { | .section-content { | ||
font-size: | font-size: 20px; | ||
font-weight: 400; | |||
} | } | ||
.icon-placeholder { | .icon-placeholder { | ||
width: | width: 150px; | ||
height: | height: 150px; | ||
margin: | 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'); | |||
} | } | ||
.section { | |||
width: 100%; | /* Media queries for mobile responsiveness */ | ||
@media screen and (max-width: 768px) { | |||
.header-text { | |||
font-size: 22px; | |||
} | |||
.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> | |||
</style> | <div class="bootcamp-container"> | ||
<div class="header"> | |||
<div class="header-text"> | |||
<div class="bootcamp-container"> | <span class="orange-text">Choose</span> the right option for you | ||
</div> | |||
</div> | </div> | ||
<div class="section-container"> | <div class="section-container"> | ||
<div class="icon-placeholder icon-1"></div> | |||
<a href="#" class="section beginner" onclick="choosePath('beginner')"> | |||
<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> | |||
</a> | |||
</div> | </div> | ||
<div class="section-container"> | <div class="section-container"> | ||
<div class="icon-placeholder icon-2"></div> | |||
<a href="#" class="section intermediate" onclick="choosePath('intermediate')"> | |||
<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> | |||
</a> | |||
</div> | </div> | ||
<div class="section-container"> | <div class="section-container"> | ||
<div class="icon-placeholder icon-3"></div> | |||
<a href="#" class="section advanced" onclick="choosePath('advanced')"> | |||
<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> | |||
</a> | |||
</div> | </div> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 20:54, 28 July 2024
Choose the right option for you
This page was edited 174 days ago on 08/10/2024. What links here