To design, develop and deploy a web application for event registration.
Go to the figma.com website
login and create a team project.
Each team members can take part in designing the pages
Create login page, home page, report page, registration page and thank you page
Prototype the pages.
Validate the HTML and CSS code.
Publish the website in the given URL.
figma.
### CSS CODE
### Login Page:
.desktop-1-6Lu {
background-color: #ffffff;
height: 102.4rem;
overflow: hidden;
position: relative;
width: 100%;
.auto-group-vk3p-v53 {
background-color: #6e9df6;
box-sizing: border-box;
height: 28.1rem;
left: 0;
padding: 1.7rem 10rem;
position: absolute;
top: 0;
width: 144rem;
.item-1-1-Nxd {
height: 24.7rem;
object-fit: cover;
vertical-align: top;
width: 124rem;
}
}
.auto-group-9eny-V1f {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 53.3rem;
left: 0;
padding: 1.4rem 28.6rem 4.2rem 37.7rem;
position: absolute;
top: 49.1rem;
width: 144rem;
.rectangle-2-LHB {
border: solid 0.1rem #111111;
border-radius: 5rem;
box-sizing: border-box;
flex-shrink: 0;
height: 8.4rem;
margin-bottom: 1.2rem;
width: 100%;
}
.password-F9F {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
line-height: 1.2125;
margin: 0rem 53.6rem 1.1rem 0rem;
white-space: nowrap;
}
.rectangle-3-W5B {
border: solid 0.1rem #111111;
border-radius: 5rem;
box-sizing: border-box;
flex-shrink: 0;
height: 8.2rem;
margin-bottom: 5.3rem;
width: 100%;
}
.auto-group-zfam-23X {
align-items: center;
background-image: url('/api/prod-ap-southeast-1-first-cluster/projects/NUKjPSVaEePmFb9i9We95b/files/vector/e3644fe48d7154dcda6132f51ffef485c604cee6913506a7c1661b74b08a022f0978f113f4b37de319b9c3e63c3437bdb082a00af6e54a4cc53e51e495fb081e?hash=45b786d260871b751c6e5402d951908a1ffcf9069e3af59d799ddd37df485db2');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
display: flex;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
height: 7.2rem;
justify-content: center;
line-height: 1.2125;
margin-bottom: 4.2rem;
white-space: nowrap;
width: 100%;
}
.auto-group-ibpb-sZw {
align-items: center;
background-color: #6e9df6;
border-radius: 5rem;
color: #ffffff;
display: flex;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
height: 7.2rem;
justify-content: center;
line-height: 1.2125;
white-space: nowrap;
width: 100%;
}
}
.email-9XT {
color: #000000;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
height: 4.9rem;
left: 40.1rem;
line-height: 1.2125;
position: absolute;
top: 44.2rem;
white-space: nowrap;
width: 10.6rem;
}
.login-register-your-profile-here-3sj {
color: #000000;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 800;
height: 4.9rem;
left: 43.1rem;
line-height: 1.2125;
position: absolute;
top: 36.7rem;
white-space: nowrap;
width: 62.7rem;
}
.drestein-2k23-vwX {
color: #6e9df6;
font-family: Inter, 'Source Sans Pro';
font-size: 4.8rem;
font-weight: 800;
height: 5.9rem;
left: 59.3rem;
line-height: 1.2125;
position: absolute;
top: 29.4rem;
white-space: nowrap;
width: 33.5rem;
}
}
### Account Creation page:
.desktop-2-xbo {
align-items: center;
background-color: #ffffff;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
width: 100%;
.auto-group-g4kd-ZLh {
background-color: #6e9df6;
box-sizing: border-box;
flex-shrink: 0;
margin-bottom: 2.9rem;
padding: 1.7rem 10rem;
width: 100%;
.item-1-2-hUq {
height: 24.7rem;
object-fit: cover;
vertical-align: top;
width: 124rem;
}
}
.first-name-o25 {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
line-height: 1.2125;
margin-right: 25.7rem;
white-space: nowrap;
}
.auto-group-btjf-HT3 {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 0.7rem 48.9rem 6.4rem 48.8rem;
width: 100%;
.rectangle-6-zMT {
border: solid 0.1rem #111111;
border-radius: 5rem;
box-sizing: border-box;
flex-shrink: 0;
height: 6.7rem;
margin-bottom: 1.5rem;
width: 100%;
}
.last-name-7S5 {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
line-height: 1.2125;
margin: 0rem 26.1rem 0.7rem 0rem;
white-space: nowrap;
}
.rectangle-7-1nM {
border: solid 0.1rem #111111;
border-radius: 5rem;
box-sizing: border-box;
flex-shrink: 0;
height: 6.7rem;
margin-bottom: 1.4rem;
width: 100%;
}
.email-vPX {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
line-height: 1.2125;
margin: 0rem 35.7rem 0.8rem 0rem;
white-space: nowrap;
}
.rectangle-8-Ssf {
border: solid 0.1rem #111111;
border-radius: 5rem;
box-sizing: border-box;
flex-shrink: 0;
height: 6.7rem;
margin-bottom: 1.2rem;
width: 100%;
}
.password-nAq {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
line-height: 1.2125;
margin: 0rem 27rem 1rem 0rem;
white-space: nowrap;
}
.rectangle-9-tzZ {
border: solid 0.1rem #111111;
border-radius: 5rem;
box-sizing: border-box;
flex-shrink: 0;
height: 6.7rem;
margin-bottom: 4.6rem;
width: 100%;
}
.auto-group-dcwq-EHj {
align-items: center;
background-color: #6e9df6;
border: solid 0.1rem #6e9df6;
border-radius: 5rem;
box-sizing: border-box;
color: #ffffff;
display: flex;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 3.6rem;
font-weight: 700;
height: 6.7rem;
justify-content: center;
line-height: 1.2125;
white-space: nowrap;
width: 100%;
}
}
### Events Page:
desktop-4-XoB {
align-items: center;
background-color: #ffffff;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
width: 100%;
.auto-group-nprm-9pZ {
background-color: #6e9df6;
box-sizing: border-box;
flex-shrink: 0;
margin-bottom: 2.3rem;
padding: 1.7rem 10rem;
width: 100%;
.item-1-2-pJR {
height: 24.7rem;
object-fit: cover;
vertical-align: top;
width: 124rem;
}
}
.choose-events-to-register-JzH {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4.8rem;
font-weight: 700;
line-height: 1.2125;
margin-right: 6rem;
white-space: nowrap;
}
.auto-group-f6gu-CZs {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 7.6rem 29.9rem 9rem 24.4rem;
width: 100%;
.auto-group-p8j9-VYy {
align-items: center;
display: flex;
flex-shrink: 0;
margin-bottom: 4.3rem;
width: 100%;
.react-js1-EmT {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4.8rem;
font-weight: 700;
line-height: 1.2125;
margin-right: 62.9rem;
white-space: nowrap;
}
.rectangle-13-NMs {
background-color: #d9d9d9;
flex-shrink: 0;
height: 3.9rem;
margin-top: 0.4rem;
width: 4.4rem;
}
}
.auto-group-ifj5-HUq {
align-items: flex-start;
display: flex;
flex-shrink: 0;
margin-bottom: 4.9rem;
width: 100%;
.find-the-murderer-3D7 {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4.8rem;
font-weight: 700;
line-height: 1.2125;
margin: 0.2rem 36.6rem 0rem 0rem;
white-space: nowrap;
}
.rectangle-14-x5B {
background-color: #d9d9d9;
flex-shrink: 0;
height: 3.9rem;
width: 4.4rem;
}
}
.auto-group-ojrq-hHf {
align-items: flex-start;
display: flex;
flex-shrink: 0;
margin-bottom: 5rem;
width: 100%;
.finance-advice-for-students-F4H {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4.8rem;
font-weight: 700;
line-height: 1.2125;
margin-right: 14.5rem;
white-space: nowrap;
}
.rectangle-15-xDb {
background-color: #d9d9d9;
flex-shrink: 0;
height: 3.9rem;
margin-top: 0.1rem;
width: 4.4rem;
}
}
.auto-group-gp4v-5p1 {
align-items: flex-start;
display: flex;
flex-shrink: 0;
margin-bottom: 5rem;
width: 100%;
.cryptohunt-dad {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4.8rem;
font-weight: 700;
line-height: 1.2125;
margin-right: 52.4rem;
white-space: nowrap;
}
.rectangle-16-kfF {
background-color: #d9d9d9;
flex-shrink: 0;
height: 3.9rem;
width: 4.4rem;
}
}
.auto-group-ckyj-uHF {
align-items: center;
background-color: #6e9df6;
border-radius: 5rem;
color: #ffffff;
display: flex;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4rem;
font-weight: 700;
height: 6.5rem;
justify-content: center;
line-height: 1.2125;
margin: 0rem 26.9rem 0rem 26.8rem;
white-space: nowrap;
width: calc(100% - 53.7rem);
}
}
}
### Success Page :
.desktop-3-m4R {
align-items: center;
background-color: #ffffff;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
width: 100%;
.auto-group-mvst-PrV {
background-color: #6e9df6;
box-sizing: border-box;
flex-shrink: 0;
margin-bottom: 23.1rem;
padding: 1.7rem 10rem;
width: 100%;
.item-1-3-V8q {
height: 24.7rem;
object-fit: cover;
vertical-align: top;
width: 124rem;
}
}
.account-created-successfully-continue-to-login-mc9 {
color: #000000;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 4.8rem;
font-weight: 700;
line-height: 1.2125;
margin-right: 1.3rem;
white-space: nowrap;
}
.auto-group-dqdj-qM7 {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 5.2rem 59.6rem 20.25rem 54.15rem;
width: 100%;
.auto-group-pfbj-kiy {
align-items: center;
background-color: #6e9df6;
border-radius: 5rem;
color: #ffffff;
display: flex;
flex-shrink: 0;
font-family: Inter, 'Source Sans Pro';
font-size: 3.2rem;
font-weight: 700;
height: 7.2rem;
justify-content: center;
line-height: 1.2125;
margin: 0rem 0rem 2.65rem 0.05rem;
white-space: nowrap;
width: calc(100% - 0.05rem);
}
.rectangle-12-ksP {
flex-shrink: 0;
height: 10rem;
margin-right: 20.25rem;
object-fit: contain;
vertical-align: top;
width: 10rem;
}
}
}
The program to design, develope and deploy a web application for event registration is completed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent