luke-else/divine-couture.co.uk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added intro video to page

Browse Source
This commit is contained in:
Luke Else
2024-12-12 11:37:15 +00:00
parent f0257a4093
commit 3c2867ea87
1 changed files with 88 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
index.html
View File

@@ -25,6 +25,40 @@
overflow: hidden;
}
/* Default: Show desktop element and hide mobile element */
.desktop-element {
display: block;
}
.mobile-element {
display: none;
}
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 9999;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-container.fade-out {
animation: fadeOut 500ms forwards;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
.container {
text-align: center;
position: relative;
@@ -37,7 +71,6 @@
.logo img {
min-width: 20rem;
/* max-width: 12rem; */
}
h1 {
@@ -60,7 +93,7 @@
p {
font-family: 'Montserrat', sans-serif;
font-size: 1.0rem;
font-size: 1rem;
color: #c0c0c0;
max-width: 500px;
margin: 0 auto;
@@ -70,7 +103,6 @@
.accent-line {
width: 100px;
height: 4px;
/* background: linear-gradient(135deg, #b8860b, #ffd700); */
background: #B57C1A;
margin: 20px auto;
border-radius: 2px;
@@ -109,6 +141,14 @@
}
@media (max-width: 768px) {
.desktop-element {
display: none; /* Hide desktop element on small screens */
}
.mobile-element {
display: block; /* Show mobile element on small screens */
}
.contact {
position: relative;
flex-direction: column;
@@ -124,7 +164,27 @@
</style>
</head>
<body>
<div class="container">
<!-- Video Intro -->
<div class="desktop-element">
<div class="video-container" id="videoContainerDesk">
<video id="introVideoDesk" autoplay muted playsinline>
<source src="Full HD.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="mobile-element">
<div class="video-container" id="videoContainerMob">
<video id="introVideoMob" autoplay muted playsinline>
<source src="Full HD vertical.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<!-- Main Content -->
<div class="container" id="mainContent">
<div class="logo">
<img src="divine couture-no background.svg" alt="Company Logo">
</div>
@@ -134,9 +194,31 @@
<div class="contact">
<div><img src="email-icon.png" alt="Email Icon"><a href="mailto:contact@divine-couture.co.uk">contact@divine-couture.co.uk</a></div>
<!-- <div><img src="website-icon.png" alt="Website Icon"><a href="https://www.divine-couture.co.uk">www.divine-couture.co.uk</a></div> -->
<div><img src="phone-icon.png" alt="Phone Icon"><a href="tel:+447713133027">+44 (0) 77 13 13 30 27</a></div>
<div><img src="tiktok-icon.png" alt="TikTok Icon"><a href="https://www.tiktok.com/@divinecoutureee">divinecoutureee</a></div>
</div>
<script>
const videoDesk = document.getElementById('introVideoDesk');
const videoContainerDesk = document.getElementById('videoContainerDesk');
const mainContent = document.getElementById('mainContent');
videoDesk.addEventListener('ended', () => {
videoContainerDesk.classList.add('fade-out');
setTimeout(() => {
videoContainerDesk.style.display = 'none';
}, 500); // Wait for the fade-out animation to finish
});
const videoMob = document.getElementById('introVideoMob');
const videoContainerMob = document.getElementById('videoContainerMob');
videoMob.addEventListener('ended', () => {
videoContainerMob.classList.add('fade-out');
setTimeout(() => {
videoContainerMob.style.display = 'none';
}, 500); // Wait for the fade-out animation to finish
});
</script>
</body>
</html>
</html>