kalikirivaishnavi / 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

CODE:

LOGIN

<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
  <img style="width: 360px; height: 256px; left: 0px; top: 71px; position: absolute" src="https://via.placeholder.com/360x256" />
  <div style="width: 247px; height: 60px; left: 56px; top: 400px; position: absolute; background: #EDAA6C; border: 1px #B1384E solid"></div>
  <div style="width: 180px; height: 42px; left: 123px; top: 418px; position: absolute; color: #F5F5F5; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTER</div>
  <div style="width: 247px; height: 63px; left: 56px; top: 542px; position: absolute; background: #EDAA6C; border: 1px #B1384E solid"></div>
  <div style="width: 147px; height: 37px; left: 140px; top: 568px; position: absolute; color: #F5F5F5; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">LOGIN</div>
</div>

EVENTS

<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
  <div style="left: 74px; top: 155px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">SINGING</div>
  <div style="left: 83px; top: 303px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">DANCING</div>
  <div style="left: 83px; top: 458px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">MUSICAL CHAIRS</div>
  <div style="left: 83px; top: 630px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">ADAPTUNE</div>
  <div style="left: 59px; top: 47px; position: absolute; color: #A93434; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">NAME OF EVENTS<br/></div>
</div>

REGISTER

<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
  <div style="width: 218px; left: 71px; top: 38px; position: absolute; color: #E57272; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">   REGISTER</div>
  <div style="width: 191px; height: 51px; left: 77px; top: 269px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
  <div style="width: 191px; height: 52px; left: 77px; top: 386px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
  <div style="width: 191px; height: 55px; left: 84px; top: 510px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
  <div style="left: 100px; top: 169px; position: absolute; color: #CA40CC; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">NAME<br/></div>
  <div style="width: 191px; height: 56px; left: 71px; top: 151px; position: absolute; background: #F4CFA5; border: 4px #AAD2BF solid"></div>
  <div style="width: 91px; height: 72px; left: 127px; top: 169px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">NAME<br/></div>
  <div style="left: 127px; top: 282px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">REG.NO</div>
  <div style="left: 133px; top: 400px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">YEAR</div>
  <div style="left: 138px; top: 522px; position: absolute; color: #B647C8; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">DEPT</div>
  <div style="width: 123px; height: 55px; left: 36px; top: 643px; position: absolute; background: #CA40CC; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 9999px"></div>
  <div style="width: 128px; height: 55px; left: 211px; top: 643px; position: absolute; background: #CA40CC; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 9999px"></div>
  <div style="left: 61px; top: 661px; position: absolute; color: white; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">SUBMIT<br/></div>
  <div style="left: 242px; top: 661px; position: absolute; color: white; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 400; word-wrap: break-word">CLEAR<br/></div>
</div>

CONTACT 

<div style="width: 360px; height: 800px; position: relative; background-image: url(https://via.placeholder.com/360x800)">
  <div style="width: 110px; left: 52px; top: 19px; position: absolute; color: #CC548D; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word"><br/>VENUE:<br/></div>
  <div style="left: 51px; top: 117px; position: absolute; color: #CC548D; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word">RB ENTRANCE</div>
  <div style="left: 43px; top: 213px; position: absolute; color: #D8679D; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">DATE:</div>
  <div style="left: 56px; top: 261px; position: absolute; color: #E475AA; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word"><br/>06-05-2024<br/></div>
  <div style="left: 28px; top: 371px; position: absolute; color: #CC548D; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">CONTACT INFORMATION</div>
  <div style="left: 46px; top: 465px; position: absolute; color: #D771A2; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word">@ [email protected]<br/><br/>@ 8074280103</div>
</div>

OUTPUT:

RESULT:

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