rajaraman77 / figma

Ex09 Event Registration Web Application

Date:09.05.24

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:

screen 1:

<div style="width: 430px; height: 932px; position: relative; background: #06E4D6">
  <img style="width: 430px; height: 932px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/430x932" />
  <div style="width: 251px; height: 84px; left: 89px; top: 524px; position: absolute; background: #F00CE7"></div>
  <div style="width: 197px; height: 68px; left: 116px; top: 540px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTER</div>
  <div style="width: 430px; height: 120px; left: 0px; top: 246px; position: absolute"></div>
  <div style="left: 46px; top: 282px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">CELENZA 2K24</div>
  <div style="width: 184px; height: 70px; left: 116px; top: 418px; position: absolute; background: #53ABEA"></div>
  <div style="width: 181px; height: 57px; left: 148px; top: 431px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 600; word-wrap: break-word">LOGIN</div>
</div>

screen 2:

<div style="width: 430px; height: 929px; position: relative; background: white">
  <div style="width: 100px; height: 100px; left: 301px; top: 192px; position: absolute"></div>
  <img style="width: 430px; height: 929px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/430x929" />
  <div style="width: 1258px; height: 319px; left: 44px; top: 33px; position: absolute; color: #FF0000; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">SPORTS�                        EVENTS</div>
  <div style="width: 260px; height: 86px; left: 133px; top: 219px; position: absolute; color: #FBF10E; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">CRICKET</div>
  <div style="width: 273px; height: 66px; left: 96px; top: 319px; position: absolute; color: #FA1B1B; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">BADMINTON</div>
  <div style="width: 279px; height: 44px; left: 114px; top: 421px; position: absolute; color: #FF16F6; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">HOCKEY</div>
  <div style="width: 242px; height: 64px; left: 96px; top: 517px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">FOOTBALL</div>
  <div style="width: 285px; height: 48px; left: 88px; top: 705px; position: absolute; color: #00CBD8; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">BASKET BALL</div>
  <div style="width: 289px; height: 58px; left: 80px; top: 608px; position: absolute; color: #A59FF2; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">VOLLEY BALL</div>
</div>

screen 3:

<div style="width: 430px; height: 932px; position: relative; background: white">
  <img style="width: 430px; height: 932px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/430x932" />
  <div style="width: 366px; height: 80px; left: 44px; top: 32px; position: absolute; color: white; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">EVENT      RESIGTRATION FORM</div>
  <div style="width: 342px; height: 43px; left: 22px; top: 224px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 338px; height: 42px; left: 30.84px; top: 235.35px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">FULL NAME</div>
  <div style="width: 342px; height: 41px; left: 22px; top: 277px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 336px; height: 36px; left: 33px; top: 282px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">GENDER</div>
  <div style="width: 345px; height: 42px; left: 19px; top: 331px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 318px; height: 29px; left: 33px; top: 338px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">AGE</div>
  <div style="width: 345px; height: 45px; left: 19px; top: 385px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 271px; height: 30px; left: 31px; top: 393px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">REGISTER NUMBER</div>
  <div style="width: 343px; height: 41px; left: 22px; top: 445px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 305px; height: 27px; left: 24px; top: 450px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word"> DEPARTMENT</div>
  <div style="width: 343px; height: 46px; left: 22px; top: 501px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 273px; height: 38px; left: 29px; top: 509px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">MOBLIE NUMBER</div>
  <div style="width: 343px; height: 49px; left: 20px; top: 567px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 276px; height: 32px; left: 26px; top: 573px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">EMAIL-ID</div>
  <div style="width: 341px; height: 47px; left: 22px; top: 636px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 337px; height: 37px; left: 26px; top: 646px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">EVENTS TO REGISTER</div>
  <div style="width: 206px; height: 69px; left: 215px; top: 811px; position: absolute; background: #CE106C"></div>
  <div style="width: 206px; height: 48px; left: 215px; top: 819px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">REGISTER</div>
</div>

screen 4:

<div style="width: 430px; height: 932px; position: relative; background: white">
  <img style="width: 430px; height: 932px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/430x932" />
  <img style="width: 492px; height: 68px; left: -62px; top: 0px; position: absolute" src="https://via.placeholder.com/492x68" />
  <div style="width: 323px; height: 183px; left: 87px; top: 245px; position: absolute; color: white; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">THANK�                     YOU</div>
  <div style="width: 343px; height: 335px; left: 67px; top: 435px; position: absolute; color: white; font-size: 32px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">WE ARE EAGARLY WAITING FOR YOUR PARTICIPATIONS IN SPORTS EVENT</div>
  <div style="width: 410px; height: 167px; left: 0px; top: 740px; position: absolute"><span style="color: white; font-size: 32px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">CONTACT US�   </span><span style="color: white; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">EMAIL:[email protected]<br/>PHONE : [phone]�               [phone]</span></div>
</div>

OUTPUT:

RESULT:

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