To design, develop and deploy a web application for event registration.
Create a new frame.
Select any one preset size of your choice.
Select the shapes you need.
Import images as needed.
Create pages based on your need and link them.
Validate the HTML and CSS code.
Publish the website in the given URL.
Figma
Page 1
<div class="AndroidSmall1" style="width: 100%; height: 100%; position: relative; background: #EBE314">
<div class="Rectangle7" style="width: 304px; height: 260px; left: 28px; top: 277px; position: absolute; background: #F01CE8"></div>
<div class="Rectangle8" style="width: 255px; height: 59px; left: 52px; top: 320px; position: absolute; background: #21E0E0"></div>
<div class="Username" style="width: 164px; height: 37px; left: 111px; top: 334px; position: absolute; color: #E02121; font-size: 24px; font-family: Inter; font-weight: 400; word-wrap: break-word">USERNAME</div>
<div class="Rectangle9" style="width: 255px; height: 63px; left: 52px; top: 432px; position: absolute; background: #21E0E0"></div>
<div class="Password" style="width: 155px; height: 42px; left: 104px; top: 448px; position: absolute; color: #E02121; font-size: 24px; font-family: Inter; font-weight: 400; word-wrap: break-word">PASSWORD</div>
<img class="SaveethaLogo" style="width: 360px; height: 54px; left: 0px; top: 35px; position: absolute" src="https://via.placeholder.com/360x54" />
</div>
// USERNAME
color: #E02121;
font-size: 24px;
font-family: Inter;
font-weight: 400;
word-wrap: break-word
---
// PASSWORD
color: #E02121;
font-size: 24px;
font-family: Inter;
font-weight: 400;
word-wrap: break-word
Page 2
<div class="AndroidSmall2" style="width: 100%; height: 100%; position: relative; background: #EBE314">
<img class="Saveetha1" style="width: 98px; height: 98px; left: 13px; top: 47px; position: absolute" src="https://via.placeholder.com/98x98" />
<div class="EventRegister" style="width: 230px; left: 47px; top: 204px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word"> EVENT REGISTER</div>
<div class="SaveethaEnigineeringCollegeAffiliatedToAnnaUniversityAutonomous" style="width: 212px; height: 75px; left: 134px; top: 70px; position: absolute"><span style="color: #3021E0; font-size: 12px; font-family: Inter; font-weight: 700; word-wrap: break-word">SAVEETHA ENIGINEERING COLLEGE<br/><br/>AFFILIATED TO ANNA UNIVERSITY<br/><br/></span><span style="color: black; font-size: 12px; font-family: Inter; font-weight: 700; word-wrap: break-word"> </span><span style="color: #E02121; font-size: 12px; font-family: Inter; font-weight: 700; word-wrap: break-word"> (AUTONOMOUS)<br/></span></div>
<div class="Name" style="left: 40px; top: 273px; position: absolute"><span style="color: black; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word"> </span><span style="color: #F01CE8; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">NAME :</span></div>
<div class="RegNo" style="left: 43px; top: 328px; position: absolute; color: #F01CE8; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">REG NO :</div>
<div class="Dept" style="left: 40px; top: 389px; position: absolute"><span style="color: black; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word"> </span><span style="color: #F01CE8; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">DEPT :</span></div>
<div class="Year" style="width: 96px; height: 29px; left: 44px; top: 450px; position: absolute; color: #F01CE8; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">YEAR :</div>
</div>
// EVENT REGISTER
color: black;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// SAVEETHA ENIGINEERING COLLEGE<br/><br/>AFFILIATED TO ANNA UNIVERSITY<br/><br/>
color: #3021E0;
font-size: 12px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
//
color: black;
font-size: 12px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// (AUTONOMOUS)<br/>
color: #E02121;
font-size: 12px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
//
color: black;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// NAME :
color: #F01CE8;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// REG NO :
color: #F01CE8;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
//
color: black;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// DEPT :
color: #F01CE8;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// YEAR :
color: #F01CE8;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
Page 3
<div class="AndroidSmall3" style="width: 100%; height: 100%; position: relative; background: #EBE314">
<img class="SaveethaLogo" style="width: 360px; height: 54.14px; left: 0px; top: 35px; position: absolute" src="https://via.placeholder.com/360x54" />
<div class="Rectangle1" style="width: 295px; height: 50px; left: 33px; top: 184px; position: absolute; background: #F01CE8"></div>
<div class="Drawing" style="width: 139px; left: 114px; top: 197px; position: absolute; color: #E02121; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">DRAWING</div>
<div class="Rectangle2" style="width: 295px; height: 51px; left: 33px; top: 276px; position: absolute; background: #F01CE8"></div>
<div class="Speech" style="width: 108px; height: 39px; left: 120px; top: 288px; position: absolute; color: #E02121; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">SPEECH</div>
<div class="Rectangle3" style="width: 295px; height: 52px; left: 33px; top: 377px; position: absolute; background: #F01CE8"></div>
<div class="Rectangle5" style="width: 295px; height: 52px; left: 33px; top: 377px; position: absolute; background: #F01CE8"></div>
<div class="Sports" style="width: 117px; height: 23px; left: 111px; top: 393px; position: absolute; color: #E02121; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word"> SPORTS</div>
<div class="Rectangle6" style="width: 295px; height: 53px; left: 33px; top: 482px; position: absolute; background: #F01CE8"></div>
<div class="Dance" style="width: 112px; height: 43px; left: 120px; top: 492px; position: absolute; color: #E02121; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word">DANCE</div>
<div class="Events" style="width: 194px; height: 46px; left: 71px; top: 126px; position: absolute; color: black; font-size: 24px; font-family: Inter; font-weight: 700; word-wrap: break-word"> EVENTS</div>
</div>
// DRAWING
color: #E02121;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// SPEECH
color: #E02121;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// SPORTS
color: #E02121;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// DANCE
color: #E02121;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
---
// EVENTS
color: black;
font-size: 24px;
font-family: Inter;
font-weight: 700;
word-wrap: break-word
The program to design, develop and deploy a web application for event registration is completed successfully.