syedadilbasha1 / 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 Page */
position: relative;
width: 360px;
height: 640px;
background: #F60B0B;
/* Login page */
position: relative;
width: 360px;
height: 640px;
background: #FBF211;
/* Saveetha Engineering College */
position: absolute;
width: 338px;
height: 43px;
left: 11px;
top: 37px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #131010;
/* DEPARTMENTS */
position: absolute;
width: 338px;
height: 43px;
left: 11px;
top: 248px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #131010;
/* AI-ML */
position: absolute;
width: 338px;
height: 43px;
left: 11px;
top: 320px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #131010;
/* iOT */
position: absolute;
width: 338px;
height: 43px;
left: 11px;
top: 424px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #131010;
/* CC */
position: absolute;
width: 338px;
height: 43px;
left: 11px;
top: 476px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;

color: #131010;
/* AI-DS */
position: absolute;
width: 338px;
height: 43px;
left: 11px;
top: 372px;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #131010;
/* logo 3 */
position: absolute;
width: 98px;
height: 111px;
left: 131px;top: 99px;background: url(logo.jpg);

OUTPUT:

RESULT:

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