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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
120
index.html
120
index.html
@@ -23,31 +23,95 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Include Header -->
|
||||
<!-- Header -->
|
||||
<div id="header"></div>
|
||||
|
||||
<main>
|
||||
<!-- Include Hero Section -->
|
||||
<div id="hero"></div>
|
||||
<!-- Hero Section -->
|
||||
<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 -->
|
||||
<div id="about"></div>
|
||||
<!-- About Section -->
|
||||
<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 -->
|
||||
<div id="featured"></div>
|
||||
<!-- Featured Section -->
|
||||
<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 -->
|
||||
<div id="projects"></div>
|
||||
<!-- Projects Section -->
|
||||
<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 -->
|
||||
<div id="services"></div>
|
||||
<!-- Services Section -->
|
||||
<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 -->
|
||||
<div id="contact"></div>
|
||||
<!-- Contact Section -->
|
||||
<section id="contact"></section>
|
||||
</main>
|
||||
|
||||
<!-- Include Footer -->
|
||||
<div id="footer"></div>
|
||||
<!-- Footer -->
|
||||
<footer id="footer"></footer>
|
||||
|
||||
<!-- JAVASCRIPT FILES -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
@@ -60,16 +124,22 @@
|
||||
|
||||
<!-- Load Components -->
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Load components
|
||||
$("#header").load("components/header.html");
|
||||
$("#hero").load("components/hero.html");
|
||||
$("#about").load("components/about.html");
|
||||
$("#featured").load("components/featured.html");
|
||||
$("#services").load("components/services.html");
|
||||
$("#projects").load("components/projects.html");
|
||||
$("#contact").load("components/contact.html");
|
||||
$("#footer").load("components/footer.html");
|
||||
$(document).ready(function() {
|
||||
const components = {
|
||||
header: "components/header.html",
|
||||
hero: "components/hero.html",
|
||||
about: "components/about.html",
|
||||
featured: "components/featured.html",
|
||||
services: "components/services.html",
|
||||
projects: "components/projects.html",
|
||||
contact: "components/contact.html",
|
||||
footer: "components/footer.html"
|
||||
};
|
||||
|
||||
// Load all components
|
||||
Object.entries(components).forEach(([id, path]) => {
|
||||
$(`#${id}`).load(path);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user