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: 200px; height: 404px; background: #D9D9D9"></div>
<div style="width: 200px; height: 404px; background: #D9D9D9"></div>
<div style="width: 201px; height: 404px; background: #D9D9D9"></div>
<div style="width: 191px; height: 404px; background: #D9D9D9"></div>
<img style="width: 6px; height: 1px; transform: rotate(180deg); transform-origin: 0 0" src="https://via.placeholder.com/6x1" />
<img style="width: 200px; height: 403px" src="https://via.placeholder.com/200x403" />
<img style="width: 200px; height: 403px" src="https://via.placeholder.com/200x403" />
<img style="width: 200px; height: 403px" src="https://via.placeholder.com/200x403" />
<img style="width: 200px; height: 30px" src="https://via.placeholder.com/200x30" />
<img style="width: 200px; height: 30px" src="https://via.placeholder.com/200x30" />
<img style="width: 200px; height: 30px" src="https://via.placeholder.com/200x30" />
<img style="width: 200px; height: 30px" src="https://via.placeholder.com/200x30" />
<img style="width: 200px; height: 76px" src="https://via.placeholder.com/200x76" />
<div style="width: 168px; height: 25px; text-align: center; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 300; word-wrap: break-word">DRESTIN EVENTS</div>
<div style="width: 116px; height: 29px; background: #E03838; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); justify-content: center; align-items: center; display: inline-flex">
<div style="width: 116px; height: 29px; text-align: center; color: white; font-size: 20px; font-family: Inter; font-weight: 600; word-wrap: break-word">REGISTER</div>
</div>
<div style="width: 77px; height: 27px; background: #D83F3F; justify-content: center; align-items: center; display: inline-flex">
<div style="width: 77px; height: 27px; text-align: center; color: white; font-size: 20px; font-family: Inter; font-weight: 600; word-wrap: break-word">LOGIN</div>
</div>
<div style="width: 153px; height: 15px; text-align: center; color: black; font-size: 13px; font-family: Inter; font-weight: 600; word-wrap: break-word">DRESTIN DAY EVENTS</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 24px; height: 24px; position: relative">
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; background: rgba(0, 0, 0, 0.15)"></div>
<div style="width: 18px; height: 16px; left: 3px; top: 4px; position: absolute; border: 2px black solid"></div>
</div>
<div style="width: 108px; height: 11px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">MYSTERY LAYERS</div>
<div style="width: 104px; height: 12px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">THE SQUID GAME</div>
<div style="width: 84px; height: 11px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">IPL AUCTION </div>
<div style="width: 90px; height: 11px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word"> CIRCUIT CIRCUS</div>
<div style="width: 94px; height: 15px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">BRAINY BROWL</div>
<div style="width: 85px; height: 9px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">WASSER WARS</div>
<div style="width: 79px; height: 11px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">BIO NEXUS</div>
<div style="width: 93px; height: 9px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">CRYPT AND HUNT</div>
<div style="width: 101px; height: 12px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">ESCAPE ROOM</div>
<div style="width: 89px; height: 14px; text-align: center; color: black; font-size: 10px; font-family: Inter; font-weight: 600; word-wrap: break-word">TREASURE HUNT</div>
<div style="width: 140px; height: 38px; text-align: center; color: black; font-size: 20px; font-family: Inter; font-weight: 600; word-wrap: break-word">THANK YOU</div>
<div style="width: 140px; height: 56px; text-align: center; color: rgba(88.34, 23.87, 141.09, 0.68); font-size: 12px; font-family: Inter; font-weight: 400; word-wrap: break-word">WE are eagerly waiting for your participation in the upcoming drestin events</div>
<div style="width: 125px; height: 14px; text-align: center; color: #FF0A0A; font-size: 14px; font-family: Inter; font-weight: 400; word-wrap: break-word">Contact us</div>
<div style="width: 200px; height: 23px; text-align: center; color: #8E255D; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">email<br/>saveethaengineeringcollege@gmail.com</div>
<div style="width: 176px; height: 39px; text-align: center; color: #A82E82; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">phone <br/>6936478939<br/>6978694369</div>
<img style="width: 201px; height: 373px" src="https://via.placeholder.com/201x373" />
<div style="width: 138px; height: 13px; text-align: center; color: #DFFF29; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">EVENT REGISTERATION </div>
<div style="width: 91px; height: 14px; padding-top: 2px; background: white; justify-content: center; align-items: center; display: inline-flex">
<div style="width: 91px; height: 12px; color: #AC7979; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">FULL NAME</div>
</div>
<div style="width: 66px; height: 16px; background: white; justify-content: center; align-items: center; display: inline-flex">
<div style="width: 66px; height: 16px; color: #AC7979; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">GENDER</div>
</div>
<div style="width: 105px; height: 14px; position: relative; background: white"></div>
<div style="width: 105px; height: 14px; position: relative; background: white"></div>
<div style="width: 91px; height: 14px; padding-top: 3px; background: white; justify-content: center; align-items: center; display: inline-flex">
<div style="width: 91px; height: 11px; color: #AC7979; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">AGE</div>
</div>
<div style="width: 115px; height: 20px; position: relative; background: white"></div>
<div style="width: 170px; height: 23px; padding-top: 5px; background: white; justify-content: center; align-items: center; display: inline-flex">
<div style="width: 170px; height: 18px; color: #AC7979; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">EMAIL-ID</div>
</div>
<div style="width: 151px; height: 20px; padding-top: 3px; background: white; justify-content: center; align-items: center; display: inline-flex">
<div style="width: 151px; height: 17px; color: #AC7979; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">EVENT TO REGISTER</div>
</div>
<div style="width: 107px; height: 23px; background: #CF3535; justify-content: center; align-items: center; display: inline-flex">
<div style="width: 107px; height: 23px; text-align: center; color: white; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTER</div>
</div>
<div style="width: 105px; height: 16px; color: #AC7979; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">REGISTER NUMBER</div>
<div style="width: 107px; height: 14px; color: #AC7979; font-size: 10px; font-family: Inter; font-weight: 400; word-wrap: break-word">DEPARTMENT</div>
<div style="width: 117px; height: 23px; color: #AC7979; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">PHONE NO</div>
The program to design, develop and deploy a web application for event registration is completed successfully.