To design, develop and deploy a web application for event registration.
Create a new frame.
Select any one preset size of your choice.
Select the shapes you need.
Import images as needed.
Create pages based on your need and link them.
Validate the HTML and CSS code.
Publish the website in the given URL.
Figma
<div style="width: 360px; height: 800px; position: relative; background: #7F5555; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)">
<div style="width: 190px; height: 34px; left: 85px; top: 311px; position: absolute; color: rgba(126.42, 21.81, 21.81, 0.20); font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">SPORTS EVENT</div>
<img style="width: 191px; height: 161px; left: 84px; top: 132px; position: absolute" src="https://via.placeholder.com/191x161" />
<div style="width: 162px; height: 50px; left: 100px; top: 387px; position: absolute; background: #D9D9D9"></div>
<div style="width: 75px; height: 36px; left: 139px; top: 400px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">LOGIN</div>
<div style="width: 165px; height: 50px; left: 97px; top: 471px; position: absolute; background: #D9D9D9"></div>
<div style="width: 148px; height: 30px; left: 133px; top: 481px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">SIGNUP</div>
<div style="width: 162px; height: 50px; left: 100px; top: 387px; position: absolute; background: #F34B4B"></div>
<div style="width: 75px; height: 36px; left: 139px; top: 400px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">LOGIN</div>
<div style="width: 165px; height: 50px; left: 97px; top: 471px; position: absolute; background: #646AF0"></div>
<div style="width: 148px; height: 30px; left: 133px; top: 481px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">SIGNUP</div>
<img style="width: 295px; height: 45px; left: 44px; top: 52px; position: absolute" src="https://via.placeholder.com/295x45" />
</div>
<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
<div style="width: 282px; height: 48px; left: 53px; top: 57px; position: absolute; color: #480E46; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">SPORTS DAY EVENTS</div>
<div style="width: 162px; height: 33px; left: 82px; top: 182px; position: absolute; color: #563DBA; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">RELAY</div>
<div style="width: 191px; height: 34px; left: 82px; top: 325px; position: absolute; color: #3953AD; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">TABLE TENNIS</div>
<div style="width: 162px; height: 33px; left: 82px; top: 419px; position: absolute; color: #565AB8; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">CARROM</div>
<div style="width: 162px; height: 33px; left: 82px; top: 377px; position: absolute; color: #5048B1; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">BADMINTON</div>
<div style="width: 162px; height: 33px; left: 82px; top: 283px; position: absolute; color: #4441C2; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">TENNIS</div>
<div style="width: 162px; height: 33px; left: 82px; top: 233px; position: absolute; color: #4044B5; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">100 MTS</div>
</div>
<div style="width: 360px; height: 800px; position: relative; background: #76EC90">
<div style="width: 297px; height: 34px; left: 38px; top: 138px; position: absolute; background: #D9D9D9"></div>
<div style="width: 307px; height: 57px; left: 53px; top: 57px; position: absolute; color: #FEFAFA; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Event Registration Form</div>
<div style="width: 294px; height: 40px; left: 41px; top: 188px; position: absolute; background: #D9D9D9"></div>
<div style="width: 296px; height: 38px; left: 39px; top: 251px; position: absolute; background: #D9D9D9"></div>
<div style="width: 101px; height: 43px; left: 62px; top: 193px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">MOBILE</div>
<div style="width: 101px; height: 6px; left: 71px; top: 257px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">EMAIL</div>
<div style="width: 101px; height: 34px; left: 62px; top: 141px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">NAME</div>
<div style="width: 301px; height: 41px; left: 34px; top: 307px; position: absolute; background: #D9D9D9"></div>
<div style="width: 101px; height: 11px; left: 71px; top: 316px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">AGE</div>
<div style="width: 301px; height: 40px; left: 34px; top: 375px; position: absolute; background: #D9D9D9"></div>
<div style="left: 68px; top: 384px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">DEPT</div>
<div style="width: 301px; height: 34px; left: 34px; top: 440px; position: absolute; background: #D9D9D9"></div>
<div style="width: 215px; height: 18px; left: 66px; top: 441px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word"> NO OF EVENTS</div>
<div style="width: 301px; height: 36px; left: 34px; top: 499px; position: absolute; background: #D9D9D9"></div>
<div style="width: 169px; height: 32px; left: 75px; top: 503px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">EVENTS</div>
<div style="width: 163px; height: 90px; left: 93px; top: 599px; position: absolute; background: #E114E5"></div>
<div style="width: 178px; height: 59px; left: 130px; top: 630px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">SUBMIT</div>
</div>
<div style="width: 355px; height: 800px; position: relative; background: #FB1111">
<div style="width: 257px; height: 29px; left: 98px; top: 107px; position: absolute; color: #FFFBFB; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">THANKYOU</div>
<div style="width: 253px; height: 151px; left: 54px; top: 266px; position: absolute; color: #F4F4F6; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">WE ARE ALL EAGERLY WAITING FOR YOUR PARTICIPATION IN THE SPORTS EVENTS</div>
</div>
The program to design, develop and deploy a web application for event registration is completed successfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent