Scribd
Upload
5 views39 pages

MSK Home Page Design Overview

The document is an HTML template for a website titled 'MSK | Home', featuring a responsive design with various sections including a navigation bar, hero section, carousel, best sellers, reviews, and footer. It incorporates external stylesheets for fonts and icons, as well as custom CSS for layout and design elements. The document includes interactive components such as dropdown menus and buttons, aimed at enhancing user experience.

Uploaded by

akasssss0202
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views39 pages

MSK Home Page Design Overview

The document is an HTML template for a website titled 'MSK | Home', featuring a responsive design with various sections including a navigation bar, hero section, carousel, best sellers, reviews, and footer. It incorporates external stylesheets for fonts and icons, as well as custom CSS for layout and design elements. The document includes interactive components such as dropdown menus and buttons, aimed at enhancing user experience.

Uploaded by

akasssss0202
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MSK | Home</title>
<link href="[Link]
family=Orbitron:wght@700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="[Link] [Link]/ajax/libs/font-awesome/6.4.0/css/
[Link]">
<link href="[Link]
rel="stylesheet">
<link href="[Link]
rel="stylesheet" />
<link href="[Link]
rel="stylesheet" />
<style>
/* Your existing CSS styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: # ;
display: ex;
ex-direction: column;
min-height: 100vh;
}
nav {
background-color: #0a192f;
padding: 0.5rem 2rem;
position: xed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-container {
max-width: 1200px;
margin: auto;
display: ex;
justify-content: space-between;
align-items: center;
}
.logo {
height: 48px;
}
.nav-links {
display: ex;
align-items: center;
}
.nav-links a {
color: # f;
text-decoration: none;
margin-left: 20px;
font-size: 16px;
transition: color 0.3s ease;
}
fl
ff
fl
fl
fl
fi
ff
ff
ff
fl
.nav-links a:hover {
color: # 6f00;
}
.pro le-dropdown {
position: relative;
}
.pro le-dropdown > a::after {
content: " ▼";
font-size: 12px;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: # ;
min-width: 150px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 6px;
z-index: 999;
}
.pro le-dropdown a i {
font-size: 24px;
color: # f;
}
.pro le-dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid #eee;
}
.dropdown-content a:hover {
background-color: #f0f0f0;
}
.search-container {
position: relative;
display: ex;
align-items: center;
}
.search-icon {
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-left: 20px;
color: white;
font-size: 1.2rem;
}
.search-input {
width: 0;
opacity: 0;
margin-left: 8px;
padding: 5px 10px;
border-radius: 4px;
border: none;
transition: width 0.3s ease, opacity 0.3s ease;
font-size: 14px;
fi
fi
fi
fi
ff
ff
fl
ff
ff
ff
}
.[Link] .search-input {
width: 150px;
opacity: 1;
background-color: white;
color: rgb(8, 8, 8);
}
.hero-section {
margin-top: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
padding: 3rem 5%;
background: #d3d1cf;
}
.hero-left img {
width: 100%;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.hero-right h1 {
font-family: 'Orbitron', sans-serif;
font-size: 42px;
color: #0a192f;
}
.hero-right p {
font-size: 20px;
color: #555;
margin-top: 1rem;
}
.view-button {
background-color: #160048;
color: # f;
border: none;
padding: 10px 20px;
border-radius: 6px;
margin-top: 20px;
transition: background-color 0.3s;
font-weight: 600;
text-decoration: none;
display: inline-block;
}
.view-button:hover {
background-color: #e65c00;
}
.carousel-section {
padding: 40px 20px;
text-align: center;
background: # faf0;
}
.carousel-title {
font-size: 28px;
color: #b8860b;
font-family: 'Orbitron', sans-serif;
margin-bottom: 20px;
}
.custom-carousel {
position: relative;
max-width: 1200px;
ff
ff
margin: auto;
over ow: hidden;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
height: 600px;
}
.carousel-track {
display: ex;
transition: transform 0.6s ease-in-out;
position: relative;
height: 100%;
}
.carousel-image {
min-width: 100%;
height: 100%;
object- t: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
position: absolute;
left: 0;
top: 0;
}
.[Link] {
opacity: 1;
position: relative;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
background: none;
border: none;
color: white;
z-index: 2;
cursor: pointer;
padding: 0 15px;
transition: transform 0.3s ease;
}
.carousel-btn:hover {
transform: translateY(-50%) scale(1.2);
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.carousel-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: ex;
gap: 8px;
}
.dot {
height: 12px;
width: 12px;
background-color: # cc;
fl
fi
fl
fl
ff
ff
ff
border-radius: 50%;
display: inline-block;
transition: background-color 0.3s ease;
cursor: pointer;
}
.[Link] {
background-color: # d700;
}
.search-box-nav {
display: none;
position: absolute;
top: 60px;
right: 2rem;
background: # f;
padding: 0.5rem;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.search-box-nav input {
padding: 6px 10px;
width: 200px;
border: 1px solid #ccc;
border-radius: 4px;
}
footer {
background-color: #0a192f;
color: # f;
text-align: center;
padding: 20px;
margin-top: 0px;
margin-bottom: 0;
}
.best-sellers {
padding: 30px;
background-color: # f;
color: #333;
}
.best-sellers-container {
display: ex;
ex-direction: row;
gap: 20px;
ex-wrap: wrap;
justify-content: space-between;
}
.product-card {
display: ex;
ex-direction: column;
background-color: # f;
border-radius: 12px;
over ow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
width: calc(33.333% - 20px);
}
.product-card img {
width: 100%;
height: 200px;
object- t: cover;
}
.product-info {
padding: 20px;
fl
fl
fl
fl
fi
ff
fl
fl
ff
ff
ff
ff
ex-grow: 1;
}
.product-info h3 {
margin: 0;
color: #222;
font-size: 20px;
}
.product-info p {
color: #666;
margin: 10px 0;
}
.product-info button {
background: linear-gradient(90deg, # d700, #f7c873);
border: none;
padding: 10px 20px;
color: #000;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
}
.reviews-section {
background-color: #0a192f;
color: # d700;
padding: 40px 20px;
text-align: center;
}
.reviews-section h2 {
font-size: 2rem;
margin-bottom: 30px;
color: #f7c873;
}
.reviews-container {
display: ex;
justify-content: center;
gap: 20px;
ex-wrap: wrap;
}
.review-card {
background-color: #00116f;
border: 1px solid # d700;
padding: 20px;
width: 280px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
transition: transform 0.3s ease;
}
.review-card:hover {
transform: translateY(-5px);
}
.review-text {
font-size: 1rem;
font-style: italic;
margin-bottom: 10px;
}
.review-stars {
color: #f7c873;
font-size: 1.2rem;
margin-bottom: 10px;
}
.review-name {
fl
fl
ff
fl
ff
ff
color: # f;
font-weight: bold;
font-size: 0.9rem;
}
.container {
display: ex;
align-items: center;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 60%;
margin: 40px auto;
}
.image-container {
margin-right: 20px;
}
.image-container img {
width: 300px;
height: auto;
border-radius: 8px;
}
.content-container {
display: ex;
ex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slogan {
font-size: 18px;
font-style: italic;
margin-bottom: 10px;
text-align: center;
}
.shop-now-button {
display: inline-block;
background-color: #160048;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
border: none;
cursor: pointer;
font-weight: bold;
}
.shop-now-button:hover {
background-color: # 6600;
}
.shop-features {
display: ex;
justify-content: space-around;
align-items: ex-start;
ex-wrap: wrap;
background: # f8e1;
padding: 40px 20px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
margin: 50px auto;
fl
fl
ff
fl
fl
fl
fl
ff
ff
max-width: 1200px;
}
.shop-features .feature {
ex: 1 1 200px;
max-width: 250px;
margin: 20px;
text-align: center;
}
.shop-features .feature i {
font-size: 32px;
color: #f4b400;
margin-bottom: 10px;
}
.shop-features .feature h3 {
font-size: 18px;
margin: 10px 0;
color: #333;
}
.shop-features .feature p {
font-size: 14px;
color: #555;
}
.footer-section {
background-color: #0a192f;
padding: 40px 20px;
font-family: Arial, sans-serif;
margin-top: auto;
}
.footer-container {
display: ex;
justify-content: space-between;
ex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.footer-column {
ex: 1 1 200px;
margin: 10px;
}
.footer-column h4 {
font-size: 18px;
color: # 8000;
margin-bottom: 10px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 8px;
}
.footer-column ul li a {
color: # ;
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #ea7500;
fl
fl
fl
ff
ff
fl
ff
ff
}
.copyright {
color: # ;
text-align: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #444;
}
.btn {
display: inline-block;
background-color: #0a192f;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
}
.btn:hover {
background-color: #e4af00;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.hero-section {
grid-template-columns: 1fr;
text-align: center;
}
.hero-left, .hero-right {
width: 100%;
}
.[Link] .search-input {
width: 100px !important;
}
. lters {
ex-direction: column;
}
.best-sellers-container {
ex-direction: column;
}
.product-card {
width: 100%;
}
}
</style>
</head>
<body>
<nav>
<div class="navbar-container">
<img src="[Link]" class="logo" alt="MSK Logo">
<div class="nav-links">
<a href="[Link]">Home</a>
<a href="[Link]">Shop</a>
<a href="[Link]">Contact Us</a>
<div class="pro le-dropdown">
<a href="#"><i class="bi bi-person-circle"></i></a>
<div class="dropdown-content">
<a href="#">My Pro le</a>
<a href="[Link]">Cart</a>
<a href="#">Logout</a>
fi
fl
fl
ff
ff
ff
fi
fi
</div>
</div>
<div class="search-container" id="searchBox">
<button class="search-icon" onclick="toggleSearch()" aria-label="Toggle search">
<i class="bi bi-search"></i>
</button>
<input type="text" class="search-input" placeholder="Search..." />
</div>
</div>
</div>
</nav>
<section class="hero-section">
<div class="hero-left">
<img src="[Link]" alt="Factory">
</div>
<div class="hero-right">
<h1>Welcome To MSK Factory</h1>
<p>Powering Progress with Pure Copper</p>
<a href="[Link]" class="view-button">View Us</a>
</div>
</section>
<section class="carousel-section">
<h2 class="carousel-title">New Arrivals For You</h2>
<div class="custom-carousel">
<div class="carousel-track">
<img src="[Link]" class="carousel-image active" alt="Product 1">
<img src="[Link]" class="carousel-image" alt="Product 2">
<img src="[Link]" class="carousel-image" alt="Product 3">
</div>
<button class="carousel-btn prev" onclick="moveSlide(-1)"> </button>
<button class="carousel-btn next" onclick="moveSlide(1)"> </button>
<div class="carousel-dots">
<span class="dot active" onclick="showSlide(0)"></span>
<span class="dot" onclick="showSlide(1)"></span>
<span class="dot" onclick="showSlide(2)"></span>
</div>
</div>
</section>
<section class="best-sellers">
<h2>Best Sellers</h2>
<div class="best-sellers-container">
<div class="product-card">
<img src="[Link]" alt="Elegant Copper Lamp">
<div class="product-info">
<h3>Elegant Copper Lamp</h3>
<p>Crafted with pure copper for lasting glow and style.</p>
<button class="add-to-cart-btn" data-product-name="Elegant Copper Lamp" data-
product-price="19.99">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="[Link]" alt="Lotus Diya Set">
<div class="product-info">
<h3>Lotus Diya Set</h3>
<p>Handcrafted diya set perfect for festive lighting.</p>
<button class="add-to-cart-btn" data-product-name="Lotus Diya Set" data-product-
price="29.99">Add to Cart</button>
</div>
</div>
<div class="product-card">
❯
❮
<img src="[Link]" alt="Lotus Diya Set">
<div class="product-info">
<h3>Lotus Diya Set</h3>
<p>Handcrafted diya set perfect for festive lighting.</p>
<button class="add-to-cart-btn" data-product-name="Lotus Diya Set" data-product-
price="29.99">Add to Cart</button>
</div>
</div>
</div>
</section>
<section class="reviews-section">
<h2>What Our Customers Say</h2>
<div class="reviews-container">
<div class="review-card">
<p class="review-text">"Absolutely love the craftsmanship. Will de nitely buy again!"</p>
<div class="review-stars"> </div>
<p class="review-name">– Priya S.</p>
</div>
<div class="review-card">
<p class="review-text">"Packaging was premium and delivery was fast. Worth every
rupee!"</p>
<div class="review-stars"> </div>
<p class="review-name">– Rohan K.</p>
</div>
<div class="review-card">
<p class="review-text">"Beautiful product! Looks even better in real life."</p>
<div class="review-stars"> </div>
<p class="review-name">– Neha M.</p>
</div>
</div>
</section>
<div class="container">
<div class="image-container">
<img src="[Link]" alt="Copper Products">
</div>
<div class="content-container">
<p class="slogan">"Discover the glow of tradition — shop handcrafted copper that lasts a
lifetime."</p>
<a href="[Link]" class="shop-now-button">Shop Now</a>
</div>
</div>
<section class="shop-features">
<div class="feature">
<i class="fas fa-lock"></i>
<h3>Secure Payments</h3>
<p>All transactions are encrypted and 100% safe.</p>
</div>
<div class="feature">
<i class="fas fa-truck"></i>
<h3>Free Shipping</h3>
<p>Enjoy free delivery on all orders above ₹999.</p>
</div>
<div class="feature">
<i class="fas fa-undo-alt"></i>
<h3>Easy Returns</h3>
<p>7-day hassle-free returns on all items.</p>
</div>
<div class="feature">
<i class="fas fa-map-marker-alt"></i>
fi
<h3>Order Tracking</h3>
<p>Track your orders anytime with real-time updates.</p>
</div>
</section>
<footer class="footer-section">
<div class="footer-container">
<div class="footer-column">
<h4>Menu</h4>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="about [Link]">About Us</a></li>
<li><a href="[Link]">Contact Us</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Categories</h4>
<ul>
<li><a href="#">Cookware</a></li>
<li><a href="#">Tableware</a></li>
<li><a href="#">Drinkware</a></li>
<li><a href="#">Kitchen Utensils</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">Contact Support</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Refund and Returns Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Social Media</h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</div>
</div>
<p class="copyright">&copy; 2025 MSK Factory. All rights reserved.</p>
</footer>
<script>
function toggleSearch() {
const searchBox = [Link]('searchBox');
[Link]('active');
if ([Link]('active')) {
[Link]('.search-input').focus();
} else {
[Link]('.search-input').value = '';
}
}

let slideIndex = 0;
let slides, dots, autoSlide;

function showSlide(index) {
[Link]((slide, i) => {
[Link]('active');
dots[i].[Link]('active');
if (i === index) {
[Link]('active');
dots[i].[Link]('active');
}
});
slideIndex = index;
resetAutoplay();
}

function moveSlide(step) {
slideIndex = (slideIndex + step + [Link]) % [Link];
showSlide(slideIndex);
}

function resetAutoplay() {
clearInterval(autoSlide);
autoSlide = setInterval(() => moveSlide(1), 5000);
}

[Link]("DOMContentLoaded", () => {
slides = [Link]('.carousel-image');
dots = [Link]('.dot');
autoSlide = setInterval(() => moveSlide(1), 5000);

// Add event listeners to "Add to Cart" buttons


const addToCartButtons = [Link]('.add-to-cart-btn');

[Link](button => {
[Link]('click', function() {
const productName = [Link]('data-product-name');
const productPrice = [Link]('data-product-price');

// Retrieve existing cart items from localStorage or initialize an empty array


let cartItems = [Link]([Link]('cartItems')) || [];

// Add the new product to the cart


[Link]({ name: productName, price: productPrice });

// Save the updated cart back to localStorage


[Link]('cartItems', [Link](cartItems));

// Redirect to the cart page


[Link] = '[Link]';
});
});
});
</script>
</body>
</html>
home

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MSK | About</title>
<link href="[Link]
rel="stylesheet" />
<link href="[Link]
rel="stylesheet">
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
}

nav {
width: 100%;
background-color: #0a192f;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: xed;
top: 0;
left: 0;
z-index: 1000;
}

.navbar-container {
max-width: 1200px;
margin: auto;
padding: 0.5rem 2rem;
display: ex;
justify-content: space-between;
align-items: center;
}

.logo {
height: 50px;
width: auto;
}

.nav-links {
display: ex;
align-items: center;
gap: 1.5rem;
}

.nav-links a {
text-decoration: none;
color: # ;
font-size: 16px;
transition: color 0.3s ease;
}

.nav-links a:hover {
color: # 6f00;
}

.pro le-dropdown a i {
font-size: 24px;
}

.pro le-dropdown {
fi
fi
ff
ff
fl
fl
ff
fi
ff
position: relative;
}

.pro le-dropdown > a::after {


content: " ▼";
font-size: 12px;
}

.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: # ;
min-width: 150px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 6px;
z-index: 999;
}

.pro le-dropdown:hover .dropdown-content {


display: block;
}

.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid #eee;
}

.dropdown-content a:hover {
background-color: #f0f0f0;
}

.search-container {
position: relative;
display: ex;
align-items: center;
}

.search-icon {
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-left: 5px;
color: white;
font-size: 1.2rem;
}

.search-input {
width: 0;
opacity: 0;
margin-left: 8px;
padding: 5px 10px;
border-radius: 4px;
border: none;
transition: width 0.3s ease, opacity 0.3s ease;
font-size: 14px;
fi
fi
fl
ff
ff
ff
}

.[Link] .search-input {
width: 150px;
opacity: 1;
background-color: white;
color: rgb(8, 8, 8);
}

.banner-image {
height: 500px;
width: 100%;
object- t: cover;
opacity: 0.7;
}

.banner-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: ex;
ex-direction: column;
justify-content: center;
padding-left: 5%;
text-align: left;
color: white;
}

.section {
padding: 4rem 2rem;
}

.ourstory {
text-align: left;
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 2rem;
color: #0a192f;
}

.des {
text-align: justify;
margin-bottom: 2rem;
font-size: 1.1rem;
}

.section-image {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
}

.footer-section {
background-color: #0a192f;
padding: 40px 20px 20px;
font-family: Arial, sans-serif;
fl
fi
fl
text-align: center;
}

.footer-container {
display: ex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}

.footer-column {
ex: 1;
margin: 0 10px;
}

.footer-column h4 {
font-size: 18px;
color: # 6600;
margin-bottom: 10px;
}

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

.footer-column ul li {
margin-bottom: 8px;
}

.footer-column ul li a {
color: # ;
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease;
}

.footer-column ul li a:hover {
color: # 6600;
}

.copyright {
color: # ;
text-align: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #444;
}

@media (max-width: 768px) {


.[Link] .search-input {
width: 100px !important;
}
}
</style>
</head>
<body class="bg-white text-dark">
<!-- Header -->
<nav>
fl
ff
ff
ff
ff
fl
ff
ff
ff
ff
<div class="navbar-container">
<img src="[Link]" class="logo" alt="MSK Logo" />
<div class="nav-links">
<a href="[Link]">Home</a>
<a href="[Link]">Shop</a>
<a href="[Link]">Contact</a>
<div class="pro le-dropdown">
<a href="#"><i class="bi bi-person-circle"></i></a>
<div class="dropdown-content">
<a href="pro [Link]">My Pro le</a>
<a href="[Link]">Cart</a>

</div>
</div>
<!-- Search -->
<div class="search-container" id="searchBox">
<button class="search-icon" onclick="toggleSearch()" aria-label="Toggle search">
<i class="bi bi-search"></i>
</button>
<input type="text" class="search-input" placeholder="Search..." />
</div>
</div>
</div>
</nav>

<!-- Banner -->


<section class="position-relative bg-dark">
<img src="[Link]" class="banner-image" alt="Banner">
<div class="banner-text">
<h1 class="display-4 fw-bold">About Us</h1>
<p class="fs-4 mb-4">"Copper is more than metal — it's the foundation of progress."</p>
</div>
</section>

<!-- Content -->


<section class="section">
<div class="container">
<h2 class="ourstory">Our Story</h2>
<p class="des">
In the early 20th century, my great-great-grandfather and great-grandfather embarked on a
journey that laid the foundation for our family business. They began with the traditional business
of bangles and gradually expanded into making copper utensils. This venture was marked by
relentless hard work and dedication.
Over time, my great-grandfather, Shripad Karekar, took the reins of the business. After the
passing of his father, he established a shop in the local fair, diversifying our o erings to include
various metal utensils alongside our traditional copper products. The business became known as
Shripad Narayan Karekar, a name that has endured and remains recognized by our customers to
this day.
</p>
<img src="[Link]" class="section-image" alt="Our Story Image">

<h2 class="ourstory">What We Believe</h2>


<p class="des">
At the heart of our family business lies a set of core beliefs that have guided us through
generations. We believe in the power of discipline, hard work, and perseverance. These values are
the bedrock upon which our business was built and continue to thrive.
We also believe in the importance of mutual trust among family members. This trust extends
to our customers, who have come to rely on us for quality products and fair prices. Our
commitment to these principles has been unwavering, and it is this commitment that has earned
us the trust and loyalty of our customer base.
fi
fi
fi
ff
</p>
<img src="[Link]" class="section-image" alt="Our Beliefs Image">

<h2 class="ourstory">Why Choose Us</h2>


<p class="des">
Choosing our family business means choosing a legacy of trust and quality. Our customers
have consistently supported us because we adhere to the mantra of providing the right price and
assured goods on demand. This customer-centric approach has been nurtured by each
generation of our family and remains a cornerstone of our business.
Our business is o cially registered, and we operate with transparency, paying all necessary
taxes. This commitment to legality and ethical practices further reinforces the trust our customers
place in us.
</p>
<img src="[Link]" class="section-image" alt="Why Choose Us Image">

<h2 class="ourstory">Our Vision</h2>


<p class="des">
Our vision for the future is rooted in the values and traditions that have de ned our past. We
aim to continue providing high-quality products at fair prices, ensuring that our customers receive
the best value for their money.
We envision a future where our business continues to grow and adapt to changing market
demands while staying true to our core principles. By maintaining the mutual trust of every family
member and upholding the discipline and hard work that have been our hallmarks, we strive to
ensure the continued success and longevity of our family business.
In essence, our vision is to preserve our legacy while embracing the future, ensuring that the
name Shripad Narayan Karekar remains synonymous with quality, trust, and excellence for
generations to come.
</p>
</div>
</section>

<!-- Footer -->


<footer class="footer-section">
<div class="footer-container">
<div class="footer-column">
<h4>Menu</h4>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="about [Link]">About Us</a></li>
<li><a href="[Link]">Contact Us</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Categories</h4>
<ul>
<li><a href="#">Cookware</a></li>
<li><a href="#">Tableware</a></li>
<li><a href="#">Drinkware</a></li>
<li><a href="#">Kitchen Utensils</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">Contact Support</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Refund and Returns Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
ffi
fi
</div>
<div class="footer-column">
<h4>Social Media</h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</div>
</div>
<p class="copyright">&copy; 2025 MSK Factory. All rights reserved.</p>
</footer>

<script src="[Link]
script>
<script>
function toggleSearch() {
const searchBox = [Link]('searchBox');
[Link]('active');
if ([Link]('active')) {
[Link]('.search-input').focus();
} else {
[Link]('.search-input').value = '';
}
}
</script>
</body>
</html>

view

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MSK | Cart</title>
<link href="[Link]
family=Orbitron:wght@700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link href="[Link]
rel="stylesheet" />
<link href="[Link]
rel="stylesheet">
<style>
/* Styles remain unchanged */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: #fdf6f0;
}
nav {
background-color: #0a192f;
padding: 0.5rem 2rem;
position: xed;
width: 100%;
fi
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar-container {
max-width: 1200px;
margin: auto;
display: ex;
justify-content: space-between;
align-items: center;
}
.logo {
height: 48px;
}
.nav-links {
display: ex;
align-items: center;
}
.nav-links a {
color: # f;
text-decoration: none;
margin-left: 24px;
font-size: 16px;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: # 6f00;
}
.pro le-dropdown a.i{
font-size: 24px;
}
.pro le-dropdown {
position: relative;
}
.pro le-dropdown > a::after {
content: " \25BC";
font-size: 12px;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 30px;
background: white;
border-radius: 6px;
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
over ow: hidden;
min-width: 160px;
}
.pro le-dropdown a i{
font-size: 24px;}
.pro le-dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: #333;
text-decoration: none;
padding: 12px 16px;
display: block;
border-bottom: 1px solid #eee;
fi
fi
fi
fi
fi
fl
ff
ff
fl
fl
}
.dropdown-content a:hover {
background: #f5f5f5;
}
.search-container {
position: relative;
display: ex;
align-items: center;
}
.search-icon {
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-left: 5px;
color: white;
font-size: 1.2rem;
}
.search-input {
width: 0;
opacity: 0;
margin-left: 8px;
padding: 5px 10px;
border-radius: 4px;
border: none;
transition: width 0.3s ease, opacity 0.3s ease;
font-size: 14px;
}
.[Link] .search-input {
width: 150px;
opacity: 1;
background-color: white;
color: rgb(8, 8, 8);
}
.banner-image {
height: 500px;
object- t: cover;
opacity: 0.7;
}
.banner-text {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[Link] {
max-width: 1200px;
margin: 110px auto 40px;
padding: 0 20px;
display: ex;
gap: 24px;
align-items: ex-start;
}
.cart-left {
ex: 1 1 0;
background: # f;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
padding: 18px;
over ow: auto;
fl
fl
fi
fl
fl
fl
ff
}
.cart-left h2 { margin: 0 0 12px 0; color: var(--text-dark); font-size: 20px; }
.table-responsive { over ow-x:auto; }
[Link]-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
[Link]-table thead th {
background: var(--muted);
padding: 12px;
font-weight:600;
text-align:center;
border-bottom:1px solid #e6e6e6;
}
[Link]-table td {
padding: 12px;
vertical-align: middle;
text-align:center;
border-bottom:1px solid #f1f1f1;
font-size: 14px;
color: #222;
}
.product-info {
display: ex;
gap:12px;
align-items:center;
justify-content: ex-start;
text-align:left;
}
.product-info img { width:72px; height:72px; object- t:cover; border-radius:6px; }
.product-title { font-weight:600; color:var(--text-dark); }
[Link], [Link], [Link] {
padding:6px 8px;
border-radius:4px;
border:1px solid #d0d0d0;
font-size:14px;
width:100px;
}
[Link] { width:72px; text-align:center; }
.remove-btn {
background: var(--danger);
color: #fc0000;
border: none;
padding: 8px 10px;
border-radius:6px;
cursor:pointer;
}
.remove-btn:hover { opacity:0.95; }
.cart-right {
width: 320px;
ex: 0 0 320px;
background: # f;
border-radius: 8px;
padding: 18px;
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
height: t-content;
position: sticky;
top: 110px;
}
fl
fi
fl
ff
fl
fl
fi
.cart-right h3 { margin-top:0; color:var(--text-dark); font-size:18px; }
.summary-row { display: ex; justify-content:space-between; align-items:center; margin:8px 0;
font-size:15px; }
.summary-total { font-weight:700; font-size:18px; color:var(--text-dark); }
.coupon-box { display: ex; gap:8px; margin:10px 0; }
.coupon-box input {
ex:1;
padding:8px 10px;
border-radius:6px;
border:1px solid #d0d0d0;
font-size:14px;
}
.btn-apply {
background: var(--nav-footer-bg);
color:# 7300;
border:none;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}
.btn-apply:hover { background: var(--accent-hover); }
.btn-clear {
width:100%;
background:#555;
color:# f;
border:none;
padding:10px;
border-radius:6px;
cursor:pointer;
margin-top:10px;
}
.btn-checkout {
width:100%;
background:#0a192f;
color:# f;
border:none;
padding:12px;
border-radius:6px;
cursor:pointer;
margin-top:12px;
font-weight:700;
}
.btn-checkout:hover { background:#0a8f4b; }
.small { font-size:13px; color:#666; }
.footer-section {
background-color: #0a192f;
padding: 40px 20px;
font-family: Arial, sans-serif;
margin-top: auto;
}
.footer-container {
display: ex;
justify-content: space-between;
ex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.footer-column {
ex: 1 1 200px;
margin: 10px;
fl
fl
fl
ff
ff
ff
fl
fl
fl
}
.footer-column h4 {
font-size: 18px;
color: # 8000;
margin-bottom: 10px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 8px;
}
.footer-column ul li a {
color: # ;
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #ea7500;
}
.copyright {
color: # ;
text-align: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #444;
}
.btn {
display: inline-block;
background-color: #0a192f;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
}
.btn:hover {
background-color: #ea7500;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.[Link] .search-input {
width: 100px !important;
}
}
</style>
</head>
<body>
<nav>
<div class="navbar-container">
<img src="[Link]" class="logo" alt="MSK Logo">
<div class="nav-links">
<a href="[Link]">Home</a>
<a href="[Link]">Shop</a>
<a href="[Link]">Contact Us</a>
ff
ff
ff
ff
ff
ff
ff
<div class="pro le-dropdown">
<a href="#"><i class="bi bi-person-circle"></i></a>
<div class="dropdown-content">
<a href="#">My Pro le</a>
<a href="[Link]">Cart</a>
<a href="#">Logout</a>
</div>
</div>
<div class="search-container" id="searchBox">
<button class="search-icon" onclick="toggleSearch()" aria-label="Toggle search">
<i class="bi bi-search"></i>
</button>
<input type="text" class="search-input" placeholder="Search..." />
</div>
</div>
</div>
</nav>
<section class="banner">
<section class="position-relative bg-dark">
<img src="[Link]" class="w-100 banner-image" alt="Banner">
<div class="position-absolute banner-text d- ex ex-column justify-content-center ps-5 text-
white">
<h1 class="display-4 fw-bold">Shop Now</h1>
<p class="fs-4 mb-4">"Pure copper. Pure energy. Pure reliability."</p>
</div>
</section>
</section>
<main class="app">
<section class="cart-left" aria-labelledby="cart-title">
<h2 id="cart-title">Shopping Cart</h2>
<div class="table-responsive">
<table class="cart-table" id="cartTable" role="table">
<thead>
<tr>
<th style="text-align:left;">Product</th>
<th>Weight</th>
<th>Size</th>
<th>Quantity</th>
<th>Subtotal</th>
<th>Action</th>
</tr>
</thead>
<tbody id="cartTableBody">
</tbody>
</table>
</div>
<div style="display: ex; gap:12px; margin-top:12px; align-items:center; ex-wrap:wrap;">
<button class="btn btn-clear" id="clearCart" type="button">Clear Shopping Cart</button>
<div style="margin-left:auto; color:#444; font-size:14px; align-self:center;">
Items in cart: <span id="itemsCount">0</span>
</div>
</div>
</section>
<aside class="cart-right" aria-labelledby="summary-title">
<h3 id="summary-title">Order Summary</h3>
<div class="summary-row">
<div>Subtotal</div>
<div id="summarySubtotal">₹0</div>
</div>
<div class="summary-row">
fi
fl
fi
fl
fl
fl
<div>Estimated Tax</div>
<div id="summaryTax">₹0</div>
</div>
<div class="summary-row" style="border-top:1px dashed #eee; padding-top:8px;">
<div class="summary-total">Total</div>
<div class="summary-total" id="summaryTotal">₹0</div>
</div>
<div style="margin-top:12px;">
<label class="small">Apply Coupon</label>
<div class="coupon-box">
<input id="couponCode" placeholder="Enter coupon code" />
<button class="btn-apply" id="applyCoupon" type="button">Apply</button>
</div>
<div id="couponMessage" class="small" style="min-height:18px;"></div>
</div>
<button class="btn-checkout" id="checkout">Proceed to Checkout</button>
</aside>
</main>
<footer class="footer-section">
<div class="footer-container">
<div class="footer-column">
<h4>Menu</h4>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="about [Link]">About Us</a></li>
<li><a href="[Link]">Contact Us</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Categories</h4>
<ul>
<li><a href="#">Cookware</a></li>
<li><a href="#">Tableware</a></li>
<li><a href="#">Drinkware</a></li>
<li><a href="#">Kitchen Utensils</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">Contact Support</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Refund and Returns Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Social Media</h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</div>
</div>
<p class="copyright">&copy; 2025 MSK Factory. All rights reserved.</p>
</footer>
<script>
const priceMap = { '250g': 350, '500g': 750, '1kg': 1200 };
function fmt(n) { return '₹' + n; }
let couponApplied = false;

function updateSubtotal(row) {
const weightSel = [Link]('.weight');
const qtyInput = [Link]('.qty');
const weight = weightSel ? [Link] : null;
const qty = parseInt([Link]) || 0;
const price = priceMap[weight] || 0;
const subtotal = price * qty;
[Link]('.subtotal').textContent = fmt(subtotal);
return subtotal;
}

function recalcAll() {
const rows = [Link]([Link]('#cartTable tbody tr'));
let total = 0, items = 0;
[Link](r => {
const sub = updateSubtotal(r);
total += sub;
const q = parseInt([Link]('.qty').value) || 0;
items += q;
});
const tax = [Link](total * 0.05);
const grand = total + tax;
[Link]('summarySubtotal').textContent = fmt(total);
[Link]('summaryTax').textContent = fmt(tax);
[Link]('summaryTotal').textContent = fmt(grand);
[Link]('itemsCount').textContent = items;
}

function attachListeners() {
[Link]('.qty').forEach(input => {
[Link]('input', e => {
if ([Link] < 1) [Link] = 1;
recalcAll();
});
});
[Link]('.weight').forEach(sel => {
[Link]('change', () => recalcAll());
});
[Link]('.remove-btn').forEach(btn => {
[Link]('click', function() {
const row = [Link]('tr');
[Link]();
recalcAll();
});
});
}

[Link]('clearCart').addEventListener('click', () => {
const tbody = [Link]('#cartTable tbody');
[Link] = '';
[Link]('cart');
recalcAll();
couponApplied = false;
});

[Link]('applyCoupon').addEventListener('click', () => {
const code = ([Link]('couponCode').value || '').trim();
const valid = ([Link]() === 'MSK10');
const msgEl = [Link]('couponMessage');

if (couponApplied) {
[Link] = 'Coupon already applied.';
[Link] = '#c00';
return;
}

if (!code) {
[Link] = 'Enter a coupon code.';
[Link] = '#c00';
return;
}

if (!valid) {
[Link] = 'Invalid coupon code.';
[Link] = '#c00';
return;
}

const subtotalText = [Link]('summarySubtotal').[Link]('₹', '')


|| '0';
const subtotal = parseInt(subtotalText);
const discount = [Link](subtotal * 0.10);
const newSubtotal = subtotal - discount;
const tax = [Link](newSubtotal * 0.05);
const grand = newSubtotal + tax;

[Link]('summarySubtotal').textContent = fmt(newSubtotal);
[Link]('summaryTax').textContent = fmt(tax);
[Link]('summaryTotal').textContent = fmt(grand);
[Link] = 'Coupon applied: -' + fmt(discount);
[Link] = '#0a7a40';

couponApplied = true;
});

[Link]('checkout').addEventListener('click', () => {
const rows = [Link]('#cartTable tbody tr');
if (![Link]) {
alert('Your cart is empty!');
return;
}
[Link] = '[Link]';
});

function displayCart() {
const cart = [Link]([Link]('cart')) || [];
const cartTableBody = [Link]('cartTableBody');
[Link] = '';
[Link](product => {
const row = [Link]('tr');
[Link] = `
<td style="text-align:left;">
<div class="product-info">
<img src="${[Link]}" alt="${[Link]}">
<div>
<div class="product-title">${[Link]}</div>
<div class="small">Pure copper utensil</div>
</div>
</div>
</td>
<td>
<select class="weight" aria-label="Weight">
<option value="500g">500g</option>
<option value="1kg">1kg</option>
</select>
</td>
<td>
<select class="size" aria-label="Size">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
</td>
<td>
<input class="qty" type="number" min="1" value="1" aria-label="Quantity">
</td>
<td class="subtotal">₹${[Link]}</td>
<td>
<button class="remove-btn" type="button" aria-label="Remove item">Remove</button>
</td>
`;
[Link](row);
});
attachListeners();
recalcAll();
}

displayCart();

function toggleSearch() {
const searchBox = [Link]('searchBox');
if (!searchBox) return;
[Link]('active');
const input = [Link]('.search-input');
if ([Link]('active')) [Link]();
else [Link] = '';
}
</script>
<script src="[Link]
script>
</body>
</html>

cart

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MSK | Contact</title>
<link href="[Link]
family=Orbitron:wght@700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link href="[Link]
rel="stylesheet" />
<link href="[Link]
rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: # ;
display: ex;
ex-direction: column;
min-height: 100vh;
}
nav {
background-color: #0a192f;
padding: 0.5rem 2rem;
position: xed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar-container {
max-width: 1200px;
margin: auto;
display: ex;
justify-content: space-between;
align-items: center;
}
.logo {
height: 48px;
}
.nav-links {
display: ex;
align-items: center;
}
.nav-links a {
color: # f;
text-decoration: none;
margin-left: 20px;
font-size: 16px;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: # 6f00;
}
.pro le-dropdown {
position: relative;
}
.pro le-dropdown > a::after {
content: " ▼";
font-size: 12px;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: # ;
fl
fi
fi
ff
ff
fl
fl
fl
fi
ff
ff
ff
ff
ff
ff
min-width: 150px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 6px;
z-index: 999;
}
.pro le-dropdown a i {
font-size: 24px;
color: # f;
}
.pro le-dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid #eee;
}
.dropdown-content a:hover {
background-color: #f0f0f0;
}
.search-container {
position: relative;
display: ex;
align-items: center;
}
.search-icon {
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-left: 20px;
color: white;
font-size: 1.2rem;
}
.search-input {
width: 0;
opacity: 0;
margin-left: 8px;
padding: 5px 10px;
border-radius: 4px;
border: none;
transition: width 0.3s ease, opacity 0.3s ease;
font-size: 14px;
}
.[Link] .search-input {
width: 150px;
opacity: 1;
background-color: white;
color: rgb(8, 8, 8);
}
.banner-image {
height: 500px;
object- t: cover;
opacity: 0.7;
}
.banner-text {
position: absolute;
top: 0;
fi
fi
fi
ff
fl
left: 0;
width: 100%;
height: 100%;
display: ex;
ex-direction: column;
justify-content: center;
padding-left: 5%;
color: white;
}
.contact {
position: relative;
width: 100%;
padding: 40px 100px;
text-align: center;
ex: 1;
}
.contact .title {
display: ex;
justify-content: center;
align-items: center;
}
.contact .title h2 {
font-size: 2em;
color: #0a192f;
font-weight: 500;
}
.form {
grid-area: form;
}
.info {
grid-area: info;
background-color: # ;
padding: 50px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.1);
}
.map {
grid-area: map;
background-color: # ;
padding: 20px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.1);
}
.box {
position: relative;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"form info"
"form map";
grid-gap: 20px;
padding: 20px;
margin-top: 20px;
background: #0a192f;
}
.contact h3 {
color: # ;
font-weight: 500;
font-size: 1.4em;
margin-bottom: 10px;
text-align: left;
fl
fl
ff
fl
fl
ff
ff
ff
ff
ff
ff
ff
ff
}
.contact h4 {
color: #0a192f;
font-weight: 500;
font-size: 1.4em;
margin-bottom: 30px;
text-align: left;
}
.formbox {
position: relative;
width: 100%;
}
.formbox .row100 {
display: ex;
ex-direction: column;
gap: 20px;
}
.inputbox {
display: ex;
ex-direction: column;
margin-bottom: 20px;
width: 100%;
text-align: left;
}
.inputbox span {
color: #0d1124;
margin-top: 10px;
margin-bottom: 5px;
font-weight: 500;
text-align: left;
}
.inputbox input {
width: 100%;
padding: 12px;
font-size: 1.1em;
outline: none;
border: 1px solid #ced4da;
border-radius: 4px;
}
.inputbox textarea {
width: 100%;
padding: 12px;
font-size: 1.1em;
outline: none;
border: 1px solid #ced4da;
border-radius: 4px;
resize: none;
min-height: 220px;
margin-bottom: 10px;
}
.inputbox input[type="submit"] {
background-color: #05a332;
color: # ;
border: none;
padding: 12px 24px;
font-size: 1em;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
fl
fl
ff
fl
fl
ff
ff
.inputbox input[type="submit"]:hover {
background-color: #e47400;
}
.inputbox::placeholder {
color: #0a192f;
}
.info .infobox div {
display: ex;
align-items: center;
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
.info .infobox div span {
min-width: 40px;
height: 40px;
background-color: #0a192f;
color: # ;
display: ex;
justify-content: center;
align-items: center;
font-size: 1.2em;
border-radius: 50%;
margin-right: 12px;
}
.info .infobox div span:hover {
background-color: # 8000;
}
.info .infobox div p {
color: #0a192f;
margin: 0;
font-weight: 500;
font-size: 1em;
}
.sci {
display: ex;
margin-top: 15px;
gap: 10px;
justify-content: ex-start;
padding: 0;
}
.sci a {
display: ex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
background-color: #0a192f;
color: # ;
border-radius: 50%;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
.sci a:hover {
background-color: # 8000;
}
.footer-section {
background-color: #0a192f;
padding: 40px 20px;
ff
ff
fl
fl
fl
fl
ff
ff
ff
ff
fl
ff
ff
font-family: Arial, sans-serif;
margin-top: auto;
}
.footer-container {
display: ex;
justify-content: space-between;
ex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.footer-column {
ex: 1 1 200px;
margin: 10px;
}
.footer-column h4 {
font-size: 18px;
color: # 8000;
margin-bottom: 10px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 8px;
}
.footer-column ul li a {
color: # ;
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #ea7500;
}
.copyright {
color: # ;
text-align: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #444;
}
.btn {
display: inline-block;
background-color: #0a192f;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
}
.btn:hover {
background-color: #e4af00;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.[Link] .search-input {
fl
fl
ff
ff
ff
fl
ff
ff
ff
ff
width: 100px !important;
}
}
</style>
</head>
<body>
<nav>
<div class="navbar-container">
<img src="[Link]" class="logo" alt="MSK Logo">
<div class="nav-links">
<a href="[Link]">Home</a>
<a href="[Link]">Shop</a>
<a href="[Link]">Contact Us</a>
<div class="pro le-dropdown">
<a href="#"><i class="bi bi-person-circle"></i></a>
<div class="dropdown-content">
<a href="#">My Pro le</a>
<a href="[Link]">Cart</a>
<a href="#">Logout</a>
</div>
</div>
<div class="search-container" id="searchBox">
<button class="search-icon" onclick="toggleSearch()" aria-label="Toggle search">
<i class="bi bi-search"></i>
</button>
<input type="text" class="search-input" placeholder="Search..." />
</div>
</div>
</div>
</nav>
<!-- Banner Section -->
<section class="banner">
<section class="position-relative bg-dark">
<img src="factory [Link]" class="w-100 banner-image" alt="Banner">
<div class="banner-text">
<h1 class="display-4 fw-bold">Contact Us</h1>
<p class="fs-4 mb-4">"From raw metal to re ned art — the journey of copper begins with
us."</p>
</div>
</section>
</section>
<!-- Contact Us Section -->
<div class="contact">
<div class="title">
<h2>Get in Touch with Us</h2>
</div>
<div class="box">
<div class="contact form">
<h3>Send a Message</h3>
<form>
<div class="formbox">
<div class="row100">
<div class="inputbox">
<span>Name</span>
<input type="text" placeholder="Name">
</div>
<div class="inputbox">
<span>Email</span>
<input type="text" placeholder="Email">
</div>
fi
fi
fi
<div class="inputbox">
<span>Contact number</span>
<input type="text" placeholder="Contact number">
</div>
<div class="inputbox">
<span>Address</span>
<input type="text" placeholder="Address">
</div>
<div class="inputbox">
<span>Message</span>
<textarea placeholder="Write Your Message here...."></textarea>
</div>
<div class="inputbox">
<input type="submit" value="Submit">
</div>
</div>
</div>
</form>
</div>
<div class="contact info">
<h4>Contact Info</h4>
<div class="infobox">
<div>
<span><ion-icon name="mail"></ion-icon></span>
<p><b>Email:</b> msk_karekar@[Link]</p>
</div>
<div>
<span><ion-icon name="call"></ion-icon></span>
<p><b>Phone:</b> 7387015202</p>
</div>
<div>
<span><ion-icon name="location"></ion-icon></span>
<p><b>Address:</b> Factory no.134 Near Ganesh Chowk Khorlim Mapusa Goa</p>
</div>
<!-- Social media links -->
<div class="sci">
<a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
<a href="#"><ion-icon name="logo-linkedin"></ion-icon></a>
<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
</div>
</div>
</div>
<div class="contact map">
<h4>Live address</h4>
<iframe src="[Link]
1d3842.895893614198!2d73.79839707486087!3d15.597210151901873!2m3!1f0!2f0!3f0!3m2!
1i1024!2i768!4f13.1!3m2!1m1!2zMTXCsDM1JzQ5LjkiTiA3M8KwNDgnMDMuNSJF!5e0!3m2!1sen!
2sin!4v1754138188324!5m2!1sen!2sin" width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="footer-section">
<div class="footer-container">
<div class="footer-column">
<h4>Menu</h4>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="about [Link]">About Us</a></li>
<li><a href="[Link]">Contact Us</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Categories</h4>
<ul>
<li><a href="#">Cookware</a></li>
<li><a href="#">Tableware</a></li>
<li><a href="#">Drinkware</a></li>
<li><a href="#">Kitchen Utensils</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">Contact Support</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Refund and Returns Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Social Media</h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</div>
</div>
<p class="copyright">&copy; 2025 MSK Factory. All rights reserved.</p>
</footer>
<!-- Bootstrap 5 JS CDN -->
<script src="[Link]
script>
<script type="module" src="[Link]
[Link]"></script>
<script nomodule src="[Link]
<script>
function toggleSearch() {
const searchBox = [Link]('searchBox');
[Link]('active');
if ([Link]('active')) {
[Link]('.search-input').focus();
} else {
[Link]('.search-input').value = '';
}
}
</script>
</body>
</html>

contact

You might also like