ritiksamuel / figma

Ex-09 Event Registration Web Application

DATE: 07/11/2023

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: 457px;
height: 791px;

background: rgba(24, 113, 177, 0.41);


/* saveetha logo2 1 */

position: absolute;
width: 445px;
height: 67px;
left: calc(50% - 445px/2 + 3px);
top: 59px;

background: url(saveetha logo2.png);


/* saveetha logo 3 */

position: absolute;
width: 183px;
height: 183px;
left: 137px;
top: 153px;

background: url(saveetha logo.jpg);


/* Rectangle 1 */

position: absolute;
width: 140px;
height: 42px;
left: 157px;
top: 652px;

background: #D9D9D9;


/* LOGIN */

position: absolute;
width: 99.27px;
height: 30px;
left: 173.23px;
top: 657.26px;

font-family: 'Krona One';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 30px;
/* identical to box height */
text-align: center;

color: #CE0E0E;

transform: rotate(0.87deg);


/* NIRF RANKED AUTONOMOUS INSTITUTION */

position: absolute;
width: 395px;
height: 95px;
left: 38px;
top: 396px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
text-align: center;

color: #000000;

border: 1px solid #000000;


/* AFFILIATED TO ANNA UNIVERSITY */

position: absolute;
width: 801px;
height: 66px;
left: -169px;
top: 518px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
text-align: center;

color: #000000;

border: 1px solid #000000;



/* Login page */

position: relative;
width: 460px;
height: 782px;

background: rgba(24, 113, 177, 0.47);


/* saveetha logo2 2 */

position: absolute;
width: 460px;
height: 66px;
left: 0px;
top: 55px;

background: url(saveetha logo2.png);


/* saveetha logo 4 */

position: absolute;
width: 185px;
height: 185px;
left: 137px;
top: 157px;

background: url(saveetha logo.jpg);


/* Rectangle 2 */

position: absolute;
width: 209px;
height: 45px;
left: 125px;
top: 438px;

background: #D9D9D9;


/* Rectangle 3 */

position: absolute;
width: 209px;
height: 44px;
left: 125px;
top: 545px;

background: #D9D9D9;


/* Rectangle 4 */

position: absolute;
width: 221px;
height: 30px;
left: 113px;
top: 651px;

background: #D9D9D9;


/* USERNAME */

position: absolute;
width: 133px;
height: 29px;
left: 87px;
top: 391px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
/* identical to box height */
text-align: center;

color: #000000;

border: 1px solid #000000;


/* PASSWORD */

position: absolute;
width: 134px;
height: 29px;
left: 87px;
top: 502px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
/* identical to box height */
text-align: center;

color: #000000;

border: 1px solid #000000;


/* SUBMIT */

position: absolute;
width: 279px;
height: 40px;
left: 80px;
top: 651px;

font-family: 'Krona One';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 30px;
text-align: center;

color: #CE0E0E;





/* Departments */

position: relative;
width: 466px;
height: 782px;

background: rgba(24, 113, 177, 0.5);


/* saveetha logo2 3 */

position: absolute;
width: 460px;
height: 58px;
left: 6px;
top: 39px;

background: url(saveetha logo2.png);


/* saveetha logo 5 */

position: absolute;
width: 187px;
height: 184px;
left: 139px;
top: 144px;

background: url(saveetha logo.jpg);


/* DEPARTMENTS */

position: absolute;
width: 236px;
height: 39px;
left: 109px;
top: 391px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 39px;
/* identical to box height */
text-align: center;

color: #000000;

border: 1px solid #550000;


/* CSE */

position: absolute;
width: 151px;
height: 56px;
left: 155px;
top: 448px;

font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-size: 32px;
line-height: 39px;
text-align: center;

color: #000000;

border: 1px solid #000000;


/* AIDS */

position: absolute;
width: 134px;
height: 38px;
left: 164px;
top: 497px;

font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-size: 32px;
line-height: 39px;
text-align: center;

color: #000000;

border: 1px solid #000000;


/* ECE */

position: absolute;
width: 61px;
height: 39px;
left: 196px;
top: 553px;

font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-size: 32px;
line-height: 39px;
/* identical to box height */
text-align: center;

color: #000000;

border: 1px solid #000000;


/* EEE */

position: absolute;
width: 102px;
height: 31px;
left: 176px;
top: 610px;

font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-size: 32px;
line-height: 39px;
text-align: center;

color: #000000;

border: 1px solid #000000;

OUTPUT:

RESULT:

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