santhanalakshmi04 / figma

Event Registration Web Application

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 Page */

position: relative; width: 360px; height: 640px; background: #FF0B0B;

/* Login Page */

 position: relative;
 width: 360px;
 height: 640px;
 background: #FAFF0C;

/* Saveetha Engineering College */

 position: absolute;
 width: 341px;
 height: 39px;
 left: 9px;
 top: 18px;
 font-family: 'Inter';
 font-style: normal;
 font-weight: 400;
 font-size: 20px;
 line-height: 24px;
 text-align: center;
 color: #0C0B0B;

/* DEPARTMENTS */

 position: absolute;
 width: 341px;
 height: 39px;
 left: 19px;
 top: 234px;
 font-family: 'Inter';
 font-style: normal;
 font-weight: 400;
 font-size: 20px;
 line-height: 24px;
 text-align: center;
 color: #0C0B0B;

/* AI-ML */

position: absolute;
width: 341px;
height: 39px;
left: 9px;
top: 273px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #0C0B0B;

/* AI-DS */

position: absolute;
width: 341px;
height: 39px;
left: 9px;
top: 331px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #0C0B0B;

/* IOT */

position: absolute;
width: 341px;
height: 39px;
left: 9px;
top: 390px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #0C0B0B;

/* CC */

position: absolute;
width: 341px;
height: 39px;
left: 9px;
top: 444px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #0C0B0B;

/* Line 3 */

position: absolute;
width: 360px;
height: 0px;
left: 0px;
top: 80px;
border: 4px solid #210EFD;

/* seclogo 3 */

position: absolute;
width: 97.54px;
height: 96px;
left: 131px;
top: 115px;
background: url(seclogo.png);

OUTPUT:

RESULT:

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