Skip to content
BranchesTags
 
 

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
README.md
README.md
 
 

Repository files navigation

Ex09 Event Registration Web Application

Date:20.05.2025

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:

PAGE 1#
<div class="container--0-">
  <svg
    width="319"
    height="69"
    viewBox="0 0 319 69"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect y="0.0644531" width="319" height="68" fill="#FF12A0"></rect></svg
  ><svg
    width="319"
    height="73"
    viewBox="0 0 319 73"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="319" height="73" fill="#FF12A0"></rect>
  </svg>
  <div class="text-0-1-3">REGISTER</div>
  <div class="text-0-1-4">LOGIN</div>
  <img
    src="img.png"
  />
  <div class="text-0-1-9">EVENTS REGISTRATION FORM</div>
  <svg
    width="165"
    height="28"
    viewBox="0 0 165 28"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="165" height="28" fill="#FF0A5F"></rect></svg
  ><svg
    width="162"
    height="26"
    viewBox="0 0 162 26"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M0 0H162V26H0V0Z" fill="#FF0A5F"></path>
  </svg>
  <div class="text-0-1-15">DEPARTMENT</div>
  <svg
    width="150"
    height="28"
    viewBox="0 0 150 28"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="150" height="28" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-17">EMAIL ID</div>
  <svg
    width="130"
    height="28"
    viewBox="0 0 130 28"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="130" height="28" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-22">NAME</div>
  <div class="text-0-1-23">REGISTER NUMBER</div>
  <svg
    width="141"
    height="26"
    viewBox="0 0 141 26"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="141" height="26" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-25">MOBILE NUMBER</div>
  <svg
    width="195"
    height="22"
    viewBox="0 0 195 22"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="195" height="22" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-27">EVENTS TO REGISTER</div>
  <svg
    width="171"
    height="47"
    viewBox="0 0 171 47"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="171" height="47" fill="#FF0000"></rect>
  </svg>
  <div class="text-0-1-29">REGISTER</div>
</div>
<div class="container--0-">
  <img
    src="image.png"
  />
  <div class="text-0-1-2">THANK YOU</div>
  <div class="text-0-1-3">
    We are eagerly waiting for your participation in the sports events!
  </div>
  <div class="text-0-1-4">
    Contact us :<br />
    E-mail <br />saveethaengineeringcollege@gmail.com<br />
    phone<br />91-9067423415<br />91-8148103438
  </div>
</div>


PAGE 2#

<div class="container--0-">
  <div class="text-0-1-1">
    Cricket <br /><br />Kho-Kho<br /><br />Volley Ball<br /><br />Throw Ball<br /><br />100
    mts<br /><br />4-100 Relay<br /><br />Foot BALL<br />
  </div>
  <img
    src="img1.png"
  />
  <div class="text-0-1-5">SPORTS DAY EVENTS</div>
</div>


PAGE 3#

<div class="container--0-">
  <div class="text-0-1-4">MO</div>
  <img
    src="img2.png"
  />
  <div class="text-0-1-9">EVENTS REGISTRATION FORM</div>
  <svg
    width="165"
    height="28"
    viewBox="0 0 165 28"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="165" height="28" fill="#FF0A5F"></rect></svg
  ><svg
    width="162"
    height="26"
    viewBox="0 0 162 26"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M0 0H162V26H0V0Z" fill="#FF0A5F"></path>
  </svg>
  <div class="text-0-1-15">DEPARTMENT</div>
  <svg
    width="150"
    height="28"
    viewBox="0 0 150 28"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="150" height="28" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-17">EMAIL ID</div>
  <svg
    width="130"
    height="28"
    viewBox="0 0 130 28"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="130" height="28" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-22">NAME</div>
  <div class="text-0-1-23">REGISTER NUMBER</div>
  <svg
    width="141"
    height="26"
    viewBox="0 0 141 26"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="141" height="26" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-25">MOBILE NUMBER</div>
  <svg
    width="195"
    height="22"
    viewBox="0 0 195 22"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="195" height="22" fill="#FF0A5F"></rect>
  </svg>
  <div class="text-0-1-27">EVENTS TO REGISTER</div>
  <svg
    width="171"
    height="47"
    viewBox="0 0 171 47"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="171" height="47" fill="#FF0000"></rect>
  </svg>
  <div class="text-0-1-29">REGISTER</div>
</div>


PAGE 4#

<div class="container--0-">
  <img
    src="img3.png"
  />
  <div class="text-0-1-2">THANK YOU</div>
  <div class="text-0-1-3">
    We are eagerly waiting for your participation in the sports events!
  </div>
  <div class="text-0-1-4">
    Contact us :<br />
    E-mail <br />saveethaengineeringcollege@gmail.com<br />
    phone<br />91-9067423415<br />91-8148103438
  </div>
</div>

// STYLE.CSS

PAGE 1 #

.container--0- {
  position: absolute;
  left: -465px;
  top: 85px;
  width: 448px;
  height: 751px;
  background-color: #000000;
  justify-content: start;
  align-items: start;
}
.text-0-1-3 {
  width: 160px;
  height: 49px;
  color: #000000;
  font-size: 32px;
  font-family: Inter, "Semi Bold";
  font-weight: 600;
  text-align: left;
  vertical-align: top;
}
.text-0-1-4 {
  width: 126px;
  height: 39px;
  color: #000000;
  font-size: 32px;
  font-family: Inter, "Semi Bold";
  font-weight: 600;
  text-align: left;
  vertical-align: top;
}


PAGE 2#

.container--0- {
  position: absolute;
  left: 26px;
  top: 91px;
  width: 417px;
  height: 754px;
  background-color: #ea95ad;
  justify-content: start;
  align-items: start;
}
.text-0-1-1 {
  width: 303px;
  height: 349px;
  color: #850002;
  font-size: 24px;
  font-family: Inter, "Extra Bold";
  font-weight: 800;
  text-align: left;
  vertical-align: top;
}
.text-0-1-5 {
  width: 380px;
  height: 39px;
  color: #7913f6;
  font-size: 32px;
  font-family: Inter, "Extra Bold";
  font-weight: 800;
  text-align: left;
  vertical-align: top;
}

PAGE 3#

.container--0- {
  position: absolute;
  left: 486px;
  top: 97px;
  width: 399px;
  height: 748px;
  background-color: #0900b3;
  justify-content: start;
  align-items: start;
}
.text-0-1-1 {
  width: 63px;
  height: 17px;
  color: #000000;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-2 {
  width: 33px;
  height: 18px;
  color: #000000;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-3 {
  width: 127px;
  height: 18px;
  color: #eae200;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-4 {
  width: 26px;
  height: 18px;
  color: #ffffff;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-5 {
  width: 168px;
  height: 18px;
  color: #000000;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-9 {
  width: 237px;
  height: 123px;
  color: #000000;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-15 {
  width: 135px;
  height: 18px;
  color: #eae200;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-17 {
  width: 67px;
  height: 18px;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-22 {
  width: 47px;
  height: 18px;
  color: #eae200;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-23 {
  width: 147px;
  height: 18px;
  color: #eae200;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-25 {
  width: 127px;
  height: 18px;
  color: #eae200;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-27 {
  width: 424px;
  height: 18px;
  color: #eae200;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-29 {
  width: 76px;
  height: 18px;
  color: #000000;
  font-size: 15px;
  font-family: Inter, "Black Italic";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}


PAGE 4#

.container--0- {
  position: absolute;
  left: 924px;
  top: 97px;
  width: 461px;
  height: 744px;
  background-color: #fef60fb2;
  justify-content: start;
  align-items: start;
}
.text-0-1-2 {
  width: 220px;
  height: 44px;
  color: #000000;
  font-size: 36px;
  font-family: Inter, "Black";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-3 {
  width: 305px;
  height: 72px;
  color: #183498;
  font-size: 20px;
  font-family: Inter, "Black";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}
.text-0-1-4 {
  width: 402px;
  height: 108px;
  font-size: 15px;
  font-family: Inter, "Black";
  font-weight: 900;
  text-align: left;
  vertical-align: top;
}

OUTPUT:

Screenshot 2025-05-20 082741

RESULT:

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

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors