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 style="width: 100%; height: 100%; position: relative; background: white">
<img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
<div style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute; background: rgba(0, 0, 0, 0.40)"></div>
<div style="width: 360px; height: 59px; left: 0px; top: 9px; position: absolute; background: #FEF7F7"></div>
<img style="width: 347px; height: 48px; left: 6px; top: 14px; position: absolute" src="https://via.placeholder.com/347x48" />
<div style="width: 193px; height: 159px; left: 83px; top: 171px; position: absolute; text-align: center; color: #18E9DC; font-size: 44px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">TECNO FEST 2K23</div>
<div style="width: 227px; height: 54px; left: 69px; top: 391px; position: absolute; background: #DA2C6B; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: 2px black solid"></div>
<div style="width: 227px; height: 54px; left: 69px; top: 498px; position: absolute; background: #18E9E9; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: 2px black solid"></div>
<div style="width: 204px; height: 35px; left: 79px; top: 402px; position: absolute; text-align: center; color: white; font-size: 29px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">LOGIN</div>
<div style="width: 204px; height: 35px; left: 78px; top: 507px; position: absolute; text-align: center; color: white; font-size: 29px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">REGISTER</div>
</div>
// TECNO FEST 2K23
color: #18E9DC;
font-size: 44px;
font-family: Irish Grover;
font-weight: 400;
word-wrap: break-word
---
// LOGIN
color: white;
font-size: 29px;
font-family: Lakki Reddy;
font-weight: 400;
word-wrap: break-word
---
// REGISTER
color: white;
font-size: 29px;
font-family: Lakki Reddy;
font-weight: 400;
word-wrap: break-word
Registration Page
<div style="width: 100%; height: 100%; position: relative; background: white">
<img style="width: 889px; height: 640px; left: -14px; top: 0px; position: absolute" src="https://via.placeholder.com/889x640" />
<div style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute; background: rgba(2.18, 2.15, 2.15, 0.65)"></div>
<div style="width: 360px; height: 57px; left: 0px; top: 9px; position: absolute; background: #FFFEFE"></div>
<img style="width: 347px; height: 48px; left: 6px; top: 13px; position: absolute" src="https://via.placeholder.com/347x48" />
<div style="width: 318px; height: 40px; left: 20px; top: 98px; position: absolute; color: white; font-size: 32px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">EVENT REGISTRATION</div>
<div style="width: 273px; height: 31px; left: 42px; top: 165px; position: absolute; background: white"></div>
<div style="width: 273px; height: 31px; left: 42px; top: 214px; position: absolute; background: white"></div>
<div style="width: 273px; height: 31px; left: 42px; top: 263px; position: absolute; background: white"></div>
<div style="width: 273px; height: 31px; left: 42px; top: 312px; position: absolute; background: white"></div>
<div style="width: 273px; height: 31px; left: 42px; top: 361px; position: absolute; background: white"></div>
<div style="width: 273px; height: 31px; left: 42px; top: 410px; position: absolute; background: white"></div>
<div style="width: 273px; height: 31px; left: 42px; top: 459px; position: absolute; background: white"></div>
<div style="width: 180px; height: 20px; left: 53px; top: 173px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Full Name</div>
<div style="width: 180px; height: 20px; left: 53px; top: 219px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Register no</div>
<div style="width: 180px; height: 20px; left: 53px; top: 269px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Gender</div>
<div style="width: 180px; height: 20px; left: 53px; top: 320px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Department</div>
<div style="width: 180px; height: 20px; left: 53px; top: 367px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Mobile</div>
<div style="width: 180px; height: 20px; left: 53px; top: 419px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Email ID</div>
<div style="width: 180px; height: 20px; left: 53px; top: 467px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Event to register</div>
<div style="width: 227px; height: 54px; left: 66px; top: 527px; position: absolute; background: #84D037; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: 2px black solid"></div>
<div style="width: 204px; height: 35px; left: 77px; top: 538px; position: absolute; text-align: center; color: white; font-size: 29px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">SUBMIT</div>
</div>
// EVENT REGISTRATION
color: white;
font-size: 32px;
font-family: Irish Grover;
font-weight: 400;
word-wrap: break-word
---
// Full Name
color: black;
font-size: 13px;
font-family: Imprima;
font-weight: 400;
word-wrap: break-word
---
// Register no
color: black;
font-size: 13px;
font-family: Imprima;
font-weight: 400;
word-wrap: break-word
---
// Gender
color: black;
font-size: 13px;
font-family: Imprima;
font-weight: 400;
word-wrap: break-word
---
// Department
color: black;
font-size: 13px;
font-family: Imprima;
font-weight: 400;
word-wrap: break-word
---
// Mobile
color: black;
font-size: 13px;
font-family: Imprima;
font-weight: 400;
word-wrap: break-word
---
// Email ID
color: black;
font-size: 13px;
font-family: Imprima;
font-weight: 400;
word-wrap: break-word
---
// Event to register
color: black;
font-size: 13px;
font-family: Imprima;
font-weight: 400;
word-wrap: break-word
---
// SUBMIT
color: white;
font-size: 29px;
font-family: Lakki Reddy;
font-weight: 400;
word-wrap: break-word
Thank you Page
<div style="width: 100%; height: 100%; position: relative; background: white">
<img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
<div style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute; background: rgba(8.31, 8.31, 8.31, 0.65)"></div>
<div style="width: 360px; height: 57px; left: 0px; top: 9px; position: absolute; background: #FFFEFE"></div>
<img style="width: 347px; height: 48px; left: 2px; top: 13px; position: absolute" src="https://via.placeholder.com/347x48" />
<div style="width: 252px; height: 169px; left: 54px; top: 182px; position: absolute; text-align: center"><span style="color: #B3E918; font-size: 38px; font-family: Lilita One; font-weight: 400; word-wrap: break-word">THANK YOU FOR REGISTERING.<br/></span><span style="color: #15DDE9; font-size: 38px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word"><br/> </span><span style="color: #15DDE9; font-size: 38px; font-family: Kaushan Script; font-weight: 400; word-wrap: break-word">We’re Excited to have you On Board.</span></div>
</div>
// THANK YOU FOR REGISTERING.<br/>
color: #B3E918;
font-size: 38px;
font-family: Lilita One;
font-weight: 400;
word-wrap: break-word
---
// <br/>
color: #15DDE9;
font-size: 38px;
font-family: Irish Grover;
font-weight: 400;
word-wrap: break-word
---
// We’re Excited to have you On Board.
color: #15DDE9;
font-size: 38px;
font-family: Kaushan Script;
font-weight: 400;
word-wrap: break-word
The program to design, develop and deploy a web application for event registration is completed successfully.