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:

import './Iphone1415ProMax1.css'

export default function Iphone1415ProMax1() {
  return (
    <div className="iphone-1415-pro-max-1">
      <div className="download-2">
      </div>
      <div className="download-1">
      </div>
      <div className="images-1">
      </div>
      <div className="yoga-day-event">
        YOGA DAY EVENT 
      </div>
      <div className="container-2">
        <div className="container">
          <span className="login">
            Login
          </span>
        </div>
        <div className="container-1">
          <span className="register">
            Register
          </span>
        </div>
      </div>
    </div>
  )
}


import './Iphone1415ProMax3.css'

export default function Iphone1415ProMax3() {
  return (
    <div className="iphone-1415-pro-max-3">
      <div className="download-2">
      </div>
      <div className="yoga-day-event">
        YOGA DAY EVENT 
      </div>
      <div className="container-2">
        <span className="meditation">
          MEDITATION
        </span>
      </div>
      <div className="container-4">
        <span className="breathing">
          BREATHING
        </span>
      </div>
      <div className="container">
        <span className="asanas">
          ASANAS
        </span>
      </div>
      <div className="container-1">
        <span className="yogging-jogging">
          YOGGING JOGGING
        </span>
      </div>
      <div className="container-3">
        <span className="yoga-dance">
          YOGA DANCE
        </span>
      </div>
    </div>
  )
}


import './Iphone1415ProMax4.css'

export default function Iphone1415ProMax4() {
  return (
    <div className="iphone-1415-pro-max-4">
      <div className="download-2">
      </div>
      <div className="registrttion-form">
        REGISTRTTION FORM
      </div>
      <div className="container-1">
        <div className="name">
          NAME
        </div>
        <div className="age">
          AGE
        </div>
        <div className="department">
          DEPARTMENT
        </div>
        <div className="email-id">
          E-MAIL ID
        </div>
        <div className="gender">
          GENDER
        </div>
        <div className="register-number">
          REGISTER NUMBER
        </div>
        <span className="mobile-number">
          MOBILE NUMBER
        </span>
      </div>
      <div className="container">
        <span className="register">
          Register
        </span>
      </div>
    </div>
  )
}


import './Iphone1415ProMax5.css'

export default function Iphone1415ProMax5() {
  return (
    <div className="iphone-1415-pro-max-5">
      <div className="download-2">
      </div>
      <div className="container-1">
        <div className="container-2">
          <div className="thank-you">
            THANK YOU
          </div>
          <span className="we-are-all-eagerly-waiting-for-your-participation-in-the-sports-event">
            WE ARE ALL EAGERLY WAITING FOR YOUR PARTICIPATION IN THE SPORTS EVENT
          </span>
        </div>
        <div className="contact-us">
          CONTACT US
        </div>
        <div className="saveethaengineringcollege-gmail-com">
          [email protected]
        </div>
        <div className="phone">
          PHONE
        </div>
        <span className="container">
          9234765458
        </span>
      </div>
      <div className="container">
        <span className="container-1">
          8762344567
        </span>
      </div>
    </div>
  )
}

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 saivinayk2001 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.