Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@henryhamon
henryhamon committed Feb 15, 2024
1 parent ca73c46 commit 589e604
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 0 deletions.
95 changes: 95 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Musketeers</title>
<link rel="stylesheet" href="style.css">
<!-- Add any necessary CSS libraries for carousels, etc. -->
</head>
<body>
<!-- Home Section -->
<section id="home" class="section">
<!-- Welcome message -->
<div class="fullscreen-video">
<video autoplay muted loop>
<source src="video.mp4" type="video/mp4">
</video>
<div class="overlay"></div>
<div class="gradient-overlay"></div>
<div class="content">
<h1>Welcome to Musketeers</h1>
<!-- Add any other content -->
</div>
</div>
</section>

<!-- Our Portfolio Section -->
<section id="portfolio" class="section">
<h2>Our Portfolio</h2>
<!-- Carousel for portfolio items -->
<div class="carousel">
<!-- Portfolio item 1 -->
<div class="portfolio-item">
<!-- Portfolio item content -->
</div>
<!-- Portfolio item 2 -->
<div class="portfolio-item">
<!-- Portfolio item content -->
</div>
<!-- Add more portfolio items as needed -->
</div>
</section>

<!-- Meet Our Experts Section -->
<section id="experts" class="section">
<h2>Meet Our Experts</h2>
<!-- Expert cards -->
<div class="expert-cards">
<!-- Expert card 1 -->
<div class="expert-card">
<!-- Expert details -->
</div>
<!-- Expert card 2 -->
<div class="expert-card">
<!-- Expert details -->
</div>
<!-- Expert card 3 -->
<div class="expert-card">
<!-- Expert details -->
</div>
</div>
</section>

<!-- Reviews Section -->
<section id="reviews" class="section">
<h2>Reviews</h2>
<!-- Carousel for reviews -->
<div class="carousel">
<!-- Review 1 -->
<div class="review">
<!-- Review content -->
</div>
<!-- Review 2 -->
<div class="review">
<!-- Review content -->
</div>
<!-- Add more reviews as needed -->
</div>
</section>

<!-- Contact Us Section -->
<section id="contact" class="section">
<h2>Contact Us</h2>
<!-- Contact form -->
<form action="#" method="post">
<input type="text" name="name" placeholder="Your Name">
<textarea name="message" placeholder="Your Message"></textarea>
<button type="submit">Send</button>
</form>
</section>

<!-- Script for carousel functionality and dark mode switching -->
<script src="script.js"></script>
</body>
</html>
49 changes: 49 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// Carousel functionality
const carousels = document.querySelectorAll('.carousel');

carousels.forEach(carousel => {
let currentIndex = 0;
const items = carousel.querySelectorAll('.carousel-item');
const totalItems = items.length;

function showItem(index) {
items.forEach(item => {
item.style.display = 'none';
});
items[index].style.display = 'block';
}

function nextItem() {
currentIndex++;
if (currentIndex >= totalItems) {
currentIndex = 0;
}
showItem(currentIndex);
}

function prevItem() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = totalItems - 1;
}
showItem(currentIndex);
}

// Initialize carousel
showItem(currentIndex);

// Add event listeners for navigation
const prevBtn = carousel.querySelector('.prev-btn');
const nextBtn = carousel.querySelector('.next-btn');

prevBtn.addEventListener('click', prevItem);
nextBtn.addEventListener('click', nextItem);
});

// Dark mode switching
const darkModeToggle = document.querySelector('.dark-mode-toggle');
const body = document.body;

darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});
119 changes: 119 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
/* Resetting default margin and padding */
body, h1, h2, h3, p, ul, li, figure, figcaption, blockquote, pre, hr {
margin: 0;
padding: 0;
}

/* Basic styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

.section {
padding: 50px 0;
}

h1, h2, h3 {
font-weight: bold;
color: #333;
margin-bottom: 20px;
}

h1 {
font-size: 36px;
}

h2 {
font-size: 24px;
}

p {
margin-bottom: 20px;
}

/* Fullscreen video background */
.fullscreen-video {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}

.fullscreen-video video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0));
}

/* Expert cards */
.expert-cards {
display: flex;
justify-content: space-between;
}

.expert-card {
width: 30%;
background-color: #f9f9f9;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.expert-card img {
width: 100%;
height: auto;
border-radius: 50%;
}

.expert-card h3 {
margin-top: 10px;
}

/* Form styling */
form {
max-width: 500px;
margin: 0 auto;
}

input[type="text"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
}

button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}

button:hover {
background-color: #555;
}

0 comments on commit 589e604

Please sign in to comment.