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
Home page
<div style="width: 363px; height: 640px; position: relative; background: white">
<img style="width: 402px; height: 640px; left: -28px; top: 0px; position: absolute" src="https://via.placeholder.com/402x640" />
<img style="width: 116px; height: 116px; left: 14px; top: 75px; position: absolute" src="https://via.placeholder.com/116x116" />
<img style="width: 278px; height: 208.62px; left: 110.74px; top: 29.82px; position: absolute; transform: rotate(7.47deg); transform-origin: 0 0" src="https://via.placeholder.com/278x209" />
<div style="width: 120px; height: 26px; left: 22px; top: 273px; position: absolute; color: white; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">NAME </div>
<div style="width: 167px; height: 22px; left: 109px; top: 273px; position: absolute; background: #07FDA4"></div>
<div style="width: 93px; height: 15px; left: 144px; top: 278px; position: absolute; color: black; font-size: 10px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">ENTER YOUR NAME</div>
<div style="width: 99px; height: 28px; left: 22px; top: 320px; position: absolute; color: white; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">REG. NO</div>
<div style="width: 167px; height: 20px; left: 109px; top: 320px; position: absolute; background: #06FF96"></div>
<div style="width: 117px; height: 20px; left: 151px; top: 323px; position: absolute; color: black; font-size: 11px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">ENTER REG. NO</div>
<div style="width: 166px; height: 46px; left: 110px; top: 539px; position: absolute; background: #07FCA4; border-radius: 9999px"></div>
<div style="width: 111px; height: 21px; left: 155px; top: 549px; position: absolute; color: black; font-size: 20px; font-family: Kyiv*Type Titling; font-weight: 350; word-wrap: break-word">LOGIN...</div>
<img style="width: 346.67px; height: 52px; left: 8px; top: 13px; position: absolute" src="https://via.placeholder.com/347x52" />
<img style="width: 39px; height: 39px; left: 315px; top: 594px; position: absolute" src="https://via.placeholder.com/39x39" />
</div>
Page 2
<div style="width: 360px; height: 640px; position: relative; background: white">
<img style="width: 351px; height: 640px; left: 4px; top: 0px; position: absolute" src="https://via.placeholder.com/351x640" />
<img style="width: 346.67px; height: 52px; left: 7px; top: 12px; position: absolute" src="https://via.placeholder.com/347x52" />
<img style="width: 300px; height: 99.77px; left: 30px; top: 112px; position: absolute" src="https://via.placeholder.com/300x100" />
<div style="width: 66px; height: 32px; left: 39px; top: 136px; position: absolute; background: #FF5E03"></div>
<div style="width: 67px; height: 21px; left: 39px; top: 147px; position: absolute; color: white; font-size: 11px; font-family: Kyiv*Type Titling; font-weight: 350; word-wrap: break-word">TECHNICAL</div>
<div style="width: 61px; height: 31px; left: 255px; top: 149px; position: absolute; background: #73BFB6"></div>
<div style="width: 72px; height: 20px; left: 255px; top: 151px; position: absolute; color: black; font-size: 10px; font-family: Kyiv*Type Titling; font-weight: 350; word-wrap: break-word">NON-TECHNICAL</div>
<div style="width: 148px; height: 277px; left: 25px; top: 258px; position: absolute; color: white; font-size: 14px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">TECHNICAL :<br/>
<br/>>> CODE GALATTA
<br/>
<br/>>> ETHICAL HACKING
<br/>
<br/>>> CODE HUNT WITH C
<br/>
<br/>>> VIDEO EDITING
<br/>
<br/>>> REELS</div>
<div style="width: 147px; height: 246px; left: 212px; top: 255px; position: absolute; color: white; font-size: 14px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">NON-TECHNICAL
<br/>
<br/>>> GROUP SONG
<br/>
<br/>>> DIGITAL ART
<br/>
<br/>>> TREASURE HUNT
<br/>
<br/>>> BIRIYANI COOKING
<br/>
<br/>>> SPORTS</div>
<img style="width: 40px; height: 40px; left: 306px; top: 593px; position: absolute" src="https://via.placeholder.com/40x40" />
</div>
Page 3
<div style="width: 360px; height: 640px; position: relative; background: white">
<img style="width: 400px; height: 680px; left: -10px; top: -23px; position: absolute" src="https://via.placeholder.com/400x680" />
<img style="width: 351.67px; height: 52.75px; left: 5px; top: 13px; position: absolute" src="https://via.placeholder.com/352x53" />
<div style="width: 345px; height: 40px; left: 11px; top: 116px; position: absolute; color: white; font-size: 20px; font-family: Limelight; font-weight: 400; word-wrap: break-word">FURTHER ADD-ON’S ON THE PATH</div>
<img style="width: 170px; height: 170px; left: 95px; top: 178px; position: absolute" src="https://via.placeholder.com/170x170" />
<div style="width: 283px; height: 31px; left: 48px; top: 362px; position: absolute; color: white; font-size: 24px; font-family: Luckiest Guy; font-weight: 400; word-wrap: break-word">ALAN WALKER'S CONCERT
<br/></div>
<img style="width: 40px; height: 49.69px; left: 19.33px; top: 399.93px; position: absolute; transform: rotate(-127.83deg); transform-origin: 0 0" src="https://via.placeholder.com/40x50" />
<img style="width: 45px; height: 45px; left: 331.34px; top: 401.08px; position: absolute; transform: rotate(-127.48deg); transform-origin: 0 0" src="https://via.placeholder.com/45x45" />
<div style="width: 225px; height: 189px; left: 95px; top: 407px; position: absolute; color: white; font-size: 16px; font-family: Luckiest Guy; font-weight: 400; word-wrap: break-word">>>ALAN'S DJ
<br/>
<br/>>>ALAN SINGING PERFRMANCE
<br/>
<br/>>>LASER SHOW
<br/>
<br/>>>LIGHT SHOW</div>
<img style="width: 40px; height: 40px; left: 311px; top: 596px; position: absolute" src="https://via.placeholder.com/40x40" />
<div style="width: 248px; height: 69px; left: 11px; top: 534px; position: absolute; color: #FFF9F9; font-size: 24px; font-family: Luckiest Guy; font-weight: 400; word-wrap: break-word">BRACE YOURSELF</div>
</div>
Page 4
<div style="width: 360px; height: 640px; position: relative; background: white">
<img style="width: 399px; height: 671px; left: -20px; top: -10px; position: absolute" src="https://via.placeholder.com/399x671" />
<img style="width: 130px; height: 130px; left: 115px; top: 88px; position: absolute" src="https://via.placeholder.com/130x130" />
<img style="width: 108px; height: 108px; left: 215px; top: 232px; position: absolute" src="https://via.placeholder.com/108x108" />
<div style="width: 194px; height: 31px; left: 55px; top: 270px; position: absolute; color: white; font-size: 20px; font-family: Inter; font-weight: 400; word-wrap: break-word">SCAN AND ---></div>
<div style="width: 247px; height: 151px; left: 55px; top: 324px; position: absolute; color: white; font-size: 14px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">RULES :<br/>*ONLY FORMAL DRESS <br/>*NO ILLEGAL ACTIVITIES<br/>*ID CART IS MUST<br/>*MAINTAIN DISCIPLINE</div>
</div>
The program to design, develop and deploy a web application for event registration is completed successfully.