|
|
| Line 1: |
Line 1: |
| <html> | | <!DOCTYPE html> |
| <div style="width: 2251px; height: 2403px; position: relative"> | | <html lang="en"> |
| <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>
| | <head> |
| <div style="width: 942px; height: 126px; left: 655px; top: 286px; position: absolute; background: rgba(255, 218.31, 187, 0.45)"></div> | | <meta charset="UTF-8"> |
| <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>
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <div style="width: 1879px; height: 385px; left: 186px; top: 478px; position: absolute">
| | <title>Styled Div</title> |
| <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> | | <style> |
| <div style="width: 38.84px; height: 33px; left: 1087px; top: 160px; position: absolute"> | | body { |
| <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> | | font-family: Outfit, sans-serif; |
| </div>
| | margin: 0; |
| <div style=" width: 256px; height: 280px; left: 176px; top: 30px; position: absolute"> | | padding: 0; |
| <!-- Placeholder for icon 1 -->
| | display: flex; |
| <div style=" width: 254.05px; height: 278.88px; left: 0px; top: 0px; position: absolute; background: black">< /div> | | justify-content: center; |
| <div style="width: 254.05px; height: 278.54px; left: 0px; top: 0px; position: absolute; background: white"></div> | | align-items: center; |
| | background-color: #fff; |
| | } |
| | .container { |
| | width: 600px; |
| | text-align: center; |
| | } |
| | .title { |
| | font-size: 48px; |
| | font-weight: 700; |
| | margin: 20px 0; |
| | } |
| | .subtitle { |
| | background: rgba(255, 218, 187, 0.45); |
| | font-size: 24px; |
| | font-weight: 700; |
| | margin: 0 auto; |
| | padding: 10px; |
| | } |
| | .section { |
| | display: flex; |
| | align-items: center; |
| | margin: 20px 0; |
| | padding: 10px; |
| | } |
| | .section-icon { |
| | flex: 1; |
| | text-align: left; |
| | } |
| | .section-text { |
| | flex: 3; |
| | font-size: 20px; |
| | font-weight: 700; |
| | text-align: left; |
| | } |
| | .section-arrow { |
| | flex: 1; |
| | font-size: 20px; |
| | text-align: right; |
| | } |
| | .start-button { |
| | background: rgba(255, 218, 187, 0.45); |
| | font-size: 16px; |
| | font-weight: 700; |
| | padding: 10px; |
| | border: none; |
| | cursor: pointer; |
| | margin-top: 20px; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | |
| | <div class="title"> BOOTCAMP</div> |
| | <div class=" subtitle"> BEFORE STARTING GUIDE< /div> |
| | |
| | |
| | <div class="section-icon"> |
| | <img src="https://via.placeholder.com/40" alt="Icon" /> |
| </div> | | </div> |
| | <div class="section-text">EXPECTATIONS</div> |
| | <div class="section-arrow">></div> |
| </div> | | </div> |
| <div style="width: 1879px; height: 385px; left: 184px; top: 863px; position: absolute">
| | |
| <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> | | <div class="section"> |
| <div style="width: 444px; height: 360px; left: 27px; top: 6px; position: absolute"> | | <div class="section-icon"> |
| <!-- Placeholder for icon 2 -->
| | <img src="https://via.placeholder.com/40" alt="Icon" /> |
| <div style="width: 443.52px; height: 359.62px; left: 0px; top: 0px; position: absolute; background: black"></div>
| |
| <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" />
| |
| <img style="width: 285.75px; height: 212.90px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/ 286x213" /> | |
| </div>
| |
| </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>
| |
| </div> | | </div> |
| | <div class="section-text">INSTALLATION</div> |
| | <div class="section-arrow">></div> |
| </div> | | </div> |
| <div style="width: 1879px; height: 385px; left: 182px; top: 1248px; position: absolute">
| | |
| <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 class="section"> |
| <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 class="section-icon"> |
| <div style="width: 326px; height: 287px; left: 110px; top: 49px; position: absolute">
| | <img src="https://via.placeholder.com/40" alt="Icon" /> |
| <!-- Placeholder for icon 3 -->
| |
| <div style="width: 324.67px; height: 284.87px; left: -0px; top: 0.35px; position: absolute; background: black"></div>
| |
| <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>
| |
| </div>
| |
| <div style="width: 38.84px; height: 33px; left: 1091px; 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>
| |
| </div> | | </div> |
| | <div class="section-text">MATERIALS</div> |
| | <div class="section-arrow">></div> |
| </div> | | </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> | | <div class="section"> |
| <div style="width: 280px; height: 279px; left: 119px; top: 30px; position: absolute"> | | <div class="section-icon"> |
| <!-- Placeholder for icon 4 -->
| | <img src="https://via.placeholder.com/40" alt="Icon" /> |
| <div style="width: 279.27px; height: 278.01px; left: 0.35px; top: -0px; position: absolute; background: black"></div> | |
| <div style="width: 279.27px; height: 278.48px; left: 0px; top: 0px; position: absolute; background: white"></div>
| |
| </div>
| |
| <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> | | </div> |
| | <div class="section-text">TROUBLESHOOTING</div> |
| | <div class="section-arrow">></div> |
| </div> | | </div> |
| <div style="width: 1879px; height: 385px; left: 190px; top: 2018px; position: absolute">
| | |
| <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> | | <div class="section"> |
| <div style="width: 308px; height: 296px; left: 105px; top: 22px; position: absolute"> | | <div class="section-icon"> |
| <!-- Placeholder for icon 5 -->
| | <img src="https://via.placeholder.com/40" alt="Icon" /> |
| <div style="width: 307.68px; height: 295.79px; left: 0.08px; top: 0.08px; position: absolute; background: black"></div>
| |
| <div style="width: 307.34px; height: 295.79px; left: 0px; top: 0px; position: absolute; background: white"></div> | |
| <div style="width: 134.83px; height: 159.73px; left: 54.04px; top: 88.74px; position: absolute; background: black"></div>
| |
| <div style="width: 66.23px; height: 49.86px; left: 173.48px; top: 129.39px; position: absolute; background: black"></div>
| |
| <div style="width: 60.92px; height: 60.93px; left: 121.64px; top: 62.09px; position: absolute; background: black"></div>
| |
| <div style="width: 10.34px; height: 10.32px; left: 160.92px; top: 85.30px; position: absolute; background: black"></div>
| |
| <div style="width: 10.33px; height: 10.31px; left: 146.93px; top: 85.32px; position: absolute; background: black"></div>
| |
| <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">
| |
| <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> | | </div> |
| | <div class="section-text">COMMUNICATION</div> |
| | <div class="section-arrow">></div> |
| </div> | | </div> |
| | |
| | <button class="start-button">Click here to START BOOTCAMP</button> |
| </div> | | </div> |
| </body> | | </body> |
| </html> | | </html> |
