mercyarulappan / 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

Program:

page 1

<div style="width: 476px; height: 846px; position: relative; background: white">
  <img style="width: 476px; height: 846px; left: 0px; top: 0px; position: absolute; border-radius: 57px" src="https://via.placeholder.com/476x846" />
  <img style="width: 310px; height: 46px; left: 22px; top: 42px; position: absolute; border: 1px black solid" src="https://via.placeholder.com/310x46" />
  <div style="width: 227px; height: 90px; left: 207px; top: 139px; position: absolute; mix-blend-mode: color-burn; text-align: center; color: #611CF4; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">CELENZA<br/>2024</div>
  <div style="left: 32px; top: 337px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">Annual Cultural and Sports Festival </div>
  <div style="width: 223px; height: 67px; left: 114px; top: 680px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 187px; height: 44px; left: 127px; top: 692px; position: absolute; text-align: center; color: #0F40EF; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 600; word-wrap: break-word">Register Now</div>
  <div style="width: 363px; height: 148px; left: 39px; top: 448px; position: absolute; text-align: center; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 600; word-wrap: break-word">Get ready to unleash your inner athlete !!! We are thrilled to invite you to participate in this sports extravaganza</div>
  <img style="width: 170px; height: 158px; left: 22px; top: 120px; position: absolute" src="https://via.placeholder.com/170x158" />
  <div style="left: 71px; top: 609px; position: absolute; text-align: center; color: #1F6422; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 600; word-wrap: break-word">Registration fees-Rs.2000</div>
</div>

page 2

<div style="width: 488px; height: 846px; position: relative; background: white">
  <img style="width: 488px; height: 852px; left: 0px; top: 0px; position: absolute; border-radius: 51px" src="https://via.placeholder.com/488x852" />
  <div style="left: 145px; top: 519px; position: absolute; color: #59B062; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Volley Ball<br/><br/>Cricket<br/><br/>Kabaddi<br/><br/>Badminton</div>
  <div style="left: 54px; top: 119px; position: absolute; color: #DC0ED4; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">For Boys:</div>
  <div style="width: 35px; height: 29px; left: 92px; top: 174px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
  <div style="width: 35px; height: 29px; left: 92px; top: 234px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
  <div style="width: 35px; height: 29px; left: 92px; top: 289px; position: absolute; background: #F7F0F0"></div>
  <div style="width: 35px; height: 29px; left: 92px; top: 352px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
  <div style="left: 145px; top: 174px; position: absolute; color: #59B062; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Volley Ball<br/><br/>Cricket<br/><br/>Kabaddi<br/><br/>Badminton</div>
  <div style="left: 70px; top: 61px; position: absolute; color: white; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Choose here </div>
  <div style="left: 70px; top: 447px; position: absolute; color: #CB4CDF; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">For Girls:</div>
  <div style="width: 35px; height: 29px; left: 90px; top: 519px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
  <div style="width: 35px; height: 29px; left: 90px; top: 571px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
  <div style="width: 35px; height: 29px; left: 90px; top: 629px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
  <div style="width: 35px; height: 29px; left: 90px; top: 687px; position: absolute; background: #F7F0F0; border-radius: 9999px"></div>
</div>

page 3

<div style="width: 477px; height: 846px; position: relative; background: white">
  <img style="width: 477px; height: 846px; left: 0px; top: 0px; position: absolute; border-radius: 65px" src="https://via.placeholder.com/477x846" />
  <div style="width: 355px; height: 97px; left: 56px; top: 571px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 355px; height: 54px; left: 56px; top: 481px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 355px; height: 54px; left: 56px; top: 391px; position: absolute; background: #D9D9D9"></div>
  <div style="left: 33px; top: 46px; position: absolute; color: #23E0E0; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Sports Registration Form</div>
  <div style="width: 355px; height: 54px; left: 56px; top: 121px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 355px; height: 54px; left: 56px; top: 211px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 355px; height: 54px; left: 56px; top: 301px; position: absolute; background: #D9D9D9"></div>
  <div style="left: 86px; top: 135px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Name</div>
  <div style="left: 86px; top: 224px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Register Number</div>
  <div style="left: 86px; top: 314px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Department</div>
  <div style="left: 90px; top: 400px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 800; word-wrap: break-word">Mobile Number</div>
  <div style="left: 92px; top: 493px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Email</div>
  <div style="left: 102px; top: 587px; position: absolute; text-align: center"><span style="color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Payment-2000<br/></span><span style="color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; text-decoration: underline; word-wrap: break-word"> Generate QR code</span></div>
  <div style="width: 154px; height: 48px; left: 48px; top: 704px; position: absolute; background: #AEB065"></div>
  <div style="width: 154px; height: 48px; left: 246px; top: 704px; position: absolute; background: #1BF017"></div>
  <div style="left: 59px; top: 718px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">Clear Form</div>
  <div style="left: 279px; top: 710px; position: absolute; text-align: center; color: #0F0F0F; font-size: 24px; font-family: Inter; font-weight: 900; word-wrap: break-word">Submit</div>
  <div style="width: 175px; height: 43px; left: 130px; top: 780px; position: absolute; background: #17EEEE"></div>
  <div style="left: 155px; top: 787px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-weight: 900; word-wrap: break-word">Register</div>
</div>


page 4

<img style="width: 460.97px; height: 854.37px; border-radius: 69px" src="https://via.placeholder.com/461x854" />

OUTPUT:

RESULT:

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