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
Home Page
<div className="AndroidSmall1" style={{width: 433, height: 658, position: 'relative', background: 'white'}}>
<div className="Rectangle2" style={{width: 126, height: 30, left: 236, top: 462, position: 'absolute'}}></div>
<img className="Music2" style={{width: 433, height: 658, left: 0, top: 0, position: 'absolute'}} src="https://via.placeholder.com/433x658" />
<div className="MusicEvent" style={{left: 132, top: 154, position: 'absolute', color: 'black', fontSize: 24, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>MUSIC EVENT</div>
<div className="Rectangle3" style={{width: 156, height: 41, left: 111, top: 380, position: 'absolute', background: 'black'}} />
<div className="Rectangle4" style={{width: 156, height: 44, left: 111, top: 471, position: 'absolute', background: 'black'}} />
<div className="Login" style={{left: 151, top: 386, position: 'absolute', color: 'white', fontSize: 24, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>LOGIN</div>
<div className="Register" style={{left: 130, top: 478, position: 'absolute', color: 'white', fontSize: 24, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>REGISTER</div>
</div>
Page 2
<div className="AndroidSmall2" style={{width: 433, height: 658, position: 'relative', background: 'white'}}>
<img className="Music3" style={{width: 433, height: 658, left: 0, top: 0, position: 'absolute'}} src="https://via.placeholder.com/433x658" />
<img className="WebLogo012" style={{width: 439, height: 66, left: 0, top: 0, position: 'absolute'}} src="https://via.placeholder.com/439x66" />
<div className="Name" style={{left: 6, top: 143, position: 'absolute', color: 'black', fontSize: 20, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>NAME</div>
<div className="Gender" style={{left: 6, top: 208, position: 'absolute', color: 'black', fontSize: 20, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>GENDER :</div>
<div className="RegNo" style={{width: 134, height: 23, left: 6, top: 273, position: 'absolute', color: 'black', fontSize: 20, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>REG NO :</div>
<div className="Dept" style={{left: 6, top: 331, position: 'absolute', color: 'black', fontSize: 20, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>DEPT :</div>
<div style={{left: 74, top: 143, position: 'absolute', color: 'black', fontSize: 20, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>:</div>
<div className="Line1" style={{width: 213.02, height: 0, left: 101, top: 163.04, position: 'absolute', transform: 'rotate(-0.82deg)', transformOrigin: '0 0', border: '1px black solid'}}></div>
<div className="Line2" style={{width: 213.02, height: 0, left: 101, top: 230.04, position: 'absolute', transform: 'rotate(-0.82deg)', transformOrigin: '0 0', border: '1px black solid'}}></div>
<div className="Line3" style={{width: 213.02, height: 0, left: 101, top: 289.04, position: 'absolute', transform: 'rotate(-0.82deg)', transformOrigin: '0 0', border: '1px black solid'}}></div>
<div className="Line4" style={{width: 213.02, height: 0, left: 101, top: 353.04, position: 'absolute', transform: 'rotate(-0.82deg)', transformOrigin: '0 0', border: '1px black solid'}}></div>
</div>
Page 3
<div className="AndroidSmall3" style={{width: 433, height: 658, position: 'relative', background: 'white'}}>
<img className="Music4" style={{width: 434, height: 658, left: -1, top: 0, position: 'absolute'}} src="https://via.placeholder.com/434x658" />
<img className="WebLogo013" style={{width: 441, height: 64, left: 0, top: 0, position: 'absolute'}} src="https://via.placeholder.com/441x64" />
<div className="ThankYou" style={{left: 113, top: 176, position: 'absolute', color: 'black', fontSize: 24, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>THANK YOU</div>
<div className="WeAreEagerlyWaitingForYourParticipation" style={{left: 71, top: 222, position: 'absolute', color: 'black', fontSize: 15, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '400', wordWrap: 'break-word'}}>WE ARE EAGERLY WAITING FOR<br/>YOUR PARTICIPATION</div>
<div className="ContactUs" style={{left: 106, top: 531, position: 'absolute', color: 'black', fontSize: 24, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '700', wordWrap: 'break-word'}}>CONTACT US</div>
<div className="SaveethaGmailCom" style={{left: 125, top: 585, position: 'absolute', color: 'black', fontSize: 12, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '400', wordWrap: 'break-word'}}>[email protected]</div>
<div className="Email" style={{left: 164, top: 570, position: 'absolute', color: 'black', fontSize: 12, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '400', wordWrap: 'break-word'}}>EMAIL:</div>
<div className="Phone" style={{left: 158, top: 617, position: 'absolute', color: 'black', fontSize: 12, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '400', wordWrap: 'break-word'}}>PHONE:</div>
<div style={{left: 147, top: 632, position: 'absolute', color: 'black', fontSize: 12, fontFamily: 'Inter', fontStyle: 'italic', fontWeight: '400', wordWrap: 'break-word'}}>8531836669</div>
</div>
The program to design, develop and deploy a web application for event registration is completed successfully.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent