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: 295px; height: 640px; position: relative; background: #27C0E1; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)">
<img style="width: 295px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/295x640" />
<img style="width: 292px; height: 44px; left: 3px; top: 26px; position: absolute; mix-blend-mode: darken" src="https://via.placeholder.com/292x44" />
<img style="width: 225px; height: 225px; left: 35px; top: 95px; position: absolute; mix-blend-mode: multiply" src="https://via.placeholder.com/225x225" />
<div style="width: 225px; height: 73px; left: 35px; top: 370px; position: absolute; mix-blend-mode: multiply; background: #86C3DE; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)"></div>
<div style="width: 172px; height: 59px; left: 59px; top: 384px; position: absolute; color: #34273F; font-size: 36px; font-family: Happy Monkey; font-weight: 400; word-wrap: break-word">LOGIN</div>
<div style="width: 225px; height: 73px; left: 35px; top: 493px; position: absolute; mix-blend-mode: multiply; background: #86C3DE; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)"></div>
<div style="width: 203px; height: 54px; left: 60px; top: 507px; position: absolute; color: black; font-size: 36px; font-family: Happy Monkey; font-weight: 400; word-wrap: break-word">REGISTER</div>
</div>
Page 2
<div style="width: 295px; height: 640px; position: relative; background: white">
<img style="width: 295px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/295x640" />
<div style="width: 215px; height: 75px; left: 50px; top: 28px; position: absolute; color: #3B668E; font-size: 32px; font-family: Iceland; font-weight: 400; word-wrap: break-word">TECH SOCIETY <br/>EVENTS</div>
<div style="width: 206px; height: 50px; left: 21px; top: 112px; position: absolute; color: #377E7A; font-size: 32px; font-family: Iceland; font-weight: 400; word-wrap: break-word">EVENTS :</div>
<div style="left: 40px; top: 197px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">PAPER PRESENTATION </div>
<div style="left: 42px; top: 249px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">ELECTRO QUIZ</div>
<div style="left: 40px; top: 301px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">CIRCUITRX</div>
<div style="left: 42px; top: 353px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">TECHTALK</div>
<div style="left: 40px; top: 405px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">DECRYPTOR</div>
<div style="left: 40px; top: 457px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">VIRTUAL WAR ZONE </div>
<div style="left: 40px; top: 509px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">BOX CRICKET</div>
<div style="left: 40px; top: 561px; position: absolute; color: black; font-size: 20px; font-family: Iceland; font-weight: 400; word-wrap: break-word">DETECTIVE CONCLAVE</div>
<div style="width: 15px; height: 15px; left: 14px; top: 197px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
<div style="width: 15px; height: 15px; left: 14px; top: 253px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
<div style="width: 15px; height: 15px; left: 14px; top: 355px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
<div style="width: 15px; height: 15px; left: 14px; top: 407px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
<div style="width: 15px; height: 15px; left: 14px; top: 459px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
<div style="width: 15px; height: 15px; left: 14px; top: 511px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
<div style="width: 15px; height: 15px; left: 14px; top: 563px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
<div style="width: 15px; height: 15px; left: 14px; top: 303px; position: absolute; background: #0A0C0D; border-radius: 9999px"></div>
</div>
Page 3
<div style="width: 295px; height: 640px; position: relative; background: white">
<img style="width: 295px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/295x640" />
<div style="left: 14px; top: 26px; position: absolute; color: #6B1A68; font-size: 24px; font-family: Iceland; font-weight: 400; word-wrap: break-word">EVENT REGISTRATION FORM </div>
<div style="left: 14px; top: 56px; position: absolute; color: black; font-size: 20px; font-family: Antonio; font-weight: 400; word-wrap: break-word">FILL THE DETAILS</div>
<div style="width: 226px; height: 43px; left: 37px; top: 101px; position: absolute; background: white"></div>
<div style="left: 37px; top: 113px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">FULL NAME</div>
<div style="width: 226px; height: 43px; left: 37px; top: 451px; position: absolute; background: white"></div>
<div style="left: 37px; top: 461px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">EVENTS TO REGISTER</div>
<div style="width: 226px; height: 43px; left: 37px; top: 401px; position: absolute; background: white"></div>
<div style="width: 226px; height: 43px; left: 37px; top: 351px; position: absolute; background: white"></div>
<div style="left: 37px; top: 361px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">MOBILE NUMBER</div>
<div style="left: 35px; top: 411px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">E MAIL</div>
<div style="width: 226px; height: 43px; left: 37px; top: 301px; position: absolute; background: white"></div>
<div style="left: 37px; top: 311px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">DEPARTMENT</div>
<div style="width: 226px; height: 43px; left: 37px; top: 251px; position: absolute; background: white"></div>
<div style="width: 226px; height: 43px; left: 37px; top: 201px; position: absolute; background: white"></div>
<div style="width: 226px; height: 43px; left: 37px; top: 151px; position: absolute; background: white"></div>
<div style="left: 37px; top: 163px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">AGE</div>
<div style="left: 37px; top: 210px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">GENDER</div>
<div style="left: 37px; top: 260px; position: absolute; color: black; font-size: 20px; font-family: Aleo; font-weight: 400; word-wrap: break-word">REGISTER NO</div>
<div style="width: 225px; height: 73px; left: 35px; top: 546px; position: absolute; mix-blend-mode: multiply; background: #86C3DE; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)"></div>
<div style="width: 203px; height: 54px; left: 60px; top: 556px; position: absolute; color: black; font-size: 36px; font-family: Happy Monkey; font-weight: 400; word-wrap: break-word">REGISTER</div>
</div>
Page 4
<div style="width: 295px; height: 640px; position: relative; background: white">
<img style="width: 295px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/295x640" />
<div style="left: 59px; top: 482px; position: absolute; color: black; font-size: 24px; font-family: Kumar One; font-weight: 400; word-wrap: break-word">CONTACT US</div>
<div style="width: 271px; height: 57px; left: 7px; top: 340px; position: absolute; color: black; font-size: 24px; font-family: Kelly Slab; font-weight: 400; word-wrap: break-word">We eargerly welcome you<br/> to join us </div>
<div style="left: 52px; top: 244px; position: absolute; color: black; font-size: 36px; font-family: Kelly Slab; font-weight: 400; word-wrap: break-word">THANK YOU</div>
<div style="width: 295px; height: 124px; left: 0px; top: 516px; position: absolute; background: #2E495C"></div>
<div style="left: 104px; top: 595px; position: absolute; color: white; font-size: 16px; font-family: Langar; font-weight: 400; word-wrap: break-word">9994445552</div>
<div style="left: 104px; top: 563px; position: absolute; color: white; font-size: 16px; font-family: Langar; font-weight: 400; word-wrap: break-word">9994445551</div>
<div style="left: 29px; top: 535px; position: absolute; color: white; font-size: 16px; font-family: Langar; font-weight: 400; word-wrap: break-word">[email protected]</div>
</div>
The program to design, develop and deploy a web application for event registration is completed successfully.