230131249 / figma

# Ex09 Event Registration Web Application

Date:24.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: 400px; height: 640px; position: relative; background: #F6BCF7">
  <img style="width: 400px; height: 60.16px; left: 0px; top: 13px; position: absolute" src="https://via.placeholder.com/400x60" />
  <div style="left: 20px; top: 320px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">Register here:<br/></div>
  <img style="width: 383.64px; height: 80px; left: 8px; top: 133px; position: absolute" src="https://via.placeholder.com/384x80" />
  <div style="width: 225px; height: 60px; left: 70px; top: 434px; position: absolute; background: #9D8383"></div>
  <div style="left: 108px; top: 446px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">REGISTER </div>
  <div style="width: 46px; height: 0px; left: 200px; top: 369px; position: absolute; transform: rotate(90deg); transform-origin: 0 0; border: 2px black solid"></div>
</div>

EVENTS PAGE

<div style="width: 360px; height: 640px; position: relative; background: #F3F57F">
  <div style="width: 247px; height: 69px; left: 21px; top: 98px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">EVENTS</div>
  <img style="width: 68px; height: 102px; left: 263px; top: 187px; position: absolute" src="https://via.placeholder.com/68x102" />
  <div style="left: 21px; top: 217px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">DANCING<br/></div>
  <img style="width: 90px; height: 81.13px; left: 22px; top: 350px; position: absolute" src="https://via.placeholder.com/90x81" />
  <div style="left: 204px; top: 372px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">SINGING<br/></div>
  <div style="left: 22px; top: 507px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">PAINTING<br/></div>
  <img style="width: 123px; height: 94px; left: 227px; top: 485px; position: absolute" src="https://via.placeholder.com/123x94" />
  <img style="width: 354px; height: 54px; left: 3px; top: 14px; position: absolute" src="https://via.placeholder.com/354x54" />
</div>

REGISTRATION PAGE

<div style="width: 360px; height: 640px; position: relative; background: #B2F0DA">
  <div style="left: 20px; top: 101px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">REGISTRATION FORM<br/></div>
  <div style="width: 204px; height: 44px; left: 20px; top: 187px; position: absolute; background: #FAF0F0"></div>
  <div style="left: 26px; top: 190px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">Name:<br/></div>
  <div style="width: 204px; height: 44px; left: 19px; top: 312px; position: absolute"></div>
  <div style="width: 204px; height: 44px; left: 20px; top: 334px; position: absolute; background: #FAF0F0"></div>
  <div style="left: 26px; top: 334px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">Dept:<br/></div>
  <div style="width: 204px; height: 44px; left: 19px; top: 262px; position: absolute; background: #FAF0F0"></div>
  <div style="width: 204px; height: 44px; left: 19px; top: 409px; position: absolute; background: #FAF0F0"></div>
  <div style="left: 20.85px; top: 412px; position: absolute; transform: rotate(1.35deg); transform-origin: 0 0; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">Events:</div>
  <div style="left: 26px; top: 262px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">Reg No:</div>
  <div style="width: 204px; height: 44px; left: 20px; top: 481px; position: absolute; background: #FAF0F0"></div>
  <div style="left: 26px; top: 481px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">E-mail ID:</div>
  <div style="width: 240px; height: 67px; left: 51px; top: 540px; position: absolute; background: #D9D9D9"></div>
  <div style="left: 100px; top: 559px; position: absolute; color: black; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">REGISTER<br/></div>
  <img style="width: 374px; height: 56px; left: -7px; top: 11px; position: absolute" src="https://via.placeholder.com/374x56" />
</div>

CONTACT PAGE

<div style="width: 400px; height: 640px; position: relative; background: #F06C6C">
  <div style="width: 284px; left: 8px; top: 148px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">showcase your     talents in our        event!!!<br/></div>
  <div style="left: 8px; top: 316px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">contact us:<br/><br/><br/>[email protected]<br/></div>
  <div style="left: 8px; top: 496px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 800; word-wrap: break-word">phone:[phone]</div>
  <img style="width: 400px; height: 60.16px; left: 0px; top: 15px; position: absolute" src="https://via.placeholder.com/400x60" />
</div>

OUTPUT:

RESULT:

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