Refactor index.html to modularize sections and add advertisement banners for hero, about, featured, projects, services, and contact sections. Enhance JavaScript to load components dynamically and improve CSS styles for ad banners.
This commit is contained in:
Mohammed Al-yaseen
1
components/ad-placements.html
Normal file
1
components/ad-placements.html
Normal file
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
37
components/ads.html
Normal file
37
components/ads.html
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<!-- Vertical Ad Banner -->
|
||||||
|
<div class="vertical-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-rocket-takeoff"></i>
|
||||||
|
</div>
|
||||||
|
<h4>Company</h4>
|
||||||
|
<p>Transform Your Business with Our Solutions</p>
|
||||||
|
<a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Horizontal Ad Banner -->
|
||||||
|
<div class="horizontal-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-graph-up-arrow"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ad-text">
|
||||||
|
<h4>Boost Your Growth</h4>
|
||||||
|
<p>Partner with Company for Digital Excellence</p>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature Ad Banner -->
|
||||||
|
<div class="feature-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-shield-check"></i>
|
||||||
|
</div>
|
||||||
|
<h4>Secure Solutions</h4>
|
||||||
|
<p>Trusted by Industry Leaders</p>
|
||||||
|
<a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -1962,3 +1962,244 @@ img[src*="happy-bearded-young-man.jpg"]:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ad Banners */
|
||||||
|
.vertical-ad-banner {
|
||||||
|
background: linear-gradient(135deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
|
||||||
|
border-radius: var(--border-radius-medium);
|
||||||
|
padding: 30px;
|
||||||
|
margin: 20px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid rgba(83, 93, 161, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-ad-banner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(45deg, rgba(20, 183, 137, 0.05), rgba(83, 93, 161, 0.05));
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-ad-banner:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: rgba(20, 183, 137, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-ad-banner {
|
||||||
|
background: linear-gradient(135deg, rgba(83, 93, 161, 0.1), rgba(20, 183, 137, 0.1));
|
||||||
|
border-radius: var(--border-radius-medium);
|
||||||
|
padding: 20px 30px;
|
||||||
|
margin: 20px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
border: 1px solid rgba(83, 93, 161, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-ad-banner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(45deg, rgba(83, 93, 161, 0.05), rgba(20, 183, 137, 0.05));
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-ad-banner:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: rgba(20, 183, 137, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-ad-banner {
|
||||||
|
background: linear-gradient(135deg, rgba(20, 183, 137, 0.15), rgba(83, 93, 161, 0.15));
|
||||||
|
border-radius: var(--border-radius-medium);
|
||||||
|
padding: 25px;
|
||||||
|
margin: 20px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid rgba(83, 93, 161, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-ad-banner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(45deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-ad-banner:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: rgba(20, 183, 137, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-ad-banner .ad-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: var(--white-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-ad-banner:hover .ad-icon,
|
||||||
|
.horizontal-ad-banner:hover .ad-icon,
|
||||||
|
.feature-ad-banner:hover .ad-icon {
|
||||||
|
background: var(--secondary-color);
|
||||||
|
color: var(--white-color);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-text {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-content h4 {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-content p {
|
||||||
|
color: var(--p-color);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-ad-banner .ad-content p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-link {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 8px 20px;
|
||||||
|
border: 2px solid rgba(20, 183, 137, 0.2);
|
||||||
|
border-radius: var(--border-radius-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-link i {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-link:hover {
|
||||||
|
background: var(--secondary-color);
|
||||||
|
color: var(--white-color);
|
||||||
|
border-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-link:hover i {
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ad Placement Styles */
|
||||||
|
.hero .container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-ad {
|
||||||
|
position: absolute;
|
||||||
|
right: -200px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-ad {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-ad {
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects-ad {
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.hero-ad {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.horizontal-ad-banner {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-ad-banner .ad-content {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-text {
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.vertical-ad-banner,
|
||||||
|
.horizontal-ad-banner,
|
||||||
|
.feature-ad-banner {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-icon {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-content h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ad-content p {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
118
index.html
118
index.html
@@ -23,31 +23,95 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Include Header -->
|
<!-- Header -->
|
||||||
<div id="header"></div>
|
<div id="header"></div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<!-- Include Hero Section -->
|
<!-- Hero Section -->
|
||||||
<div id="hero"></div>
|
<section id="hero"></section>
|
||||||
|
<aside class="hero-ad">
|
||||||
|
<div class="vertical-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-rocket-takeoff"></i>
|
||||||
|
</div>
|
||||||
|
<h4>Company</h4>
|
||||||
|
<p>Transform Your Business with Our Solutions</p>
|
||||||
|
<a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<!-- Include About Section -->
|
<!-- About Section -->
|
||||||
<div id="about"></div>
|
<section id="about"></section>
|
||||||
|
<aside class="about-ad">
|
||||||
|
<div class="horizontal-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-graph-up-arrow"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ad-text">
|
||||||
|
<h4>Boost Your Growth</h4>
|
||||||
|
<p>Partner with Company for Digital Excellence</p>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<!-- Include Featured Section -->
|
<!-- Featured Section -->
|
||||||
<div id="featured"></div>
|
<section id="featured"></section>
|
||||||
|
<aside class="featured-ad">
|
||||||
|
<div class="feature-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-shield-check"></i>
|
||||||
|
</div>
|
||||||
|
<h4>Secure Solutions</h4>
|
||||||
|
<p>Trusted by Industry Leaders</p>
|
||||||
|
<a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<!-- Include Projects Section -->
|
<!-- Projects Section -->
|
||||||
<div id="projects"></div>
|
<section id="projects"></section>
|
||||||
|
<aside class="projects-ad">
|
||||||
|
<div class="horizontal-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-lightning-charge"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ad-text">
|
||||||
|
<h4>Fast Development</h4>
|
||||||
|
<p>Accelerate Your Project Timeline</p>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="ad-link">Start Now <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<!-- Include Services Section -->
|
<!-- Services Section -->
|
||||||
<div id="services"></div>
|
<section id="services"></section>
|
||||||
|
<aside class="services-ad">
|
||||||
|
<div class="feature-ad-banner">
|
||||||
|
<div class="ad-content">
|
||||||
|
<div class="ad-icon">
|
||||||
|
<i class="bi bi-gear"></i>
|
||||||
|
</div>
|
||||||
|
<h4>Premium Services</h4>
|
||||||
|
<p>Expert Solutions for Your Business</p>
|
||||||
|
<a href="#" class="ad-link">Discover More <i class="bi bi-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<!-- Include Contact Section -->
|
<!-- Contact Section -->
|
||||||
<div id="contact"></div>
|
<section id="contact"></section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Include Footer -->
|
<!-- Footer -->
|
||||||
<div id="footer"></div>
|
<footer id="footer"></footer>
|
||||||
|
|
||||||
<!-- JAVASCRIPT FILES -->
|
<!-- JAVASCRIPT FILES -->
|
||||||
<script src="js/jquery.min.js"></script>
|
<script src="js/jquery.min.js"></script>
|
||||||
@@ -61,15 +125,21 @@
|
|||||||
<!-- Load Components -->
|
<!-- Load Components -->
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Load components
|
const components = {
|
||||||
$("#header").load("components/header.html");
|
header: "components/header.html",
|
||||||
$("#hero").load("components/hero.html");
|
hero: "components/hero.html",
|
||||||
$("#about").load("components/about.html");
|
about: "components/about.html",
|
||||||
$("#featured").load("components/featured.html");
|
featured: "components/featured.html",
|
||||||
$("#services").load("components/services.html");
|
services: "components/services.html",
|
||||||
$("#projects").load("components/projects.html");
|
projects: "components/projects.html",
|
||||||
$("#contact").load("components/contact.html");
|
contact: "components/contact.html",
|
||||||
$("#footer").load("components/footer.html");
|
footer: "components/footer.html"
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load all components
|
||||||
|
Object.entries(components).forEach(([id, path]) => {
|
||||||
|
$(`#${id}`).load(path);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user