Scribd
Upload
14 views84 pages

wt file(for internal practical)

The document outlines a Web Technology Lab File for a Bachelor of Computer Application program at Vivekananda Institute of Professional Studies. It includes an index of various web development tasks such as creating web pages, using HTML tags, designing tables, and implementing CSS styles. The document provides source code examples for each task, demonstrating practical applications of web technologies.

Uploaded by

tiwari.peeyush2006
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
14 views84 pages

wt file(for internal practical)

The document outlines a Web Technology Lab File for a Bachelor of Computer Application program at Vivekananda Institute of Professional Studies. It includes an index of various web development tasks such as creating web pages, using HTML tags, designing tables, and implementing CSS styles. The document provides source code examples for each task, demonstrating practical applications of web technologies.

Uploaded by

tiwari.peeyush2006
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
You are on page 1/ 84

VIVEKANANDA INSTITUTE OF PROFESSIONAL STUDIES

VIVEKANANDA SCHOOL OF INFORMATION TECHNOLOGY

BACHELOR OF COMPUTER APPLICATION


Web Technology Lab File
Paper Code: BCA 105P

SUBMITTED TO:
SUBMITTED BY:
Ms. Chhaya Gupta Name:
Peeyush Tiwari
Assistant Professor Enrolment
INDEX

S.NO Name of the program Date Signature


1 Different 5 web pages for demonstrating 24/09/2024
usage of different tags and attribute
2 Unordered list nested inside ordered list 28/09/2024
with different specifications
3 Designing a table with usage of 28/09/2024
different table attribute
4 Designing a specific frame 1/10/2024
5 Image map 1/10/2024
6 Student registration for 1/10/2024

7 Inline css , internal css, external css 6/10/2024


8 Background image and its attribute 6/10/2024

9 Usage of font styling attributes 10/10/2024

10 Usage of text styling attribute 12/10/2024

11 Usage of list styling attribute 12/10/2024

12 Three equal columns webpage 12/10/2024

13 Bootstrap table 12/10/2024

14 Various types of images 16/10/2024

15 Various types of buttons 18/10/2024

16 Various typography classes 18/10/2024

17 Displaying heading through jumbotron 23/10/2024


18 Inbuilt functions and dialog boxes 23/10/2024
19 Alert box and confirm box 23/10/2024
20 Questionnaire using form elements 23/10/2024
21 Website 2/11/2024
Q1. Make 5 different web pages out of which first page is your home
page with links to other four pages. The rest of the pages should have
following :

i) Formatting styles and headings: include bold, italics, underline,


strike, subscript, superscript and all six types of headings
ii) about font styles and image tag.
iii) Marquee: Move text, image and hyperlink.
iv) Other tags: br, hr, pre and p Include the following specifications:
• In all these webpages only mention about use, attributes apply them
• Insert a background image on home page.
• Make all the topics as hyperlinks on this page and go to some other
page for description
• Insert a marquee showing “HTML TUTORIAL” as moving text.
• Use different font style for different topics
• On every page, make a hyperlink for going back to home page and
internal link also
SOURCE CODE:-
Index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial Home</title>
<style> body { background-image:
url("background.jpg");
}
</style>
</head>
<body>
<h1><marquee behavior="scroll" direction="left">HTML TUTORIAL</marquee></h1>
<h2>Welcome to the HTML Tutorial!</h2>
<p>This website provides a comprehensive guide to learn HTML. Explore the
following topics:</p>
<ul>
<li><a href="page1.html">Formatting Styles and Headings</a></li>
<li><a href="page2.html">Font Styles and Image Tags</a></li>
<li><a href="page3.html">Marquee, Hyperlink and More</a></li>
<li><a href="page4.html">Other Useful Tags</a></li>
</ul>
</body>
</html>
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Formatting</title>
</head>
<body>
<h1>Formatting Styles and Headings</h1>
<p>This page explores various formatting options in
HTML.</p>
<h2><a href="index.html">Home</a></h2>
<h3>Headings</h3>
<p>
Here are the six types of headings:
<br>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</p>

<h3>Formatting</h3>
<ul>
<li><b>Bold</b></li>
<li><i>Italics</i></li>
<li><u>Underline</u></li>
<li><s>Strikethrough</s></li>
<li><sub>Subscript</sub></li>
<li><sup>Superscript</sup></li>
</ul>
<p>For more information, explore the <a href="index.html">Home Page</a>.</p>
</body>
</html>
page2.html

<!DOCTYPE html>
<html>
<head>
<title>HTML Font Styles and Images</title>
</head>
<body>
<h1>Font Styles and Image Tags</h1>
<p>This page covers font styles and image usage.</p>
<h2><a href="index.html">Home</a></h2>
<h3>Font Styles</h3>
<p>You can specify font styles using the <font> tag or CSS.
<br>
For instance, <font face="Times New Roman" size="5">This text is in Times New
Roman.</font>
</p>
<h3>Image Tags</h3>
<p>To include images, use the <img> tag. Specify the source using the src attribute.
<br>
<img src="image.jpg" alt="Description of the Image" width="150" height="150"> </p>
<p>To return to the <a href="index.html">Home Page</a>, click here.</p> </body>
</html>

page3.html

<!DOCTYPE html>
<html>
<head>
<title>HTML Marquee, Hyperlink and More</title>
</head>
<body>
<h1>Marquee, Hyperlink and More</h1>
<p>This page showcases the marquee tag and more.</p>
<h2><a href="index.html">Home</a></h2>

<h3>Marquee</h3>
<marquee behavior="alternate" direction="up"> This text will move up and down!
</marquee>
<h3>Hyperlinks</h3>
<p>A hyperlink is an important element in HTML, allowing you to link to other pages.
<br>
Click <a href="https://www.google.com">here</a> to visit Google!
</p>
<p>Head back to the <a href="index.html">Home Page</a> for further learning.</p>
</body>
</html>

page4.html

<!DOCTYPE html>
<html>
<head>
<title>Other HTML Tags</title>
</head>
<body>
<h1>Other HTML Tags</h1>
<p>This page covers additional useful tags in HTML.</p>
<h2><a href="index.html">Home</a></h2>
<h3>Line Breaks and Horizontal Rules</h3>
<p>Use <br> for a line break and <hr> for a horizontal rule.
<br>
<br>
<hr>
<br>
<br>
</p>
<h3>Preformatted Text</h3>
<p>The <pre> tag retains the formatting and spacing of the text as it was written in the
source code.
<pre>
This is an example of preformatted text.
It will preserve spaces, line breaks, and
formatting.
</pre>
</p>
<p>For more exploration, return to the <a href="index.html">Home Page</a>.</p>
</body>
</html>

OUTPUT:-
Q2 Create an unordered list nested inside ordered list and apply the
following:
 Insert an image of Main item on top right corner of web page.
 Display heading as Marquee.
 Use different font styles and colors for different ordered list items.
 Insert Horizontal lines after each ordered item.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List with Nested Unordered List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="main.png" alt="Main Item" class="top-right-image">
<marquee behavior="scroll" direction="left">My List</marquee>
<ol>
<li id="pgh">Subjects</li>
<ul>
<li>Mathematics</li>
<li>FIT</li>
<li>Writing Skills</li>
<li>Web Technology</li>
</ul><hr>
<li id="pe">Programming languages</li>
<ul>
<li>C</li>
<li>Python</li>
<li>Java</li>
<li>Rust</li>
</ul><hr>
<li id="pq">Web Technologies</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
<hr>
</ol>
</body>
</html>
style.css

.top-right-image {
position: absolute;
top: 10px;
right: 10px;
width: 100px;
} OUTPUT
marquee {
font-size: 24px;
color: #0800FC;
font-weight: bold;
}

#pgh {
font-family: Arial, sans-serif;
color: red;
font-size: 18px;
}

#pe {
font-family: 'Courier New';
color: blue;
font-size: 18px;
}

#pq {
font-family: Georgia, serif;
color: green;
font-size: 18px;
}

ol li {
margin-bottom: 20px;
}

hr {
border: 1px solid black;
}
Q3. Design a table with row span and column span and make use of
attributes colspan, rowspan, width, height, cellpadding, cellspacing etc
SOURCE CODE
index.html

<html>
<head>
<style>
.table {
width: 80%;
border-collapse: collapse;
height: 45%;
}

.heading {
border: 1px solid black;
padding: 20px;
text-align: center;
border-spacing: 30px;
}
</style>
</head>
<body>

<h2>Table </h2>

<table class="table">
<tr>
<th class="heading" rowspan="2">Name</th>
<th class="heading" colspan="2">Subject</th>
<th class="heading" rowspan="2">Age</th>
</tr>
<tr>
<th class="heading">Maths</th>
<th class="heading">WT</th>
</tr>
<tr>
<td class="heading">Reyansh</td>
<td class="heading">85</td>
<td class="heading">90</td>
<td class="heading">16</td>
</tr>
<tr>
<td class="heading">Ayanshi</td>
<td class="heading">78</td>
<td class="heading">95</td>
<td class="heading">17</td>
</tr>
<tr>
<td class="heading">Sanya</td>
<td colspan="2" class="heading">90</td>
<td class="heading">18</td>
</tr>
</table>
</body>
</html>

OUTPUT:-
Q4 Design Following Frame:
SOURCE CODE
Index.html
<!DOCTYPE html>
<!-- By Peeyush Tiwari-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
</head>
<frameset cols="50%,50%">
<frame src="menu.html" name="main">
<frameset rows="80%,20%">
<frame name="explanation">
<frame name="example">
</frameset>
</frameset>
</html>
Menu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MENU</title>
</head>
<body>
<h1>MAIN MENU:</h1>
<a href="topic1.html" target="explanation">TOPIC 1:Covid-19 and its
variants</a><br>
<a href="topic2.html" target="explanation">Topic 2:India in Covid 19</a><br>
<a href="topic3.html" target="explanation">Topic 3:Precautions to be taken in Covid
19</a><br>
</body>
</html>
Topic1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Covid-19 and its variants</title>
</head>
<body>
<h3>Covid-19 and its variants</h3>
<p>COVID-19 is a respiratory illness caused by the SARS-CoV-2 virus, which first
emerged in December 2019. It spreads primarily through respiratory droplets from an
infected person. Common symptoms include fever, cough, fatigue, and loss of taste or smell,
though severe cases can lead to pneumonia, organ failure, and death.</p>
<p>As the virus has evolved, it has developed several variants, each with genetic mutations
that can affect its transmissibility, severity, or ability to evade immunity.</p>
<a href="example1.html" target="example">Example</a>
</body>
</html>

Topic2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>India in Covid 19</title>
</head>
<body>
<h3>India in Covid 19</h3>
<p>India experienced significant challenges during the COVID-19 pandemic, with multiple
waves of infection having widespread impact.
<ol>
<li><h5>First Wave (2020):</h5>India saw its initial rise in COVID-19 cases in early
2020. The government imposed a strict nationwide lockdown in March 2020 to contain the
spread, which had economic and social consequences. By September, cases began to peak,
but hospitals and healthcare systems managed to cope, despite pressure.</li>
<li><h5>Second Wave (April–June 2021):</h5> The second wave was far more
devastating, primarily driven by the Delta variant. India faced a critical shortage of oxygen,
hospital beds, and essential medicines. The healthcare infrastructure was overwhelmed, and
daily cases exceeded 400,000 at the peak. Thousands died each day, and the total death toll
from this wave was severe, though exact numbers are debated.</li>
<li><h5>Vaccination Drive:</h5>India launched one of the world's largest vaccination
campaigns in January 2021. Two major vaccines, Covaxin (developed in India) and
Covishield (the Indian version of AstraZeneca’s vaccine), were widely used. By the end of
2021, India had administered over 1 billion doses, helping control the spread of the
virus.</li>
<li><h5>Omicron Wave (2022):</h5>Like many countries, India faced another surge due
to the Omicron variant, but it resulted in fewer severe cases and deaths compared to the
second wave. The country’s vaccine coverage, along with prior exposure to the virus, helped
mitigate the impact.</li>
</ol>
India's response to the pandemic involved large-scale efforts in lockdowns, medical
infrastructure, and mass vaccinations, though the second wave exposed significant gaps in
preparedness.</p>
<a href="example2.html" target="example">Example</a>
</body>
</html>

Topic3.html
<!DOCTYPE html>
<html>
<head> <title>Precautions to be taken in Covid 19</title> </head>
<body>
<h3>Precautions to be taken in Covid 19</h3>
<p>To protect yourself and others from COVID-19, it’s important to follow these key
precautions:
<ol>
<li><h5>Wear a Mask:</h5> Wear a well-fitting mask, especially in crowded or indoor
public places, to reduce the spread of respiratory droplets.</li>
<li><h5>Maintain Social Distancing:</h5> Keep a safe distance (at least 6 feet) from
others in public spaces, especially if they are coughing or sneezing.</li>
<li><h5>Hand Hygiene:</h5>Wash your hands frequently with soap and water for at
least 20 seconds.<br>Use hand sanitizer (with at least 60% alcohol) when soap and water
aren’t available.</li>
<li><h5>Avoid Crowded and Poorly Ventilated Areas:</h5> Try to avoid large gatherings
and ensure good ventilation in indoor spaces.</li>
<li><h5>Get Vaccinated:</h5> Stay up to date with COVID-19 vaccinations and booster
shots to reduce the risk of severe illness.</li>
<li><h5>Avoid Touching Your Face:</h5> Avoid touching your eyes, nose, and mouth,
especially with unwashed hands.</li>
<li><h5>Disinfect Surfaces:</h5> Regularly clean and disinfect frequently touched
objects and surfaces, such as doorknobs, light switches, and phones.</li>
<li><h5>Stay Home If You Feel Unwell:</h5> If you experience COVID-19 symptoms
like fever, cough, or difficulty breathing, stay home and isolate to prevent spreading the
virus.</li>
<li><h5>Follow Local Guidelines:</h5> Adhere to guidelines set by health authorities
and local governments regarding testing, quarantine, and restrictions.</li>
<li><h5>Cough and Sneeze Etiquette:</h5> Cover your mouth and nose with a tissue or
elbow when coughing or sneezing, and dispose of tissues properly.</li>
</ol>
These precautions help reduce the risk of COVID-19 transmission and protect both
individuals and the community.</p>
<a href="example3.html" target="example">Example</a>
</body>
</html>
Example1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Topic 1</title>
</head>
<body>
<h3>Some Notable variants include:</h3>
<p>
<ul>
<li>Alpha (B.1.1.7): First identified in the UK in September 2020, Alpha was more
contagious than the original strain, leading to a significant increase in cases globally. It
became one of the dominant variants in early 2021.</li>
<li>Beta (B.1.351): Discovered in South Africa in May 2020, the Beta variant had
mutations that made it more resistant to neutralizing antibodies, raising concerns about
vaccine effectiveness.</li>
<li>Delta (B.1.617.2): Initially found in India in October 2020, Delta became the
dominant strain worldwide by mid-2021. It was known for its high transmissibility and was
associated with more severe illness, particularly in unvaccinated individuals.</li>
<li>Omicron: First identified in late 2021, this variant had multiple mutations, making it
more transmissible, but it generally caused less severe illness.</li>
</ul>
</p>
</body>
</html>

Example2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Examole on Topic 2</title>
</head>
<body>
<h3>An example of India’s struggle during the COVID-19 pandemic is the second wave in
April–June 2021, which was driven by the Delta variant.</h3>
<p>During this period:
<ul>
<li><h5>Oxygen shortages:</h5> Many hospitals ran out of medical oxygen, leading to
patients being turned away or dying due to lack of oxygen support. The Indian government
had to mobilize resources to import oxygen and set up oxygen production plants across the
country.</li>
<li><h5>Overwhelmed healthcare system:</h5> Hospitals were overcrowded, with
people forced to wait outside or seek care in makeshift facilities. There was also a shortage of
ICU beds and ventilators.
</li>
<li><h5>Mass cremations:</h5> Due to the overwhelming number of deaths, cremation
grounds in cities like Delhi were overburdened. Some cities had to build temporary cremation
sites as the number of bodies exceeded the capacity of traditional facilities.</li>
<li><h5>Government response:</h5> To control the surge, many states imposed local
lockdowns, curfews, and restrictions on movement. International assistance, including
oxygen and medical supplies, was sent to India from various countries.</li>
</ul>
This second wave exemplifies the severity of the pandemic in India, where the healthcare
system struggled to manage the crisis, and the social and economic impacts were immense.
</p>
</body>
</html>

Example3.html
<!DOCTYPE html>
<html>
<head>
<title>Example on the Topic 3</title>
</head>
<body>
<h3>An example of precautions in action is seen in many countries’ responses to the
COVID-19 pandemic:</h3>
<p>
<ol>
<li><h5>Strict Lockdown:</h5> In March 2020, New Zealand implemented a nationwide
lockdown, enforcing social distancing and restricting non-essential travel. People were
required to stay at home except for essential activities.</li>
<li><h5>Masks and Hand Hygiene:</h5> Mask-wearing was mandated in public spaces,
and hand sanitizers were made widely available in places like supermarkets and public
transportation.</li>
<li><h5>Testing and Isolation:</h5> The country ramped up its testing capacity and
enforced strict quarantine measures for those who tested positive. People arriving from other
countries were required to quarantine in government-run facilities.</li>
<li><h5>Vaccination Campaign:</h5> Once vaccines were available, New Zealand
launched an aggressive vaccination campaign, encouraging citizens to get vaccinated and
later receive booster shots.</li>
<li><h5>Clear Communication:</h5> The government, led by Prime Minister Jacinda
Ardern, provided clear communication through daily updates, encouraging citizens to follow
safety guidelines, including mask-wearing, social distancing, and hygiene practices.</li>
</ol>
As a result of these precautionary measures, New Zealand managed to keep its COVID-19
case numbers low for an extended period in 2020, avoiding widespread outbreaks and severe
strain on healthcare systems.
</p>
</body>
</html>
OUTPUT:-
Q5. Make an image map showing the usage of shape, cords, href
attributes in map. Link each hotspot to their respective details. All
the web pages should be designed with proper background color,
images, font styles and headings

SOURCE CODE
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="img.jpg" alt="image" usemap="#workmap">
<map name="workmap">
<area shape="circle" coords="0,50,30,70" href="second.html" alt="first file">
<area shape="rect" coords="200,30,600,70" href=" https://www.google.com/"
alt="second file">
</map>
</body>
</html>

second.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to the webpage</h1>
<h4>this is the second webpage</h4>
<p>file for web Technologies</p>
</body>
</html>
OUTPUT:-
Q6. Design Student Registration Form for admission in college.
SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input,select,textarea{
border:0.5px solid black;
outline-style: none;
}
*{
font-weight: bold;
}
.submit,.reset{
text-align: center;
}
label{
margin-right:20px;
}
body {
height: 100vh;
display: flex;
font-family: Arial, sans-serif;
flex-direction: column;
}
.container{
display:flex;
flex-direction: column;
}
div{
margin-bottom:5px;
}
</style>
</head>

<body>
<div class="container">
<div>
<h2>STUDENT REGISTRATION</h2>
</div>
<div>
<h3>Personal Details:</h3>
</div>
<form>
<div>
<label>Students Name</label>
<input type="text">
</div>
<div>
<label>Gender</label>
<input type="radio" name="gen"><label>Male</label><input type="radio"
name="gen">Female
</div>
<label>Date of Birth</label>
<input type="date">
</div>
<div>
<label>Mobile No.</label>
<input type="tel">
</div>
<div>
<label>Email</label>
<input type="email">
</div>
<div>
<label>Fathers name</label>
<input type="text">
</div>
<div>
<label>Mothers Name</label>
<input type="text">
</div>
<div>
<label>COURSE</label>
<Select>
<option>--SELECT PROGRAM--</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
<option value="BJMC">BJMC</option>
<option value="BTECH">BTECH</option>
</Select>
</div>
<div id="address">
<label>Address</label>
<textarea cols="30" rows="10"></textarea>
</div>
<div class="submit"><input type="submit" value ="Submit"></div>
<div class="reset"><input type="reset" value="Reset"</div>
</form>
</div>
</body>
</html>

OUTPUT:-
Q7 Create a webpage and show the usage of inline, internal and
external
SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<!-- External CSS -->
<link rel="stylesheet" href="external.css">
<!-- Internal CSS -->
<style>
h2 {
color: darkred;
}
p.internal {
font-style: italic;
text-align: justify;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<h2>This is a Subheading with Internal CSS</h2>
<!-- Paragraph with external CSS -->
<p class="external">This is a paragraph styled with external CSS.</p>
<!-- Paragraph with internal CSS -->
<p class="internal">This is a paragraph styled with internal CSS. The text is italicized
and justified.</p>
<!-- Paragraph with inline CSS -->
<p style="color: orange; font-size: 20px;">This is a paragraph styled with inline CSS.
It has orange color and larger font size.</p>
<!-- Additional paragraphs -->
<p class="external">Another paragraph styled with external CSS, showing bold text
and green color.</p>
<p class="internal">This is another paragraph styled with internal CSS. It has
italicized and justified text.</p>
<p style="color: purple; font-size: 22px; text-decoration: underline;">This is another
paragraph styled with inline CSS, having purple text, a larger font, and an
underline.</p>
</body>
</html>
External.css
h1 {
color: darkblue;
font-family: Arial, sans-serif;

p{
color: green;
}

p.external {
font-size: 18px;
font-weight: bold;

OUTPUT:-
Q8. Create a webpage containing a background image and apply all
the background styling attributes.

SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Styling Example</title>
<style>
body {
background-image: url('https://images.pexels.com/photos/1485894/pexels-
photo-1485894.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-color: #f0f0f040;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-blend-mode: overlay;
height: 100vh;
margin: 0;
}

.content {
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
font-size: 3em;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
p{
font-size: 1.5em;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to My Webpage</h1>
<p>This is an example of a webpage with full background styling.</p>
</div>
</body>
</html>
OUTPUT
Q9.Create a webpage showing the usage of font styling attributes.
SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Styling Example</title>
</head>
<body>
<h1>Font Styling Demonstration</h1>
<h2>Different Font Styles</h2>
<p>This is a <span class="bold">bold</span> text example.</p>
<p>This is an <span class="italic">italic</span> text example.</p>
<p>This text is <span class="underline">underlined</span>.</p>
<p>This text is <span class="strike">struck through</span>.</p>
<p>This text has a <span class="highlight">highlighted background</span>.</p>
<h2>Font Size and Weight</h2>
<p style="font-size: 2em;">This text is large.</p>
<p style="font-size: 0.8em;">This text is small.</p>
<p style="font-weight: 700;">This text has a heavier weight.</p>
<h2>Font Family Example</h2>
<p style="font-family: 'Courier New', Courier, monospace;">This text uses a monospace
font.</p>
<p style="font-family: 'Times New Roman', Times, serif;">This text uses a serif font.</p>
</body>
</html>
style.css OUTPUT:-

body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f8f9fa;
}

h1 {
font-size: 2.5em;
font-weight: bold;
color: #333;
}

h2 {
font-size: 2em;
font-style: italic;
color: #555;
}

p{
font-size: 1.2em;
line-height: 1.6;
color: #666;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.strike {
text-decoration: line-through;
}
.highlight {
background-color: yellow;
}
Q10 Create a web page and apply all the text styling attributes use id and
class selector
SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styling Example</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>Text Styling Example</h1>

<p>This is a simple <span class="highlight">highlighted</span> paragraph with <span


class="important">important</span> text. Notice how we can <span
class="strikethrough">strike through</span> text, or make words <span
class="superscript">superscript</span> or <span class="subscript">subscript</span>.</p>

<p class="quote">"This is a famous quote that uses italicized text and a border to make it
stand out."</p>

<p class="center-text">This text is centered on the page.</p>

<p class="right-text">This text is aligned to the right.</p>

<p class="uppercase">This text is in uppercase.</p>

<p class="lowercase">THIS TEXT WAS IN UPPERCASE BUT NOW IT IS


LOWERCASE.</p>

<p>If you want to display code, you can use <span class="code">console.log("Hello
World")</span> to make it stand out.</p>
<p class="strikethrough">This text has been struck through to show it is no longer
valid.</p>
<p>This is another paragraph with <span class="highlight">some highlighted text</span>
and normal text.</p>
</body>
</html>
style.css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
color: #333;
line-height: 1.6;
}
h1 {
text-align: center;
color: #2c3e50;
font-size: 36px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: underline;
}
p{
font-size: 18px;
color: #555;
text-align: justify;
margin: 20px;
}
.highlight {
background-color: yellow;
color: red;
font-style: italic;
padding: 2px 5px;
}
.quote {
font-family: 'Georgia', serif;
font-size: 22px;
font-style: italic;
color: #8e44ad;
border-left: 4px solid #8e44ad;
padding-left: 20px;
margin: 20px 0;
}
.important {
font-weight: bold;
color: #e74c3c;
text-transform: capitalize;
}
.code {
font-family: 'Courier New', monospace;
background-color: #2c3e50;
color: white;
padding: 5px;
border-radius: 3px;
}
.subscript {
font-size: 14px;
vertical-align: sub;
}
.superscript {
font-size: 14px;
vertical-align: super;
}
.strikethrough {
text-decoration: line-through;
color: gray;
}
.center-text {
text-align: center;
}
.right-text {
text-align: right;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}

OUTPUT:-
Q11 Create a webpage and implement all list styling attributes
SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Lists Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
}
h1 {
color: #333;
}
.ordered-list {
list-style-type: decimal;
color: #007BFF;
margin-left: 20px;
}
.unordered-list {
list-style-type: square;
color: #FF5733;
margin-left: 20px;
}
.definition-list dt {
font-weight: bold;
color: #28A745;
}
.definition-list dd {
margin-left: 20px;
color: #555;
}
li, dt, dd {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>HTML Lists Example</h1>
<h2>Ordered List</h2>
<ol class="ordered-list">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
<h2>Unordered List</h2>
<ul class="unordered-list">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<h2>Definition List</h2>
<dl class="definition-list">
<dt>HTML</dt>
<dd>Hypertext Markup Language, the standard language for creating web
pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling HTML elements on a web
page.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to add interactivity to web
pages.</dd>
</dl>
</body>
</html>
OUTPUT:-
Q12 Create a webpage with three equal columns
SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three Equal Columns</title>
<link rel="stylesheet" href="test2.css">
</head>
<body>
<header>
<h1>Three Equal Columns Layout</h1>
</header>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<p>This is the content of the first column. You can add text, images, or other content
here.</p>
</div>
<div class="column">
<h2>Column 2</h2>
<p>This is the content of the second column. It's designed to be the same width as the
first column.</p>
</div>
<div class="column">
<h2>Column 3</h2>
<p>This is the content of the third column. All three columns are equal in width due
to Flexbox.</p>
</div>
</div>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>
test2.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
.container {
display: flex;
justify-content: space-between;
margin: 20px;
}
.column {
background-color: #ffffff;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
flex: 1;
margin: 0 10px; OUTPUT:-
}
.column h2 {
color: #3498db;
}
footer {
background-color: #3498db;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Q13 Create a webpage containing bootstrap table
SOURCE CODE
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
padding: 20px;
}
table {
margin-top: 20px;
}
.container {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Table Example</h2>
<p>This is an example of a table using Bootstrap classes.</p>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<tr>
<th>S.no.</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sumit Tiwari</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td><button class="btn btn-info btn-sm">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td>Mohit Kumar Ranjan</td>
<td>[email protected]</td>
<td>(987) 654-3210</td>
<td><button class="btn btn-info btn-sm">Edit</button></td>
</tr>
<tr>
<td>3</td>
<td>Darshil Khandelwal</td>
<td>[email protected]</td>
<td>(555) 123-4567</td>
<td><button class="btn btn-info btn-sm">Edit</button></td>
</tr>
<tr>
<td>4</td>
<td>Saksham Gupta</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td><button class="btn btn-info btn-sm">Edit</button></td>
</tr>
</tbody>
</table>
</div>

<!-- Bootstrap JS, Popper.js (needed for dropdowns, modals, etc.) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>

</body>
</html>

OUTPUT:-
Q14 Create a webpage containing various type of images
SOURCE CODE
Index.html

<html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Images Types</h2>
<img src="https://images.unsplash.com/photo-1731082417879-710ff0c868ae?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyOXx8fGVufD
B8fHx8fA%3D%3D" class="img-rounded" alt="light house" width="304" height="299">
<img src="https://images.unsplash.com/photo-1719937206300-fc0dac6f8cac?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzMXx8fGVufD
B8fHx8fA%3D%3D" class="img-circle" alt="laptop" width="304" height="299">
<img src="https://images.unsplash.com/photo-1719937206109-7f4e933230c8?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1MXx8fGVufD
B8fHx8fA%3D%3D" class="img-thumbnail" alt="camera" width="304" height="299">
</div>
</body>
</html>

OUTPUT:-
Q15 Create a webpage containing various type of buttons
SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Various Types of Buttons</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
text-align: center;
color: #3498db;
margin-bottom: 40px;
}
.container {
width: 80%;
margin: 0 auto;
}
.btn-group {
margin-top: 20px;
}
.btn-container {
margin-bottom: 30px;
text-align: center;
}
/* Custom Button Styles */
.btn-custom {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
}

.btn-custom:hover {
background-color: #2980b9;
}

/* Disabled Button Style */


.btn-disabled {
background-color: #dcdcdc;
color: #a9a9a9;
}
.btn-disabled:hover {
cursor: not-allowed;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<div class="container">
<h1>Various Types of Buttons</h1>
<div class="btn-container">
<h2>Basic Buttons</h2>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>
</div>
<div class="btn-container">
<h2>Buttons with Icons</h2>
<button class="btn btn-primary">
<i class="fas fa-thumbs-up"></i> Like
</button>
<button class="btn btn-success">
<i class="fas fa-check-circle"></i> Confirm
</button>
<button class="btn btn-danger">
<i class="fas fa-trash"></i> Delete
</button>
<button class="btn btn-info">
<i class="fas fa-info-circle"></i> More Info
</button>
</div>
<div class="btn-container">
<h2>Button Group</h2>
<div class="btn-group">
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
<button class="btn btn-primary">Button 3</button>
</div>
</div>
<div class="btn-container">
<h2>Custom Button</h2>
<button class="btn-custom">Custom Styled Button</button>
</div>
<div class="btn-container">
<h2>Disabled Button</h2>
<button class="btn btn-primary btn-disabled" disabled>Disabled Button</button>
</div>
</div>

<!-- Link to Bootstrap JS and FontAwesome Icons (for the icons) -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>

</body>
</html>

OUTPUT:-
Q16 Create a webpage containing various, typography classes
SOURCE CODE
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Classes Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center text-primary">Typography Classes</h1>
<div class="mb-4">
<h2>Font Size Classes</h2>
<p class="h1">This is an h1 (largest heading)</p>
<p class="h2">This is an h2</p>
<p class="h3">This is an h3</p>
<p class="h4">This is an h4</p>
<p class="h5">This is an h5</p>
<p class="h6">This is an h6 (smallest heading)</p>
<p class="lead">This is a lead paragraph. It is typically used for a more prominent
text.</p>
</div>
<div class="mb-4">
<h2>Font Weight Classes</h2>
<p class="font-weight-light">This is a light text.</p>
<p class="font-weight-normal">This is a normal weight text.</p>
<p class="font-weight-bold">This is bold text.</p>
<p class="font-weight-bolder">This is bolder text.</p>
<p class="font-weight-lighter">This is lighter text.</p>
</div>
<div class="mb-4">
<h2>Text Alignment Classes</h2>
<p class="text-left">This is left-aligned text.</p>
<p class="text-center">This is centered text.</p>
<p class="text-right">This is right-aligned text.</p>
</div>
<div class="mb-4">
<h2>Text Transformation Classes</h2>
<p class="text-uppercase">This text is in uppercase.</p>
<p class="text-lowercase">THIS TEXT IS IN LOWERCASE.</p>
<p class="text-capitalize">this text is capitalized in the first letter of each word.</p>
</div>
<div class="mb-4">
<h2>Text Color Classes</h2>
<p class="text-primary">This is primary text.</p>
<p class="text-secondary">This is secondary text.</p>
<p class="text-success">This is success text.</p>
<p class="text-danger">This is danger text.</p>
<p class="text-warning">This is warning text.</p>
<p class="text-info">This is info text.</p>
<p class="text-light bg-dark">This is light text on dark background.</p>
<p class="text-dark">This is dark text.</p>
<p class="text-muted">This is muted text.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
</body>
</html>

OUTPUT:-
Q17 Create a webpage containing various type of buttons
SOURCE CODE
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jumbotron for Announcement</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron bg-warning text-center">
<h1 class="display-4">Important Announcement</h1>
<p class="lead">We are updating our website for a better user experience. Stay tuned
for new features!</p>
<a class="btn btn-dark btn-lg" href="#" role="button">Learn More</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
</body>
</html>

OUTPUT:-
Q18 Write a program to show the usage of inbuilt functions and dialog
boxes

SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inbuilt Functions & Dialog Boxes Demo</title>
<script>
function demonstrateInbuiltFunctions() {
const sampleArray = [10, 5, 8, 12, 20, 3];
const length = sampleArray.length;
const sortedArray = sampleArray.slice().sort((a, b) => a - b); // slice() to avoid
changing original array
const maxValue = Math.max(...sampleArray);
alert(`Length of the array: ${length}\nSorted Array: ${sortedArray}\nMaximum
Value: ${maxValue}`);
}
function getUserName() {
const name = prompt("What is your name?");
if (name) {
alert(`Hello, ${name}!`);
} else {
alert("You didn't enter a name.");
}
}
function getUserAge() {
const age = prompt("What is your age?");
if (age && !isNaN(age)) {
alert(`You are ${age} years old.`);
} else {
alert("You didn't enter a valid age.");
}
}
function showConfirmation() {
const result = confirm("Do you want to continue?");
if (result) {
alert("You chose to continue.");
} else {
alert("You chose to cancel.");
}
}
</script>
</head>
<body>
<h1>Welcome to Inbuilt Functions & Dialog Boxes Demo</h1>
<button onclick="demonstrateInbuiltFunctions()">Demonstrate Inbuilt Functions</button>
<button onclick="getUserName()">Enter Your Name</button>
<button onclick="getUserAge()">Enter Your Age</button>
<button onclick="showConfirmation()">Show Confirmation Dialog</button>
</body>
</html>

OUTPUT:-
Q19 Write a program to show the usage of alert and confirm box

SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alert and Confirm Box Example</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}

h1 {
color: #333;
}

button {
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
font-size: 16px;
}
</style>
<script>
function showAlert() {
alert("This is an alert box!");
}
function showConfirm() {
const userConfirmed = confirm("Do you want to proceed?");
if (userConfirmed) {
alert("You pressed OK!");
} else {
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<h1>Alert and Confirm Box Example</h1>
<button onclick="showAlert()">Show Alert</button>
<button onclick="showConfirm()">Show Confirm</button>
</body>
</html>

OUTPUT:-
Q20 Write a program to show the usage of alert and confirm box

SOURCE CODE
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Demo</title>
<style>
#changeTextButton {
padding: 10px 20px;
background-color: lightblue;
border: none;
cursor: pointer;
font-size: 16px;
}
#hoverText {
padding: 20px;
margin-top: 20px;
border: 1px solid #ccc;
font-size: 18px;
text-align: center;
}
#mouseEventBox {
width: 200px;
height: 100px;
background-color: lightgreen;
text-align: center;
line-height: 100px;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Event Handling Demo</h1>
<button id="changeTextButton">Click Me to Change Text</button>
<div id="hoverText">
Hover over me!
</div>
<div id="mouseEventBox">
Click me (Green Box)
</div>
<script>
const changeTextButton = document.getElementById('changeTextButton');
const hoverText = document.getElementById('hoverText');
const mouseEventBox = document.getElementById('mouseEventBox');
changeTextButton.addEventListener('click', function() {
changeTextButton.innerHTML = "You Clicked Me!";
});
hoverText.addEventListener('mouseover', function() {
hoverText.style.backgroundColor = "lightyellow";
hoverText.innerHTML = "Mouse is Over!";
});
hoverText.addEventListener('mouseout', function() {
hoverText.style.backgroundColor = "white";
hoverText.innerHTML = "Hover over me!";
});
mouseEventBox.addEventListener('click', function() {
alert("Mouse clicked on the green box!");
});
</script>
</body>
</html>

OUTPUT:-
Q21 WEBSITE

SOURCE CODE
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your go-to fitness destination for training programs,
tips, and health advice.">
<title>Fitness Hub</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header>
<div class="logo">
<h1>Fitness Hub</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="#index.html">Home</a></li>
<li><a href="our-programme.html ">Programs</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="signup.html" class="signup-btn">Signup</a></li>
<li><a href="login.html" class="login-btn">Login</a></li>
</ul>
</nav>
</header>
<section id="home" class="hero" style=" align-items:center;">
<div class="hero-content"><br><br>
<h1>Welcome to Fitness Hub</h1>
<p>Your ultimate destination for fitness and well-being.</p><br>
<a href="contactus.html" class="cta-button">Join Now</a>
</div>
<br><br> <br><br> <br><br>
<div class="about-container">
<div class="about-content">
<h2>About Us</h2>
<p>We are passionate about fitness and committed to helping you achieve your health
goals. Whether you're looking to lose weight, build muscle, or improve your flexibility, we
have the resources and support to help you succeed.</p>
</div>
</div>
</section>
<footer>
<p>&copy; 2024 Fitness Hub. All rights reserved.</p>
</footer>
</body>
</html>

style2.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

/* Basic Styling */
body {
line-height: 1.6;
color: #333;
height: 100%; /* Ensure body takes up full height */
overflow: hidden; /* Prevent scrolling */
}

/* Header with Transparent Nav */


header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: fixed;
width: 100%;
z-index: 1000;
background: rgba(15, 15, 15, 0.7); /* Transparent background */
}

header .logo h1 {
font-size: 24px;
color: #fff;
}

header nav ul {
list-style: none;
display: flex;
gap: 20px;
}

header nav ul li {
display: inline;
}

header nav ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
transition: background 0.3s;
}

header nav ul li a:hover {


background-color: rgba(255, 255, 255, 0.2);
}

/* Hero Section with Gradient Overlay */


.hero {
position: relative;
background-image: linear-gradient(rgba(164, 54, 82, 0.5), rgba(201, 165, 73, 0.5)),
url('carrying dumbell.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fff;
padding: 0; /* Remove padding to avoid extra space */
text-align: center;
height: 91vh; /* Full viewport height */
display: flex;
justify-content: center;
align-items: center;
}

.hero h1 {
font-size: 48px;
margin-bottom: 10px;
}
.hero p {
font-size: 20px;
margin-bottom: 20px;
}
.hero .cta-button {
text-decoration: none;
padding: 12px 25px;
color: #333;
background-color: #ffeb3b;
font-size: 18px;
border-radius: 5px;
transition: background 0.3s;
}
.hero .cta-button:hover {
background-color: #ffd600;
}
#id {
background: rgba(15, 15, 15, 0.9); /* Transparent background */
height: fit-content;
width: max-content;
border: 2px solid black;
border-radius: 30px;
}
.about-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2em;
height: auto; /* Adjust to content size */
}
.about-content {
background: rgba(14, 13, 13, 0.7);
color: #f5ecec;
max-width: 600px;
padding: 2em;
border: 2px solid #333;
border-radius: 15px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
text-align: center;
}
.about-content h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.about-content p {
font-size: 1.1rem;
line-height: 1.6;
}
footer {
color: #fff;
padding: 20px;
text-align: center;
font-size: 14px;
background-color: #333;
}
@media (max-width: 768px) {
header nav ul {
flex-direction: column;
gap: 10px;
align-items: center;
}
.hero h1 {
font-size: 32px;
}
.hero p {
font-size: 18px;
}
.about-content h2 {
font-size: 1.8rem;
}
.about-content p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 28px;
}
.hero p {
font-size: 16px;
}
.about p, .programs h2, .blog h2, .footer {
font-size: 14px;
}
}
Our-program.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your go-to fitness destination for training programs,
tips, and health advice.">
<title>Fitness Hub</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: fixed;
width: 100%;
z-index: 1000;
background: rgba(19, 18, 18, 0.7); /* Transparent background */
}
header .logo h1 {
font-size: 24px;
color: #fff;
}
header nav ul {
list-style: none;
display: flex;
gap: 20px;
}

header nav ul li {
display: inline;
}
header nav ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
transition: background 0.3s;
}
header nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
body {
font-family: Arial, sans-serif;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Background with gradient overlay */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('barbell.jpg') no-repeat center center/cover;
opacity: 0.5;
z-index: -1;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(177, 59, 59, 0.5), rgba(26, 26, 25, 0.5));
z-index: -1;
}
/* Container */
.container {
width: 90%;
max-width: 1200px;
margin: auto;
padding: 20px;
}
/* Header and section title styling */
h2 {
text-align: center;
color: #fff;
font-size: 2.5em;
margin-bottom: 20px;
}
/* Programs section */
.programs {
padding: 50px 0;
}
.programs-marquee {
overflow: hidden;
}
.program-cards {
display: flex;
flex-wrap: wrap; /* Wrap the cards after 3 */
gap: 20px;
justify-content: space-between;
padding: 20px;
}

/* Individual program card styling */


.program-card {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: calc(33.33% - 20px); /* Make each card take up 1/3rd of the width minus the
gap */
flex: 0 0 auto;
transition: transform 0.3s;
}
.program-card:hover {
transform: translateY(-10px);
}
.program-card img {
width: 100%;
height: auto;
display: block;
} .program-card h3 {
margin: 15px;
color: #333;
}

.program-card p {
margin: 15px;
color: #666;
}

/* Footer styling */
footer {
text-align: center;
padding: 20px;
background-color: #222;
color: #fff;
font-size: 0.9em;
margin-top: auto;
}

footer p {
margin: 0;
}
/* Mobile first approach */
@media screen and (max-width: 768px) {
header {
flex-direction: column;
padding: 10px 20px;
}
header nav ul {
flex-direction: column;
align-items: center;
gap: 10px;
}

.program-cards {
flex-direction: column; /* Stack program cards vertically on mobile */
gap: 15px;
}
.program-card {
width: 100%; /* Allow cards to take full width on small screens */
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1>Fitness Hub</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="our-programme.html ">Programs</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="signup.html" class="signup-btn">Signup</a></li>
<li><a href="login.html" class="login-btn">Login</a></li>
</ul>
</nav>
</header>
<section id="programs" class="programs">
<div class="container">
<h2>Our Programs</h2>
<div class="programs-marquee">
<div class="program-cards">
<!-- Existing Program Cards -->
<div class="program-card" id="div1">
<img src="weightloss.jpg" alt="A person exercising in a weight loss program"
class="program-image">
<h3>Weight Loss</h3>
<p>A tailored plan to help you lose weight effectively and sustainably.</p>
</div>
<div class="program-card" id="div2">
<img src="body.jpg" alt="Strength Training Program" class="program-image">
<h3>Strength Training</h3>
<p>Build muscle and strength with our specialized training programs.</p>
</div>
<div class="program-card" id="div3">
<img src="yoga.jpg" alt="Yoga & Flexibility Program" class="program-image">
<h3>Yoga & Flexibility</h3>
<p>Improve your flexibility and mental clarity with our yoga classes.</p>
</div>
<!-- New Program Cards -->
<div class="program-card" id="div4">
<img src="https://media.istockphoto.com/id/1344937489/photo/male-athlete-
exercising-on-bike-in-gym.webp?
a=1&b=1&s=612x612&w=0&k=20&c=YIE1pvAog1qUpzFMcr8l_fMYva9LWau677Z8wn0
ChQg=" alt="Cardio Program" class="program-image">
<h3>Cardio</h3>
<p>Boost your heart health and endurance with our cardio programs.</p>
</div>
<div class="program-card" id="div5">
<img src="https://media.istockphoto.com/id/1279902517/photo/be-as-strong-as-
you-were-born-to-be.webp?
a=1&b=1&s=612x612&w=0&k=20&c=7TgxbbspQFXKmhH59RHzmdGVdXFDZj-
PKlkM0yMCSVM=" alt="HIIT Program" class="program-image">
<h3>HIIT (High-Intensity Interval Training)</h3>
<p>Burn fat and build strength in a short amount of time with HIIT.</p>
</div>
<div class="program-card" id="div6">
<img src="https://www.pilates-education.info/images/top/mv_india_sp.jpg"
alt="Pilates Program" class="program-image">
<h3>Pilates</h3>
<p>Improve your core strength and flexibility with our Pilates sessions.</p>
</div>
<div class="program-card" id="div7">
<img
src="https://images.unsplash.com/reserve/YEc7WB6ASDydBTw6GDlF_antalya-beach-
lulu.jpg?q=80&w=1901&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Meditation Program" class="program-image">
<h3>Meditation</h3>
<p>Reduce stress and improve mental well-being with our meditation
classes.</p>
</div>
<!-- Additional Programs -->
<div class="program-card" id="div8">
<img src="https://images.unsplash.com/photo-1536922246289-88c42f957773?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGNyb3NzJTIwZml0fGVufDB8fDB8f
Hww" alt="CrossFit Program" class="program-image">
<h3>CrossFit</h3>
<p>Join our high-intensity functional fitness classes for all levels.</p>
</div>
<div class="program-card" id="div9">
<img src="https://images.unsplash.com/photo-1644976644298-044087fc8d8d?
w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8enVtYmF8ZW58MHx8MHx8fDA
%3D" alt="Zumba Program" class="program-image">
<h3>Zumba</h3>
<p>Dance your way to fitness with energetic and fun Zumba classes!</p>
</div>
<div class="program-card" id="div10">
<img src="kickboxing.jpg" alt="Kickboxing Program" class="program-image">
<h3>Kickboxing</h3>
<p>Improve your agility, strength, and self-defense skills with Kickboxing.</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>&copy; 2024 Fitness Hub. All rights reserved.</p>
</footer>
</body>
</html>

Blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* General Body Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background: linear-gradient(to bottom right, rgba(3, 36, 69, 0.7), rgba(8, 15, 20, 0.7)),
url('gym.jpg') no-repeat center center fixed;
background-size: cover; /* Makes the image cover the entire screen */
color: #fff;
}
/* Navbar Styling */
/* General Header and Navbar Styling */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: fixed;
top: 0;
left: 0;
width: 95%;
z-index: 1000;
background: rgba(15, 15, 15, 0.8); /* Transparent black background */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Adds subtle shadow for separation */
transition: background-color 0.3s ease; /* Smooth background transition */
}

header .logo h1 {
font-size: 26px;
color: #fff;
font-family: 'Roboto', sans-serif;
margin: 0; /* Remove default margin */
}

/* Navbar links list */


header nav ul {
list-style: none;
display: flex;
gap: 30px; /* Increased gap between items */
margin: 0; /* Remove default margin */
}

/* Navbar Link Styling */


header nav ul li {
display: inline;
}

header nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px; /* Slightly larger font size for readability */
padding: 12px 20px;
border-radius: 5px;
transition: background 0.3s ease, transform 0.3s ease;
}

/* Link Hover Effects */


header nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.3); /* Light hover effect for better visibility */
transform: scale(1.05); /* Slight zoom-in effect on hover */
}

/* Responsive Styling for Smaller Screens */


@media (max-width: 768px) {
header {
padding: 15px 20px; /* Less padding on smaller screens */
flex-direction: column; /* Stack elements vertically on mobile */
align-items: flex-start; /* Align items to the left */
}

header .logo h1 {
font-size: 22px; /* Smaller logo text for mobile screens */
}

header nav ul {
flex-direction: column; /* Stack nav items vertically on smaller screens */
gap: 15px; /* Adjusted gap between menu items */
width: 100%; /* Make the nav items span the width */
margin-top: 20px; /* Space above the nav items */
}
header nav ul li a {
font-size: 16px; /* Slightly smaller text for mobile */
padding: 10px 15px; /* Adjusted padding for mobile */
width: 100%; /* Make each nav item take full width */
text-align: center; /* Center align the text */
}
}

/* Sticky Navbar Effect: This ensures the navbar stays visible while scrolling */
body {
margin-top: 60px; /* Adds space at the top of the page to accommodate the sticky header */
}

/* Optional: Smooth background color transition on scroll */


header.sticky {
background-color: rgba(15, 15, 15, 0.9); /* Darker background when the navbar is sticky */
}

/* Blog Section */
.blog {
padding: 100px 20px;
text-align: center;
background-color: rgba(204, 197, 197, 0.6); /* Slightly transparent white background */
border-radius: 15px;
margin: 40px auto;
max-width: 1200px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.blog h2 {
font-size: 42px;
margin-bottom: 15px;
color: #333;
font-family: 'Roboto', sans-serif;
}

.blog p {
font-size: 18px;
color: #555;
margin-bottom: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
opacity: 0.9;
}

/* Fitness Tips Grid */


.fitness-tips {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
margin-top: 20px;
}

/* Individual Tip Cards */


.tip {
background: rgba(255, 255, 255, 0.6); /* White background with opacity */
padding: 25px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
text-align: left;
transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
}

.tip:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
opacity: 0.95;
}

.tip h3 {
font-size: 22px;
color: #333;
margin-bottom: 12px;
font-family: 'Roboto', sans-serif;
}

.tip p {
font-size: 16px;
color: #666;
line-height: 1.6;
}

/* Footer Styling */
footer {
background-color: rgba(0, 0, 0, 0.7); /* Dark footer with transparency */
color: #fff;
padding: 15px;
text-align: center;
font-size: 14px;
font-family: 'Roboto', sans-serif;
}

footer p {
margin: 0;
}

/* Additional Styling for Responsiveness */


@media (max-width: 768px) {
.blog h2 {
font-size: 32px;
}

.tip h3 {
font-size: 20px;
}

.tip p {
font-size: 15px;
}
}

</style>

</head>
<body>
<header>
<div class="logo">
<h1>Fitness Hub</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="#index.html">Home</a></li>
<li><a href="our-programme.html ">Programs</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="signup.html" class="signup-btn">Signup</a></li>
<li><a href="login.html" class="login-btn">Login</a></li>
</ul>
</nav>
</header>

<section id="blog" class="blog">


<div class="container">
<h2>Fitness Tips & Articles</h2>
<p>Stay up to date with the latest fitness trends, workout tips, and nutrition
advice.</p>

<div class="fitness-tips">
<div class="tip">
<h3>1. Stay Hydrated</h3>
<p>Drinking water throughout the day is crucial for keeping your body hydrated,
improving performance, and helping with recovery after workouts.</p>
</div>
<div class="tip">
<h3>2. Incorporate Strength Training</h3>
<p>Strength training helps to build lean muscle, boost metabolism, and improve
overall body composition. Don't forget to include weight exercises in your routine!</p>
</div>
<div class="tip">
<h3>3. Get Enough Sleep</h3>
<p>Your body needs proper rest to recover from workouts and repair muscle
tissue. Aim for 7-9 hours of quality sleep each night to maximize your fitness results.</p>
</div>
<div class="tip">
<h3>4. Don't Skip Warm-Ups</h3>
<p>Warming up before a workout can help prevent injuries and improve your
performance. Spend 5-10 minutes doing light cardio and dynamic stretches before you dive
into your routine.</p>
</div>
<div class="tip">
<h3>5. Focus on Nutrition</h3>
<p>Eating a balanced diet is essential for supporting your fitness goals. Make
sure you're consuming a mix of lean proteins, healthy fats, and complex carbohydrates to fuel
your workouts and recovery.</p>
</div>
<div class="tip">
<h3>6. Set Realistic Goals</h3>
<p>Setting achievable fitness goals will keep you motivated and on track.
Whether it's losing weight, gaining muscle, or improving endurance, break your goals down
into smaller, measurable steps.</p>
</div>
<div class="tip">
<h3>7. Cross-Train for Better Results</h3>
<p>Mix up your workout routine by trying different activities. Combining
strength training, cardio, flexibility, and balance exercises will give you well-rounded fitness
benefits.</p>
</div>
<div class="tip">
<h3>8. Listen to Your Body</h3>
<p>It's important to recognize when your body needs rest. Overtraining can lead
to injury or burnout, so make sure you're paying attention to any aches, pains, or fatigue.</p>
</div>
</div>
</div>
</section>
<footer>
<p>&copy; 2024 Fitness Hub. All rights reserved.</p>
</footer>
</body>
</html>
Contactus.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - FitLife Gym</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
color: #333;
}
header {
background-color: #2D5D6C;
color: white;
padding: 20px;
text-align: center;
}
header h1 {
font-size: 36px;
}
.container {
width: 80%;
margin: 0 auto;
padding: 30px;
}
h2 {
color: #2D5D6C;
}
.contact-info {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
gap: 20px; /* Adds space between the cards */
}
.contact-info div {
width: 30%;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.contact-info h3 {
color: #2D5D6C;
margin-bottom: 10px;
}
.contact-info ul {
padding-left: 20px;
}
.contact-info li {
margin-bottom: 10px;
}
form {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
label {
font-size: 14px;
margin-bottom: 8px;
display: block;
color: #666;
}
input, select, textarea {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
background-color: #2D5D6C;
color: white;
padding: 12px 18px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #1a4f5d;
}
footer {
background-color: #2D5D6C;
color: white;
text-align: center;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
margin: 0 10px;
}
footer a:hover {
text-decoration: underline;
}
.social-icons a {
margin: 0 10px;
font-size: 24px;
color: white;
}
.social-icons a:hover {
color: #f4b400;
}
</style>

</head>
<body>

<header>
<h1>Contact Us - FitLife Gym</h1>
</header>

<div class="container">
<h2>We’d Love to Hear From You!</h2>
<p>Whether you're interested in our fitness programs, personal training, or have any questions,
we're here to help!</p>

<div class="contact-info">
<div>
<h3>Email Us</h3>
<p>For inquiries, support, or general information, send us an email:</p>
<ul>
<li><strong>General Questions:</strong> <a
href="mailto:[email protected]">[email protected]</a></li>
<li><strong>Membership Inquiries:</strong> <a
href="mailto:[email protected]">[email protected]</a></li>
<li><strong>Personal Training:</strong> <a
href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
<div>
<h3>Call Us</h3>
<p>Speak with a representative or book your first session over the phone:</p>
<ul>
<li><strong>Customer Service:</strong> +1 (800) 555-1234</li>
<li><strong>Personal Training:</strong> +1 (800) 555-5678</li>
</ul>
</div>
<div>
<h3>Visit Us</h3>
<p>Come by and check out our gym in person! We're located at:</p>
<p><strong>FitLife Gym</strong><br> 123 Fitness Street, Suite 101<br> Healthy City,
XY 12345<br> Country</p>
</div>
</div>

<h3>Send Us a Message</h3>
<form action="#" method="POST">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Email Address</label>


<input type="email" id="email" name="email" required>

<label for="phone">Phone Number (Optional)</label>


<input type="tel" id="phone" name="phone">

<label for="subject">Subject</label>
<select id="subject" name="subject">
<option value="membership">Membership Inquiry</option>
<option value="personal-training">Personal Training</option>
<option value="general">General Inquiry</option>
<option value="other">Other</option>
</select>

<label for="message">Message</label>
<textarea id="message" name="message" rows="6" required></textarea>

<button type="submit">Send Message</button>


</form>
</div>

<footer>
<p>Follow Us On Social Media:</p>
<div class="social-icons">
<a href="http://facebook.com/fitlifegym" target="_blank"> Facebook</a>
<a href="http://instagram.com/fitlifegym" target="_blank"> Instagram</a>
<a href="http://twitter.com/fitlifegym" target="_blank"> Twitter</a>
<a href="http://youtube.com/fitlifegym" target="_blank"> YouTube</a>
</div>
</footer>
</body>
</html>
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Login to Fitness Hub to access your fitness programs
and more.">
<title>Login - Fitness Hub</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body, html {
height: 100%;
}
body {
background: linear-gradient(rgba(164, 54, 82, 0.5), rgba(201, 165, 73,
0.5)),url('background.jpg') no-repeat center center fixed;
background-size: cover;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: fixed;
width: 100%;
z-index: 1000;
background: rgba(15, 15, 15, 0.7); /* Transparent background */
}
header .logo h1 {
font-size: 24px;
color: #fff;
}
header nav ul {
list-style: none;
display: flex;
gap: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
transition: background 0.3s;
}
header nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.auth-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding-top: 80px; /* Offset for fixed header */
}
.container {
background-color: rgba(255, 255, 255, 0.6); /* White with opacity */
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
text-align: center;
}
.container h2 {
margin-bottom: 20px;
color: #333;
}
.container label {
display: block;
margin-top: 15px;
color: #333;
text-align: left;
}
.container input {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border-radius: 4px;
border: 1px solid #ddd;
}
.container button {
width: 100%;
padding: 10px;
background-color: #5cb85c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.container button:hover {
background-color: #4cae4c;
}
.container p {
margin-top: 20px;
}
.container a {
color: #5cb85c;
text-decoration: none;
}
.container a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
position: absolute;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
header {
padding: 10px 20px;
}

.container {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="overlay"></div>
<header>
<div class="logo">
<h1>Fitness Hub</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="our-programme.html">Programs</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="signup.html" class="signup-btn">Signup</a></li>
<li><a href="login.html" class="login-btn">Login</a></li>
</ul>
</nav>
</header>
<section id="login" class="auth-section">
<div class="container">
<h2>Login to Your Account</h2>
<form action="#" method="POST">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
<p>Don't have an account? <a href="signup.html">Signup here</a></p>
</form>
</div>
</section>
<footer>
<p>&copy; 2024 Fitness Hub. All rights reserved.</p>
</footer>
</body>
</html>
Signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sign up for Fitness Hub to access personalized fitness
programs and resources.">
<title>Signup - Fitness Hub</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body, html {
height: 100%;
}
body {
background: linear-gradient(rgba(164, 54, 82, 0.5), rgba(201, 165, 73,
0.5)),url('background.jpg') no-repeat center center fixed;
background-size: cover;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: -1;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
position: fixed;
width: 100%;
z-index: 1000;
background: rgba(15, 15, 15, 0.7); /* Transparent background */
}
header .logo h1 {
font-size: 24px;
color: #fff;
}
header nav ul {
list-style: none;
display: flex;
gap: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
transition: background 0.3s;
}
header nav ul li a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.auth-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding-top: 20px; /* Offset for fixed header */
}
.container {
background-color: rgba(255, 255, 255, 0.6); /* White with opacity */
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
text-align: center;
}
.container h2 {
margin-bottom: 20px;
color: #333;
}
.container label {
display: block;
margin-top: 15px;
color: #333;
text-align: left;
}
.container input {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
border-radius: 4px;
border: 1px solid #ddd;
}
.container button {
width: 100%;
padding: 10px;
background-color: #5cb85c;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.container button:hover {
background-color: #4cae4c;
}
.container p {
margin-top: 20px;
}
.container a {
color: #5cb85c;
text-decoration: none;
}
.container a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
position: absolute;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
header {
padding: 10px 20px;
}
.container {
padding: 20px;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1>Fitness Hub</h1>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="our-programme.html">Programs</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="signup.html" class="signup-btn">Signup</a></li>
<li><a href="login.html" class="login-btn">Login</a></li>
</ul>
</nav>
</header>
<section id="signup" class="auth-section">
<div class="container">
<h2>Create a New Account</h2>
<form action="#" method="POST">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password"
required>
<button type="submit">Create Account</button>
<p>Already have an account? <a href="login.html">Login here</a></p>
</form>
</div>
</section>
<footer>
<p>&copy; 2024 Fitness Hub. All rights reserved.</p>
</footer>
</body></html>
OUTPUT:-

You might also like