<section class=”full-width”>
<p>Your content goes here…</p>
</section>

.full-width {
width: 100%;
padding: 20px;
background-color: #f0f0f0; /* Example background color */
}

<section class=”single-column”>
<p>Your content goes here…</p>
</section>

.single-column {
width: 80%; /* Adjust as needed */
margin: 0 auto;
padding: 20px;
background-color: #e0e0e0;
}

<section class=”two-column”>
<div class=”column”>
<p>Column 1 content…</p>
</div>
<div class=”column”>
<p>Column 2 content…</p>
</div>
</section>

.two-column {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 20px;
background-color: #d0d0d0;
}

.column {
flex: 1;
background-color: #c0c0c0;
padding: 20px;
}

<section class=”three-column”>
<div class=”column”>
<p>Column 1 content…</p>
</div>
<div class=”column”>
<p>Column 2 content…</p>
</div>
<div class=”column”>
<p>Column 3 content…</p>
</div>
</section>

.three-column {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 20px;
background-color: #b0b0b0;
}

.column {
flex: 1;
background-color: #a0a0a0;
padding: 20px;
}

<footer class=”footer”>
<p>Your footer content…</p>
</footer>

.footer {
width: 100%;
padding: 20px;
background-color: #303030;
color: white;
text-align: center;
}

@media (max-width: 768px) {
.two-column, .three-column {
flex-direction: column;
}

.single-column {
width: 100%;
}
}

<header class=”basic-header”>
<div class=”logo”>Your Logo</div>
<nav class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</header>

.basic-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #404040;
color: white;
}

.logo {
font-size: 24px;
font-weight: bold;
}

.nav ul {
list-style: none;
display: flex;
gap: 15px;
}

.nav a {
text-decoration: none;
color: white;
}

<header class=”centered-logo-header”>
<nav class=”nav-left”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
</ul>
</nav>
<div class=”logo”>Your Logo</div>
<nav class=”nav-right”>
<ul>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</header>

Style 1:

.centered-logo-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #505050;
color: white;
}

.nav-left ul, .nav-right ul {
list-style: none;
display: flex;
gap: 15px;
}

.nav-left a, .nav-right a {
text-decoration: none;
color: white;
}

.logo {
font-size: 24px;
font-weight: bold;
}

Style 2:

.centered-logo-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #505050;
color: white;
}

.nav-left, .nav-right {
flex: 1; /* Allows space for the left and right navs */
}

.nav-left ul {
list-style: none;
display: flex;
justify-content: flex-end; /* Aligns left menu closer to the logo */
gap: 15px;
margin: 0;
padding: 0;
}

.nav-right ul {
list-style: none;
display: flex;
justify-content: flex-start; /* Aligns right menu closer to the right edge */
gap: 15px;
margin: 0;
padding: 0;
}

.nav-left a, .nav-right a {
text-decoration: none;
color: white;
}

.logo {
font-size: 24px;
font-weight: bold;
padding: 0 20px; /* Optional: Adds some padding around the logo */
}

<header class=”stacked-header”>
<div class=”logo”>Your Logo</div>
<nav class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</header>

.stacked-header {
text-align: center;
padding: 20px;
background-color: #606060;
color: white;
}

.logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

.nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 15px;
}

.nav a {
text-decoration: none;
color: white;
}

<div class=”side-nav-layout”>
<aside class=”side-nav”>
<div class=”logo”>Your Logo</div>
<nav class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</aside>
<main class=”content”>
<header class=”main-header”>
<p>Main header content…</p>
</header>
<section>
<p>Main content goes here…</p>
</section>
</main>
</div>

.side-nav-layout {
display: flex;
}

.side-nav {
width: 250px;
background-color: #707070;
color: white;
padding: 20px;
}

.side-nav .logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

.nav ul {
list-style: none;
padding: 0;
}

.nav li {
margin: 10px 0;
}

.nav a {
text-decoration: none;
color: white;
}

.content {
flex: 1;
padding: 20px;
background-color: #f0f0f0;
}

.main-header {
padding: 10px 0;
background-color: #808080;
color: white;
text-align: center;
}

<div class=”sidebar-layout”>
<aside class=”sidebar”>
<div class=”logo”>Your Logo</div>
<nav class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</aside>
<main class=”content”>
<header class=”main-header”>
<p>Main header content…</p>
</header>
<section>
<p>Main content goes here…</p>
</section>
</main>
</div>

CSS FOR LEFT SIDEBAR

.sidebar-layout {
display: flex;
}

.sidebar {
width: 250px;
background-color: #808080;
color: white;
padding: 20px;
position: fixed; /* Makes the sidebar stay in place */
left: 0;
top: 0;
bottom: 0;
}

.sidebar .logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

.nav ul {
list-style: none;
padding: 0;
}

.nav li {
margin: 10px 0;
}

.nav a {
text-decoration: none;
color: white;
}

.content {
margin-left: 270px; /* Account for sidebar width and padding */
padding: 20px;
background-color: #f0f0f0;
flex: 1;
}

.main-header {
padding: 10px 0;
background-color: #707070;
color: white;
text-align: center;
}

CSS FOR RIGHT SIDEBAR

.sidebar-layout {
display: flex;
}

.sidebar {
width: 250px;
background-color: #808080;
color: white;
padding: 20px;
position: fixed; /* Makes the sidebar stay in place */
right: 0;
top: 0;
bottom: 0;
}

.sidebar .logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

.nav ul {
list-style: none;
padding: 0;
}

.nav li {
margin: 10px 0;
}

.nav a {
text-decoration: none;
color: white;
}

.content {
margin-right: 270px; /* Account for sidebar width and padding */
padding: 20px;
background-color: #f0f0f0;
flex: 1;
}

.main-header {
padding: 10px 0;
background-color: #707070;
color: white;
text-align: center;
}

HTML:

<aside class=”sidebar”>
<button class=”toggle-btn” onclick=”toggleSidebar()”>☰</button>
<div class=”logo”>Your Logo</div>
<nav class=”nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</aside>

CSS

.sidebar {
transition: width 0.3s;
}

.sidebar.collapsed {
width: 50px;
}

.content {
transition: margin 0.3s;
}

.content.collapsed {
margin-left: 70px; /* Adjust for collapsed sidebar */
}

.toggle-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
margin-bottom: 20px;
}

JAVASCRIPT

function toggleSidebar() {
const sidebar = document.querySelector(‘.sidebar’);
const content = document.querySelector(‘.content’);
sidebar.classList.toggle(‘collapsed’);
content.classList.toggle(‘collapsed’);
}

<nav class=”dropdown-nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li class=”dropdown”>
<a href=”#”>Services</a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Web Design</a></li>
<li><a href=”#”>SEO</a></li>
<li><a href=”#”>Marketing</a></li>
</ul>
</li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

.dropdown-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 20px;
}

.dropdown-nav li {
position: relative;
}

.dropdown-nav a {
text-decoration: none;
color: #333;
padding: 10px 15px;
display: block;
}

.dropdown-menu {
list-style: none;
position: absolute;
left: 0;
top: 100%;
background-color: #f9f9f9;
display: none;
padding: 10px 0;
min-width: 150px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li {
width: 100%;
}

.dropdown-menu a {
padding: 10px 15px;
color: #333;
}

.dropdown:hover .dropdown-menu {
display: block;
}

RESPONSIVE CSS:

@media (max-width: 768px) {
.dropdown-nav ul {
flex-direction: column; /* Stack the items vertically */
}

.dropdown-menu {
position: static;
box-shadow: none;
display: none; /* Keep it hidden initially */
}

.dropdown:hover .dropdown-menu {
display: block;
}
}

<nav class=”mega-nav”>
<ul>
<li><a href=”#”>Home</a></li>
<li class=”mega-dropdown”>
<a href=”#”>Products</a>
<div class=”mega-menu”>
<div class=”column”>
<h3>Category 1</h3>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul>
</div>
<div class=”column”>
<h3>Category 2</h3>
<ul>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
<li><a href=”#”>Item 6</a></li>
</ul>
</div>
<div class=”column”>
<h3>Category 3</h3>
<ul>
<li><a href=”#”>Item 7</a></li>
<li><a href=”#”>Item 8</a></li>
<li><a href=”#”>Item 9</a></li>
</ul>
</div>
</div>
</li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

.mega-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 20px;
}

.mega-nav li {
position: relative;
}

.mega-nav a {
text-decoration: none;
color: #333;
padding: 10px 15px;
display: block;
}

.mega-menu {
position: absolute;
left: 0;
top: 100%;
display: none;
background-color: #f9f9f9;
padding: 20px;
width: 600px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
}

.mega-dropdown:hover .mega-menu {
display: flex;
}

.column {
width: 30%;
}

.column h3 {
margin-top: 0;
}

.column ul {
list-style: none;
padding: 0;
margin: 0;
}

RESPONSIVE CSS:

@media (max-width: 768px) {
.mega-menu {
flex-direction: column; /* Stack columns vertically */
width: 100%; /* Full-width menu on small screens */
position: static;
}

.mega-dropdown:hover .mega-menu {
display: block;
}
}

<div class=”accordion-menu”>
<div class=”accordion-item”>
<button class=”accordion-btn”>Section 1</button>
<div class=”accordion-content”>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
</div>
<div class=”accordion-item”>
<button class=”accordion-btn”>Section 2</button>
<div class=”accordion-content”>
<a href=”#”>Link 4</a>
<a href=”#”>Link 5</a>
<a href=”#”>Link 6</a>
</div>
</div>
</div>

CSS

.accordion-menu {
width: 100%;
}

.accordion-item {
margin-bottom: 10px;
}

.accordion-btn {
width: 100%;
background-color: #333;
color: white;
border: none;
text-align: left;
padding: 10px 15px;
cursor: pointer;
}

.accordion-content {
background-color: #f0f0f0;
display: none;
padding: 10px 15px;
}

.accordion-btn.active + .accordion-content {
display: block;
}

RESPONSIVE CSS

@media (max-width: 768px) {
.accordion-btn {
font-size: 16px; /* Adjust font size for readability */
}

.accordion-content {
padding: 15px; /* Adjust padding for a better mobile experience */
}
}

JAVASCRIPT

document.querySelectorAll(‘.accordion-btn’).forEach(button => {
button.addEventListener(‘click’, () => {
button.classList.toggle(‘active’);
let content = button.nextElementSibling;
content.style.display = content.style.display === ‘block’ ? ‘none’ : ‘block’;
});
});

<nav class=”horizontal-scroll-nav”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
<li><a href=”#”>Item 5</a></li>
<li><a href=”#”>Item 6</a></li>
<li><a href=”#”>Item 7</a></li>
<li><a href=”#”>Item 8</a></li>
</ul>
</nav>

.horizontal-scroll-nav ul {
display: flex;
overflow-x: auto;
white-space: nowrap;
list-style: none;
padding: 10px 0;
margin: 0;
gap: 10px;
}

.horizontal-scroll-nav li {
display: inline-block;
}

.horizontal-scroll-nav a {
text-decoration: none;
color: #333;
padding: 10px 15px;
background-color: #e0e0e0;
border-radius: 5px;
display: block;
}

RESPONSIVE CSS:

.horizontal-scroll-nav ul {
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

@media (max-width: 768px) {
.horizontal-scroll-nav a {
font-size: 14px; /* Adjust font size for smaller screens */
padding: 8px 10px; /* Reduce padding for a better fit */
}
}

.sticky-nav {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
background-color: #333;
color: white;
padding: 10px 0;
z-index: 1000;
}

.sticky-nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 0;
margin: 0;
}

.sticky-nav a {
text-decoration: none;
color: white;
padding: 10px 15px;
}

RESPONSIVE CSS:

@media (max-width: 768px) {
.sticky-nav {
padding: 8px 0; /* Reduce padding for smaller screens */
}

.sticky-nav ul {
flex-direction: column; /* Stack the menu items vertically */
}
}

<nav class=”responsive-nav”>
<button class=”hamburger” onclick=”toggleMobileMenu()”>☰</button>
<ul class=”nav-menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>

css:

.responsive-nav .hamburger {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}

@media (max-width: 768px) {
.responsive-nav .nav-menu {
display: none;
flex-direction: column;
}

.responsive-nav .nav-menu.active {
display: flex;
}

.responsive-nav .hamburger {
display: block;
}
}

javascript:

function toggleMobileMenu() {
const menu = document.querySelector(‘.nav-menu’);
menu.classList.toggle(‘active’);
}

<div class=”resizable-draggable-box” id=”draggable-box”>
<button class=”close-btn” id=”close-btn”>&times;</button>
<img src=”your-image.jpg” alt=”Your Content” />
<div class=”content”>
<p>Put your content here…</p>
</div>
<div class=”resize-handle”></div>
</div>

CSS:

/* Basic styling for the resizable and draggable box */
.resizable-draggable-box {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
border: 2px solid #505050;
background-color: #f0f0f0;
overflow: hidden;
cursor: move;
box-sizing: border-box;
}

/* Styling for the close button */
.close-btn {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
background-color: #d9534f;
color: white;
border: none;
border-radius: 50%;
font-size: 16px;
line-height: 20px;
text-align: center;
cursor: pointer;
z-index: 1;
}

/* Styling for the content inside the box */
.resizable-draggable-box .content {
padding: 10px;
}

/* Styling for the image (optional) */
.resizable-draggable-box img {
width: 100%;
height: auto;
}

/* Styling for the resize handle at the bottom-right corner */
.resize-handle {
position: absolute;
width: 15px;
height: 15px;
background-color: #505050;
bottom: 0;
right: 0;
cursor: se-resize;
}

JS:

const box = document.getElementById(‘draggable-box’);
const resizeHandle = box.querySelector(‘.resize-handle’);
const closeBtn = document.getElementById(‘close-btn’);

let isResizing = false;
let isDragging = false;
let startX, startY, startWidth, startHeight, initialMouseX, initialMouseY;

// Dragging functionality
box.addEventListener(‘mousedown’, (e) => {
if (!e.target.classList.contains(‘resize-handle’) && !e.target.classList.contains(‘close-btn’)) {
isDragging = true;
initialMouseX = e.clientX – box.offsetLeft;
initialMouseY = e.clientY – box.offsetTop;
}
});

document.addEventListener(‘mousemove’, (e) => {
if (isDragging) {
box.style.left = e.clientX – initialMouseX + ‘px’;
box.style.top = e.clientY – initialMouseY + ‘px’;
}
if (isResizing) {
box.style.width = startWidth + (e.clientX – startX) + ‘px’;
box.style.height = startHeight + (e.clientY – startY) + ‘px’;
}
});

document.addEventListener(‘mouseup’, () => {
isDragging = false;
isResizing = false;
});

// Resizing functionality
resizeHandle.addEventListener(‘mousedown’, (e) => {
isResizing = true;
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(box).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(box).height, 10);
e.preventDefault();
});

// Closing functionality
closeBtn.addEventListener(‘click’, () => {
box.style.display = ‘none’;
});

<nav class=”breadcrumb”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Category</a></li>
<li><a href=”#”>Subcategory</a></li>
<li>Current Page</li>
</ul>
</nav>

/* Styling for the breadcrumb navigation */
.breadcrumb {
display: flex;
align-items: center;
font-size: 14px;
}

.breadcrumb ul {
list-style: none;
display: flex;
padding: 0;
margin: 0;
}

.breadcrumb li {
margin-right: 8px;
}

.breadcrumb li a {
text-decoration: none;
color: #007bff;
}

.breadcrumb li a:hover {
text-decoration: underline;
}

/* Styling for the separator */
.breadcrumb li::after {
content: “/”;
margin-left: 8px;
color: #6c757d;
}

.breadcrumb li:last-child::after {
content: “”;
margin: 0;
}

.breadcrumb li:last-child a {
color: #6c757d;
pointer-events: none;
cursor: default;
}

<div class=“main-container full-width”> <p>Full-width content goes here…</p> </div>

.full-width {
width: 100%;
padding: 20px; /* Optional: Add padding for spacing */
background-color: #f0f0f0; /* Optional: Background color */
box-sizing: border-box; /* Ensures padding doesn’t affect total width */
}

<div class=”main-container adjustable-width”>
<p>Adjustable width content goes here…</p>
</div>

.adjustable-width {
width: 100%;
max-width: 1200px; /* Set maximum container width */
margin: 0 auto; /* Center the container */
padding: 20px; /* Optional: Add padding for spacing */
background-color: #f0f0f0; /* Optional: Background color */
box-sizing: border-box; /* Ensures padding doesn’t affect total width */
}

<div class=”main-container responsive”>
<p>Responsive container content goes here…</p>
</div>

.responsive {
width: 90%; /* Default width */
max-width: 1200px; /* Maximum width for larger screens */
margin: 0 auto; /* Center the container */
padding: 20px; /* Optional: Add padding for spacing */
background-color: #f0f0f0; /* Optional: Background color */
box-sizing: border-box; /* Ensures padding doesn’t affect total width */
}

@media (max-width: 768px) {
.responsive {
width: 95%; /* Slightly wider on smaller screens */
padding: 15px; /* Adjust padding for smaller screens */
}
}

@media (max-width: 480px) {
.responsive {
width: 100%; /* Full width on very small screens */
padding: 10px; /* Further adjust padding for mobile */
}
}

<div class=“main-container fluid-fixed”> <p>Fluid and fixed-width container content goes here…</p> </div>

.fluid-fixed {
width: 100%;
max-width: 1200px; /* Limits width for larger screens */
min-width: 300px; /* Sets minimum width */
margin: 0 auto; /* Center the container */
padding: 20px; /* Optional padding */
background-color: #f0f0f0; /* Optional background color */
box-sizing: border-box;
}

<div class=”two-sidebar-layout”>
<aside class=”left-sidebar”>
<p>Left Sidebar Content</p>
</aside>
<main class=”main-content”>
<p>Main Content Area</p>
</main>
<aside class=”right-sidebar”>
<p>Right Sidebar Content</p>
</aside>
</div>

/* Basic styling for the container with two sidebars */
.two-sidebar-layout {
display: flex;
flex-wrap: wrap;
width: 100%;
}

/* Styling for the left sidebar */
.left-sidebar {
flex: 1;
min-width: 200px;
max-width: 250px;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}

/* Styling for the main content area */
.main-content {
flex: 2;
min-width: 300px;
padding: 20px;
background-color: #ffffff;
box-sizing: border-box;
}

/* Styling for the right sidebar */
.right-sidebar {
flex: 1;
min-width: 200px;
max-width: 250px;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.two-sidebar-layout {
flex-direction: column;
}

.left-sidebar,
.right-sidebar,
.main-content {
min-width: 100%;
}
}

<div class=”table-responsive”>
<table class=”responsive-table”>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>Developer</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>32</td>
<td>Designer</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Michael Brown</td>
<td>45</td>
<td>Manager</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>

/* Styling for the table container to enable horizontal scrolling */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 20px;
}

/* Basic styling for the table */
.responsive-table {
width: 100%;
border-collapse: collapse;
min-width: 600px; /* Optional: Ensures a minimum width */
}

/* Table header styling */
.responsive-table thead {
background-color: #505050;
color: white;
}

.responsive-table th, .responsive-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}

/* Alternating row colors for better readability */
.responsive-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}

/* Hover effect for table rows */
.responsive-table tbody tr:hover {
background-color: #f1f1f1;
}

/* Make table more compact on smaller screens */
@media (max-width: 768px) {
.responsive-table th, .responsive-table td {
padding: 8px;
}
}

<header class=”sticky-header”>
<p>Sticky Header</p>
</header>
<main>
<p>Main content goes here…</p>
</main>
<footer class=”sticky-footer”>
<p>Sticky Footer</p>
</footer>

.sticky-header, .sticky-footer {
position: sticky;
background-color: #505050;
color: white;
padding: 10px;
z-index: 10;
}

.sticky-header {
top: 0;
}

.sticky-footer {
bottom: 0;
}

main {
min-height: 1500px; /* For demo purposes */
}

<div class=”accordion”>
<button class=”accordion-btn”>Section 1</button>
<div class=”accordion-content”>
<p>Content for section 1…</p>
</div>
<button class=”accordion-btn”>Section 2</button>
<div class=”accordion-content”>
<p>Content for section 2…</p>
</div>
</div>

.accordion-content {
display: none;
padding: 10px;
background-color: #f0f0f0;
border-top: 1px solid #ddd;
}

.accordion-btn {
background-color: #505050;
color: white;
padding: 10px;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
}

.accordion-btn:focus + .accordion-content,
.accordion-btn:active + .accordion-content {
display: block;
}

<button class=”open-modal”>Open Modal</button>
<div class=”modal” id=”myModal”>
<div class=”modal-content”>
<span class=”close”>&times;</span>
<p>This is a modal window.</p>
</div>
</div>

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
width: 300px;
}

.close {
cursor: pointer;
float: right;
font-size: 20px;
}

<div class=”grid-container”>
<div class=”grid-item”>Item 1</div>
<div class=”grid-item”>Item 2</div>
<div class=”grid-item”>Item 3</div>
<div class=”grid-item”>Item 4</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}

.grid-item {
background-color: #505050;
color: white;
padding: 20px;
text-align: center;
}

<div class=”tabs”>
<button class=”tab-link active” data-tab=”tab1″>Tab 1</button>
<button class=”tab-link” data-tab=”tab2″>Tab 2</button>
</div>
<div id=”tab1″ class=”tab-content active”>
<p>Content for Tab 1</p>
</div>
<div id=”tab2″ class=”tab-content”>
<p>Content for Tab 2</p>
</div>

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

.tab-link {
background-color: #505050;
color: white;
padding: 10px;
cursor: pointer;
border: none;
margin-right: 5px;
}

.tab-link.active {
background-color: #808080;
}

<section class=”hero”>
<h1>Welcome to Our Website</h1>
<p>Hero section with a background image</p>
</section>

.hero {
background: url(‘path/to/your/image.jpg’) no-repeat center center/cover;
color: white;
text-align: center;
padding: 100px 0;
}

<aside class=”fixed-sidebar”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
</ul>
</aside>
<main>
<p>Main content…</p>
</main>

.fixed-sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #505050;
color: white;
padding: 20px;
}

<div class=”card”>
<img src=”path/to/image.jpg” alt=”Card Image”>
<div class=”card-body”>
<h3>Card Title</h3>
<p>Card description…</p>
</div>
</div>

.card {
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
max-width: 300px;
}

.card img {
width: 100%;
}

.card-body {
padding: 15px;
}

<button class=“animate-btn”>Hover over me</button>

.animate-btn {
background-color: #505050;
color: white;
padding: 10px 20px;
transition: background-color 0.3s;
}

.animate-btn:hover {
background-color: #808080;
}

<nav class=”breadcrumb” itemscope itemtype=”http://schema.org/BreadcrumbList”>
<ul>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”#”><span itemprop=”name”>Home</span></a>
</li>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”#”><span itemprop=”name”>Category</span></a>
</li>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<span itemprop=”name”>Current Page</span>
</li>
</ul>
</nav>

/* Reuse the breadcrumb styles from earlier */

<div class=”flex-grid-container”>
<div class=”flex-item”>Flex 1</div>
<div class=”flex-item”>Flex 2</div>
<div class=”grid-item”>Grid 1</div>
<div class=”grid-item”>Grid 2</div>
</div>

.flex-grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}

.flex-item {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
}

.grid-item {
background-color: #505050;
color: white;
padding: 20px;
}

<picture>
<source srcset=”path/to/image-large.jpg” media=”(min-width: 800px)”>
<source srcset=”path/to/image-medium.jpg” media=”(min-width: 500px)”>
<img src=”path/to/image-small.jpg” alt=”Responsive Image”>
</picture>

img {
max-width: 100%;
height: auto;
}

<section class=”contact-us”>
<h2>Contact Us</h2>
<form id=”contact-form”>
<div class=”form-group”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required>
</div>
<div class=”form-group”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>
</div>
<div class=”form-group”>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message” required></textarea>
</div>
<button type=”submit”>Send Message</button>
</form>
</section>

CSS:

.contact-us {
background-color: #f9f9f9;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
max-width: 500px;
margin: auto;
}

.contact-us h2 {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type=”text”],
input[type=”email”],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}

textarea {
height: 100px; /* Adjust height as needed */
}

button {
background-color: #505050;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #808080;
}

JS: JavaScript for Form Submission (Validation)

document.getElementById(‘contact-form’).addEventListener(‘submit’, function(event) {
event.preventDefault();
// Add your form handling logic here
alert(‘Message sent!’); // Example alert
});

PHP FORM HANDLING:

HTML Form (contact.html)

<form id=”contact-form” action=”contact.php” method=”POST”>
…
<!– Same form structure as before –>
</form>

PHP Code (contact.php)

<?php
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
$name = htmlspecialchars(trim($_POST[“name”]));
$email = htmlspecialchars(trim($_POST[“email”]));
$message = htmlspecialchars(trim($_POST[“message”]));

// Basic validation
if (!empty($name) && filter_var($email, FILTER_VALIDATE_EMAIL) && !empty($message)) {
// Prepare the email
$to = “your-email@example.com”; // Replace with your email
$subject = “New Contact Message from $name”;
$body = “Name: $name\nEmail: $email\nMessage:\n$message”;
$headers = “From: $email”;

// Send the email
if (mail($to, $subject, $body, $headers)) {
echo “Message sent successfully!”;
} else {
echo “Failed to send message.”;
}
} else {
echo “Please fill in all fields correctly.”;
}
} else {
echo “Invalid request method.”;
}
?>

<div class=”tooltip-container”>
<button class=”tooltip-button”>Hover me</button>
<span class=”tooltip”>This is a tooltip!</span>
</div>

<div class=”tooltip-container”>
<a href=”#” class=”tooltip-link”>Info</a>
<span class=”tooltip”>More information here!</span>
</div>

.tooltip-container {
position: relative;
display: inline-block; /* Allows positioning of the tooltip */
margin: 20px; /* Spacing between tooltip examples */
}

.tooltip-button, .tooltip-link {
padding: 10px 15px;
border: none;
background-color: #3498db;
color: white;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.tooltip-button:hover, .tooltip-link:hover {
background-color: #2980b9; /* Darker shade on hover */
}

.tooltip {
visibility: hidden; /* Hide tooltip by default */
width: 120px; /* Tooltip width */
background-color: #333; /* Tooltip background */
color: #fff; /* Tooltip text color */
text-align: center; /* Center text */
border-radius: 5px; /* Rounded corners */
padding: 5px; /* Padding around text */
position: absolute; /* Position relative to the container */
z-index: 1; /* Stack above other elements */
bottom: 125%; /* Position above the button */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Adjust to truly center */
opacity: 0; /* Make it invisible */
transition: opacity 0.3s; /* Smooth fade-in effect */
}

.tooltip-container:hover .tooltip {
visibility: visible; /* Show tooltip on hover */
opacity: 1; /* Fade in effect */
}

<div class=”relative-container”>
<h2>Relative Positioning</h2>
<div class=”relative-box”>I am positioned relatively</div>
</div>

<div class=”absolute-container”>
<h2>Absolute Positioning</h2>
<div class=”absolute-box”>I am positioned absolutely</div>
</div>

<div class=”fixed-container”>
<h2>Fixed Positioning</h2>
<div class=”fixed-box”>I am positioned fixed</div>
</div>

<div class=”sticky-container”>
<h2>Sticky Positioning</h2>
<div class=”sticky-box”>I am positioned sticky</div>
</div>

<div class=”content”>
<p>Scroll down to see the sticky effect in action.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
<p>More content…</p>
<p>More content…</p>
<p>More content…</p>
<p>More content…</p>
<p>More content…</p>
<p>More content…</p>
<p>More content…</p>
</div>

.relative-container, .absolute-container, .fixed-container, .sticky-container {
margin-bottom: 50px;
padding: 20px;
border: 1px solid #3498db;
background-color: #f0f0f0;
}

.relative-box {
position: relative;
background-color: #e74c3c;
padding: 20px;
color: white;
margin-top: 10px; /* Adjusts the box’s position relative to its normal flow */
}

.absolute-container {
position: relative; /* Set a relative position for the parent container */
}

.absolute-box {
position: absolute; /* Absolute positioning */
top: 20px; /* 20px from the top of the nearest positioned ancestor */
left: 20px; /* 20px from the left */
background-color: #2ecc71;
padding: 20px;
color: white;
}

.fixed-box {
position: fixed; /* Fixed positioning */
top: 10px; /* 10px from the top of the viewport */
right: 10px; /* 10px from the right */
background-color: #3498db;
padding: 20px;
color: white;
}

.sticky-container {
position: relative; /* Position relative for the sticky box */
}

.sticky-box {
position: sticky; /* Sticky positioning */
top: 0; /* Sticks to the top of the viewport */
background-color: #9b59b6;
padding: 20px;
color: white;
}

.content {
height: 1500px; /* Increased height to demonstrate scrolling */
}

POSITIONING TECHNIQUES:

Explanation of Positioning Techniques

1. Relative Positioning:
   • The .relative-box is positioned relative to its normal position. Adjusting the margins affects its placement.
2. Absolute Positioning:
   • The .absolute-box is positioned absolutely within the .absolute-container, which has position: relative. It’s positioned 20px from the top and left of its positioned ancestor.
3. Fixed Positioning:
   • The .fixed-box is fixed to the viewport, meaning it will remain at 10px from the top and right of the window, even when scrolling.
4. Sticky Positioning:
   • The .sticky-box will remain in its place until it reaches the top of the viewport while scrolling, after which it will stick to the top.

<div class=”animated-box”>
<h1>Welcome!</h1>
<p>This box slides in from the left and fades in.</p>
</div>

CSS1:

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}

.animated-box {
width: 300px;
padding: 20px;
background-color: #4CAF50;
color: white;
text-align: center;
border-radius: 10px;
animation-name: slideInFadeIn;
animation-duration: 1s;
animation-fill-mode: forwards; /* Maintain the final state after animation */
}

@keyframes slideInFadeIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

CSS2:  more properties of the animated box

.animated-box {
animation-name: slideInFadeIn;
animation-duration: 1s;
animation-timing-function: ease-in-out; /* Smooth acceleration */
animation-delay: 0s; /* No delay before starting */
animation-iteration-count: 1; /* Only run once */
animation-fill-mode: forwards; /* Maintain the final state */
}

Key Animation Properties

1. animation-name: Specifies the name of the @keyframes you want to apply.
2. animation-duration: Defines how long the animation should take (e.g., 2s for 2 seconds).
3. animation-timing-function: Controls the speed of the animation over its duration (e.g., ease, linear, ease-in, ease-out, cubic-bezier()).
4. animation-delay: Sets a delay before the animation starts (e.g., 1s).
5. animation-iteration-count: Specifies how many times the animation should run (e.g., infinite for continuous looping).
6. animation-direction: Defines whether the animation should play in reverse on alternate iterations (e.g., alternate).
7. animation-fill-mode: Controls what styles are applied before and after the animation (e.g., forwards, backwards, both).

CSS: