lizuxiao
/
LC


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Liberty City</title>
		<link rel="stylesheet" href="./css/index.css">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
	</head>
	<body>
		<div>
			<div class="top">
				<div class="logo">
					<img src="./img/logo.png" alt="">
					<h2>Liberty City</h2>
				</div>
				<div class="nav">
					<ul>
						<li><a href="#home">Home page</a></li>
						<li><a href="#project">Projects</a></li>
						<li><a href="#nft">NFT</a></li>
						<li><a href="#model">Tokenomics</a></li>
						<li><a href="#xianlu">Roadmaps</a></li>
						<li><a target="_blank" href="./pdf.html">Whitepapers</a></li>
					</ul>
				</div>
				<div class="nav-tab">
					<img id="zk" src="./img/menu.png" alt="">
				</div>
				<div class="nav-list">
				 <div class="top">
				 	<span id="cols">X</span>
				 </div>
				 <ul>
				 	<li><a href="#home">Home page</a></li>
				 	<li><a href="#project">Projects</a></li>
				 	<li><a href="#nft">NFT</a></li>
				 	<li><a href="#model">Tokenomics</a></li>
				 	<li><a href="#xianlu">Roadmaps</a></li>
				 	<li><a target="_blank" href="./pdf.html">Whitepapers</a></li>
				 </ul>
				</div>
			</div>
			<div class="banner_content  cont" id="home">
				<div class="banner_logo">
					<div class="logo2">
						<img src="./img/1.png" alt="">
						<h2>Liberty City</h2>
					</div>
				</div>
				<h2>Fairness and freedom, desire and ambition<br>
					The intersection of virtual and reality</h2>
				<p>Complete decentralization, Dao governance, no private placement, no crowdfunding, and all tokens are
					produced through mining,<br>
					No project party, fair and open, co construction and sharing.</p>
			</div>
			<video type="video/mp4" autoplay="autoplay" muted loop="loop" style="width: 100%;" id="void">
				<source src="./void/banner.mp4" type="video/ogg" / id="mp4">
			</video>
			<audio autoplay="autoplay" id="audio" loop="loop">
				<source src="./void/13.mp3" type="audio/MP3">
			</audio>
			<div class="bg"></div>
			<div class="pay">是否播放背景音乐？
				<br>
				<span class="pays">是</span><span class="off">否</span>
			</div>
			<div class="project cont" id="project">
				<img class="bg1" src="./img/3.png" alt="">
				<div class="project_content">
					<h2>Project introduction</h2>
					<img src="./img/2.png" alt="">
					<h1>NEW WORLD IS COMING!</h1>
					<p>Liberty City is an intersection of fairness and freedom, desire and ambition, and virtual and
						reality.
						<br>

						<br>
						Thousands of different stories will take place in this capital of freedom. <br>
						The stories, characters and tasks in LC games are all completed by new virtual scenes.
						<br>
						<br>
						Complete decentralization, Dao governance, no private placement, no crowdfunding,
						<br>
						all tokens are produced through mining, no project party, fair and open, co construction and
						sharing.
					</p>
				</div>
			</div>
			<div class="car cont" id="nft">
				<img class="bg1" src="./img/4.png" alt="">
				<div class="car_content">
					<h1>NFT card</h1>
					<!-- Swiper -->
					<div class="swiper mySwiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="./img/18.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/19.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/20.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/car/4.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/car/5.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/car/6.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/car/7.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/car/8.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/car/9.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/car/10.png" alt="">
							</div>
						</div>
					</div>
					<div class="swiper-button-next"><img src="./img/r.png" alt=""></div>
					<div class="swiper-button-prev"><img src="./img/l.png" alt=""> </div>
				</div>
			</div>
			<div class="model cont" id="model">
				<img class="bg1" src="./img/8.png" alt="">
				<div class="model_content">
					<h1>Economic model</h1>
					<img src="./img/9.png" alt="">
					<div class="cs">
						<ul>
							<li><span></span> 97%- mining output</li>
							<li class="li"><span></span>3%- initial liquidity</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 线路图 -->
			<div id="xianlu" class="cont">
				<img class="bg1" src="./img/10.png" alt="">
				<div class="Liberty2">Road map</div>
				<div class="container">
					<div class="left">
						<div class="tow">
							Second Season

							<p>LP mining
							</p>
						</div>
						<div class="four">
							Fourth Season

							<p>Gamefi、Socialfi、DAO、 Swap</p>
						</div>
					</div>
					<div class="hx">
						<span class="y"></span>
						<span class="x"></span>
						<span class="y"></span>
						<span class="x"></span>
						<span class="y"></span>
						<span class="x"></span>
						<span class="y"></span>
						<span class="x"></span>
						<span class="y"></span>
						<span class="x"></span>
					</div>
					<div class="right">
						<div class="tow">
							First Season
							<p>Genesis card(chaos)</p>
						</div>
						<div class="three">
							Third Season

							<p>NFT land purchase pledge
							</p>
						</div>
						<div class="five">
							Five Season

							<p>Meta universe virtual city capital of freedom
							</p>
						</div>
					</div>
				</div>

			</div>
			<div class="footer">
				<a target="_blank" href="https://ss.transgot.cn/libertycitydao"> <img src="./img/12.png" alt=""></a>
				<a target="_blank" href="https://discord.gg"><img src="./img/13.png" alt=""></a>
				<a target="_blank" href="https://twitter.com/dao_libertycity"><img src="./img/14.png" alt=""></a>
			</div>
		</div>
	</body>
	<script src="./swiper/swiper-bundle.min.js"></script>
	<script src="./js/jquery.min.js"></script>
	<script>
		let w=$(window).width();
		let h=$(window).height();
		console.log(w)
		if(w<766){
			$('#void').css('display','none')
			$('.bg').css('width',w,'display','line-break')
		}
		if(w>1024){
			console.log(w,2)
		  $('.cont').css('height',h+30+"px")
		  $('.bg1').css('height',h+30+"px")
		}
		
		$('.nav-tab').on('click',function(){
			 $('#zk').css('display','none')
			 $('.nav-list').css('margin-left','-300px')
		})
		
		$('#cols').on('click',function(){
			 $('#zk').css('display','inline-block')
			 $('.nav-list').css('margin-left','-600px')
		})
		
		$(function() {
			let music = $("#audio")[0];
			$('.off').click('on', function() {
				$('.pay').css('display', 'none')
			})
			$('.pays').click('on', function() {

				if (music.paused) { //判读是否播放  
					music.paused = false;
					music.play(); //没有就播放
					$('.pay').css('display', 'none')
					console.log(music)
				}

			})

		})
	</script>
	<script>
		var swiper = new Swiper(".mySwiper", {
			slidesPerView: 3,
			spaceBetween: 30,
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},
		});
	</script>
</html>