vigneshv-23 / figma

Ex09 Event Registration Web Application

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

<div style="width: 430px; height: 932px; position: relative; background: white">
  <img style="width: 83px; height: 54px; left: 181px; top: 26px; position: absolute" src="https://via.placeholder.com/83x54" />
  <img style="width: 48px; height: 44px; left: 286px; top: 31px; position: absolute" src="https://via.placeholder.com/48x44" />
  <div style="width: 54px; height: 28px; left: 355px; top: 40px; position: absolute">
    <div style="width: 54px; height: 0px; left: 0px; top: 0px; position: absolute; border: 1px black solid"></div>
    <div style="width: 54px; height: 0px; left: 0px; top: 28px; position: absolute; border: 1px black solid"></div>
    <div style="width: 54px; height: 0px; left: 0px; top: 13px; position: absolute; border: 1px black solid"></div>
  </div>
  <img style="width: 327px; height: 449px; left: 52px; top: 177px; position: absolute" src="https://via.placeholder.com/327x449" />
  <div style="width: 214px; height: 67px; left: 115px; top: 683px; position: absolute; background: #08F768; border-radius: 6px"></div>
  <div style="width: 430px; height: 0px; left: 0px; top: 106px; position: absolute; border: 1px black solid"></div>
  <div style="width: 209px; height: 52px; left: 146px; top: 698px; position: absolute; color: black; font-size: 33px; font-family: Inter; font-weight: 400; word-wrap: break-word">REGISTER</div>
  <div style="width: 265px; height: 48px; left: 118px; top: 118px; position: absolute; color: black; font-size: 33px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word">Music Fest</div>
  <img style="width: 83px; height: 98px; left: -6px; top: 4px; position: absolute" src="https://via.placeholder.com/83x98" />
</div>


<div style="width: 430px; height: 932px; position: relative; background: white">
  <img style="width: 83px; height: 104px; left: 0px; top: 7px; position: absolute" src="https://via.placeholder.com/83x104" />
  <img style="width: 83px; height: 54px; left: 228px; top: 37px; position: absolute" src="https://via.placeholder.com/83x54" />
  <img style="width: 48px; height: 44px; left: 311px; top: 42px; position: absolute" src="https://via.placeholder.com/48x44" />
  <div style="width: 54px; height: 0px; left: 369px; top: 54px; position: absolute; border: 1px black solid"></div>
  <img style="width: 330px; height: 340px; left: 50px; top: 209px; position: absolute" src="https://via.placeholder.com/330x340" />
  <div style="width: 54px; height: 0px; left: 369px; top: 91px; position: absolute; border: 1px black solid"></div>
  <div style="width: 54px; height: 0px; left: 369px; top: 75px; position: absolute; border: 1px black solid"></div>
  <div style="width: 430px; height: 0px; left: 0px; top: 112px; position: absolute; border: 1px black solid"></div>
  <div style="width: 361px; height: 118px; left: 50px; top: 593px; position: absolute; color: black; font-size: 33px; font-family: Inter; font-weight: 400; word-wrap: break-word">TICKETS CONFIRMED</div>
</div>

<div style="width: 430px; height: 932px; position: relative; background: white">
  <img style="width: 379px; height: 377px; left: 25px; top: 206px; position: absolute" src="https://via.placeholder.com/379x377" />
  <div style="width: 430px; height: 0px; left: 0px; top: 110px; position: absolute; border: 1px black solid"></div>
  <div style="width: 183px; height: 32px; left: 163px; top: 369px; position: absolute; color: black; font-size: 33px; font-family: Inter; font-weight: 400; word-wrap: break-word">$500</div>
  <div style="width: 113px; height: 39px; left: 163px; top: 591px; position: absolute; color: black; font-size: 33px; font-family: Inter; font-weight: 400; word-wrap: break-word">$1200</div>
  <img style="width: 83px; height: 98px; left: 0px; top: 6px; position: absolute" src="https://via.placeholder.com/83x98" />
  <img style="width: 83px; height: 98px; left: 0px; top: 6px; position: absolute" src="https://via.placeholder.com/83x98" />
  <img style="width: 83px; height: 54px; left: 207px; top: 39px; position: absolute" src="https://via.placeholder.com/83x54" />
  <img style="width: 48px; height: 44px; left: 298px; top: 44px; position: absolute" src="https://via.placeholder.com/48x44" />
  <div style="width: 54px; height: 0px; left: 364px; top: 48px; position: absolute; border: 1px black solid"></div>
  <div style="width: 54px; height: 0px; left: 364px; top: 99px; position: absolute; border: 1px black solid"></div>
  <div style="width: 54px; height: 0px; left: 364px; top: 78px; position: absolute; border: 1px black solid"></div>
  <div style="width: 256px; height: 67px; left: 87px; top: 672px; position: absolute; background: #08F768; border-radius: 8px"></div>
  <div style="width: 252px; height: 65px; left: 107px; top: 689px; position: absolute; color: black; font-size: 33px; font-family: Inter; font-weight: 400; word-wrap: break-word">BUY TICKETS</div>
</div>

OUTPUT:

RESULT:

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