1.
create any three layouts (fixed,fluid and responisve)
1.1 Fixed Layout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
}
.header {
text-align: center;
background-color: red;
padding: 20px;
color: white;
}
.main {
padding: 20px;
background-color: lightcoral;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>My Website</h1>
</div>
<div class="main">
<h2>Fixed Layout</h2>
<p>This is a fixed layout example.</p>
</div>
</div>
</body>
</html>
1. 2fluid Layout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
margin-left:10%;
margin-right: 10%;
}
.header {
text-align: center;
background-color: red; /* Updated background color to red as per your requirement */
padding: 20px;
color: white; /* Adding text color for better visibility */
}
.main {
padding: 20px;
background-color: lightcoral; /* Changed to a reddish color as requested */
color: white; /* Adding text color for better visibility */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>My Website</h1>
</div>
<div class="main">
<h2>Fixed Layout</h2>
<p>This is a fixed layout example.</p>
</div>
</div>
</body>
</html>
1.3 responsive Layout
<!DOCTYPE HTML>
<html>
<head>
<style>
*{
box-sizing: border-box;
}
.wrapper {
width:100%;
margin:auto;
}
.header {
text-align: center;
background-color: red;
padding: 20px;
color: black;
}
.main {
color: Balck;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>My Website</h1>
</div>
<div class="main">
<h2>Fixed Layout</h2>
<p>This is a fixed layout example.</p>
<a href="[Link]">Welcome</a>
</div>
</div>
</body>
</html>
3. create a sample css file to show different sector models.(linking of css).
3.1 Inline Style.
<!DOCTYPE HTML>
<html>
<head>
<title>Internal CSS</title>
</head>
<body style="background-color: blue;">
<h1 style="color: gold; text-align: center;">This is my heading</h1>
<p style="color: black; text-align: left;">This is my paragraph.</p>
</body>
</html>
3.2 Internal Style
<!DOCTYPE HTML>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
background-color: red;
}
h1 {
color: navy;
margin-left: 20px;
}
p{
color: black;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<h1>This is my heading</h1>
<p>This is my paragraph.</p>
</body>
</html>
3.3External Style
<!DOCTYPE html>
<html>
<head>
<title>Sample style</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1> this is a heading<h1>
<p>This a paragragh</p>
</body>
</html>
// [Link]
body{
background-color: lightblue;
}
h1{
color: navy;
margin-left: 20px;
}
p{
color: black;
margin: auto;
}
[Link] any html website using an external css file(using selectors).
<!DOCTYPE html>
<html>
<head>
<title>documents</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>This is my website</h1>
<p class="para">this is my paragraph with class.</p>
<p> this is my paragraph without class.</p>
<div id="mydiv">
<p>this my paragraph inside a div container with id.
</div>
</body>
</html>
*{
font-family: Arial;
margin:0px;
padding:10px;
}
h1 {
color: blue;
}
.para {
color: green;
text-align: left;
font-size:18px;
}
#mydiv {
padding: 5px;
color: yellow;
background-color:black;
}
[Link] a responsive from using HTML & CSS only.
<DOCTYPE html>
<html>
<head>
<title>documents</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div class="container">
<h1> Contact Us</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="enter your
name here" required>
<label for="email">email:</label>
<input type="text" id="email" name="email" placeholder="enter your
email here" required>
<label for="Message">Message:</label>
<input type="text" id="Message" name="Message" placeholder="enter
your Message here" required>
<input type="submit" value="submit">
</form>
</div>
</body>
</html>
// [Link]
body{
padding: 0px;
background-color: lightblue;
margin:0px;
}
.container{
padding: 20px;
width:400px;
margin: auto;
}
h1 {
color: blue;
text-align:center;
}
form{
display:flex;
flex-direction:column;
}
label{
margin-bottom:10px;
input
{
padding: 10px;
margin-bottom: 10px;
border:1 px solid black;
border-radius: 20px;
}
input[type="submit"]{
background-color: blue;
color: yellow;
cursor: pointor;
transition: background-color: blue;
}
input[type="submit"]: hover{
background-color: balck;
}
[Link] a form using html which takes in details for the college festival of
students from different departments for sport events only.
<!DOCTYPE HTML>
<html>
<head>
<title>College Festival Sports Event Registration</title>
<!-- Bootstrap CSS -->
<link
href="[Link]
[Link]" rel="stylesheet">
<style>
/* Custom CSS */
.container {
margin-top: 50px;
}
h2 {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<h2>College Festival and Sports Events Registration</h2>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name"
placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="department">Department:</label>
<select class="form-control" id="department" required>
<option value="Computer Science">Computer Science</option>
<option value="Commerce">Commerce</option>
<option value="Arts">Arts</option>
</select>
</div>
<div class="form-group">
<label for="sport-event">Sports Event:</label>
<select class="form-control" id="sport-event" required>
<option value="Football">Football</option>
<option value="Basketball">Basketball</option>
<option value="Volleyball">Volleyball</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="[Link]
<script
src="[Link]
[Link]"></script>
<script
src="[Link]
s"></script>
</body>
</html>
1. Document Type Declaration and HTML Structure
html
Copy code
<!DOCTYPE HTML> <html>
<!DOCTYPE HTML>: Declares the document type and version of
HTML being used, which is HTML5 in this case.
<html> : The root element of an HTML document.
2. Head Section
html
Copy code
<head> <title> College Festival Sports Event Registration </title> <!-- Bootstrap CSS --
> <link
href="[Link]
rel="stylesheet"> <style> /* Custom CSS */ .container { margin-top: 50px; } h2 {
margin-bottom: 30px; } </style> </head>
<head> : Contains meta-information about the document.
<title>: Sets the title of the webpage, which appears in the browser
tab.
<link href="..."> : Links to the Bootstrap CSS file for styling the
webpage using Bootstrap classes.
<style>: Contains custom CSS styles.
.container { margin-top: 50px; } : Adds a top margin of 50
pixels to elements with the class container.
h2 { margin-bottom: 30px; } : Adds a bottom margin of 30
pixels to h2 elements.
3. Body Section
html
Copy code
<body> <div class="container"> <h2> College Festival and Sports Events
Registration </h2> <form>
<body> : The main content area of the HTML document.
<div class="container"> : A Bootstrap class that provides responsive
fixed-width container.
<h2>: A heading element with text "College Festival and Sports
Events Registration".
<form>: Starts a form for user input.
4. Form Fields
html
Copy code
<div class="form-group"> <label for="name"> Name: </label> <input type="text"
class="form-control" id="name" placeholder="Enter your full name" required> </div>
<div class="form-group"> : A Bootstrap class for form group,
ensuring proper spacing.
<label for="name">Name:</label> : A label for the name input field.
<input type="text" class="form-control" id="name"
placeholder="Enter your full name" required> : A text input field with
Bootstrap styling. It includes:
type="text": Specifies the type of input.
class="form-control" : Bootstrap class for styling.
id="name" : Unique identifier for the input field.
placeholder="Enter your full name" : Placeholder text shown
inside the input field.
required: Ensures the field must be filled out before form
submission.
5. Email Field
html
Copy code
<div class="form-group"> <label for="email"> Email: </label> <input type="email"
class="form-control" id="email" placeholder="Enter your email" required> </div>
Similar structure to the name field but with type="email" for email
input validation.
6. Department Dropdown
html
Copy code
<div class="form-group"> <label for="department"> Department: </label> <select
class="form-control" id="department" required> <option value="Computer
Science"> Computer Science </option> <option
value="Commerce"> Commerce </option> <option value="Arts"> Arts </option>
</select> </div>
<select> : Creates a dropdown menu.
<option> : Defines each selectable option within the dropdown.
7. Sports Event Dropdown
html
Copy code
<div class="form-group"> <label for="sport-event"> Sports Event: </label> <select
class="form-control" id="sport-event" required> <option
value="Football"> Football </option> <option value="Basketball"> Basketball </option>
<option value="Volleyball"> Volleyball </option> </select> </div>
Same structure as the department dropdown but for selecting a
sports event.
8. Submit Button
html
Copy code
<button type="submit" class="btn btn-primary"> Submit </button> </form> </div>
<button type="submit" class="btn btn-primary">Submit</button> : A
submit button with Bootstrap styling ( btn and btn-primary classes).
9. Including Bootstrap JS and Dependencies
html
Copy code
<!-- Bootstrap JS and dependencies --> <script src="[Link]
[Link]"></script> <script
src="[Link]
script> <script
src="[Link]
</body> </html>
<script src="..."> : Includes external JavaScript files for jQuery,
[Link], and Bootstrap JS for enabling Bootstrap’s interactive
components.
Conclusion
This HTML form allows students to register for sports events at a college
festival, capturing their name, email, department, and the sports event
they want to participate in, utilizing Bootstrap for styling and layout
