hariprasath2023 / 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:

<div style="position: absolute; top: 22px; left: 16px; width: 353px; height: 53px; background-image: url('getBytesAsync'); background-size: cover;"></div>
<div style="position: absolute; top: 128px; left: 99px; width: 171px; height: 171px; background-image: url('getBytesAsync'); background-size: cover;"></div>
<div style="position: absolute; top: 422px; left: 105px; width: 165px; height: 60px; background-color: #d9d9d9;"></div>
<div style="position: absolute; top: 442px; left: 158px; color: #000000;">LOGIN</div>
<div style="position: absolute; top: 544px; left: 110px; width: 165px; height: 59px; background-color: #d9d9d9;"></div>
<div style="position: absolute; top: 562px; left: 139px; color: #000000;">REGISTER</div>
<div style="position: absolute; top: 332px; left: 124px; color: #000000;">CELANZA’25</div>
<div style="position: absolute; top: 22px; left: 16px; width: 353px; height: 53px; background-image: url('getBytesAsync'); background-size: cover;"></div>
<div style="position: absolute; top: 143px; left: 109px; color: #000000;">CELANZA EVENTS</div>

<div style="position: absolute; top: 247px; left: 80px; color: #000000;">SOLO SINGING
</div>








<div style="position: absolute; top: 305px; left: 80px; color: #000000;">SOLO DANCING</div>
<div style="position: absolute; top: 359px; left: 80px; color: #000000;">SPORTS</div>
<div style="position: absolute; top: 414px; left: 82px; color: #000000;">FLASHMOB</div>
<div style="position: absolute; top: 477px; left: 80px; color: #000000;">MEHENDI</div>
<div style="position: absolute; top: 540px; left: 80px; color: #000000;">CONCERTS</div>
<div style="position: absolute; top: 594px; left: 83px; color: #000000;">ARTS</div>
<div style="position: absolute; top: 22px; left: 16px; width: 353px; height: 53px; background-image: url('getBytesAsync'); background-size: cover;"></div>
<div style="position: absolute; top: 133px; left: 76px; color: #000000;">REGISTRATION FORM</div>
<div style="position: absolute; top: 221px; left: 48px; width: 137px; height: 47px; background-color: #d9d9d9;"></div>
<div style="position: absolute; top: 282px; left: 52px; width: 139px; height: 47px; background-color: #d9d9d9;"></div>
<div style="position: absolute; top: 354px; left: 52px; width: 141px; height: 47px; background-color: #d9d9d9;"></div>
<div style="position: absolute; top: 433px; left: 48px; width: 143px; height: 46px; background-color: #d9d9d9;"></div>
<div style="position: absolute; top: 519px; left: 48px; width: 208px; height: 43px; background-color: #d9d9d9;"></div>
<div style="position: absolute; top: 232px; left: 70px; color: #000000;">NAME</div>
<div style="position: absolute; top: 291px; left: 74px; color: #000000;">REG NO</div>
<div style="position: absolute; top: 363px; left: 67px; color: #000000;">GENDER</div>
<div style="position: absolute; top: 444px; left: 74px; color: #000000;">DEPT</div>
<div style="position: absolute; top: 529px; left: 67px; color: #000000;">EVENT CHOICE</div>
<svg style="position: absolute; top: 663px; left: 183px; transform: translate(-50%, -50%);" width="180" height="68"><ellipse cx="90" cy="34" rx="90" ry="34" fill="#e9abab"/></svg>
<div style="position: absolute; top: 651px; left: 135px; color: #000000;">REGISTER</div>
<div style="position: absolute; top: 22px; left: 16px; width: 353px; height: 53px; background-image: url('getBytesAsync'); background-size: cover;"></div>
<div style="position: absolute; top: 651px; left: 26px; color: #000000;">ANY QUERIES?
CONTACT US:
[email protected]</div>
<div style="position: absolute; top: 324px; left: 35px; color: #000000;">THANK YOU FOR THE RESPONSE</div>
<div style="position: absolute; top: 462px; left: 90px; color: #000000;">HAVE A GOOD DAY!</div>

OUTPUT:

RESULT:

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