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
page 1
<div style="width: 476px; height: 846px; position: relative; background: white">
<img style="width: 476px; height: 846px; left: 0px; top: 0px; position: absolute; border-radius: 57px" src="https://via.placeholder.com/476x846" />
<img style="width: 310px; height: 46px; left: 22px; top: 42px; position: absolute; border: 1px black solid" src="https://via.placeholder.com/310x46" />
<div style="width: 227px; height: 90px; left: 207px; top: 139px; position: absolute; mix-blend-mode: color-burn; text-align: center; color: #611CF4; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">CELENZA<br/>2024</div>
<div style="left: 32px; top: 337px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">Annual Cultural and Sports Festival </div>
<div style="width: 223px; height: 67px; left: 114px; top: 680px; position: absolute; background: #D9D9D9"></div>
<div style="width: 187px; height: 44px; left: 127px; top: 692px; position: absolute; text-align: center; color: #0F40EF; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 600; word-wrap: break-word">Register Now</div>
<div style="width: 363px; height: 148px; left: 39px; top: 448px; position: absolute; text-align: center; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 600; word-wrap: break-word">Get ready to unleash your inner athlete !!! We are thrilled to invite you to participate in this sports extravaganza</div>
<img style="width: 170px; height: 158px; left: 22px; top: 120px; position: absolute" src="https://via.placeholder.com/170x158" />
<div style="left: 71px; top: 609px; position: absolute; text-align: center; color: #1F6422; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 600; word-wrap: break-word">Registration fees-Rs.2000</div>
</div>
page 2
<div style="width: 488px; height: 846px; position: relative; background: white">
<img style="width: 488px; height: 852px; left: 0px; top: 0px; position: absolute; border-radius: 51px" src="https://via.placeholder.com/488x852" />
<div style="left: 145px; top: 519px; position: absolute; color: #59B062; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Volley Ball<br/><br/>Cricket<br/><br/>Kabaddi<br/><br/>Badminton</div>
<div style="left: 54px; top: 119px; position: absolute; color: #DC0ED4; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">For Boys:</div>
<div style="width: 35px; height: 29px; left: 92px; top: 174px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
<div style="width: 35px; height: 29px; left: 92px; top: 234px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
<div style="width: 35px; height: 29px; left: 92px; top: 289px; position: absolute; background: #F7F0F0"></div>
<div style="width: 35px; height: 29px; left: 92px; top: 352px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
<div style="left: 145px; top: 174px; position: absolute; color: #59B062; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Volley Ball<br/><br/>Cricket<br/><br/>Kabaddi<br/><br/>Badminton</div>
<div style="left: 70px; top: 61px; position: absolute; color: white; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Choose here </div>
<div style="left: 70px; top: 447px; position: absolute; color: #CB4CDF; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">For Girls:</div>
<div style="width: 35px; height: 29px; left: 90px; top: 519px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
<div style="width: 35px; height: 29px; left: 90px; top: 571px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
<div style="width: 35px; height: 29px; left: 90px; top: 629px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
<div style="width: 35px; height: 29px; left: 90px; top: 687px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
</div>
page 3
<div style="width: 477px; height: 846px; position: relative; background: white">
<img style="width: 477px; height: 846px; left: 0px; top: 0px; position: absolute; border-radius: 65px" src="https://via.placeholder.com/477x846" />
<div style="width: 355px; height: 97px; left: 56px; top: 571px; position: absolute; background: #D9D9D9"></div>
<div style="width: 355px; height: 54px; left: 56px; top: 481px; position: absolute; background: #D9D9D9"></div>
<div style="width: 355px; height: 54px; left: 56px; top: 391px; position: absolute; background: #D9D9D9"></div>
<div style="left: 33px; top: 46px; position: absolute; color: #23E0E0; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Sports Registration Form</div>
<div style="width: 355px; height: 54px; left: 56px; top: 121px; position: absolute; background: #D9D9D9"></div>
<div style="width: 355px; height: 54px; left: 56px; top: 211px; position: absolute; background: #D9D9D9"></div>
<div style="width: 355px; height: 54px; left: 56px; top: 301px; position: absolute; background: #D9D9D9"></div>
<div style="left: 86px; top: 135px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Name</div>
<div style="left: 86px; top: 224px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Register Number</div>
<div style="left: 86px; top: 314px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Department</div>
<div style="left: 90px; top: 400px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Mobile Number</div>
<div style="left: 92px; top: 493px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Email</div>
<div style="left: 102px; top: 587px; position: absolute; text-align: center"><span style="color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Payment-2000<br/></span><span style="color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; text-decoration: underline; word-wrap: break-word"> Generate QR code</span></div>
<div style="width: 154px; height: 48px; left: 48px; top: 704px; position: absolute; background: #AEB065"></div>
<div style="width: 154px; height: 48px; left: 246px; top: 704px; position: absolute; background: #1BF017"></div>
<div style="left: 59px; top: 718px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Clear Form</div>
<div style="left: 279px; top: 710px; position: absolute; text-align: center; color: #0F0F0F; font-size: 24px; font-family: Inter; font-weight: 900; word-wrap: break-word">Submit</div>
<div style="width: 175px; height: 43px; left: 130px; top: 780px; position: absolute; background: #17EEEE"></div>
<div style="left: 155px; top: 787px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-weight: 900; word-wrap: break-word">Register</div>
</div>
page 4
<img style="width: 460.97px; height: 854.37px; border-radius: 69px" src="https://via.placeholder.com/461x854" />
The program to design, develop and deploy a web application for event registration is completed successfully.