Code Monkey home page Code Monkey logo

figma's Introduction

Ex09 Event Registration Web Application

Date:27.12.2023

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:

Home Page
<div style="width: 100%; height: 100%; position: relative; background: #050000">
    <img style="width: 472px; height: 62px; left: 13px; top: 22px; position: absolute" src="https://via.placeholder.com/472x62" />
    <div style="left: 109px; top: 467px; position: absolute; color: white; font-size: 48px; font-family: Inter; font-weight: 400; word-wrap: break-word">Sports Meet </div>
    <div style="width: 297px; height: 75px; left: 103px; top: 629px; position: absolute; background: #00FFF0"></div>
    <div style="left: 155px; top: 638px; position: absolute; color: black; font-size: 48px; font-family: Inter; font-weight: 400; word-wrap: break-word">Register</div>
    <div style="left: 109px; top: 746px; position: absolute; color: white; font-size: 20px; font-family: Inter; font-weight: 400; word-wrap: break-word">For any Enquiry:<br/>Contact : 949498393<br/></div>
    <img style="width: 225px; height: 225px; left: 137px; top: 146px; position: absolute" src="https://via.placeholder.com/225x225" />
    <div style="left: 54px; top: 562px; position: absolute; color: white; font-size: 32px; font-family: Inter; font-weight: 400; word-wrap: break-word">***WELCOME YOU All *** </div>
</div>
// Sports Meet 
color: white;
 font-size: 48px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word
---
// Register
color: black;
 font-size: 48px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word
---
// For any Enquiry:<br/>Contact : 949498393<br/>
color: white;
 font-size: 20px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word
---
// ***WELCOME YOU All *** 
color: white;
 font-size: 32px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word

 Page 2
<div style="width: 100%; height: 100%; position: relative; background: white">
    <img style="width: 525px; height: 1099px; left: -49px; top: -205px; position: absolute" src="https://via.placeholder.com/525x1099" />
    <div style="left: 25px; top: 671px; position: absolute; color: white; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">The management <br/>of saveetha inviting <br/>you all to participate <br/>in sports meet </div>
    <img style="width: 79px; height: 79px; left: 342px; top: 39px; position: absolute" src="https://via.placeholder.com/79x79" />
    <div style="left: 21px; top: 179px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">Sports to participate:<br/>*Cricket<br/>*Table Tennis<br/>*Football<br/>*Kabaddi<br/>*Atheletics<br/>*Basket Ball<br/>*Hockey<br/></div>
    <div style="left: 30px; top: 39px; position: absolute; color: white; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">Welcomes You!!<br/></div>
</div>
// The management <br/>of saveetha inviting <br/>you all to participate <br/>in sports meet 
color: white;
 font-size: 40px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// Sports to participate:<br/>*Cricket<br/>*Table Tennis<br/>*Football<br/>*Kabaddi<br/>*Atheletics<br/>*Basket Ball<br/>*Hockey<br/>
color: black;
 font-size: 40px;
 font-family: Inter;
 font-style: italic;
 font-weight: 700;
 word-wrap: break-word
---
// Welcomes You!!<br/>
color: white;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 700;
 word-wrap: break-word
 Page 3
 <div style="width: 100%; height: 100%; position: relative; background: #0B0000">
    <img style="width: 1200px; height: 1761px; left: -552px; top: -809px; position: absolute" src="https://via.placeholder.com/1200x1761" />
    <div style="left: 50px; top: 89px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">Registration Form</div>
    <div style="left: 30px; top: 171px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">Name</div>
    <div style="width: 197px; height: 48px; left: 205px; top: 171px; position: absolute; background: black"></div>
    <div style="width: 171px; height: 212px; left: 30px; top: 259px; position: absolute; color: black; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">Age<br/><br/>Year<br/><br/>Sports<br/></div>
    <div style="width: 197px; height: 42px; left: 205px; top: 271px; position: absolute; background: black"></div>
    <div style="width: 197px; height: 50px; left: 205px; top: 347px; position: absolute; background: black"></div>
    <div style="width: 197px; height: 39px; left: 205px; top: 457px; position: absolute; background: black"></div>
    <img style="width: 90px; height: 89px; left: 336px; top: 0px; position: absolute" src="https://via.placeholder.com/90x89" />
    <div style="width: 450px; height: 298px; left: 48px; top: 707px; position: absolute"><span style="color: #00FFFF; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">“</span><span style="color: black; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">Champions keep<br/>playing untill they got <br/>they get it right. </span><span style="color: #00FFF0; font-size: 40px; font-family: Inter; font-weight: 800; word-wrap: break-word">“</span></div>
    <div style="width: 295px; height: 56px; left: 58px; top: 557px; position: absolute; background: #09C4FF"></div>
    <div style="left: 144px; top: 565px; position: absolute; color: white; font-size: 32px; font-family: Inter; font-weight: 400; word-wrap: break-word">SUBMIT</div>
</div>
// Registration Form
color: black;
 font-size: 40px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// Name
color: black;
 font-size: 40px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// Age<br/><br/>Year<br/><br/>Sports<br/>
color: black;
 font-size: 40px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// “
color: #00FFFF;
 font-size: 40px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// Champions keep<br/>playing untill they got <br/>they get it right. 
color: black;
 font-size: 40px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// “
color: #00FFF0;
 font-size: 40px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// SUBMIT
color: white;
 font-size: 32px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word

OUTPUT:

Alt text

RESULT:

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

figma's People

Contributors

selvasachein avatar kishanshreeb avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.