Skip to content

Instantly share code, notes, and snippets.

@Vishnudas2003

Vishnudas2003/index.html

Created August 30, 2024 01:23
Show Gist options
  • Save Vishnudas2003/4f02f728b11c19ca2e4c18e6ccbe7c52 to your computer and use it in GitHub Desktop.
Save Vishnudas2003/4f02f728b11c19ca2e4c18e6ccbe7c52 to your computer and use it in GitHub Desktop.
Download ZIP
SoubhagyaClothing
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soubhagya Clothing</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<header>
<nav>
<div class="logo">Soubhagya Clothing</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#collections">Collections</a>
<ul class="dropdown-content">
<li><a href="#sarees">Sarees</a></li>
<li><a href="#paijamas">Paijamas</a></li>
<li><a href="#shirts">Shirts</a></li>
<li><a href="#mundu">Mundu</a></li>
<li><a href="#underwear">Underwear</a></li>
</ul>
</li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="hero">
<video autoplay muted loop id="brand-video">
<source src="path-to-your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="hero-content">
<h1>Experience the Tradition</h1>
<p>Discover the finest traditional wear at Soubhagya Clothing</p>
<a href="#collections" class="btn">Shop Now</a>
</div>
</section>
<section id="featured">
<h2>Featured Products</h2>
<div class="slideshow-container">
<!-- Slides -->
<div class="mySlides fade">
<img src="path-to-your-image1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="path-to-your-image2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="path-to-your-image3.jpg" style="width:100%">
</div>
</div>
</section>
<section id="about">
<h2>About Soubhagya Clothing</h2>
<p>Established in 1990, Soubhagya Clothing is a pioneer in traditional wear. Our garments are crafted with the utmost care and precision, bringing the rich heritage of our culture to you.</p>
</section>
<section id="contact">
<div class="contact-item">
<i class="fas fa-phone"></i>
<p>+1 234 567 890</p>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<p>[email protected]</p>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<p>123 Traditional St, Culture City, 00000</p>
</div>
</section>
<footer>
<p>&copy; 2024 Soubhagya Clothing. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
// JavaScript for slideshow
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("mySlides");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000); // Change image every 3 seconds
}
// JavaScript for smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
Raw
style.css
/* General Styles */
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #000; /* Dark background for the body */
color: #fdfffc; /* Light color for text */
}
header {
background-color: #235789; /* Deep blue background for header */
padding: 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5em;
font-weight: bold;
color: #fdfffc; /* Light color for the logo */
}
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.nav-links a {
color: #fdfffc; /* Light color for navigation links */
text-decoration: none;
font-size: 1em;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333; /* Darker shade for dropdown background */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: #fdfffc; /* Light color for dropdown links */
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
#hero {
height: 100vh;
position: relative;
overflow: hidden;
background-color: #235789; /* Deep blue background for hero section */
}
#brand-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
padding-top: 150px;
}
.hero-content h1 {
font-size: 3em;
color: #fdfffc; /* Light color for hero text */
}
.hero-content p {
font-size: 1.5em;
margin-bottom: 30px;
color: #fdfffc; /* Light color for hero subtext */
}
.btn {
background-color: #fdfffc; /* Light background for buttons */
color: #235789; /* Deep blue text for buttons */
padding: 10px 20px;
text-decoration: none;
font-size: 1.2em;
border-radius: 5px;
}
#featured {
padding: 100px 0;
background-color: #1a1d1a; /* Dark background for featured section */
text-align: center;
color: #fdfffc; /* Light color for featured text */
}
.slideshow-container {
position: relative;
max-width: 1000px;
margin: auto;
}
.mySlides {
display: none;
}
.fade {
animation: fade 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#about {
padding: 100px 20px;
background-color: #235789; /* Deep blue background for about section */
text-align: center;
color: #fdfffc; /* Light color for about text */
}
#contact {
padding: 50px 20px;
background-color: #235789; /* Deep blue background for contact section */
text-align: center;
color: #fdfffc; /* Light color for contact text */
}
.contact-item {
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 1.2em;
}
.contact-item i {
font-size: 2em;
color: #fdfffc; /* Light color for icons */
}
footer {
background-color: #000; /* Dark background for footer */
text-align: center;
padding: 20px;
font-size: 0.9em;
color: #fdfffc; /* Light color for footer text */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment