lizuxiao
/
yzts


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Cosmic Angel</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>
	<style>
		.model_content .content p {
			font-size: 23px;
		}
		.model_content .content {
		    margin-right: 10%;
		}
		@media (max-width: 766px) and (min-width: 340px){
			.bg {
			    height: 340px;
			}
			.banner_content>h2 {
				font-size: 18px;
			    height: 70px;
			}
			.banner_content p {
			    line-height:26px;
			}
			.project {
			    height: 680px;
			}
			.project .bg1{
			    height: 680px !important;
			}
			.model_content .content{
				    margin-left: 30px;
			}
			.model_content .content p {
			    font-size: 14px !important;
			}
			#xianlu {
			    height: 800px;
			}
		}
		
	</style>
	<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</a></li>
						<li><a href="#project">Project</a></li>
						<li><a href="#nft">NFT</a></li>
						<li><a href="#model">Model</a></li>
						<li><a href="#xianlu">Map</a></li>
						<li><a target="_blank" href="./pdf.html">Book</a></li>
						<li><a  href="./index2.html">CN</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</a></li>
					<li><a href="#project">Project</a></li>
					<li><a href="#nft">NFT</a></li>
					<li><a href="#model">Model</a></li>
					<li><a href="#xianlu">Map</a></li>
					<li><a target="_blank" href="./pdf.html">Book</a></li>
					<li><a  href="./index2.html">CN</a></li>
				</ul>
				</div>
			</div>
			<div class="banner_content  cont" id="home">
				<div class="banner_logo">
					<div  class="logo2">
						<img src="./img/33.png" alt="">
					</div>
				</div>
				<h2>The linker of the ecological value transmission of the meta universe</h2>
				
				<p>Bring mainstream applications and assets into the whole cosmoangel ecosystem, and help many high-quality assets enter other blockchain networks，<br>
				Return the entire encrypted digital asset market to its origin, and realize the free flow, interaction and aggregation of assets on different blockchain chains，<br>
				And enable the development of real industries</p>
			</div>
			<div>
				<img class="bg1" src="./img/74.png" alt="">	
			</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/16.png" alt="">
				<div class="project_content">
					<h2>Project</h2>
					<h1>NEW WORLD IS COMING!</h1>
					<p>
						Cosmoangel is the first super aggregation platform with the theme of meta cosmic ecology, and integrates probability elements such as web3.0+dao+gamefi+defi+nft+metaverse。<br>
						Cosmoangel creates application scenarios for Web3.0 yuan universe ecology, including games, sports, NFT collections, defi aggregators, decentralized exchanges, etc，<br>
						Create a real ecological vision of infinite expansion and respect for the new financial paradigm of the meta universe。<br>
						And it is 100% operated by its community Dao to drive development and management, and users with their own management token CAGL will be able to make decisions。<br>
					</p>
					<p>
						Cosmosangel will also use the flow effect and wealth effect of the meta universe to promote human civilization to complete the dimensional transition from the material world to the digital world，<br>
						Create a decentralized meta universe aggregation ecosystem with strong IP, and strive to create a lightweight, open and free meta universe super aggregation ecosystem that everyone can participate in，<br>
						Meet users' all-round financial investment, production and living needs in the meta universe world, and become the first choice for all meta universe ecological application services。<br>
					</p>
				</div>
			</div>
			<div class="car cont" id="nft">
				<img class="bg1" src="./img/4.png" alt="">
				<div class="car_content">
					<h1>NFT</h1>
					<!-- Swiper -->
					<div class="swiper mySwiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<img src="./img/34.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/35.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/36.png" alt="">
							</div>
							<div class="swiper-slide">
								<img src="./img/37.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>
			<video type="video/mp4"  style="width: 100%;" id="void" controls>
				<source src="./void/banner.mp4" type="video/ogg" / id="mp4">
			</video>
			<div class="model cont" id="model">
				<img class="bg1" src="./img/42.png" alt="">
				<div class="model_content">
					<h1>Model</h1>
					<img src="./img/9.png" alt="">
					<div class="content">
						<p>
							Total issuance of CAGL: 270000000 pieces<br>
							Initial issuance method: Ido (liquidity mining)<br>
						</p>
						<p>
							CAGL token allocation：<br>
							30% to the community for early liquidity (excess destruction)<br>
							70% ~ ore pool Ido output /nft medal computing power outputlp mining output<br>
						</p>
					</div>
					<div class="cs">
						<ul>
							<li><span></span>70% - mining output</li>
							<li class="li"><span></span>30% - initial liquidity</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 线路图 -->
			<div id="xianlu" class="cont">
				<img class="bg1" src="./img/20.png" alt="">
				<div class="Liberty2">Map</div>
				<div class="container">
					<div class="left">
						<div class="tow">
							 <h2>2021year</h2>
							<p>	2021.10 build system architecture and develop cosmoangel ecosystem</p>
						</div>
						<div class="four">
							 <h2>2023year</h2>
							 <p>2023.01 CAGL token will be launched on the world famous central exchange<br>
							 2023.02 aggregate different types of external partners
							 2023.04 cosmicangel version 2.0 was officially launched and is open to users around the world<br>
							 2023.08 iteration version 3.0, comprehensive ecological renewal and opening, achieving profitability</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>
					</div>
					<div class="right">
						<div class="five">
						 <h2>2022year</h2>
						<p>2022.01 establishment of product ecological partners<br>
							2022.03 cosmicangel system version 1.0 starts internal test<br>
							2022.06 new mode and game development and upgrading<br>
							2022.08 CAGL token will be launched on the world-famous Dex<br>
							Launch coinmarketcap on October 2022<br>
							On November 2022, open the ecological public beta, and users will be able to experience the meta universe scene<br>
							2022.11 complete the construction of core communities, and realize the breakthrough of 1million community users. 2022.12 game deployment is launched<br>
							</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','-700px')
		})
		
		$(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>