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

<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: 337px; height: 69px; left: 0px; top: 102px; position: absolute; text-align: center; color: black; font-size: 75px; font-family: Jomhuria; font-weight: 400; word-wrap: break-word">TECH 2K24</div>
  <div style="width: 337px; height: 123px; left: 0px; top: 205px; position: absolute; text-align: center; color: black; font-size: 29px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">TECHNICAL EVENTS<br/>NON-TECHNICAL EVENTS<br/>ONLINE EVENTS</div>
  <div style="width: 287px; height: 70px; left: 22px; top: 353px; position: absolute; text-align: center; color: #1E1E1E; font-size: 29px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">ONE REGISTRATION FOR ALL EVENTS</div>
  <div style="width: 168px; height: 45px; left: 169px; top: 438px; position: absolute; text-align: center; color: black; font-size: 15px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">SCAN HERE TO REGISTER</div>
  <img style="width: 360px; height: 77px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x77" />
  <img style="width: 107px; height: 113px; left: 200px; top: 498px; position: absolute" src="https://via.placeholder.com/107x113" />
  <div style="width: 154px; height: 142px; left: 26px; top: 469px; position: absolute; text-align: center; color: black; font-size: 15px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">FOR DETAILS CONTACT<br/><br/>E.JAYAHARI<br/>(7550162210)</div>
</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: 360px; height: 77px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x77" />
  <div style="width: 360px; height: 60px; left: 0px; top: 102px; position: absolute; text-align: center; color: black; font-size: 65px; font-family: Jomhuria; font-weight: 400; word-wrap: break-word">DEPARTMENT OF CSE</div>
  <div style="width: 312px; height: 397px; left: 24px; top: 193px; position: absolute; color: #1E1E1E; font-size: 50px; font-family: Jomhuria; font-weight: 400; word-wrap: break-word">TECHNICAL EVENTS:<br/>        1. HACKATHON<br/>        2.CODE AND DEBUG<br/>NON TECHNICAL EVENTS:<br/>        1.CONNECTION<br/>        2.DRAWING <br/>ONLINE EVENT:<br/>        1. PHOTOGRAPHY<br/><br/></div>
</div>

Page 3:

<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: 360px; height: 77px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x77" />
  <div style="width: 337px; height: 69px; left: 0px; top: 102px; position: absolute; text-align: center; color: black; font-size: 75px; font-family: Jomhuria; font-weight: 400; word-wrap: break-word">STUDENT DETAILS</div>
  <div style="width: 205px; height: 34px; left: 155px; top: 195px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 205px; height: 34px; left: 155px; top: 243px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 205px; height: 34px; left: 155px; top: 291px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 205px; height: 34px; left: 155px; top: 339px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 205px; height: 34px; left: 155px; top: 387px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 205px; height: 34px; left: 155px; top: 483px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 205px; height: 34px; left: 155px; top: 435px; position: absolute; background: #D9D9D9"></div>
  <div style="width: 155px; height: 330px; left: 0px; top: 187px; position: absolute; text-align: center; color: black; font-size: 50px; font-family: Jomhuria; font-weight: 400; word-wrap: break-word">NAME<br/>REG NO<br/>DEPT<br/>CLG NAME<br/>MOBILE<br/>EVENT ID<br/>EVENT NAME<br/></div>
  <div style="width: 228px; height: 50px; left: 56px; top: 559px; position: absolute; background: #287326"></div>
  <div style="width: 227px; height: 51px; left: 57px; top: 558px; position: absolute; text-align: center; color: black; font-size: 50px; font-family: Jomhuria; font-weight: 400; word-wrap: break-word">REGISTER</div>
</div>

OUTPUT:

RESULT:

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