Project_SPACE/gallery.html at main · Krite-in/Project_SPACE · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" type="image/png" href="image/tab_logo.png">
	<link rel="stylesheet" type="text/css" href="css/gallery.style.css">
	<title>
		Space Age Gallery
	</title>
</head>
<body>
	<div class="main">
		<div class="navbar" id="navbar">
			<img src="image/Space_Age_logo.png" class="logo">
			<nav>
				<ul>
					<li><a href="index.html" class="home">Home</a></li>
					<li><a href="about.html" class="about">About</a></li>
					<li><a href="gallery.html" class="gallery">Gallery</a></li>
					<li><a href="tour.html" class="tour">Tour</a></li>
					<li><a href="LogIn.html" class="account">Account</a></li>
				</ul>
			</nav>
		</div>
		<div class="content">
				<h1>Views from our most<br>Recent Tour.</h1>
				<p>Photos are unforgetable and Immortal Memories.</p>
		</div>
		<div class="links">
			<a href="#" class="mata">Mataverse</a>
			<a href="#" class="unreal">Unreal</a>
			<a href="#" class="deeplink">DeepLink</a>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col">
				<h2>Tour Red</h2>
				<p id="red">This was 1 month tour to MARS<br><br>from North Base.<br><br>with 16 Tourists and 7 Crew members it visited Mars colony.</p>
				<div class="btn">
					<button>Know More</button>
				</div>
			</div>
			<div class="col">
				<div class="card card1">
				</div>
				<div class="card card2">
				</div>
				<div class="card card3">
				</div>
				<div class="card card4">
				</div>
			</div>
		</div>
		<div class="row2">
			<div class="col">
				<div class="card card5">
				</div>
				<div class="card card6">
				</div>
				<div class="card card7">
				</div>
				<div class="card card8">
				</div>
			</div>
			<div class="col">
				<h2>Lunar Tour</h2>
				<p id="red">This was 1 month tour to MOON<br><br>from Atlantic Base.<br><br>with 50 Tourists and 15 Crew members.</p>
				<div class="btn">
					<button>Know More</button>
				</div>
			</div>
		</div>
		<div class="row3">
			<div class="col">
				<h2>Tour DEEPSPACE</h2>
				<p id="red">This was 2 Year tour in DEEPSPACE<br><br>from North Base.<br><br>with 16 Tourists and 7 Crew members.</p>
				<div class="btn">
					<button>Know More</button>
				</div>
			</div>
			<div class="col">
				<div class="card card9">
				</div>
				<div class="card card10">
				</div>
				<div class="card card11">
				</div>
				<div class="card card12">
				</div>
			</div>
		</div>
		<div class="row4">
			<div class="col">
				<div class="card card13">
				</div>
				<div class="card card14">
				</div>
				<div class="card card15">
				</div>
				<div class="card card16">
				</div>
			</div>
			<div class="col">
				<h2>Research Tour</h2>
				<p id="red">4 different Base.<br><br>4 different Team.<br><br>4 different Mission.</p>
				<div class="btn">
					<button>Know More</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		{
			var blur_it = document.getElementById("navbar");
			var lastscroll = window.screenY;
			window.addEventListener("scroll", () =>{
			if (lastscroll<window.scrollY){
				console.log("lastscroll");
				blur_it.classList.add("navbar--hidden")
			}
			else{
				blur_it.classList.remove("navbar--hidden")
			}
			lastscroll = window.screenY;
			})
	}
	</script>
</body>
</html>