Untitled Document
Uploaded by
jdwvishxl01Untitled Document
Uploaded by
jdwvishxl01Assignment 1:
Basic Web Page Structure
1a. HTML Task
● Create a simple webpage with the following elements:
○ A title
○ A heading (<h1>)
○ A paragraph (<p>)
1b. CSS Task
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple webpage created with HTML and styled with CSS.</p>
</body>
</html>
● Add styles to:
○ Change the background color of the page.
○ Set the text color of the heading and paragraph.
○ Center-align the te h
body {
background-color: #f0f8ff; /* Light blue background */
text-align: center; /* Center-align all text */
}
h1 {
color: #2c3e50; /* Dark blue text for the heading */
}
p{
color: #34495e; /* Slightly lighter blue text for the paragraph */
}
Assignment 2: Lists and Links
2a. HTML Task
● Add an ordered list and an unordered list to your webpage. ●
Include internal and external hyperlinks.
2b. CSS Task
● Style the lists:
○ Change bullet styles for the unordered list.
○ Add numbering styles for the ordered list.
● Style the links:
○ Change color and remove underlines. ○ Add
hover effects for links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists and Links</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Webpage</h1>
<!-- Ordered List -->
<h2>Ordered List Example</h2>
<ol>
<li><a href="https://www.example.com" target="_blank">External Link</a></li>
<li><a href="#internalLink">Internal Link</a></li>
<li>Item 3</li>
</ol>
<!-- Unordered List -->
<h2>Unordered List Example</h2>
<ul>
<li><a href="https://www.example.com" target="_blank">External Link</a></li>
<li><a href="#internalLink">Internal Link</a></li>
<li>Item 3</li>
</ul>
<a id="internalLink">This is an internal link section.</a>
</body>
</html>
Css code
/* General list styling */
ol {
list-style-type: decimal; /* Numbered list */
}
ul {
list-style-type: square; /* Change bullet style */
}
/* Styling the links */
a{
color: #0066cc; /* Link color */
text-decoration: none; /* Remove underline */
}
/* Hover effects for links */
a:hover {
color: #ff6600; /* Change color on hover */
text-decoration: underline; /* Underline on hover */
}
3a. HTML Task
● Create a user registration form with the following fields:
○ Name (text input)
○ Email (email input)
○ Password (password input)
○ A "Submit" button
3b. CSS Task
● Style the form:
○ Add a border around the form.
○ Adjust the width and center-align the form.
○ Style the input fields and the button (e.g., background color, padding).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<h1>User Registration</h1>
<form action="#" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"
required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password" required>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
/* Center the form container */
.form-container {
width: 100%;
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* Form heading */
h1 {
text-align: center;
color: #333;
/* Label styling */
label {
font-size: 14px;
color: #333;
margin-bottom: 8px;
display: block;
/* Input field styling */
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
/* Button styling */
button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Button hover effect */
button:hover {
background-color: #45a049;
Assignment 4: Tables
4a. HTML Task
● Create a table to display student details:
○ Columns: Roll No, Name, Branch, Marks
4b. CSS Task
● Style the table:
○ Add borders to the table and cells.
○ Add padding inside the cells. ○
Use alternating row colors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Student Details</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<h1>Student Details</h1>
<table>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Branch</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>John Doe</td>
<td>Computer
Science</td>
<td>85</td>
</tr>
<tr>
<td>102</td>
<td>Jane Smith</td>
<td>Electrical
Engineering</td>
<td>90</td>
</tr>
<tr>
<td>103</td>
<td>Mark Johnson</td>
<td>Mechanical
Engineering</td>
<td>75</td>
</tr>
<tr>
<td>104</td>
<td>Alice Williams</td>
<td>Civil
Engineering</td>
<td>88</td>
</tr>
</tbody>
</table>
</body>
</html>
Css code
/* General table styling */
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse; /*
Collapses the table borders */
font-family: Arial, sans-serif;
/* Table header styling */
th {
background-color: #4CAF50; /*
Green background for headers */
color: white;
padding: 10px;
text-align: left;
/* Table data cell styling */
td {
padding: 10px;
text-align: left;
border: 1px solid #ddd; /* Light
border around each cell */
/* Alternating row colors */
tr:nth-child(even) {
background-color: #f2f2f2; /*
Light gray color for even rows */
tr:nth-child(odd) {
background-color: #ffffff; /* White
background for odd rows */
/* Table border styling */
table, th, td {
border: 1px solid #ddd; /* Border
for the table and cells */
Assignment 5: Multimedia Elements
5a. HTML Task
● Embed an image and a YouTube video into your webpage.
5b. CSS Task
● Style the multimedia elements:
○ Resize the image.
○ Add a border and shadow to the image. ○
Make the video responsive using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multimedia Elements</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Multimedia Elements</h1>
<!-- Embedded Image -->
<img src="https://via.placeholder.com/400" alt="Sample Image" class="image">
<!-- Embedded YouTube Video →
Css code
/* Image Styling */
.image {
width: 100%; /* Resize the image */
max-width: 400px; /* Maximum width */
border: 5px solid #333; /* Add border */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
display: block;
margin: 20px auto; /* Center the image */
}
/* Video Styling */
.video {
width: 100%;
max-width: 560px; /* Make video responsive */
margin: 20px auto; /* Center the video */
}
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen class="video"></iframe>
</body>
</html>
Assignment 6: Semantic HTML
6a. HTML Task
● Structure a webpage using semantic HTML5 tags: <header>, <nav>,
<section>, <article>, <aside>, and <footer>.
6b. CSS Task
● Add styles to the semantic elements:
○ Change the background color of the header and footer.
○ Add padding and margins to sections. ○
Style the navigation links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<h1>My Webpage</h1>
<p>Welcome to my website!</p>
</header>
<!-- Navigation Section -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Main Content Section -->
<section>
<article>
<h2>Article Title</h2>
<p>This is an article about the main topic of my webpage. It's the core content.</p>
</article>
<aside>
<h3>Related Information</h3>
<p>This section contains related information, such as links, ads, or news.</p>
</aside>
</section>
<!-- Footer Section -->
<footer>
<p>© 2025 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
/* Header Styling */
header {
background-color: #4CAF50; /* Green background for header */
color: white;
padding: 20px;
text-align: center;
}
/* Navigation Styling */
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #333;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
nav ul li a:hover {
background-color: #575757; /* Darker hover effect */
}
/* Section and Article Styling */
section {
display: flex;
justify-content: space-between;
padding: 20px;
margin: 20px;
}
article {
flex: 0 0 70%;
padding: 20px;
background-color: #f4f4f4;
margin-right: 20px;
border-radius: 8px;
}
aside {
flex: 0 0 25%;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
/* Footer Styling */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
Assignment 7: Box Model
7a. HTML Task
● Create a <div> to display a card-like section with a heading and a paragraph.
7b. CSS Task
● Apply the box model:
○ Add margins, padding, and borders to the card.
○ Set a fixed width and height.
○ Center the card horizontally and vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Card Div -->
<div class="card">
<h2>Card Heading</h2>
<p>This is a paragraph inside the card. It's an example of applying the box model with
margins, padding, and borders.</p>
</div>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
/* Card styling using the box model */
.card {
width: 300px; /* Fixed width */
height: 200px; /* Fixed height */
margin: 20px; /* Space around the card */
padding: 20px; /* Space inside the card */
border: 3px solid #333; /* Border around the card */
background-color: white; /* White background for the card */
box-sizing: border-box; /* Ensures padding and border are included in the width/height */
text-align: center;
border-radius: 8px; /* Rounded corners */
}
/* Heading and paragraph styling */
.card h2 {
margin: 0 0 10px 0; /* Margin below the heading */
}
.card p {
margin: 0; /* No margin around the paragraph */
}
Assignment 8: Navigation Bar
8a. HTML Task
● Create a navigation bar with links to Home, About, Services, and Contact.
8b. CSS Task
● Style the navigation bar:
○ Use Flexbox to arrange the links horizontally.
○ Add hover effects and change the active link's background color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation Bar -->
<nav>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Navigation Bar Styling */
nav {
background-color: #333; /* Dark background for the navigation bar */
padding: 10px 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; /* Use Flexbox to arrange items horizontally */
justify-content: center; /* Center the links horizontally */
}
nav ul li {
margin: 0 20px; /* Add horizontal space between links */
}
nav ul li a {
text-decoration: none; /* Remove underline from links */
color: white; /* White text color */
font-size: 18px;
padding: 10px 20px;
display: block;
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
/* Hover Effect */
nav ul li a:hover {
background-color: #575757; /* Darker background when hovering */
}
/* Active Link Styling */
nav ul li a.active {
background-color: #4CAF50; /* Green background for the active link */
}
Assignment 9: Grid Layout
9a. HTML Task
● Create a gallery with six images arranged in a grid layout.
9b. CSS Task
● Use CSS Grid to style the gallery:
○ Arrange the images in two rows and three columns. ○
Add gaps between the images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Gallery Section -->
<div class="gallery">
<img src="https://via.placeholder.com/300" alt="Image 1">
<img src="https://via.placeholder.com/300" alt="Image 2">
<img src="https://via.placeholder.com/300" alt="Image 3">
<img src="https://via.placeholder.com/300" alt="Image 4">
<img src="https://via.placeholder.com/300" alt="Image 5">
<img src="https://via.placeholder.com/300" alt="Image 6">
</div>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Gallery Styling */
.gallery {
display: grid; /* Use CSS Grid */
grid-template-columns: repeat(3, 1fr); /* Create 3 equal-width columns */
grid-template-rows: repeat(2, 1fr); /* Create 2 equal-height rows */
gap: 20px; /* Add space between images */
padding: 20px;
max-width: 960px; /* Set a max width for the gallery */
margin: auto; /* Center the gallery */
}
/* Image Styling */
.gallery img {
width: 100%;
height: auto;
border-radius: 8px; /* Add rounded corners to the images */
}
10a. HTML Task
● Create a webpage with a header, three sections, and a footer.
10b. CSS Task
● Use media queries to make the layout responsive:
○ Change the layout to a single-column view on smaller screens. ○
Adjust font sizes for better readability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<h1>My Responsive Webpage</h1>
<p>Welcome to my webpage. This is a responsive design
example.</p>
</header>
<!-- Section 1 -->
<section>
<h2>Section 1</h2>
<p>This is the first section of the webpage. It contains some
basic content.</p>
</section>
<!-- Section 2 -->
<section>
<h2>Section 2</h2>
<p>This is the second section. It also has some basic content
for demonstration.</p>
</section>
<!-- Section 3 -->
<section>
<h2>Section 3</h2>
<p>This is the third section. It demonstrates how to create a
responsive layout using CSS.</p>
</section>
<!-- Footer Section -->
<footer>
<p>© 2025 My Responsive Webpage</p>
</footer>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* Header Section */
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
/* Section Styling */
section {
padding: 20px;
margin: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
/* Footer Section */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
/* Media Queries for Responsive Design */
/* For screens smaller than 768px (e.g., tablets, mobile devices) */
@media screen and (max-width: 768px) {
body {
font-size: 16px; /* Adjust font size for better readability */
header {
padding: 15px;
section {
padding: 15px;
margin: 5px;
/* Change layout to single column */
header, section, footer {
width: 100%; /* Make sections and header take full width */
margin: 0; /* Remove margin between sections */
/* For screens smaller than 480px (e.g., mobile phones) */
@media screen and (max-width: 480px) {
body {
font-size: 14px; /* Adjust font size for smaller screens */
header h1 {
font-size: 24px; /* Adjust header font size */
}
section h2 {
font-size: 20px; /* Adjust section header font size */
Assignment 11: Pseudo-classes
11a. HTML Task
● Add a button to your webpage with the text "Click Me".
11b. CSS Task
● Style the button using pseudo-classes:
○ Change the background color on hover.
○ Add a shadow effect when the button is active
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Button with Pseudo-Classes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Button -->
<button class="btn">Click Me</button>
</body>
</html>
Assignment 12: Pseudo-elements
12a. HTML Task
● Create an <h1> heading with some descriptive text.
12b. CSS Task
● Add styles using pseudo-elements:
○ Use ::before to add a decorative symbol before the heading.
○ Use ::after to add a line below the heading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Heading with Pseudo-elements</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Heading with descriptive text -->
<h1 class="decorative-heading">Welcome to My Website</h1>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center; /* Center-align text on the page */
/* Heading Styling */
.decorative-heading {
font-size: 36px;
color: #333;
padding: 20px;
position: relative; /* Needed to position pseudo-elements */
}
/* Pseudo-element ::before: Adds a decorative symbol before the
heading */
.decorative-heading::before {
content: "★"; /* Decorative symbol (star) */
font-size: 40px;
color: #f39c12; /* Gold color for the star */
position: absolute;
left: -40px; /* Position the star to the left of the heading */
top: 50%;
transform: translateY(-50%); /* Center the star vertically */
/* Pseudo-element ::after: Adds a line below the heading */
.decorative-heading::after {
content: "";
display: block;
width: 50%; /* Line width */
height: 2px; /* Line thickness */
background-color: #f39c12; /* Gold color for the line */
margin: 20px auto 0; /* Position the line below the heading */
Assignment 13: CSS Animations
13a. HTML Task
● Add a div element to your webpage to act as a loading spinner.
13b. CSS Task
● Use CSS animations to make the spinner rotate infinitely.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Spinner</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Loading Spinner -->
<div class="spinner"></div>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
/* Spinner Styling */
.spinner {
width: 50px;
height: 50px;
border: 6px solid #f3f3f3; /* Light gray background color */
border-top: 6px solid #3498db; /* Blue color for the spinning part */
border-radius: 50%; /* Make the div circular */
animation: spin 2s linear infinite; /* Apply the spin animation */
/* Keyframes for spinner rotation */
@keyframes spin {
0% {
transform: rotate(0deg); /* Start at 0 degrees */
100% {
transform: rotate(360deg); /* Rotate to 360 degrees */
14a. HTML Task
● Create a card with an image, a title, and a description.
14b. CSS Task
● Add a hover effect using CSS transitions:
○ Scale the card slightly on hover.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card with Hover Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Card -->
<div class="card">
<img src="https://via.placeholder.com/300" alt="Placeholder Image"
class="card-image">
<div class="card-content">
<h2 class="card-title">Card Title</h2>
<p class="card-description">This is a description of the card. You can
put any content here.</p>
</div>
</div>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* Card Styling */
.card {
width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
transition: transform 0.3s ease; /* Smooth transition for scaling */
/* Card Image Styling */
.card-image {
width: 100%;
height: 200px;
object-fit: cover; /* Ensure image covers the area without distortion */
/* Card Content Styling */
.card-content {
padding: 20px;
/* Card Title Styling */
.card-title {
font-size: 24px;
margin: 0 0 10px;
}
/* Card Description Styling */
.card-description {
font-size: 16px;
color: #555;
/* Hover Effect */
.card:hover {
transform: scale(1.05); /* Scale the card slightly on hover */
Assignment 15: Advanced Flexbox
15a. HTML Task
● Create a webpage layout with a header, sidebar, main content, and footer.
15b. CSS Task
● Use Flexbox to style the layout:
○ Arrange the sidebar and main content horizontally.
○ Adjust the layout to stack elements vertically on smaller screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Flexbox Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Website Header</h1>
</header>
<!-- Main Layout -->
<div class="layout">
<!-- Sidebar -->
<aside class="sidebar">
<h2>Sidebar</h2>
<p>Links and additional content</p>
</aside>
<!-- Main Content -->
<main class="content">
<h2>Main Content</h2>
<p>This is the main content area where you can add articles, posts,
etc.</p>
</main>
</div>
<!-- Footer -->
<footer>
<p>Footer Content © 2025</p>
</footer>
</body>
</html>
Css code
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
/* Header Styling */
header {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px 0;
/* Main Layout Styling */
.layout {
display: flex; /* Use Flexbox for layout */
justify-content: space-between;
padding: 20px;
/* Sidebar Styling */
.sidebar {
width: 25%;
background-color: #2ecc71;
color: white;
padding: 20px;
/* Main Content Styling */
.content {
width: 70%;
background-color: #ecf0f1;
padding: 20px;
/* Footer Styling */
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 10px 0;
/* Media Query for smaller screens (responsive layout) */
@media (max-width: 768px) {
.layout {
flex-direction: column; /* Stack elements vertically */
.sidebar {
width: 100%; /* Sidebar takes full width */
margin-bottom: 20px; /* Add space below sidebar */
.content {
width: 100%; /* Main content takes full width */
You might also like
- C++Primer 5th Edition Simplified Chinese Verson0% (1)C++Primer 5th Edition Simplified Chinese Verson864 pages
- Tables: Program:: Doctype HTML Head StyleNo ratings yetTables: Program:: Doctype HTML Head Style12 pages
- Yoga Anatomy (Leslie Kaminoff) (Z-Library)No ratings yetYoga Anatomy (Leslie Kaminoff) (Z-Library)43 pages
- Preeti Kumari 22SCSE1012771 Sec-37 (P2)No ratings yetPreeti Kumari 22SCSE1012771 Sec-37 (P2)40 pages
- DLL - ALL SUBJECTS 2 - Q4 - W5 - D2 - OkNo ratings yetDLL - ALL SUBJECTS 2 - Q4 - W5 - D2 - Ok7 pages
- Year 10 Balancing Equations - Level 2 Year 10 Balancing Equations - Level 2No ratings yetYear 10 Balancing Equations - Level 2 Year 10 Balancing Equations - Level 22 pages
- Linearizing Effect Regenerative FeedbackNo ratings yetLinearizing Effect Regenerative Feedback3 pages
- Talmachi 2020 - The Implications of Proptech On The Real Estate Brokerage. The Case Study of Dubai, United Arab EmiratesNo ratings yetTalmachi 2020 - The Implications of Proptech On The Real Estate Brokerage. The Case Study of Dubai, United Arab Emirates106 pages
- Lec 2-Week 1 - (Design of Sewer System)No ratings yetLec 2-Week 1 - (Design of Sewer System)19 pages
- G12 Phy Sci P2 June 2025 Marking GuidelinesNo ratings yetG12 Phy Sci P2 June 2025 Marking Guidelines13 pages
- Session 2. Legal, Technological, Accounting, Political Environments and The Role of CultureNo ratings yetSession 2. Legal, Technological, Accounting, Political Environments and The Role of Culture25 pages
- JRE410 - Lecture 1 - Intro To Course and Strategy - S2024 - QuercusNo ratings yetJRE410 - Lecture 1 - Intro To Course and Strategy - S2024 - Quercus63 pages
- VH Cbse-Gr-8 Mathematics Sample QP Half-YearlyNo ratings yetVH Cbse-Gr-8 Mathematics Sample QP Half-Yearly10 pages
- VBM Phase 4 US Europe Updated 22 July 20No ratings yetVBM Phase 4 US Europe Updated 22 July 203 pages
