Added intro video to page
This commit is contained in:
92
index.html
92
index.html
@@ -25,6 +25,40 @@
|
|||||||
overflow: hidden;
|
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 {
|
.container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -37,7 +71,6 @@
|
|||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
min-width: 20rem;
|
min-width: 20rem;
|
||||||
/* max-width: 12rem; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@@ -60,7 +93,7 @@
|
|||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: 'Montserrat', sans-serif;
|
font-family: 'Montserrat', sans-serif;
|
||||||
font-size: 1.0rem;
|
font-size: 1rem;
|
||||||
color: #c0c0c0;
|
color: #c0c0c0;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -70,7 +103,6 @@
|
|||||||
.accent-line {
|
.accent-line {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
/* background: linear-gradient(135deg, #b8860b, #ffd700); */
|
|
||||||
background: #B57C1A;
|
background: #B57C1A;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@@ -109,6 +141,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@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 {
|
.contact {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -124,7 +164,27 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<div class="logo">
|
||||||
<img src="divine couture-no background.svg" alt="Company Logo">
|
<img src="divine couture-no background.svg" alt="Company Logo">
|
||||||
</div>
|
</div>
|
||||||
@@ -134,9 +194,31 @@
|
|||||||
|
|
||||||
<div class="contact">
|
<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="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="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><img src="tiktok-icon.png" alt="TikTok Icon"><a href="https://www.tiktok.com/@divinecoutureee">divinecoutureee</a></div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user