vishinu24 / figma

Ex09 Event Registration Web Application

Date:22/04/2024

Name : H Vishinu

Reg.No : 212223220124

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: 390px; height: 844px; position: relative; background: #B6A2A2">
  <img style="width: 277px; height: 57px; left: 56px; top: 38px; position: absolute" src="https://via.placeholder.com/277x57" />
  <img style="width: 122px; height: 110px; left: 129px; top: 133px; position: absolute" src="https://via.placeholder.com/122x110" />
  <div style="width: 159px; height: 82px; left: 115px; top: 403px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 159px; height: 83px; left: 115px; top: 556px; position: absolute; background: #D9D9D9"></div>
  <div style="left: 153px; top: 432px; position: absolute; color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">LOGIN</div>
  <div style="left: 145px; top: 586px; position: absolute; color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">REGISTER</div>
  <img style="width: 393px; height: 853px; left: -3px; top: -9px; position: absolute" src="https://via.placeholder.com/393x853" />
  <img style="width: 277px; height: 57px; left: 52px; top: 38px; position: absolute" src="https://via.placeholder.com/277x57" />
  <img style="width: 122px; height: 110px; left: 125px; top: 133px; position: absolute" src="https://via.placeholder.com/122x110" />
  <div style="width: 181px; height: 51px; left: 129px; top: 294px; position: absolute; color: #04000A; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">CELANZA’24 </div>
  <div style="width: 159px; height: 82px; left: 111px; top: 403px; position: absolute; background: white"></div>
  <div style="width: 159px; height: 83px; left: 111px; top: 556px; position: absolute; background: white"></div>
  <div style="left: 149px; top: 432px; position: absolute; color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">LOGIN</div>
  <div style="left: 141px; top: 586px; position: absolute; color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">REGISTER</div>
</div>

<img style="width: 393px; height: 853px" src="https://via.placeholder.com/393x853" />
<img style="width: 277px; height: 57px" src="https://via.placeholder.com/277x57" />
<div style="color: #7E1A1A; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">CELANZA EVENTS </div>
<div style="color: #DFD8D8; font-size: 24px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">FLASH MOB </div>
<div style="color: #DFD8D8; font-size: 24px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">DIGITAL ART </div>
<div style="color: #DFD8D8; font-size: 24px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">SOLO DANCING<br/></div>
<div style="color: #DFD8D8; font-size: 24px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">SOLO SINGING<br/></div>
<div style="color: #DFD8D8; font-size: 24px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">PHOTOGRAPHY</div>

<img style="width: 393px; height: 853px" src="https://via.placeholder.com/393x853" />
<img style="width: 277px; height: 57px" src="https://via.placeholder.com/277x57" />
<div style="color: #8E2222; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">EVENTS  REGISTRATION<br/> </div>
<div style="width: 162px; height: 49px; background: white"></div>
<div style="width: 162px; height: 49px; background: white"></div>
<div style="color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">NAME</div>
<div style="width: 162px; height: 49px; background: white"></div>
<div style="width: 162px; height: 49px; background: white"></div>
<div style="width: 162px; height: 49px; background: white"></div>
<div style="color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">NAME</div>
<div style="color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">REGISTER NO</div>
<div style="color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">DEPARTMENT<br/></div>
<div style="color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">EMAIL ID</div>
<div style="color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">EVENTS<br/></div>
<div style="width: 146px; height: 64px; background: #DE3C3C"></div>
<div style="color: black; font-size: 20px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">REGISTER</div>

OUTPUT:

3 pages

RESULT:

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