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
LOGIN
<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
<img style="width: 360px; height: 256px; left: 0px; top: 71px; position: absolute" src="https://via.placeholder.com/360x256" />
<div style="width: 247px; height: 60px; left: 56px; top: 400px; position: absolute; background: #EDAA6C; border: 1px #B1384E solid"></div>
<div style="width: 180px; height: 42px; left: 123px; top: 418px; position: absolute; color: #F5F5F5; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTER</div>
<div style="width: 247px; height: 63px; left: 56px; top: 542px; position: absolute; background: #EDAA6C; border: 1px #B1384E solid"></div>
<div style="width: 147px; height: 37px; left: 140px; top: 568px; position: absolute; color: #F5F5F5; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">LOGIN</div>
</div>
EVENTS
<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
<div style="left: 74px; top: 155px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">SINGING</div>
<div style="left: 83px; top: 303px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">DANCING</div>
<div style="left: 83px; top: 458px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">MUSICAL CHAIRS</div>
<div style="left: 83px; top: 630px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">ADAPTUNE</div>
<div style="left: 59px; top: 47px; position: absolute; color: #A93434; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">NAME OF EVENTS<br/></div>
</div>
REGISTER
<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
<div style="width: 218px; left: 71px; top: 38px; position: absolute; color: #E57272; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word"> REGISTER</div>
<div style="width: 191px; height: 51px; left: 77px; top: 269px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
<div style="width: 191px; height: 52px; left: 77px; top: 386px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
<div style="width: 191px; height: 55px; left: 84px; top: 510px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
<div style="left: 100px; top: 169px; position: absolute; color: #CA40CC; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">NAME<br/></div>
<div style="width: 191px; height: 56px; left: 71px; top: 151px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
<div style="width: 91px; height: 72px; left: 127px; top: 169px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">NAME<br/></div>
<div style="left: 127px; top: 282px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">REG.NO</div>
<div style="left: 133px; top: 400px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">YEAR</div>
<div style="left: 138px; top: 522px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">DEPT</div>
<div style="width: 123px; height: 55px; left: 36px; top: 643px; position: absolute; background: #CA40CC; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 9999px"></div>
<div style="width: 128px; height: 55px; left: 211px; top: 643px; position: absolute; background: #CA40CC; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 9999px"></div>
<div style="left: 61px; top: 661px; position: absolute; color: white; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">SUBMIT<br/></div>
<div style="left: 242px; top: 661px; position: absolute; color: white; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">CLEAR<br/></div>
</div>
CONTACT
<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
<div style="width: 110px; left: 52px; top: 19px; position: absolute; color: #CC548D; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word"><br/>VENUE:<br/></div>
<div style="left: 51px; top: 117px; position: absolute; color: #CC548D; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word">RB ENTRANCE</div>
<div style="left: 43px; top: 213px; position: absolute; color: #D8679D; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">DATE:</div>
<div style="left: 56px; top: 261px; position: absolute; color: #E475AA; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word"><br/>06-05-2024<br/></div>
<div style="left: 28px; top: 371px; position: absolute; color: #CC548D; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">CONTACT INFORMATION</div>
<div style="left: 46px; top: 465px; position: absolute; color: #D771A2; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word">@ [email protected]<br/><br/>@ 8074280103</div>
</div>
The program to design, develop and deploy a web application for event registration is completed successfully.