sanjay5656 / figma

Ex09 Event Registration Web Application

Date:12-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

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
  <div style="width: 234px; height: 43px; left: 63px; top: 219px; position: absolute; background: #AED69B; box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 100px; height: 43px; left: 134px; top: 219px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">LOGIN</div>
  <div style="width: 234px; height: 43px; left: 67px; top: 299px; position: absolute; background: #AED69B; box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 186px; height: 45px; left: 111px; top: 299px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">REGISTER</div>
  <img style="width: 350px; height: 52.64px; left: 5px; top: 13px; position: absolute" src="https://via.placeholder.com/350x53" />
</div>

PAGE 2

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
  <img style="width: 350px; height: 52.64px; left: 5px; top: 13px; position: absolute" src="https://via.placeholder.com/350x53" />
  <img style="width: 350px; height: 52.64px; left: 5px; top: 13px; position: absolute" src="https://via.placeholder.com/350x53" />
  <div style="width: 234px; height: 43px; left: 63px; top: 306px; position: absolute; background: #AED69B; box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 234px; height: 43px; left: 63px; top: 422px; position: absolute; background: #AED69B; box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 199px; height: 55px; left: 112px; top: 306px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">INDOOR</div>
  <div style="width: 167px; height: 45px; left: 106px; top: 421px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">OUTDOOR</div>
  <div style="width: 367px; height: 81px; left: -4px; top: 169px; position: absolute; background: #AED69B; border-radius: 9999px"></div>
  <div style="width: 414px; height: 39px; left: 5px; top: 190px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">CHOOOSE YOUR GAME</div>
</div>

PAGE 3

<div style="width: 326px; height: 640px; position: relative; background: white">
  <img style="width: 326px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/326x640" />
  <div style="width: 196px; height: 51px; left: 65px; top: 131px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 196px; height: 51px; left: 65px; top: 245px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 196px; height: 51px; left: 65px; top: 340px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 220px; height: 67px; left: 92px; top: 343px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">CARROM</div>
  <div style="width: 196px; height: 51px; left: 65px; top: 434px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 196px; height: 51px; left: 65px; top: 529px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <img style="width: 340px; height: 51.14px; left: -7px; top: 17px; position: absolute" src="https://via.placeholder.com/340x51" />
  <div style="width: 151px; height: 50px; left: 101px; top: 141px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">CHESS</div>
  <div style="width: 220px; height: 67px; left: 67px; top: 253px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">BADMINTION</div>
  <div style="width: 146px; height: 53px; left: 115px; top: 443px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">LUDO</div>
  <div style="width: 155px; height: 68px; left: 85px; top: 539px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">TAMBOLA<br/></div>
</div>

PAGE 4

<div style="width: 326px; height: 640px; position: relative; background: white">
  <img style="width: 326px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/326x640" />
  <div style="width: 196px; height: 51px; left: 65px; top: 131px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 196px; height: 51px; left: 65px; top: 245px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 196px; height: 51px; left: 65px; top: 340px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 220px; height: 67px; left: 92px; top: 343px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">CRICKET</div>
  <div style="width: 196px; height: 51px; left: 65px; top: 434px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 196px; height: 51px; left: 65px; top: 529px; position: absolute; background: linear-gradient(90deg, #6AAAA6 0%, #883D3D 61%, #53297D 100%); box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <img style="width: 340px; height: 51.14px; left: -7px; top: 17px; position: absolute" src="https://via.placeholder.com/340x51" />
  <div style="width: 151px; height: 50px; left: 101px; top: 141px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">VOLLEY BALL</div>
  <div style="width: 220px; height: 67px; left: 67px; top: 253px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">BASKETBALL</div>
  <div style="width: 146px; height: 53px; left: 115px; top: 443px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">FOOTBALL</div>
</div>

PAGE 5

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
  <div style="width: 234px; height: 43px; left: 63px; top: 219px; position: absolute; background: #AED69B; box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
  <div style="width: 100px; height: 43px; left: 134px; top: 219px; position: absolute; color: white; font-size: 30px; font-family: Inter; font-weight: 700; word-wrap: break-word">LOGOUT</div>
  <div style="width: 234px; height: 43px; left: 67px; top: 299px; position: absolute; background: #AED69B; box-shadow: 4px 4px 4px; filter: blur(4px)"></div>
</div>  

OUTPUT:

RESULT:

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