This is a complete script providing the HTML structure for five pages and the shared CSS file for Abhishek Enterprises.
The design uses basic, clean HTML5 and modern CSS (Flexbox/Grid) for a professional appearance.
You will need the following files in the same directory:
style.css (The main stylesheet)index.html (Home Page)shop.html (Shop Page)privacy.html (Privacy Policy Page)terms.html (Terms & Conditions Page)contact.html (Contact Us Page)style.css)This stylesheet provides the base styling, header, footer layout, and responsiveness.
/* style.css */
/* --- 1. Reset and Global Styling --- */
:root {
--primary-color: #007bff; /* Professional Blue */
--secondary-color: #f8f9fa; /* Light Gray/Off-White */
--text-color: #333;
--border-radius: 5px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
color: var(--text-color);
line-height: 1.6;
background-color: #fff;
min-height: 100vh; /* Ensures footer sticks to bottom on short pages */
display: flex;
flex-direction: column;
}
a {
text-decoration: none;
color: var(--primary-color);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
}
h1, h2 {
margin-bottom: 20px;
color: #222;
}
/* --- 2. Header and Navigation --- */
header {
background-color: #111;
color: white;
padding: 15px 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8em;
font-weight: bold;
color: white;
}
.nav-links a {
color: white;
margin-left: 25px;
padding: 5px 10px;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--primary-color);
}
/* --- 3. Main Content Area --- */
main {
flex: 1; /* Allows main content to grow and push footer down */
padding: 40px 0;
}
/* --- 4. Footer Styling (Crucial Section) --- */
footer {
background-color: #333;
color: white;
padding: 40px 0;
margin-top: 30px;
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Allows wrapping on smaller screens */
gap: 30px;
}
.footer-section {
min-width: 180px;
}
.footer-section h4 {
color: var(--primary-color);
margin-bottom: 15px;
font-size: 1.1em;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 8px;
}
.footer-section a {
color: #ccc;
transition: color 0.3s;
}
.footer-section a:hover {
color: white;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid #444;
margin-top: 20px;
font-size: 0.9em;
}
/* --- 5. Shop Page Specifics --- */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 30px;
}
.product-card {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
border-radius: var(--border-radius);
transition: box-shadow 0.3s;
}
.product-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.product-card img {
max-width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: var(--border-radius);
}
/* --- 6. Contact Form Styling --- */
.contact-form label {
display: block;
margin-top: 15px;
margin-bottom: 5px;
font-weight: bold;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: var(--border-radius);
font-size: 1em;
}
.contact-form textarea {
height: 150px;
resize: vertical;
}
.contact-form button {
background-color: var(--primary-color);
color: white;
padding: 12px 25px;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
margin-top: 20px;
font-size: 1.1em;
transition: background-color 0.3s;
}
.contact-form button:hover {
background-color: #0056b3;
}
/* --- 7. Responsiveness (Mobile adjustments) --- */
@media (max-width: 768px) {
.nav-links a {
margin-left: 15px;
}
.footer-content {
flex-direction: column;
text-align: center;
}
.footer-section {
min-width: 100%;
margin-bottom: 15px;
}
}
All pages link to style.css in the <head> section and utilize the shared header and footer structure.
index.html)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abhishek Enterprises - Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container navbar">
<h1 class="logo">Abhishek Enterprises</h1>
<nav class="nav-links">
<a href="index.html">Home</a>
<a href="shop.html">Shop</a>
<a href="contact.html">Contact Us</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Welcome to Abhishek Enterprises</h2>
<section class="hero-section">
<p>We are dedicated to providing high-quality solutions and products tailored to your needs. Explore our services and shop our latest inventory today!</p>
<a href="shop.html" class="contact-form button" style="display: inline-block; margin-top: 20px;">View Our Products</a>
</section>
<section style="margin-top: 40px;">
<h3>Our Core Values</h3>
<p>Trust, Innovation, and Customer Satisfaction are the pillars of our business. We strive for excellence in everything we do.</p>
</section>
</div>
</main>
<!-- FOOTER SECTION (Crucial for required links) -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section about">
<h4>Abhishek Enterprises</h4>
<p>Providing quality goods and services since 2024.</p>
</div>
<div class="footer-section links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-section legal">
<h4>Legal & Support</h4>
<ul>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms & Conditions</a></li>
<li><a href="contact.html">Support Center</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2024 Abhishek Enterprises. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
shop.html)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abhishek Enterprises - Shop</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container navbar">
<h1 class="logo">Abhishek Enterprises</h1>
<nav class="nav-links">
<a href="index.html">Home</a>
<a href="shop.html">Shop</a>
<a href="contact.html">Contact Us</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Our Products</h2>
<p>Check out our latest inventory below. New items added daily!</p>
<div class="product-grid">
<!-- Example Product Card 1 -->
<div class="product-card">
<img src="placeholder.jpg" alt="Product Image 1" style="height: 200px; background-color: #ccc;">
<h3>Enterprise Solution A</h3>
<p>$499.00</p>
<a href="#" class="contact-form button">Add to Cart</a>
</div>
<!-- Example Product Card 2 -->
<div class="product-card">
<img src="placeholder.jpg" alt="Product Image 2" style="height: 200px; background-color: #ccc;">
<h3>Professional Service B</h3>
<p>$129.99</p>
<a href="#" class="contact-form button">Add to Cart</a>
</div>
<!-- Example Product Card 3 -->
<div class="product-card">
<img src="placeholder.jpg" alt="Product Image 3" style="height: 200px; background-color: #ccc;">
<h3>Consulting Package</h3>
<p>$850.00</p>
<a href="#" class="contact-form button">Add to Cart</a>
</div>
</div>
</div>
</main>
<!-- FOOTER (REUSE THE SAME STRUCTURE) -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section about"><h4>Abhishek Enterprises</h4><p>Providing quality goods and services since 2024.</p></div>
<div class="footer-section links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-section legal">
<h4>Legal & Support</h4>
<ul>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms & Conditions</a></li>
<li><a href="contact.html">Support Center</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2024 Abhishek Enterprises. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
privacy.html)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abhishek Enterprises - Privacy Policy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container navbar">
<h1 class="logo">Abhishek Enterprises</h1>
<nav class="nav-links">
<a href="index.html">Home</a>
<a href="shop.html">Shop</a>
<a href="contact.html">Contact Us</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Privacy Policy</h2>
<p><em>Last updated: May 20, 2024</em></p>
<h3>1. Data Collection</h3>
<p>Abhishek Enterprises collects personal identification information (Name, Email address, Phone number) only when voluntarily submitted by our visitors, such as when filling out the contact form or making a purchase on the shop page.</p>
<h3>2. Use of Data</h3>
<p>The collected data is used purely for processing orders, managing customer accounts, and communicating necessary business updates. We do not sell or lease this data to third parties.</p>
<h3>3. Cookies</h3>
<p>We use standard cookies to enhance user experience and analyze website traffic. Users can choose to disable cookies via their browser settings.</p>
<h3>4. Contact Us</h3>
<p>If you have any questions regarding this policy, please contact us via the details on the <a href="contact.html">Contact Us</a> page.</p>
</div>
</main>
<!-- FOOTER (REUSE THE SAME STRUCTURE) -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section about"><h4>Abhishek Enterprises</h4><p>Providing quality goods and services since 2024.</p></div>
<div class="footer-section links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-section legal">
<h4>Legal & Support</h4>
<ul>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms & Conditions</a></li>
<li><a href="contact.html">Support Center</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2024 Abhishek Enterprises. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
terms.html)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abhishek Enterprises - Terms & Conditions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container navbar">
<h1 class="logo">Abhishek Enterprises</h1>
<nav class="nav-links">
<a href="index.html">Home</a>
<a href="shop.html">Shop</a>
<a href="contact.html">Contact Us</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Terms & Conditions</h2>
<p><em>Effective Date: May 20, 2024</em></p>
<h3>1. Acceptance of Terms</h3>
<p>By accessing and using this website, you accept and agree to be bound by the terms and provisions of this agreement. If you do not agree to abide by the above, please discontinue use of the site immediately.</p>
<h3>2. Intellectual Property</h3>
<p>All content published on this website (digital downloads, images, texts, graphics, and logos) is the property of Abhishek Enterprises and protected by copyright laws.</p>
<h3>3. Limitation of Liability</h3>
<p>Abhishek Enterprises will not be liable for any direct, indirect, incidental, or consequential damages resulting from the use or inability to use our services or products.</p>
<h3>4. Governing Law</h3>
<p>These Terms shall be governed by the laws of [Insert Your Jurisdiction Here].</p>
</div>
</main>
<!-- FOOTER (REUSE THE SAME STRUCTURE) -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section about"><h4>Abhishek Enterprises</h4><p>Providing quality goods and services since 2024.</p></div>
<div class="footer-section links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-section legal">
<h4>Legal & Support</h4>
<ul>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms & Conditions</a></li>
<li><a href="contact.html">Support Center</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2024 Abhishek Enterprises. All rights reserved.
</div>
</div>
</footer>
</body>
</html>
contact.html)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abhishek Enterprises - Contact Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container navbar">
<h1 class="logo">Abhishek Enterprises</h1>
<nav class="nav-links">
<a href="index.html">Home</a>
<a href="shop.html">Shop</a>
<a href="contact.html">Contact Us</a>
</nav>
</div>
</header>
<main>
<div class="container">
<h2>Contact Abhishek Enterprises</h2>
<p>We'd love to hear from you. Please fill out the form below or use our direct contact info.</p>
<div class="contact-grid" style="display: flex; gap: 40px; margin-top: 30px;">
<section class="contact-form" style="flex: 2;">
<h3>Send Us a Message</h3>
<!-- Note: For this form to work, you must add a server-side script (PHP, Node, etc.) -->
<form action="submit_form.php" method="POST">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<section class="contact-info" style="flex: 1;">
<h3>Direct Information</h3>
<p style="margin-top: 15px;"><strong>Email:</strong> info@abhishek-enterprises.com</p>
<p><strong>Phone:</strong> +91 98765 43210</p>
<p style="margin-top: 20px;"><strong>Address:</strong><br>
123 Enterprise Tower,<br>
Business District, Pune, India
</p>
</section>
</div>
</div>
</main>
<!-- FOOTER (REUSE THE SAME STRUCTURE) -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section about"><h4>Abhishek Enterprises</h4><p>Providing quality goods and services since 2024.</p></div>
<div class="footer-section links">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-section legal">
<h4>Legal & Support</h4>
<ul>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms & Conditions</a></li>
<li><a href="contact.html">Support Center</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2024 Abhishek Enterprises. All rights reserved.
</div>
</div>
</footer>
</body>
</html>