Gallery Webpage for Vehicles

NageshMandal · Oct 14, 2022 · 678923d · 678923d
1 parent 714a20f
commit 678923d
Show file tree

Hide file tree

Showing 23 changed files with 334 additions and 0 deletions.
diff --git a/Gallery_Vehicles/Audi.jpg b/Gallery_Vehicles/Audi.jpg
diff --git a/Gallery_Vehicles/Bentley.jpg b/Gallery_Vehicles/Bentley.jpg
diff --git a/Gallery_Vehicles/Chevrolet.jpg b/Gallery_Vehicles/Chevrolet.jpg
diff --git a/Gallery_Vehicles/Fiat.png b/Gallery_Vehicles/Fiat.png
diff --git a/Gallery_Vehicles/Honda.jpg b/Gallery_Vehicles/Honda.jpg
diff --git a/Gallery_Vehicles/Jaguar.jpg b/Gallery_Vehicles/Jaguar.jpg
diff --git a/Gallery_Vehicles/Jeep.webp b/Gallery_Vehicles/Jeep.webp
diff --git a/Gallery_Vehicles/Land-Rover.jpg b/Gallery_Vehicles/Land-Rover.jpg
diff --git a/Gallery_Vehicles/Lexus.jpg b/Gallery_Vehicles/Lexus.jpg
diff --git a/Gallery_Vehicles/PORSCHE.jpg b/Gallery_Vehicles/PORSCHE.jpg
diff --git a/Gallery_Vehicles/Volvo-car.jpg b/Gallery_Vehicles/Volvo-car.jpg
diff --git a/Gallery_Vehicles/bugatti.jpg b/Gallery_Vehicles/bugatti.jpg
diff --git a/Gallery_Vehicles/close.png b/Gallery_Vehicles/close.png
diff --git a/Gallery_Vehicles/ford.jpg b/Gallery_Vehicles/ford.jpg
diff --git a/Gallery_Vehicles/gallery.html b/Gallery_Vehicles/gallery.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="gallery1.css">
+ <link rel="stylesheet" href="gallery2.css">
+ <script src="gallery.js"></script>
+ <title>Gallery</title>
+</head>
+<body>
+ <header class="sticky">
+ <a href="#" class="logo">Vehicles<span>.</span></a>
+ <div class="menuToggle" onclick="toggleMenu();"></div>
+
+ </header>
+ <script type="text/javascript">
+ window.addEventListener('scroll', function () {
+ const header = document.querySelector('header');
+ header.classList.toggle("sticky", window.scrollY > 0);
+ });
+ function toggleMenu(){
+ const menuToggle = document.querySelector('.menuToggle');
+ const navigation = document.querySelector('.navigation');
+ menuToggle.classList.toggle('active');
+ navigation.classList.toggle('active');
+ }
+ </script>
+ <div class="full-img" id="fullimgbox">
+ <img src="img1.jpg" id="fullimg">
+
+ </div>
+ <div class="img-gallary">
+ <a href="Audi.jpg" data-lightbox="mygallary" data-title="Audi"><img src="Audi.jpg"></a> 
+ <a href="Bentley.jpg" data-lightbox="mygallary" data-title="Bentley"><img src="Bentley.jpg"></a>
+ <a href="bugatti.jpg" data-lightbox="mygallary" data-title="Bugatti"><img src="bugatti.jpg"></a>
+ <a href="Chevrolet.jpg" data-lightbox="mygallary" data-title="Chevrolet"><img src="Chevrolet.jpg"></a>
+ <a href="ford.jpg" data-lightbox="mygallary" data-title="Ford"><img src="ford.jpg"></a>
+ <a href="Jaguar.jpg" data-lightbox="mygallary" data-title="Jaguar"><img src="Jaguar.jpg"></a>
+ <a href="Jeep.webp" data-lightbox="mygallary" data-title="Jeep"><img src="Jeep.webp"></a>
+ <a href="Land-Rover.jpg" data-lightbox="mygallary" data-title="Land-Roveri"><img src="Land-Rover.jpg"></a>
+ <a href="Lexus.jpg" data-lightbox="mygallary" data-title="Lexus."><img src="Lexus.jpg"></a>
+ <a href="mercedes-Benz.jpg" data-lightbox="mygallary" data-title="Mercedes-Benz"><img src="mercedes-Benz.jpg"></a>
+ <a href="nissan.jpg" data-lightbox="mygallary" data-title="Nissan"><img src="nissan.jpg"></a>
+ <a href="PORSCHE.jpg" data-lightbox="mygallary" data-title="Porsche"><img src="PORSCHE.jpg"></a>
+ <a href="rolls-royce.jpg" data-lightbox="mygallary" data-title="Rolls-royce"><img src="rolls-royce.jpg"></a>
+ <a href="Volvo-car.jpg" data-lightbox="mygallary" data-title="Volvo"><img src="Volvo-car.jpg"></a>
+ <a href="Honda.jpg" data-lightbox="mygallary" data-title="Honda"><img src="Honda.jpg"></a>
+ <a href="Fiat.png" data-lightbox="mygallary" data-title="Fiat"><img src="Fiat.png"></a>
+ <a href="hello.jpg" data-lightbox="mygallary" data-title=""><img src="hello.jpg"></a>
+ <!-- <a href="Guwahati4.jpg" data-lightbox="mygallary" data-title="Guwahati-Guwahati City View"><img src="Guwahati4.jpg"></a> -->
+
+
+ </div>
+</script>
+</body>
+</html>
diff --git a/Gallery_Vehicles/gallery.js b/Gallery_Vehicles/gallery.js
diff --git a/Gallery_Vehicles/gallery1.css b/Gallery_Vehicles/gallery1.css
@@ -0,0 +1,237 @@
+* {
+ margin : 0;
+ padding: 0;
+ font-family: sans-serif;
+}
+body{
+ background: #030d16;
+}
+/*
+header
+{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 40px 8px;
+ z-index: 10000;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: 0.5s;
+}
+header.sticky
+{
+background: #fff;
+padding: 10px 3px;
+box-shadow: 0 5px 20px rgb(0, 0,0, 0.05);
+}
+
+header .logo
+{
+ color: #fff;
+ font-weight: 700;
+ font-size: 2em;
+ text-decoration: none;
+}
+header.sticky .logo{
+ color: #111;
+}
+header .logo span
+{
+ color: #ff0157;
+}
+header .navigation
+{
+ position: relative;
+ display: flex;
+}
+header .navigation li
+{
+ list-style: none;
+ margin-left: 30px;
+ margin-right: 30px;
+}
+header .navigation li a
+{
+ text-decoration: none;
+ color: #fff;
+ font-weight: 300;
+}
+header.sticky .navigation li a
+{
+color: #111;
+}
+header.sticky .navigation li a:hover
+{ color: #ff0157;} */
+header
+{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ /* padding: 40px 100px; */
+ z-index: 10000;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: 0.5s;
+}
+header.sticky
+{
+background: #fff;
+/* padding: 10px 100px; */
+box-shadow: 0 5px 20px rgb(0, 0,0, 0.05);
+}
+
+header .logo
+{
+ color: white;
+ font-weight: 700;
+ font-size: 2em;
+ text-decoration: none;
+}
+header.sticky .logo{
+ color: black;
+}
+header .logo span
+{
+ color: #ff0157;
+}
+header.sticky .logo span{
+ color: #ff0157;
+}
+header .navigation
+{
+ position: relative;
+ display: flex;
+}
+header .navigation li
+{
+ list-style: none;
+ /* margin-left: 30px; */
+ margin-right: 30px;
+}
+header .navigation li a
+{
+ text-decoration: none;
+ color: #ff0157;
+ font-weight: 300;
+}
+header .navigation li a:hover
+{
+ color: #fff;
+}
+header.sticky .navigation li a
+{
+color: #111;
+}
+header.sticky .navigation li a:hover
+{ color: #ff0157;}
+.img-gallary{
+ width: 80%;
+ margin: 100px auto 50px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
+ grid-gap: 30px;
+
+}
+.img-gallary img{
+ width: 100%;
+ cursor: pointer;
+ transition: 1s;
+}
+.img-gallary img:hover{
+ transform: scale(0.8) rotate(-15deg);
+ border-radius: 20px;
+ box-shadow: 0 32px 7px rgba(68,77,136,0.2);
+
+}
+.full-img{
+ width: 100%;
+ height: 100%;
+ background:rgba(0,0,0,0.9) ;
+ position: fixed;
+ top: 0;
+ left: 0;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 100;
+}
+.full-img img{
+ width: 90%; 
+ max-width: 500px;
+}
+.full-img span{
+ position: absolute;
+ top: 12%;
+ right: 5%;
+ font-size: 30px;
+ color: #fff;
+ cursor: pointer;
+}
+@media(max-width:998px) {
+ html {
+ font-size: 50%;
+ }
+
+ header,
+ header .sticky {
+ display: 10px 20px;
+ }
+
+ header .navigation {
+ display: none;
+ }
+
+ header .navigation.active {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 60px;
+ left: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ background: white;
+ line-height: 50px;
+
+ }
+
+ header .navigation li {
+ margin-left: 0;
+
+ }
+
+ header .navigation li a {
+ /* text-decoration: none; */
+ color: rgb(0, 0, 0);
+ font-weight: 500;
+ font-size: 2.3rem;
+
+ }
+
+
+ .menuToggle {
+ position: relative;
+ width: 40px;
+ height: 40px;
+ background: url(menu.png);
+ background-size: 30px;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ .menuToggle.active {
+ background: url(close.png);
+ background-size: 25px;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ header.sticky .menuToggle {
+ filter: invert(1);
+ }
+}
diff --git a/Gallery_Vehicles/gallery2.css b/Gallery_Vehicles/gallery2.css
diff --git a/Gallery_Vehicles/hello.jpg b/Gallery_Vehicles/hello.jpg
diff --git a/Gallery_Vehicles/menu.png b/Gallery_Vehicles/menu.png
diff --git a/Gallery_Vehicles/mercedes-Benz.jpg b/Gallery_Vehicles/mercedes-Benz.jpg
diff --git a/Gallery_Vehicles/nissan.jpg b/Gallery_Vehicles/nissan.jpg
diff --git a/Gallery_Vehicles/rolls-royce.jpg b/Gallery_Vehicles/rolls-royce.jpg