Git Product home page Git Product logo

figma's Introduction

Ex09 Event Registration Web Application

Date:24-04-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:

NAME:KISHORE.B
REF.NO:212222110020

Home page
<div style="width: 100%; height: 100%; padding-top: 11px; padding-bottom: 579px; padding-left: 13px; padding-right: 13.67px; background-image: url(https://via.placeholder.com/360x640); flex-direction: column; justify-content: flex-start; align-items: center; display: inline-flex">
    <img style="width: 333.33px; height: 50px" src="https://via.placeholder.com/333x50" />
</div>


// No text styles in this selection

page2


<div style="width: 100%; height: 100%; position: relative; background-image: url(https://via.placeholder.com/360x628)">
    <div style="width: 138px; height: 31px; left: 108px; top: 95px; position: absolute; text-align: center; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">ARTS  EVENTS</div>
    <div style="width: 236px; height: 325px; left: 67px; top: 167px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">               ARCHITECTURE<br/> <br/>               CERAMICS    <br/><br/>               DRAWING<br/><br/>               FILMMAKING<br/><br/>               PAINTING<br/><br/>               PHOTOGRAPHY<br/><br/>               SCULPTING<br/><br/><br/><br/><br/></div>
</div>


// ARTS  EVENTS
color: black;
 font-size: 20px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
//                ARCHITECTURE<br/> <br/>               CERAMICS    <br/><br/>               DRAWING<br/><br/>               FILMMAKING<br/><br/>               PAINTING<br/><br/>               PHOTOGRAPHY<br/><br/>               SCULPTING<br/><br/><br/><br/><br/>
color: black;
 font-size: 15px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word


 page3


 <div style="width: 100%; height: 100%; position: relative; background-image: url(https://via.placeholder.com/360x640)">
    <div style="width: 218px; height: 298px; left: -319px; top: 208px; position: absolute; color: black; font-size: 15px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">         ARCHITECTURE<br/>       <br/>         CERAMICS<br/> <br/>         DRAWING<br/><br/>         FILMMMAKING<br/><br/>         PAINTING<br/><br/>        PHOTOGRAPHY<br/><br/>        SCULPTING<br/>     <br/>         <br/><br/>   <br/>    <br/></div>
    <div style="width: 249px; height: 42px; left: 44px; top: 34px; position: absolute; background: #F5F5F5"></div>
    <div style="width: 260px; height: 40px; left: 42px; top: 45px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">   EVENT  REGISTRATION  FORM  </div>
    <div style="width: 268px; height: 47px; left: 42px; top: 126px; position: absolute; background: #F5F5F5"></div>
    <div style="width: 269px; height: 47px; left: 46px; top: 140px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">ARTIST  NAME</div>
    <div style="width: 267px; height: 49px; left: 42px; top: 202px; position: absolute; background: #F5F5F5"></div>
    <div style="width: 278px; height: 47px; left: 37px; top: 286px; position: absolute; background: #F5F5F5"></div>
    <div style="width: 278px; height: 52px; left: 37px; top: 424px; position: absolute; background: #F5F5F5"></div>
    <div style="width: 269px; height: 51px; left: 40px; top: 215px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">PHONE NUMBER</div>
    <div style="width: 274px; height: 40px; left: 41px; top: 298px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">EMAIL ADDRESS</div>
    <div style="width: 278px; height: 51px; left: 37px; top: 390px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">CHOOSE EVENT</div>
    <div style="width: 278px; height: 50px; left: 36px; top: 461px; position: absolute; background: #F5F5F5"></div>
    <div style="width: 279px; height: 48px; left: 35px; top: 475px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">DEPARTMENT</div>
    <div style="width: 163px; height: 41px; left: 90px; top: 543px; position: absolute; background: #F5F5F5"></div>
    <div style="width: 162px; height: 39px; left: 91px; top: 552px; position: absolute; text-align: center; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word">SUBMIT</div>
</div>

//          ARCHITECTURE<br/>       <br/>         CERAMICS<br/> <br/>         DRAWING<br/><br/>         FILMMMAKING<br/><br/>         PAINTING<br/><br/>        PHOTOGRAPHY<br/><br/>        SCULPTING<br/>     <br/>         <br/><br/>   <br/>    <br/>
color: black;
 font-size: 15px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
//    EVENT  REGISTRATION  FORM  
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// ARTIST  NAME
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// PHONE NUMBER
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// EMAIL ADDRESS
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// CHOOSE EVENT
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// DEPARTMENT
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word
---
// SUBMIT
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 800;
 word-wrap: break-word

 Page 4

<div style="width: 100%; height: 100%; color: black; font-size: 20px; font-family: Inter; font-style: italic; font-weight: 800; word-wrap: break-word"><br/><br/><br/><br/>                       <br/>                  <br/>                   <br/>                     CONTACT US<br/>       <br/>         WWW.ARTISTMELA.COM<br/>       [email protected]<br/><br/><br/></div>


// <br/><br/><br/><br/>                       <br/>                  <br/>                   <br/>                     CONTACT US<br/>       <br/>         WWW.ARTISTMELA.COM<br/>       [email protected]<br/><br/><br/>
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

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