Git Product home page Git Product logo

figma's Introduction

Ex09 Event Registration Web Application

Date:01/05/2024

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: 363px; height: 640px; position: relative; background: white">
  <img style="width: 402px; height: 640px; left: -28px; top: 0px; position: absolute" src="https://via.placeholder.com/402x640" />
  <img style="width: 116px; height: 116px; left: 14px; top: 75px; position: absolute" src="https://via.placeholder.com/116x116" />
  <img style="width: 278px; height: 208.62px; left: 110.74px; top: 29.82px; position: absolute; transform: rotate(7.47deg); transform-origin: 0 0" src="https://via.placeholder.com/278x209" />
  <div style="width: 120px; height: 26px; left: 22px; top: 273px; position: absolute; color: white; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">NAME </div>
  <div style="width: 167px; height: 22px; left: 109px; top: 273px; position: absolute; background: #07FDA4"></div>
  <div style="width: 93px; height: 15px; left: 144px; top: 278px; position: absolute; color: black; font-size: 10px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">ENTER YOUR NAME</div>
  <div style="width: 99px; height: 28px; left: 22px; top: 320px; position: absolute; color: white; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">REG. NO</div>
  <div style="width: 167px; height: 20px; left: 109px; top: 320px; position: absolute; background: #06FF96"></div>
  <div style="width: 117px; height: 20px; left: 151px; top: 323px; position: absolute; color: black; font-size: 11px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">ENTER REG. NO</div>
  <div style="width: 166px; height: 46px; left: 110px; top: 539px; position: absolute; background: #07FCA4; border-radius: 9999px"></div>
  <div style="width: 111px; height: 21px; left: 155px; top: 549px; position: absolute; color: black; font-size: 20px; font-family: Kyiv*Type Titling; font-weight: 350; word-wrap: break-word">LOGIN...</div>
  <img style="width: 346.67px; height: 52px; left: 8px; top: 13px; position: absolute" src="https://via.placeholder.com/347x52" />
  <img style="width: 39px; height: 39px; left: 315px; top: 594px; position: absolute" src="https://via.placeholder.com/39x39" />
</div>

Page 2

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 351px; height: 640px; left: 4px; top: 0px; position: absolute" src="https://via.placeholder.com/351x640" />
  <img style="width: 346.67px; height: 52px; left: 7px; top: 12px; position: absolute" src="https://via.placeholder.com/347x52" />
  <img style="width: 300px; height: 99.77px; left: 30px; top: 112px; position: absolute" src="https://via.placeholder.com/300x100" />
  <div style="width: 66px; height: 32px; left: 39px; top: 136px; position: absolute; background: #FF5E03"></div>
  <div style="width: 67px; height: 21px; left: 39px; top: 147px; position: absolute; color: white; font-size: 11px; font-family: Kyiv*Type Titling; font-weight: 350; word-wrap: break-word">TECHNICAL</div>
  <div style="width: 61px; height: 31px; left: 255px; top: 149px; position: absolute; background: #73BFB6"></div>
  <div style="width: 72px; height: 20px; left: 255px; top: 151px; position: absolute; color: black; font-size: 10px; font-family: Kyiv*Type Titling; font-weight: 350; word-wrap: break-word">NON-TECHNICAL</div>
  <div style="width: 148px; height: 277px; left: 25px; top: 258px; position: absolute; color: white; font-size: 14px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">TECHNICAL :<br/>
  <br/>>> CODE GALATTA
  <br/>
  <br/>>> ETHICAL HACKING 
  <br/>
  <br/>>> CODE HUNT WITH C
  <br/>
  <br/>>> VIDEO EDITING
  <br/>
  <br/>>> REELS</div>
  <div style="width: 147px; height: 246px; left: 212px; top: 255px; position: absolute; color: white; font-size: 14px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">NON-TECHNICAL 
  <br/>
  <br/>>> GROUP SONG
  <br/>
  <br/>>> DIGITAL ART 
  <br/>
  <br/>>> TREASURE HUNT 
  <br/>
  <br/>>> BIRIYANI COOKING
  <br/>
  <br/>>> SPORTS</div>
  <img style="width: 40px; height: 40px; left: 306px; top: 593px; position: absolute" src="https://via.placeholder.com/40x40" />
</div>

Page 3

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 400px; height: 680px; left: -10px; top: -23px; position: absolute" src="https://via.placeholder.com/400x680" />
  <img style="width: 351.67px; height: 52.75px; left: 5px; top: 13px; position: absolute" src="https://via.placeholder.com/352x53" />
  <div style="width: 345px; height: 40px; left: 11px; top: 116px; position: absolute; color: white; font-size: 20px; font-family: Limelight; font-weight: 400; word-wrap: break-word">FURTHER ADD-ON’S ON THE PATH</div>
  <img style="width: 170px; height: 170px; left: 95px; top: 178px; position: absolute" src="https://via.placeholder.com/170x170" />
  <div style="width: 283px; height: 31px; left: 48px; top: 362px; position: absolute; color: white; font-size: 24px; font-family: Luckiest Guy; font-weight: 400; word-wrap: break-word">ALAN WALKER'S CONCERT
  <br/></div>
  <img style="width: 40px; height: 49.69px; left: 19.33px; top: 399.93px; position: absolute; transform: rotate(-127.83deg); transform-origin: 0 0" src="https://via.placeholder.com/40x50" />
  <img style="width: 45px; height: 45px; left: 331.34px; top: 401.08px; position: absolute; transform: rotate(-127.48deg); transform-origin: 0 0" src="https://via.placeholder.com/45x45" />
  <div style="width: 225px; height: 189px; left: 95px; top: 407px; position: absolute; color: white; font-size: 16px; font-family: Luckiest Guy; font-weight: 400; word-wrap: break-word">>>ALAN'S DJ
  <br/>        
  <br/>>>ALAN SINGING PERFRMANCE
  <br/>
  <br/>>>LASER SHOW
  <br/>
  <br/>>>LIGHT SHOW</div>
  <img style="width: 40px; height: 40px; left: 311px; top: 596px; position: absolute" src="https://via.placeholder.com/40x40" />
  <div style="width: 248px; height: 69px; left: 11px; top: 534px; position: absolute; color: #FFF9F9; font-size: 24px; font-family: Luckiest Guy; font-weight: 400; word-wrap: break-word">BRACE YOURSELF</div>
</div>

Page 4

<div style="width: 360px; height: 640px; position: relative; background: white">
  <img style="width: 399px; height: 671px; left: -20px; top: -10px; position: absolute" src="https://via.placeholder.com/399x671" />
  <img style="width: 130px; height: 130px; left: 115px; top: 88px; position: absolute" src="https://via.placeholder.com/130x130" />
  <img style="width: 108px; height: 108px; left: 215px; top: 232px; position: absolute" src="https://via.placeholder.com/108x108" />
  <div style="width: 194px; height: 31px; left: 55px; top: 270px; position: absolute; color: white; font-size: 20px; font-family: Inter; font-weight: 400; word-wrap: break-word">SCAN AND ---></div>
  <div style="width: 247px; height: 151px; left: 55px; top: 324px; position: absolute; color: white; font-size: 14px; font-family: Inknut Antiqua; font-weight: 400; word-wrap: break-word">RULES :<br/>*ONLY FORMAL DRESS <br/>*NO ILLEGAL ACTIVITIES<br/>*ID CART IS MUST<br/>*MAINTAIN DISCIPLINE</div>
</div>

OUTPUT:

alt text

RESULT:

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

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.