senthil77k / 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:

page 1:

<img style="width: 337px; height: 50px" src="https://via.placeholder.com/337x50" />
<div style="width: 215px; height: 40px; background: #FEFFFE"></div>
<div style="width: 208px; height: 43px; color: black; font-size: 32px; font-family: Inter; font-weight: 700; word-wrap: break-word">   REGISTER</div>
<img style="width: 139px; height: 141px; transform: rotate(180deg); transform-origin: 0 0" src="https://via.placeholder.com/139x141" />
<img style="width: 371px; height: 668px; border-radius: 43px" src="https://via.placeholder.com/371x668" />
<div style="width: 213px; height: 37px; background: #D9D9D9"></div>
<div style="width: 212px; height: 46px; color: black; font-size: 32px; font-family: Inter; font-weight: 700; word-wrap: break-word">      LOGIN</div>

PAGE 2:

<div style="width: 360px; height: 640px; position: relative; background: #387E36">
  <img style="width: 1145px; height: 667px; left: -785px; top: 0px; position: absolute" src="https://via.placeholder.com/1145x667" />
  <div style="width: 266px; height: 73px; left: 53px; top: 21px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 700; word-wrap: break-word">     EVENTS</div>
  <div style="width: 226px; height: 190px; left: 124px; top: 172px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 226px; height: 194px; left: 124px; top: 168px; position: absolute; color: black; font-size: 22px; font-family: Inter; font-weight: 700; word-wrap: break-word">Cricket: ...<br/>Field Hockey: ...<br/>Tennis: ...<br/>Volleyball: ...<br/>Table Tennis: ...<br/>BasebalI:...</div>
</div>```

PAGE 3:

<div style="width: 405px; height: 651px; position: relative; background: white">
  <img style="width: 415px; height: 651px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/415x651" />
  <div style="width: 200px; height: 40px; left: 19px; top: 148px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 200px; height: 40px; left: 19px; top: 486px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 200px; height: 40px; left: 19px; top: 421px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 200px; height: 40px; left: 19px; top: 215px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 200px; height: 40px; left: 19px; top: 284px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 200px; height: 40px; left: 19px; top: 356px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 180px; height: 69px; left: 110px; top: 558px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 391px; height: 101px; left: 0px; top: 17px; position: absolute; color: #F4FFF4; font-size: 40px; font-family: Inter; font-weight: 700; word-wrap: break-word">EVENTS FORM<br/>REG:</div>
  <div style="width: 201px; height: 40px; left: 40px; top: 144px; position: absolute"><span style="color: black; font-size: 40px; font-family: Inter; font-weight: 700; word-wrap: break-word">    </span><span style="color: black; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">NAME</span></div>
  <div style="width: 201px; height: 44px; left: 38px; top: 211px; position: absolute"><span style="color: black; font-size: 40px; font-family: Inter; font-weight: 700; word-wrap: break-word">    </span><span style="color: black; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">GENDER</span></div>
  <div style="width: 201px; height: 40px; left: 40px; top: 292px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">           AGE</div>
  <div style="width: 200px; height: 38px; left: 19px; top: 369px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">           REG.NO</div>
  <div style="width: 201px; height: 36px; left: 2px; top: 436px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">           SPORT NAME</div>
  <div style="width: 196px; height: 34px; left: 43px; top: 472px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">          BRANCH&DEPT</div>
  <div style="width: 300px; height: 70px; left: 110px; top: 571px; position: absolute; color: black; font-size: 36px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTER</div>
</div>

PAGE 4:

<div style="width: 376px; height: 664px; position: relative; background: white">
  <img style="width: 759px; height: 664px; left: -168px; top: 0px; position: absolute" src="https://via.placeholder.com/759x664" />
  <img style="width: 332.44px; height: 50px; left: 22px; top: 20px; position: absolute" src="https://via.placeholder.com/332x50" />
  <div style="width: 376px; height: 97px; left: 0px; top: 567px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 376px; height: 95px; left: 0px; top: 569px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-weight: 700; word-wrap: break-word">    FOR CONTACT:<br/>        EMAIL:[email protected]<br/>        CALL:<br/>                    8903445500<br/>                    8765439877<br/><br/></div>
</div>

OUTPUT:

RESULT:

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