saxxxxxxx / figma

Ex09 Event Registration Web Application

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

page 1

<div style="width: 360px; height: 640px; position: relative; background: #3807FF">
  <div style="width: 208px; height: 38px; left: 98px; top: 127px; position: absolute; color: white; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">DANCE EVENT</div>
  <div style="width: 205px; height: 104px; left: 81px; top: 398px; position: absolute; text-align: center; color: rgba(238.62, 216.81, 20.47, 0.83); font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">WHEN YOU DANCE,YOU CAN ENJOY THE LUXURY OF BEING YOU</div>
</div>

page 2

<div style="width: 360px; height: 653px; position: relative; background: #E010B2">
  <div style="width: 206px; height: 53px; left: 66px; top: 46px; position: absolute; text-align: center; color: #0E0ADB; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTRATION  </div>
  <div style="left: 38px; top: 204px; position: absolute; text-align: center; color: #2DD4C0; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">NAME</div>
  <div style="width: 168px; height: 30px; left: 158px; top: 203px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 216px; height: 38px; left: 77px; top: 131px; position: absolute; background: #E82121"></div>
  <div style="left: 88px; top: 137px; position: absolute; text-align: center; color: white; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTER NOW</div>
  <div style="width: 79px; height: 30px; left: 38px; top: 288px; position: absolute; text-align: center; color: #15E1D5; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">EMAIL</div>
  <div style="width: 168px; height: 27px; left: 158px; top: 291px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 173px; left: 1px; top: 382px; position: absolute; text-align: center; color: #15F3F3; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">DEPARTMENT</div>
  <div style="width: 164px; height: 36px; left: 174px; top: 383px; position: absolute; background: #D9D9D9"></div>
  <div style="left: 33px; top: 475px; position: absolute; text-align: center; color: #15E5E5; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">YEAR</div>
  <div style="width: 158px; height: 31px; left: 174px; top: 467px; position: absolute; background: #D9D9D9"></div>
  <div style="left: 8px; top: 551px; position: absolute; text-align: center; color: #1CDADA; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">MOBILE NO</div>
  <div style="width: 158px; height: 35px; left: 174px; top: 551px; position: absolute; background: #D9D9D9"></div>
</div>

page 3

<div style="width: 360px; height: 653px; position: relative; background: #ECFF13">
  <div style="left: 77px; top: 154px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">THANKYOU FOR <br/>REGISTERING</div>
  <div style="left: 102px; top: 465px; position: absolute; text-align: center; color: black; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">JOIN US<br/> AND<br/> HAVING FUN</div>
  <img style="width: 239px; height: 182px; left: 60px; top: 248px; position: absolute" src="https://via.placeholder.com/239x182" />
</div>

OUTPUT:

RESULT:

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