keerthivasan50 / figma

Ex09 Event Registration Web Application

Date:08.05.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:

page 1:
<div style="width: 279px; height: 391px; position: relative; background: #87D9E4">
  <div style="width: 173px; height: 44px; left: 47px; top: 75px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 174px; height: 46px; left: 46px; top: 73px; position: absolute; text-align: center; color: black; font-size: 20px; font-family: Inter; font-weight: 400; word-wrap: break-word">EVENT REGISTRATION</div>
  <div style="width: 168px; height: 36px; left: 52px; top: 148px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 168px; height: 37px; left: 56px; top: 152px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">Ref no </div>
  <div style="width: 164px; height: 30px; left: 56px; top: 216px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 164px; height: 29px; left: 60px; top: 216px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">Password</div>
  <div style="width: 85px; height: 37px; left: 91px; top: 312px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 85px; height: 38px; left: 91px; top: 311px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-weight: 400; word-wrap: break-word">Enter</div>
</div>

page 2:

<div style="width: 239px; height: 346px; position: relative; background: rgba(128.08, 219.38, 231.82, 0.99)">
  <div style="width: 105px; height: 15px; left: 23px; top: 24px; position: absolute; color: black; font-size: 12px; font-family: Inter; font-weight: 400; word-wrap: break-word">choose your event</div>
  <div style="width: 82px; height: 28px; left: 37px; top: 64px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 82px; height: 31px; left: 43px; top: 64px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 400; word-wrap: break-word">football</div>
  <div style="width: 74px; height: 20px; left: 39px; top: 118px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 74px; height: 20px; left: 43px; top: 115px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 400; word-wrap: break-word">cricket</div>
  <div style="width: 70px; height: 15px; left: 43px; top: 158px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 69px; height: 18px; left: 44px; top: 155px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">Athletics</div>
  <div style="width: 98px; height: 21px; left: 40px; top: 184px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 95px; height: 26px; left: 40px; top: 184px; position: absolute; color: black; font-size: 13px; font-family: Inter; font-weight: 400; word-wrap: break-word">Mens physique</div>
</div>

page 3:

<div style="width: 250px; height: 382px; position: relative; background: rgba(117.14, 249.67, 249.67, 0.89)">
  <div style="width: 123px; height: 37px; left: 16px; top: 36px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">Other informations</div>
  <div style="width: 100px; height: 27px; left: 25px; top: 103px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 99px; height: 27px; left: 26px; top: 103px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">NAME</div>
  <div style="width: 105px; height: 24px; left: 25px; top: 150px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 106px; height: 25px; left: 24px; top: 149px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">REG NO</div>
  <div style="width: 106px; height: 26px; left: 24px; top: 191px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 106px; height: 26px; left: 24px; top: 191px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">DEPT</div>
  <div style="width: 104px; height: 29px; left: 26px; top: 233px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 103px; height: 26px; left: 27px; top: 236px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 400; word-wrap: break-word">YEAR</div>
  <div style="width: 83px; height: 37px; left: 145px; top: 306px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 81px; left: 147px; top: 315px; position: absolute; text-align: center; color: black; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">ENTER</div>
</div>

OUTPUT:

RESULT:

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