Coder Social home page Coder Social logo

figma's Introduction

Ex09 Event Registration Web Application

Date:

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 style="width: 100%; height: 100%; position: relative; background: #C7358D">
    <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
    <img style="width: 336px; height: 50px; left: 24px; top: 29px; position: absolute" src="https://via.placeholder.com/336x50" />
    <img style="width: 205px; height: 202px; left: 75px; top: 101px; position: absolute" src="https://via.placeholder.com/205x202" />
    <div style="left: 43px; top: 320px; position: absolute; color: black; font-size: 48px; font-family: Kaushan Script; font-weight: 400; word-wrap: break-word">FIFA FEST</div>
    <div style="width: 184px; height: 54px; left: 73px; top: 501px; position: absolute; background: rgba(236.92, 229.46, 50.35, 0.97)"></div>
    <div style="left: 106px; top: 508px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">LOGIN</div>
    <div style="width: 188px; height: 51px; left: 71px; top: 571px; position: absolute; background: #D8D00D"></div>
    <div style="left: 87px; top: 583px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">REGISTER</div>
</div>

// FIFA FEST
color: black;
 font-size: 48px;
 font-family: Kaushan Script;
 font-weight: 400;
 word-wrap: break-word
---
// LOGIN
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// REGISTER
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 900;
 word-wrap: break-word


 Page 2:

 <div style="width: 100%; height: 100%; position: relative; background: #30E0E0">
    <div style="width: 190px; height: 41px; left: 68px; top: 378px; position: absolute; background: #D9D9D9"></div>
    <img style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute" src="https://via.placeholder.com/360x640" />
    <div style="width: 218px; height: 67px; left: 32px; top: 10px; position: absolute; background: #E4F14D"></div>
    <div style="width: 240px; height: 68px; left: 45px; top: 24px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">CATEGORIES</div>
    <div style="width: 25px; height: 6px; left: 88px; top: 37px; position: absolute"></div>
    <div style="width: 282px; height: 44px; left: 32px; top: 265px; position: absolute; background: #E4F14D"></div>
    <div style="left: 78px; top: 270px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">*JUNIOR(5)</div>
    <div style="width: 278px; height: 38px; left: 32px; top: 359px; position: absolute; background: #E4F14D"></div>
    <div style="left: 78px; top: 360px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">*SENIOR(7)</div>
    <div style="width: 328px; height: 39px; left: 32px; top: 449px; position: absolute; background: #E4F14D"></div>
    <div style="width: 276.99px; height: 39.08px; left: 63.01px; top: 448.92px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">*SUPER SENIOR</div>
    <div style="width: 152px; height: 61px; left: 28px; top: 190px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 32px; top: 191px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">SELECT:</div>
</div>

// CATEGORIES
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// *JUNIOR(5)
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// *SENIOR(7)
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// *SUPER SENIOR
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// SELECT:
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word


 Page 3:
 <div style="width: 100%; height: 100%; position: relative; background: white">
    <img style="width: 342px; height: 648px; left: -17px; top: -21px; position: absolute" src="https://via.placeholder.com/342x648" />
    <div style="width: 257px; height: 52px; left: 27px; top: 81px; position: absolute; background: #D8D00D"></div>
    <div style="width: 213px; height: 47px; left: 49px; top: 88px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">REGISTRATION FORM</div>
    <div style="width: 202px; height: 22px; left: 53px; top: 141px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 72px; top: 144px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">YOUR DETAILS HERE</div>
    <div style="width: 211px; height: 32px; left: 51px; top: 210px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 113px; top: 217px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">NAME :</div>
    <div style="width: 196px; height: 28px; left: 59px; top: 269px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 113px; top: 277px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">GENDER :</div>
    <div style="width: 201px; height: 31px; left: 59px; top: 324px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 118px; top: 330px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">DOB</div>
    <div style="width: 201px; height: 31px; left: 61px; top: 382px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 109px; top: 385px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">MOBILE NO :</div>
    <div style="width: 200px; height: 38px; left: 61px; top: 440px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 113px; top: 449px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">EMAIL ID :</div>
    <div style="left: 154px; top: 329px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">/AGE :</div>
    <div style="width: 194px; height: 35px; left: 66px; top: 496px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 88px; top: 504px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">EVENT CATEGORY :</div>
    <div style="width: 190px; height: 55px; left: 70px; top: 549px; position: absolute; background: rgba(236.92, 229.46, 50.35, 0.97)"></div>
    <div style="left: 88px; top: 561px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">REGISTER</div>
</div>

// REGISTRATION FORM
color: black;
 font-size: 20px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// YOUR DETAILS HERE
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// NAME :
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// GENDER :
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// DOB
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// MOBILE NO :
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// EMAIL ID :
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// /AGE :
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// EVENT CATEGORY :
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// REGISTER
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word

 page 4:

 <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: 221px; height: 58px; left: 82px; top: 267px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 96px; top: 281px; position: absolute; color: black; font-size: 32px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">THANK YOU</div>
    <div style="width: 276px; height: 103px; left: 36px; top: 383px; position: absolute; background: #D9D9D9"></div>
    <div style="width: 230px; left: 51px; top: 399px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">EAGERLY WAITING FOR YOU PARTICIPATION GUYS</div>
    <div style="width: 313px; height: 43px; left: 47px; top: 532px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 51px; top: 542px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">[email protected]</div>
    <div style="width: 266px; height: 48px; left: 60px; top: 587px; position: absolute; background: #D9D9D9"></div>
    <div style="left: 85px; top: 587px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">contact : 9042254678<br/>phone : 9443628879</div>
    <img style="width: 336px; height: 50px; left: 24px; top: 10px; position: absolute" src="https://via.placeholder.com/336x50" />
</div>

// THANK YOU
color: black;
 font-size: 32px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// EAGERLY WAITING FOR YOU PARTICIPATION GUYS
color: black;
 font-size: 20px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// [email protected]
color: black;
 font-size: 20px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// contact : 9042254678<br/>phone : 9443628879
color: black;
 font-size: 20px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word

OUTPUT:

image

RESULT:

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

figma's People

Contributors

selvasachein avatar hamza9559 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.