FreeCodeCamp/ProductLanding.html at master · vinithreddy3/FreeCodeCamp · 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
<!DOCTYPE html>
<html5>
<head>
	<title>Product Landing Page</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
	<link rel="stylesheet" type="text/css" href="Product_Landing_CSS.css">
</head>

<body>
<div class="page-container">
	<header id="header">
	<nav id="nav-bar">
	<img id="header-img" src="https://serimcheats.com/wp-content/uploads/2018/09/icon_pubg.png"  title="PLAYER UNKNOWN'S BATTLEGROUND">
		<a class="nav-link" href="#maps"><label>MAPS</label></a>
		<a class="nav-link" href="#vid"><label>GAMEPLAY</label></a>
		<a class="nav-link" href="#crates"><label>CRATES</label></a><br>
	</nav>
	</header><br>

	<div class="form-container">
	<form id="form" action="https://www.freecodecamp.com/email-submit">
	<center>
	<input type="email" name="email" id="email" placeholder="Enter your email:" style="text-align: center"><br>
	<input type="submit" name="submit" id="submit" class="btn-primary" value="LET'S GO!" style="margin-top: 15px;"></center></form></div>
	<div id="maps">
		<h1 style="font-family: cursive;text-align: center;"><strike>MAPS AVAILABLE</strike></h1>
		<div class="erangel">
			<div>
			<h1>Erangel</h1>
			<p>Erangel is the base map for the game. An 8x8 km map dotted with small outcroppings of buildings, the distance between major landmarks necessitates the use of vehicles to move between areas. As the game continues, the map area will be restricted to a smaller and smaller play area. A red circle will appear on the map from time to time, marking an area for offshore artillery to bombard. Erangel has varying weather, sometimes affecting visibility and requiring a change in tactics.Cities and the local military base have plenty of decent loot, but you won't be the only one thinking the same thing. A mix of urban areas and wide open farmland create a wide variety of battles, ranging from intense close range firefights in streets and buildings, to long range sniping duels taking place across wheat fields.The name Erangel was chosen, using PLAYERUNKNOWN's daughter's name, Eryn, as inspiration.</p></div>
		</div>
		<div class="miramir">
			<h1>Miramir</h1>
			<p>Miramar offers unique terrain and dense urban areas. With an island to the south east home to a prison and smaller villages, the entire area is cut off from the west and north-east by enormous canyons and mountains, with a looming metal wall to the north keeping outsiders out, and players in. Miramar will create a new Battle Royale experience where the old strategies from Erangel may no longer work and new tactics are required.</p>
		</div>
		<div class="sanhok">
			<h1>Sanhok</h1>
			<p>Sanhok is the first map that the art team of PUBG Corp visited a location specifically for world art development. By physically being in the jungles and mountains in a humid Asian country, it not only made them imagine what the new map will play like, but they felt the breeze, smelled the air and heard the sounds. All of these experiences are helping the team create a unique map experience.The map is inspired by a wide variety of islands in Thailand and the Philippines, the PUBG Art team; comprised of Technical Artists, Concept Artists and 3D Environment Artists, they took photos (Photogrammetry) to capture the island then transfer that to the game engine to design Sanhok.</p>
		</div>
		<div class="flex-container" id="vid">
			<iframe id="video" width="560" height="315" style="padding: 20px" src="https://www.youtube.com/embed/rtvgEmuChhA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/hfjazBN0DwA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
		<div class="flex-container" id="crates">
			<div>
				<h3><b>Superior Crate</b></h3>
				<h4>Price : 120$</h4>
				<h4>List of items : Sports Top,Fancy Shirt,Military Beret,Silver Masquerade,Emo Mask,Terrifying Mask,Sea Spirit Shirt,Vintage Basketball Cap</h4>
			</div>
			<div>
				<h3><b>Premium Crate</b></h3>
				<h4>Price : 90$</h4>
				<h4>List of items : Sports Top,Fancy Shirt,Silver Masquerade,Square Glasses,Shirt,Pants</h4>
			</div>
			<div>
				<h3><b>PUBG Crate</b></h3>
				<h4>Price : 30$</h4>
				<h4>List of items : Fancy Shirt,T-Shirt,Hi-Top Trainers</h4>
			</div>
		</div>
	</div>
	<footer style="font-size: 20px;"><marquee>© OptiPrime33 Sniper-Training  Erangel Squad-Mode</marquee></footer>
</div>
</body>
</html>