Ex09 Event Registration Web Application

Date: 16/05/2025

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:

saveetha

<div style="width: 408px; height: 855px; position: relative; background-image: url(https://via.placeholder.com/408x855)">
  <img style="width: 391px; height: 85px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/391x85" />
  <div style="left: 333px; top: 173px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">2024</div>
  <div style="left: 312px; top: 149px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">REVERSA</div>
  <img style="width: 80px; height: 64px; left: 308px; top: 627px; position: absolute" src="https://via.placeholder.com/80x64" />
  <div style="width: 100px; height: 100px; left: 258px; top: 568px; position: absolute"></div>
  <div style="width: 171px; left: 282px; top: 697px; position: absolute; color: black; font-size: 10px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">SCAN HERE TO REGISTER<br/></div>
  <div style="left: 100px; top: 340px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">        ART<br/>EXHIBITION<br/></div>
  <div style="left: 129px; top: 401px; position: absolute; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">       </div>
</div>

login page

<div style="width: 430px; height: 857px; position: relative; background-image: url(https://via.placeholder.com/430x857)">
  <div style="width: 203px; height: 64px; left: 48px; top: 428px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
  <div style="width: 102px; height: 23px; left: 113px; top: 450px; position: absolute; color: black; font-size: 10px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">USERNAME <br/></div>
  <div style="width: 205px; height: 66px; left: 46px; top: 515px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
  <div style="width: 117px; height: 61px; left: 90px; top: 604px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 85px; left: 113px; top: 537px; position: absolute; color: black; font-size: 10px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">PASSWORD<br/></div>
  <div style="width: 38px; height: 44px; left: 126px; top: 623px; position: absolute; color: black; font-size: 10px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">LOGIN<br/></div>
</div>

Registration Form

<div style="width: 429px; height: 846px; position: relative; background-image: url(https://via.placeholder.com/429x846)">
  <div style="left: 99px; top: 260px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">NAME:<br/><br/>REG NO:<br/><br/>DEPT:<br/><br/>EMAIL:<br/><br/>PH NO:<br/><br/>  <br/><br/></div>
  <div style="width: 217px; height: 27px; left: 181px; top: 260px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 217px; height: 31px; left: 181px; top: 303px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 217px; height: 32px; left: 181px; top: 350px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 217px; height: 32px; left: 181px; top: 399px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 217px; height: 32px; left: 181px; top: 448px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 157px; height: 53px; left: 157px; top: 519px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
  <div style="width: 92.67px; height: 54.82px; left: 195.07px; top: 534.09px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">SUBMIT<br/></div>
</div>

Query page

QUERY PAGE

<div style="width: 431px; height: 854px; position: relative; background-image: url(https://via.placeholder.com/431x854)">
  <div style="width: 336px; height: 201px; left: 28px; top: 187px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">JOIN US FOR AN <br/><br/>ART-FILLEDJOURNEY <br/><br/>THAT WILL LEAVE YOU INSPIRED<br/></div>
  <div style="width: 183px; left: 13px; top: 664px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">CONTACT US:</div>
  <div style="width: 186px; height: 81px; left: 10px; top: 701px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">Reversa24@gmail.com<br/><br/>PH NO: 9346134138</div>
  <div style="width: 100px; height: 100px; left: -3px; top: -48px; position: absolute"></div>
</div>

OUTPUT:

RESULT:

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