harshhinii / figma

Ex09 Event Registration Web Application

Date:08-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:

page 1:

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
  <img style="width: 204px; height: 192px; left: 65px; top: 214px; position: absolute" src="https://via.placeholder.com/204x192" />
  <div style="width: 255px; height: 45px; left: 53px; top: 65px; position: absolute; color: #F31616; font-size: 48px; font-family: Inter; font-weight: 600; word-wrap: break-word">COLLEGE       <br/>           DAY</div>
  <div style="width: 203px; height: 52px; left: 105px; top: 451px; position: absolute; color: #DDEE12; font-size: 48px; font-family: Inter; font-weight: 600; word-wrap: break-word">LOGIN</div>
  <div style="width: 268px; height: 39px; left: 65px; top: 521px; position: absolute; color: #EB14C9; font-size: 48px; font-family: Inter; font-weight: 600; word-wrap: break-word">REGISTER</div>
</div>

page 2:

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 37px; height: 642px; left: 277px; top: 1674px; position: absolute; transform: rotate(180deg); transform-origin: 0 0" src="https://via.placeholder.com/37x642" />
  <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
  <img style="width: 371px; height: 56px; left: -6px; top: 0px; position: absolute" src="https://via.placeholder.com/371x56" />
  <div style="width: 272px; height: 116px; left: 44px; top: 68px; position: absolute; color: #F31616; font-size: 48px; font-family: Inter; font-weight: 600; word-wrap: break-word">COLLEGE       <br/>           DAY</div>
  <div style="width: 292px; height: 71px; left: 9px; top: 226px; position: absolute"><span style="color: black; font-size: 48px; font-family: Inter; font-weight: 600; word-wrap: break-word">*</span><span style="color: black; font-size: 40px; font-family: Inter; font-weight: 600; word-wrap: break-word">INAGURAION</span></div>
  <div style="width: 288px; height: 61px; left: 13px; top: 297px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 600; word-wrap: break-word">*CHIEF GUEST</div>
  <div style="width: 281px; height: 59px; left: 20px; top: 358px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 600; word-wrap: break-word">*PRIZE           <br/>  DISTRUBUTE</div>
  <div style="width: 296px; height: 67px; left: 13px; top: 478px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 600; word-wrap: break-word">*EVENTS</div>
</div>

page 3:

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
  <img style="width: 360px; height: 54px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x54" />
  <img style="width: 360px; height: 236px; left: 0px; top: 84px; position: absolute" src="https://via.placeholder.com/360x236" />
  <img style="width: 356px; height: 232px; left: 13px; top: 408px; position: absolute" src="https://via.placeholder.com/356x232" />
  <div style="width: 292px; height: 76px; left: 108px; top: 332px; position: absolute"><span style="color: #2AC7D2; font-size: 64px; font-family: Inter; font-weight: 600; word-wrap: break-word">S</span><span style="color: #2A45D2; font-size: 64px; font-family: Inter; font-weight: 600; word-wrap: break-word">E</span><span style="color: #D2CB2A; font-size: 64px; font-family: Inter; font-weight: 600; word-wrap: break-word">C</span></div>
</div>

page 4:

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
  <img style="width: 360px; height: 54px; left: 0px; top: 9px; position: absolute" src="https://via.placeholder.com/360x54" />
  <div style="width: 277px; height: 165px; left: 34px; top: 129px; position: absolute"><span style="color: white; font-size: 64px; font-family: Inter; font-weight: 600; word-wrap: break-word">THANK<br/>       </span><span style="color: #D126ED; font-size: 64px; font-family: Inter; font-weight: 600; word-wrap: break-word">YOU</span></div>
  <img style="width: 204px; height: 192px; left: 71px; top: 337px; position: absolute" src="https://via.placeholder.com/204x192" />
</div>

OUTPUT:

RESULT:

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