Giter VIP home page Giter VIP logo

figma's Introduction

Ex09 Ev.ent Registration Web Application

Date:10/05/24

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:

<div style="width: 100%; height: 100%; position: relative; background: rgba(242.87, 116.38, 192.28, 0.63)">
    <img style="width: 360px; height: 51px; left: 0px; top: 14px; position: absolute" src="https://via.placeholder.com/360x51" />
    <div style="left: 36px; top: 109px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">CORDIALLY INVITE YOU TO THE</div>
    <div style="width: 253px; height: 38px; left: 19px; top: 139px; position: absolute; text-align: right; color: black; font-size: 16px; font-family: Inter; font-style: italic; font-weight: 700; word-wrap: break-word">DEVELOPMENT DIALOGUE ON</div>
    <div style="left: 72px; top: 198px; position: absolute; text-align: right; color: #2517C5; font-size: 16px; font-family: Inter; font-weight: 800; word-wrap: break-word">AMRIT KAAL VIMARSH</div>
    <div style="left: 30px; top: 297px; position: absolute; text-align: right; color: black; font-size: 16px; font-family: Inter; font-weight: 900; word-wrap: break-word">Importance of Industry - Institute</div>
    <div style="left: 30px; top: 341px; position: absolute; text-align: right; color: black; font-size: 16px; font-family: Inter; font-weight: 900; word-wrap: break-word">Interaction for Viksit Bharat @ 2047 </div>
    <div style="width: 337px; height: 42px; left: -18px; top: 238px; position: absolute; text-align: right; color: #D8104C; font-size: 24px; font-family: Inter; font-style: italic; font-weight: 900; word-wrap: break-word">VIKSIT BHARAT @ 2047</div>
    <img style="width: 292px; height: 248px; left: 37px; top: 400px; position: absolute" src="https://via.placeholder.com/292x248" />
</div>

// CORDIALLY INVITE YOU TO THE
color: black;
 font-size: 16px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word
---
// DEVELOPMENT DIALOGUE ON
color: black;
 font-size: 16px;
 font-family: Inter;
 font-style: italic;
 font-weight: 700;
 word-wrap: break-word
---
// AMRIT KAAL VIMARSH
color: #2517C5;
 font-size: 16px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// Importance of Industry - Institute
color: black;
 font-size: 16px;
 font-family: Inter;
 font-weight: 900;
 word-wrap: break-word
---
// Interaction for Viksit Bharat @ 2047 
color: black;
 font-size: 16px;
 font-family: Inter;
 font-weight: 900;
 word-wrap: break-word
---
// VIKSIT BHARAT @ 2047
color: #D8104C;
 font-size: 24px;
 font-family: Inter;
 font-style: italic;
 font-weight: 900;
 word-wrap: break-word



<div style="width: 100%; height: 100%; position: relative; background: #A883F7">
    <img style="width: 331px; height: 50px; left: 8px; top: 15px; position: absolute" src="https://via.placeholder.com/331x50" />
    <div style="left: 28px; top: 104px; position: absolute; color: #141010; font-size: 36px; font-family: Inter; font-weight: 400; word-wrap: break-word">ON 27th DEC</div>
    <div style="left: 28px; top: 139px; position: absolute; color: #0525D1; font-size: 36px; font-family: Inter; font-weight: 400; word-wrap: break-word">10 AM</div>
    <div style="width: 136px; height: 41px; left: 22px; top: 189px; position: absolute; color: #F60B19; font-size: 36px; font-family: Inter; font-weight: 800; word-wrap: break-word">VENUE:<br/></div>
    <div style="left: 23px; top: 236px; position: absolute; color: #20D3EB; font-size: 36px; font-family: Inter; font-weight: 800; word-wrap: break-word">Kurunji Hall,SMC</div>
    <div style="left: 32px; top: 470px; position: absolute; color: white; font-size: 36px; font-family: Inter; font-style: italic; font-weight: 200; word-wrap: break-word">Let’s create a</div>
    <div style="width: 317px; height: 115px; left: 32px; top: 546px; position: absolute; color: black; font-size: 36px; font-family: Inter; font-style: italic; font-weight: 500; word-wrap: break-word">THRIVING AND SUSTAINABLE ECONOMY</div>
    <div style="width: 249px; height: 24px; left: 32px; top: 347px; position: absolute; color: black; font-size: 36px; font-family: Inter; font-weight: 900; word-wrap: break-word">ideasfor ViksitBharat</div>
</div>

// ON 27th DEC
color: #141010;
 font-size: 36px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word
---
// 10 AM
color: #0525D1;
 font-size: 36px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word
---
// VENUE:<br/>
color: #F60B19;
 font-size: 36px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// Kurunji Hall,SMC
color: #20D3EB;
 font-size: 36px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// Let’s create a
color: white;
 font-size: 36px;
 font-family: Inter;
 font-style: italic;
 font-weight: 200;
 word-wrap: break-word
---
// THRIVING AND SUSTAINABLE ECONOMY
color: black;
 font-size: 36px;
 font-family: Inter;
 font-style: italic;
 font-weight: 500;
 word-wrap: break-word
---
// ideasfor ViksitBharat
color: black;
 font-size: 36px;
 font-family: Inter;
 font-weight: 900;
 word-wrap: break-word


<div style="width: 100%; height: 100%; position: relative; background: #7DEDF5">
    <div style="width: 224px; height: 27px; left: 56px; top: 356px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 800; word-wrap: break-word">FOR REGISTRATION:<br/></div>
    <div style="left: 31px; top: 438px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 800; word-wrap: break-word">NAME:</div>
    <div style="left: 31px; top: 494px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 800; word-wrap: break-word">E-MAIL:</div>
    <div style="left: 31px; top: 550px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 800; word-wrap: break-word">DOB:</div>
    <div style="left: 31px; top: 606px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 800; word-wrap: break-word">ADDRESS:</div>
    <div style="left: 31px; top: 662px; position: absolute; color: black; font-size: 20px; font-family: Inter; font-weight: 800; word-wrap: break-word">PHONE NO:</div>
    <img style="width: 330px; height: 50px; left: 14px; top: 6px; position: absolute" src="https://via.placeholder.com/330x50" />
    <div style="width: 220px; height: 30px; left: 47px; top: 88px; position: absolute; color: black; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">QR CODE:</div>
    <img style="width: 154px; height: 148px; left: 80px; top: 132px; position: absolute" src="https://via.placeholder.com/154x148" />
</div>

// FOR REGISTRATION:<br/>
color: black;
 font-size: 20px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// NAME:
color: black;
 font-size: 20px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// E-MAIL:
color: black;
 font-size: 20px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// DOB:
color: black;
 font-size: 20px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// ADDRESS:
color: black;
 font-size: 20px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// PHONE NO:
color: black;
 font-size: 20px;
 font-family: Inter;
 font-weight: 800;
 word-wrap: break-word
---
// QR CODE:
color: black;
 font-size: 16px;
 font-family: Inter;
 font-weight: 400;
 word-wrap: break-word

OUTPUT:

Screenshot 2023-12-28 202654

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.