<html>
<style>
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
width: 2251px;
height: 2133px;
position: relative;
}
.header {
width: 100%;
height: 140px;
position: absolute;
top: 99px;
background: #E2F5FA;
display: flex;
align-items: center;
justify-content: center;
}
.header-text {
font-family: 'Outfit', sans-serif;
font-size: 55px;
font-weight: 600;
text-transform: uppercase;
}
.orange-text {
color: #FFAE6D;
}
.section {
width: 1725px;
height: 477px;
position: absolute;
border-radius: 40px;
padding: 20px;
box-sizing: border-box;
}
.beginner {
left: 592px;
top: 342px;
background: rgba(255, 218.31, 187, 0.60);
}
.intermediate {
left: -47px;
top: 914px;
background: rgba(217, 217, 217, 0.45);
width: 1657px;
}
.advanced {
left: 592px;
top: 1477px;
background: #112B3C;
color: white;
}
.section-title {
font-size: 55px;
font-weight: 700;
margin-bottom: 20px;
}
.section-content {
font-size: 48px;
font-weight: 400;
}
.icon-placeholder {
position: absolute;
background: url('icon-placeholder.png') no-repeat center center;
background-size: contain;
}
.icon-1 {
width: 312px;
height: 575px;
left: 198px;
top: 244px;
}
.icon-2 {
width: 549px;
height: 600px;
left: 1657px;
top: 791px;
}
.icon-3 {
width: 538px;
height: 753px;
left: 0;
top: 1380px;
}
</style>
</head>
<body>
<div class="header">
<div class="header-text">
<span class="orange-text">Choose</span> the right option for you
</div>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div class="icon-placeholder icon-1"></div>
<div class="icon-placeholder icon-2"></div>
<div class="icon-placeholder icon-3"></div>
</body>
</html>