To design, develop and deploy a web application for event registration.
Create a new frame.
Select any one preset size of your choice.
Select the shapes you need.
Import images as needed.
Create pages based on your need and link them.
Validate the HTML and CSS code.
Publish the website in the given URL.
Figma
Page -1 :
<div class="container--0-">
<img
src="data:image/jpeg;base64"
/>
<div class="text-0-1-6">31/12/2024</div>
<div class="text-0-1-7">Free entry</div>
<svg
width="232"
height="50"
viewBox="0 0 232 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.8"
d="M0 30C0 15.8579 0 8.7868 4.3934 4.3934C8.7868 0 15.8579 0 30 0H212C221.428 0 226.142 0 229.071 2.92893C232 5.85786 232 10.5719 232 20C232 34.1421 232 41.2132 227.607 45.6066C223.213 50 216.142 50 202 50H20C10.5719 50 5.85786 50 2.92893 47.0711C0 44.1421 0 39.4281 0 30Z"
fill="black"
fill-opacity="0.2"
></path>
</svg>
<div class="text-0-1-9">Register Now</div>
</div>
Page -2
<div class="container--0-">
<img
src="data:image/jpeg;base64"
/>
<div class="text-0-1-2">Event-registration</div>
<svg
width="277"
height="62"
viewBox="0 0 277 62"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="277"
height="62"
rx="15"
fill="#545456"
fill-opacity="0.34"
></rect></svg
><svg
width="262"
height="55"
viewBox="0 0 262 55"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 15C0 6.71573 6.71573 0 15 0H247C255.284 0 262 6.71573 262 15V40C262 48.2843 255.284 55 247 55H15C6.71573 55 0 48.2843 0 40V15Z"
fill="#3C3C43"
fill-opacity="0.29"
></path></svg
><svg
width="262"
height="53"
viewBox="0 0 262 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="262"
height="53"
rx="15"
fill="#3C3C43"
fill-opacity="0.29"
></rect></svg
><svg
width="262"
height="48"
viewBox="0 0 262 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="262"
height="48"
rx="15"
fill="#3C3C43"
fill-opacity="0.29"
></rect></svg
><svg
width="262"
height="50"
viewBox="0 0 262 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="262"
height="50"
rx="15"
fill="#3C3C43"
fill-opacity="0.29"
></rect>
</svg>
<div class="text-0-1-8">Full Name</div>
<div class="text-0-1-9">Reg no</div>
<div class="text-0-1-10">Mobile no</div>
<div class="text-0-1-11">Department</div>
<div class="text-0-1-12">Year</div>
<svg
width="262"
height="52"
viewBox="0 0 262 52"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="262"
height="52"
rx="15"
fill="#3C3C43"
fill-opacity="0.29"
></rect>
</svg>
<div class="text-0-1-14">Email address</div>
<svg
width="159"
height="42"
viewBox="0 0 159 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 15C0 6.71573 6.71573 0 15 0H143.5C151.784 0 158.5 6.71573 158.5 15V27C158.5 35.2843 151.784 42 143.5 42H15C6.71573 42 0 35.2843 0 27V15Z"
fill="#545456"
fill-opacity="0.34"
></path></svg
><svg
width="159"
height="42"
viewBox="0 0 159 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 15C0 6.71573 6.71573 0 15 0H143.5C151.784 0 158.5 6.71573 158.5 15V27C158.5 35.2843 151.784 42 143.5 42H15C6.71573 42 0 35.2843 0 27V15Z"
fill="#545456"
fill-opacity="0.34"
></path></svg
><svg
width="159"
height="42"
viewBox="0 0 159 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 15C0 6.71573 6.71573 0 15 0H143.5C151.784 0 158.5 6.71573 158.5 15V27C158.5 35.2843 151.784 42 143.5 42H15C6.71573 42 0 35.2843 0 27V15Z"
fill="#4CD14C"
fill-opacity="0.66"
></path>
</svg>
<div class="text-0-1-18">Submit</div>
<svg
width="159"
height="42"
viewBox="0 0 159 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 15C0 6.71573 6.71573 0 15 0H143.5C151.784 0 158.5 6.71573 158.5 15V27C158.5 35.2843 151.784 42 143.5 42H15C6.71573 42 0 35.2843 0 27V15Z"
fill="#E05A5A"
fill-opacity="0.6"
></path>
</svg>
<div class="text-0-1-20">Clear all</div>
</div>
page 3
<div class="container--0-">
<img
src="data:image/jpeg;base64"
/>
<div class="text-0-1-2">what type of art you are interested in</div>
<div class="text-0-1-3">
Painting<br />Sketching<br />Calligraphy<br />Digital Art<br />Sculpting<br />Other
</div>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect></svg
><svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect></svg
><svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect></svg
><svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect></svg
><svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect></svg
><svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect>
</svg>
<div class="text-0-1-10">Do you have any prior experience in art</div>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect></svg
><svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="18" height="18" fill="#999999"></rect>
</svg>
<div class="text-0-1-13">Yes</div>
<div class="text-0-1-14">No</div>
</div>
page -4
<div class="container--0-">
<img
src="data:image/jpeg;base64"
/>
<div class="text-0-1-2">Thank You</div>
<div class="text-0-1-3">
Contact Details : <br />Mobile : +91 8825492139<br />Email :
eventsaveetha@gmail.com<br />Website : events.saveetha.in
</div>
</div>
The program to design, develop and deploy a web application for event registration is completed successfully.