Code Monkey home page Code Monkey 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:

Home Page

<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: 360px; height: 640px; left: 0px; top: 0px; position: absolute; background: rgba(0, 0, 0, 0.40)"></div>
    <div style="width: 360px; height: 59px; left: 0px; top: 9px; position: absolute; background: #FEF7F7"></div>
    <img style="width: 347px; height: 48px; left: 6px; top: 14px; position: absolute" src="https://via.placeholder.com/347x48" />
    <div style="width: 193px; height: 159px; left: 83px; top: 171px; position: absolute; text-align: center; color: #18E9DC; font-size: 44px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">TECNO FEST 2K23</div>
    <div style="width: 227px; height: 54px; left: 69px; top: 391px; position: absolute; background: #DA2C6B; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: 2px black solid"></div>
    <div style="width: 227px; height: 54px; left: 69px; top: 498px; position: absolute; background: #18E9E9; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: 2px black solid"></div>
    <div style="width: 204px; height: 35px; left: 79px; top: 402px; position: absolute; text-align: center; color: white; font-size: 29px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">LOGIN</div>
    <div style="width: 204px; height: 35px; left: 78px; top: 507px; position: absolute; text-align: center; color: white; font-size: 29px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">REGISTER</div>
</div>

// TECNO FEST 2K23
color: #18E9DC;
 font-size: 44px;
 font-family: Irish Grover;
 font-weight: 400;
 word-wrap: break-word
---
// LOGIN
color: white;
 font-size: 29px;
 font-family: Lakki Reddy;
 font-weight: 400;
 word-wrap: break-word
---
// REGISTER
color: white;
 font-size: 29px;
 font-family: Lakki Reddy;
 font-weight: 400;
 word-wrap: break-word

 Registration Page

 <div style="width: 100%; height: 100%; position: relative; background: white">
    <img style="width: 889px; height: 640px; left: -14px; top: 0px; position: absolute" src="https://via.placeholder.com/889x640" />
    <div style="width: 360px; height: 640px; left: 0px; top: 0px; position: absolute; background: rgba(2.18, 2.15, 2.15, 0.65)"></div>
    <div style="width: 360px; height: 57px; left: 0px; top: 9px; position: absolute; background: #FFFEFE"></div>
    <img style="width: 347px; height: 48px; left: 6px; top: 13px; position: absolute" src="https://via.placeholder.com/347x48" />
    <div style="width: 318px; height: 40px; left: 20px; top: 98px; position: absolute; color: white; font-size: 32px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word">EVENT REGISTRATION</div>
    <div style="width: 273px; height: 31px; left: 42px; top: 165px; position: absolute; background: white"></div>
    <div style="width: 273px; height: 31px; left: 42px; top: 214px; position: absolute; background: white"></div>
    <div style="width: 273px; height: 31px; left: 42px; top: 263px; position: absolute; background: white"></div>
    <div style="width: 273px; height: 31px; left: 42px; top: 312px; position: absolute; background: white"></div>
    <div style="width: 273px; height: 31px; left: 42px; top: 361px; position: absolute; background: white"></div>
    <div style="width: 273px; height: 31px; left: 42px; top: 410px; position: absolute; background: white"></div>
    <div style="width: 273px; height: 31px; left: 42px; top: 459px; position: absolute; background: white"></div>
    <div style="width: 180px; height: 20px; left: 53px; top: 173px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Full Name</div>
    <div style="width: 180px; height: 20px; left: 53px; top: 219px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Register no</div>
    <div style="width: 180px; height: 20px; left: 53px; top: 269px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Gender</div>
    <div style="width: 180px; height: 20px; left: 53px; top: 320px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Department</div>
    <div style="width: 180px; height: 20px; left: 53px; top: 367px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Mobile</div>
    <div style="width: 180px; height: 20px; left: 53px; top: 419px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Email ID</div>
    <div style="width: 180px; height: 20px; left: 53px; top: 467px; position: absolute; color: black; font-size: 13px; font-family: Imprima; font-weight: 400; word-wrap: break-word">Event to register</div>
    <div style="width: 227px; height: 54px; left: 66px; top: 527px; position: absolute; background: #84D037; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: 2px black solid"></div>
    <div style="width: 204px; height: 35px; left: 77px; top: 538px; position: absolute; text-align: center; color: white; font-size: 29px; font-family: Lakki Reddy; font-weight: 400; word-wrap: break-word">SUBMIT</div>
</div>

// EVENT REGISTRATION
color: white;
 font-size: 32px;
 font-family: Irish Grover;
 font-weight: 400;
 word-wrap: break-word
---
// Full Name
color: black;
 font-size: 13px;
 font-family: Imprima;
 font-weight: 400;
 word-wrap: break-word
---
// Register no
color: black;
 font-size: 13px;
 font-family: Imprima;
 font-weight: 400;
 word-wrap: break-word
---
// Gender
color: black;
 font-size: 13px;
 font-family: Imprima;
 font-weight: 400;
 word-wrap: break-word
---
// Department
color: black;
 font-size: 13px;
 font-family: Imprima;
 font-weight: 400;
 word-wrap: break-word
---
// Mobile
color: black;
 font-size: 13px;
 font-family: Imprima;
 font-weight: 400;
 word-wrap: break-word
---
// Email ID
color: black;
 font-size: 13px;
 font-family: Imprima;
 font-weight: 400;
 word-wrap: break-word
---
// Event to register
color: black;
 font-size: 13px;
 font-family: Imprima;
 font-weight: 400;
 word-wrap: break-word
---
// SUBMIT
color: white;
 font-size: 29px;
 font-family: Lakki Reddy;
 font-weight: 400;
 word-wrap: break-word

 Thank you Page

 <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: 360px; height: 640px; left: 0px; top: 0px; position: absolute; background: rgba(8.31, 8.31, 8.31, 0.65)"></div>
    <div style="width: 360px; height: 57px; left: 0px; top: 9px; position: absolute; background: #FFFEFE"></div>
    <img style="width: 347px; height: 48px; left: 2px; top: 13px; position: absolute" src="https://via.placeholder.com/347x48" />
    <div style="width: 252px; height: 169px; left: 54px; top: 182px; position: absolute; text-align: center"><span style="color: #B3E918; font-size: 38px; font-family: Lilita One; font-weight: 400; word-wrap: break-word">THANK YOU FOR REGISTERING.<br/></span><span style="color: #15DDE9; font-size: 38px; font-family: Irish Grover; font-weight: 400; word-wrap: break-word"><br/> </span><span style="color: #15DDE9; font-size: 38px; font-family: Kaushan Script; font-weight: 400; word-wrap: break-word">We’re Excited to have you On Board.</span></div>
</div>

// THANK YOU FOR REGISTERING.<br/>
color: #B3E918;
 font-size: 38px;
 font-family: Lilita One;
 font-weight: 400;
 word-wrap: break-word
---
// <br/> 
color: #15DDE9;
 font-size: 38px;
 font-family: Irish Grover;
 font-weight: 400;
 word-wrap: break-word
---
// We’re Excited to have you On Board.
color: #15DDE9;
 font-size: 38px;
 font-family: Kaushan Script;
 font-weight: 400;
 word-wrap: break-word

OUTPUT:

Screenshot 2024-04-26 112322 out3 out4

RESULT:

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

figma's People

Contributors

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