hariniii21 / figma

Ex09 Event Registration Web Application

Date:

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="width: 360px; height: 800px; position: relative; background: white">
  <img style="width: 2560px; height: 1343px; left: -1175px; top: -375px; position: absolute" src="https://via.placeholder.com/2560x1343" />
  <div style="width: 117px; height: 40px; left: 126px; top: 267px; position: absolute; background: #CFAAFF; border: 1px black solid"></div>
  <div style="width: 78px; height: 17px; left: 148px; top: 272px; position: absolute; color: black; font-size: 25px; font-family: Inter; font-weight: 400; word-wrap: break-word">Login</div>
  <div style="width: 115px; height: 36px; left: 126px; top: 334px; position: absolute; background: #85D1FB; border: 1px black solid"></div>
  <div style="left: 134px; top: 337px; position: absolute; color: black; font-size: 25px; font-family: Inter; font-weight: 400; word-wrap: break-word">Register</div>
  <div style="left: 62px; top: 64px; position: absolute; color: black; font-size: 25px; font-family: Inter; font-weight: 400; word-wrap: break-word">Welcome to<br/>        Culturals Fest !</div>
  <div style="width: 214px; height: 16px; left: 77px; top: 218px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 400; word-wrap: break-word">To paticipate in events</div>
</div>

<div style="width: 348px; height: 800px; position: relative; background: white">
  <img style="width: 348px; height: 800px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/348x800" />
  <div style="width: 120px; height: 43px; left: 51px; top: 180px; position: absolute; background: #E9B4B4; border: 1px #131212 solid"></div>
  <div style="left: 50px; top: 169px; position: absolute; color: black; font-size: 25px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Events :-</div>
  <div style="width: 226px; height: 321px; left: 79px; top: 244px; position: absolute; background: #C7FAF4; border: 1px black solid"></div>
  <div style="width: 208px; height: 321px; left: 88px; top: 260px; position: absolute; color: black; font-size: 30px; font-family: Island Moments; font-weight: 400; word-wrap: break-word">Compering<br/>Dance<br/>Instrumental music<br/>Fashion walk<br/>Theme day<br/>Sports<br/>Singing</div>
</div>

<div style="width: 360px; height: 800px; position: relative; background: white">
  <img style="width: 360px; height: 861px; left: 0px; top: -15px; position: absolute" src="https://via.placeholder.com/360x861" />
  <div style="width: 300px; height: 124px; left: 23px; top: 39px; position: absolute; color: black; font-size: 25px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Event Registeration Form :</div>
  <div style="width: 195px; height: 33px; left: 65px; top: 178px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="left: 80px; top: 175px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Full name</div>
  <div style="width: 171px; height: 32px; left: 65px; top: 240px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="width: 134px; height: 32px; left: 65px; top: 300px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="width: 196px; height: 40px; left: 64px; top: 361px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="left: 75px; top: 361px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Registration Number</div>
  <div style="width: 171px; height: 34px; left: 65px; top: 430px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="width: 184px; height: 41px; left: 65px; top: 490px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="width: 168px; height: 35px; left: 64px; top: 560px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="width: 167px; height: 35px; left: 64px; top: 620px; position: absolute; background: #D9D9D9; border: 1px black solid"></div>
  <div style="left: 72px; top: 616px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Events to Register</div>
  <div style="width: 167px; height: 39px; left: 165px; top: 697px; position: absolute; background: #A4DEF7; border: 1px black solid"></div>
  <div style="left: 80px; top: 237px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Gender</div>
  <div style="left: 80px; top: 294px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Age<br/></div>
  <div style="left: 78px; top: 427px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Phone Number</div>
  <div style="left: 78px; top: 490px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Department</div>
  <div style="left: 81px; top: 558px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Email Id</div>
  <div style="left: 204px; top: 697px; position: absolute; color: black; font-size: 15px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">Register!<br/></div>
</div>

<div style="width: 360px; height: 800px; position: relative; background: white">
  <img style="width: 800px; height: 1423px; left: -264px; top: -351px; position: absolute" src="https://via.placeholder.com/800x1423" />
  <div style="width: 195px; height: 172px; left: 82px; top: 140px; position: absolute; color: black; font-size: 50px; font-family: Ingrid Darling; font-weight: 400; word-wrap: break-word">Thank<br/>        You!!!</div>
  <div style="width: 265px; height: 144px; left: 64px; top: 328px; position: absolute; color: black; font-size: 25px; font-family: Inder; font-weight: 400; word-wrap: break-word">We all are eagerly waiting<br/>for you participation in Events</div>
  <div style="width: 315px; height: 120px; left: 14px; top: 643px; position: absolute; color: black; font-size: 20px; font-family: Inder; font-weight: 400; word-wrap: break-word">Contact us :<br/>   Email id:<br/>     [email protected]<br/>   Phone no:<br/>     9360110743</div>
</div>

OUTPUT:

RESULT:

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