Scribd
Upload
52 views8 pages

Ca 2 HTML

This document contains the code for a basic multi-section website layout using HTML and CSS. It includes sections for a navigation bar, greeting and buttons, services, skills with progress bars, a contact form, and copyright information. Styling is applied using CSS for colors, positioning, and responsive design.

Uploaded by

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

Ca 2 HTML

This document contains the code for a basic multi-section website layout using HTML and CSS. It includes sections for a navigation bar, greeting and buttons, services, skills with progress bars, a contact form, and copyright information. Styling is applied using CSS for colors, positioning, and responsive design.

Uploaded by

Sunaina Arora
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Name-Sunaina

CA2-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>
/* Adding some basic styling for better visualization */
table {
width: 100%;
border-collapse: collapse;
}

td {
padding: 20px;
border: 1px solid black;
vertical-align: top;
}

.section1 {
background-color: rgb(0, 19, 128);
color: white;
}

.section2 {
background-color: rgb(247, 247, 247);
}

.section3 {
background-color: white;
}

.section4 {
background-color: grey;
}

.section5 {
background-color: white;
}

.section6 {
background-color: bisque;
}

.button {
background-color: red;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 3px;
}

.progress-bar {
background-color: lightgray;
border: 1px solid gray;
width: 100%;
}

/* Flex container for services */


.services-container {
display: flex;

margin-top: 20px;
}

/* Flex item for each service */


.service {
flex: 0 0 calc(33.333% - 20px);
text-align: center;
}

/* Image styling */
.service img {
max-width: 40%;

}
</style>
</head>
<body>

<table>

<tr>
<td class="section1">
<h1>Demo website using HTML</h1>
<ul>
<li>Home</li>
<li>Services</li>
<li>Skills</li>
<li>Team</li>
</ul>
</td>
</tr>
</table>

<table>
<!-- Section 2: Greeting and Buttons -->
<tr>
<td class="section2">
<p>Hi,</p>
<p>I am awesome</p>
<p>I am a trainer</p>
<div>
<a href="#" class="button">Button 1</a>
<a href="#" class="button">Button 2</a>
</div>
</td>
</tr>
</table>

<table>
<!-- Section 3: Services -->
<tr>
<td class="section3">
<h2>Services</h2>
<div class="services-container">
<div class="service">
<h3>Service 1</h3>
<img src="images.jpg" alt="Service 1 Image">
</div>
<div class="service">
<h3>Service 2</h3>
<img src="images.jpg" alt="Service 2 Image">
</div>

</div>
</td>
</tr>
</table>

<table>
<!-- Section 4: Skills and Progress Bars -->
<tr>
<td class="section4">
<h2>Skills</h2>
<div>
<p>HTML</p>
<div class="progress-bar" style="width: 80%;">80%</div>
</div>
<div>
<p>CSS</p>
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div>
<p>JavaScript</p>
<div class="progress-bar" style="width: 90%;">90%</div>
</div>
</td>
</tr>
</table>

<table>
<!-- Section 5: Contact Us Form -->
<tr>
<td class="section5">
<h2>Contact Us</h2>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="mobile">Mobile:</label>
<input type="text" id="mobile">
</div>
<div>
<label for="message">Message:</label>
<textarea id="message"></textarea>
</div>
</td>
</tr>
</table>

<table>
<!-- Section 6: Copyright -->
<tr>
<td class="section6">
<p>&copy; 2023 Your Company</p>
</td>
</tr>
</table>

</body>
</html>

You might also like