Scribd
Upload
30 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

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
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