kiranbalajih / figma

Ex09 Event Registration Web Application

Date:

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:

HOME:

'''

<div style="width: 360px; height: 800px; position: relative; background: #1873DE">
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<div style="width: 217px; height: 41px; left: 72px; top: 696px; position: absolute; text-align: center; color: #0374F8; font-size: 36px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">REGISTER</div>
<div style="width: 360px; height: 78px; left: 0px; top: 98px; position: absolute; text-align: center; color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word">DESTERIN’24</div>
<div style="width: 235px; height: 276px; left: 63px; top: 390px; position: absolute; text-align: center; color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word">NATIONAL LEVEL <br/>TECHNICAL AND NON-TECHNICAL <br/>SYMPOSIUM</div>
<img style="width: 160px; height: 160px; left: -25px; top: 200px; position: absolute" src="https://via.placeholder.com/160x160" />
<img style="width: 171px; height: 159px; left: 219px; top: 201px; position: absolute" src="https://via.placeholder.com/171x159" />
</div>

'''

LOGIN:

'''

 <div style="width: 360px; height: 800px; position: relative; background: #0089ED">
<img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
<div style="left: 33px; top: 148px; position: absolute; color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word">Email</div>
<div style="width: 282px; height: 42px; left: 30px; top: 223px; position: absolute; background: #D9D9D9"></div>
<div style="left: 41px; top: 378px; position: absolute; color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word">Phone Number</div>
<div style="width: 291px; height: 48px; left: 39px; top: 495px; position: absolute; background: #D9D9D9"></div>
</div>

'''

TECHNICAL EVENTS:

'''

<div style="width: 360px; height: 800px; position: relative; background: #0B87E0">
  <div style="width: 360px; height: 696px; left: 0px; top: 46px; position: absolute"><span style="color: white; font-size: 36px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">         <br/>        <br/>       </span><span style="color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word">EVENTS<br/><br/>TECHNICAL</span><span style="color: white; font-size: 70px; font-family: Joti One; font-weight: 400; word-wrap: break-word">:<br/></span><span style="color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word"><br/>   PAPER-PRESENTATION<br/>   HACKATHON<br/>  <br/>  POSTER MAKING<br/>   <br/>  BOARD-DESIGN</span></div>
  <img style="width: 300px; height: 46.61px; left: 30px; top: 18px; position: absolute" src="https://via.placeholder.com/300x47" />
  <div style="width: 14px; height: 22px; left: 16px; top: 364px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
  <div style="width: 13px; height: 31px; left: 16px; top: 487px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
  <div style="width: 14px; height: 26px; left: 9px; top: 580px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
  <div style="width: 14px; height: 26px; left: 8px; top: 668px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
</div>

'''

NON-TECHNICAL:

'''

   <div style="width: 360px; height: 800px; position: relative; background: #1594EF">
<div style="width: 351px; height: 750px; left: 8px; top: 39px; position: absolute; color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word">   <br/><br/>           EVENTS<br/><br/>NON-TECHNICAL:<br/><br/>CONNECTIONS<br/>  <br/>  IPL QUIZ<br/> <br/> PS4 AND PS5<br/><br/>  YELLOWTAPE</div>
<img style="width: 300px; height: 46.61px; left: 30px; top: 16px; position: absolute" src="https://via.placeholder.com/300x47" />
<div style="width: 19px; height: 27px; left: 0px; top: 443px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
<div style="width: 16px; height: 23px; left: 0px; top: 535px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
<div style="width: 18px; height: 29px; left: 0px; top: 617px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
<div style="width: 19px; height: 21px; left: 0px; top: 350px; position: absolute; background: #D9D9D9; border-radius: 9999px"></div>
</div>

'''

FINAL-PAGE:

'''

<div style="width: 360px; height: 800px; padding-top: 17px; background: #139BE8; flex-direction: column; justify-content: flex-end; align-items: center; gap: 53.39px; display: inline-flex">
<img style="width: 300px; height: 46.61px" src="https://via.placeholder.com/300x47" />
<div style="width: 360px; height: 683px; color: white; font-size: 36px; font-family: Joti One; font-weight: 400; word-wrap: break-word">       REGISTER <br/> FOR THE EVENTS AND ENJOY.<br/><br/>COME IN NEAT AND PROPER DRESS CODE<br/><br/><br/><br/><br/>       FOR MORE    <br/>    INFROMATION <br/><br/>       CONTACT  <br/>     8574397590</div>
</div>

'''

OUTPUT:

RESULT:

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