Scribd
Upload
28 views5 pages

Task 2

The document is an HTML page for a volunteer registration form for 'Save The Bay'. It includes a styled layout with a header, a brief description, and a form for users to input their name, email, and reasons for volunteering. The form is designed to be user-friendly with responsive elements and a visually appealing interface.

Uploaded by

priya31patil0504
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views5 pages

Task 2

The document is an HTML page for a volunteer registration form for 'Save The Bay'. It includes a styled layout with a header, a brief description, and a form for users to input their name, email, and reasons for volunteering. The form is designed to be user-friendly with responsive elements and a visually appealing interface.

Uploaded by

priya31patil0504
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!-- volunteer.

html -->

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Volunteer with Us</title>

<style>

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

display: flex;
flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

background: #e0f7fa;

h1 {

margin-bottom: 10px;

p{

margin-bottom: 20px;

text-align: center;

max-width: 400px;

form {

background: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

width: 300px;

input, textarea, button {

width: 100%;

margin-bottom: 15px;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

button {
background: #00796b;

color: #fff;

border: none;

cursor: pointer;

button:hover {

background: #004d40;

</style>

</head>

<body>

<h1>Volunteer with Us</h1>

<p>Fill out the form below to register your interest in volunteering with
Save The Bay.</p>

<form>

<input type="text" name="name" placeholder="Your Full Name"


required>

<input type="email" name="email" placeholder="Your Email"


required>

<textarea name="interest" placeholder="Why do you want to


volunteer?" rows="4" required></textarea>

<button type="submit">Submit</button>

</form>

</body>

</html>

/* style.css */

body {

margin: 0;
padding: 0;

font-family: Arial, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

background: #e0f7fa;

h1 {

margin-bottom: 10px;

p{

margin-bottom: 20px;

text-align: center;

max-width: 400px;

form {

background: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

width: 300px;

input, textarea, button {


width: 100%;

margin-bottom: 15px;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

button {

background: #00796b;

color: #fff;

border: none;

cursor: pointer;

button:hover {

background: #004d40;

You might also like