Halbear
74 lines
8.0 KiB
HTML
74 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="StyleSheets/ExampleStructure.css">
|
|
</head>
|
|
<body class="debug">
|
|
<div class="NavBarWrapper HFlexBox SpaceBetween">
|
|
<div class="NavBarSection HFlexBox AlignLeft">
|
|
<img alt="" class="NavIcon" src="/Assets/Icons/palmtree.svg" style="">
|
|
<p class="Title">ExampleTitle</p>
|
|
</div>
|
|
<div class="NavBarSection HFlexBox AlignRight">
|
|
<div class="HamburgerWrapper HFlexBox">
|
|
<div id="HamburgerNavContent" class="HamburgerNavMenu">
|
|
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='Cart.html';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">My Cart</button>
|
|
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
|
|
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
|
|
</div>
|
|
<button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
|
|
<span class="HamburgerSlab First"></span>
|
|
<span class="HamburgerSlab Middle"></span>
|
|
<span class="HamburgerSlab Last"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="VFlexBox Center hidden ImageFullscreenContainer" onclick="CloseImageFullscreen()" id="ImageFocusContainer" style="background-color: rgba(0,0,0,0.35); z-index: 9999; position: fixed; top:0; left:0; width: 100vw; height: 100vh;">
|
|
<button class="archivo-black-regular" onclick="CloseImageFullscreen()" style="font-size: 2rem; color:red; background-color: white; width: 3rem; height: 3rem; position: fixed; left:2rem; top: 2rem; cursor: pointer; border-radius: 1rem;">X</button>
|
|
<div class="Image" id="FullscreenImageFocus" style="width: 85vw; height: 90vh; background-image: url('Assets/Images/ImageOne.png'); filter: drop-shadow(white 1vh 0vh 0) drop-shadow(white -1vh 0vh 0) drop-shadow(white 0 1vh 0vh ) drop-shadow(white 0 -1vh 0); background-size: contain; background-repeat: no-repeat; background-position: center;"></div>
|
|
</div>
|
|
<div class="VFlexBox ContentContainer Center" style="margin-top: 10vh; border-bottom: none;">
|
|
<p class="BookingWidgetTitle archivo-black-regular" style="margin-left: 0;padding-left: 0; align-self: center; font-size: 3rem;">Gallery</p>
|
|
<div class="HFlexBox FlexWrap Center">
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageFour.jpg');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageFour.jpg'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageOne.png');" class="GalleryImageGridContainer" style="background-image: url('Assets/Images/ImageOne.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageTwo.png');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageTwo.png'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
<button tabindex="0" onclick="FocusImage('Assets/Images/ImageThree.gif');" class="GalleryImageGridContainer Wide" style="background-image: url('Assets/Images/ImageThree.gif'); background-repeat: no-repeat; background-size: cover;"></button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function CloseImageFullscreen(){
|
|
let Container = document.getElementById("ImageFocusContainer");
|
|
while(Container.classList.contains("hidden")){Container.classList.remove("hidden");}
|
|
Container.classList.add("hidden");
|
|
}
|
|
function FocusImage(url){
|
|
let Container = document.getElementById("ImageFocusContainer");
|
|
while(Container.classList.contains("hidden")){Container.classList.remove("hidden");}
|
|
let Image = document.getElementById("FullscreenImageFocus");
|
|
Image.style.backgroundImage = "url('"+url+"')";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |