mohammedparvez129 / figma

Ex09 Event Registration Web Application

Date:30-04-2024

AIM:

To design, develop and deploy a web application for event registration.

DESIGN STEPS:

Step 1:

Create a new frame.

Step 2:

Select any one preset size of your choice.

Step 3:

Select the shapes you need.

Step 4:

Import images as needed.

Step 5:

Create pages based on your need and link them.

Step 6:

Validate the HTML and CSS code.

Step 6:

Publish the website in the given URL.

DESIGN TOOL:

Figma

CODE:

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>

OUTPUT:

RESULT:

The program to design, develop and deploy a web application for event registration is completed successfully.