index.html

﻿<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lemon App - Enjoy what you want</title>
<!--bootstrap.min.css-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--animate.css-->
<link rel="stylesheet" href="css/animate.min.css">
<!--fontawesome 5-->
<link rel="stylesheet" href="css/all.min.css">
<!--slicknav.css-->
<link rel="stylesheet" href="css/slicknav.min.css">
<!--slickslider.css-->
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<!-- lity.css -->
<link rel="stylesheet" href="css/lity.min.css">
<!-- flaticon.css -->
<link rel="stylesheet" href="css/flaticon.css">
<!--Fav-icon-->
<link rel="shortcut icon" href="images/fav-icon.ico" type="image/x-icon">
<link rel="icon" href="images/fav-icon.ico" type="image/x-icon">
<!-- Custom.css -->
<link rel="stylesheet" href="css/style.css">

</head>

<body>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Start-Header-Section -->
<!-- Menu-start-area -->
<header>
	<div class="header-fixed header-one">
		<div class="container">
			<nav class="navbar navbar-expand-lg navbar-light">
				<a class="navbar-brand" href="index.html">
					<img src="images/logo.png" alt="logo">
				</a>
				<div class="collapse navbar-collapse my-lg-0" id="navbarNav">
					<ul class="navbar-nav ml-auto text-center">
						<li class="nav-item active">
							<a class="nav-link scroll" href="#header">Home</a>
						</li>
						<li class="nav-item">
							<a class="nav-link scroll" href="#Unique">Unique</a>
						</li>
						<li class="nav-item">
							<a class="nav-link scroll" href="#Features">Features</a>
						</li>
					</ul>
				</div>
				<a href="https://github.com/TwilightLemon" class="header-btn"> Github </a>
			</nav>
			<div class="mobile-menu" data-logo="images/logo.png"></div>
		</div>
	</div>
</header>
<!-- End-Menu-area-->

<!-- Start-Main-Section -->
<div class="maindiv" id="header">
	<div class="hero-slider__content-wrapper">
		<div class="container">
			<div class="row">
				<div class="col-lg-7 animated zoomIn">
					<h4 class="hero-sub-title">Lemon App</h4>
					<h1 class="hero-title">Maybe the Best Application For Your
						Listening to music that u like.</h1>
					<img style="padding: 30px 5px;width: 120px" src="http://hits.dwyl.com/TwilightLemon/TwilightLemon/Lemon-App.svg"/>
					<img style="padding: 30px 5px;width: 160px" src="https://img.shields.io/badge/license-GPL%20v3.0-blue.svg"/>
					<img style="padding: 30px 5px;width: 160px" src="https://img.shields.io/badge/license-Anti%20996-blue.svg"/>
					<div class="grp-btn">
						<div class="defualt-btn"><a href="https://files-cdn.cnblogs.com/files/TwilightLemon/win-release.zip"  rel="noreferrer noopener nofollow">Download <span><i class="fab fa-windows"></i>
								</span> </a></div>
						<div class="iso-btn"><a href="https://files.cnblogs.com/files/TwilightLemon/app-release.apk"  rel="noreferrer noopener nofollow"><i class="fab fa-android"></i>
							</a></div>
					</div>
				</div>
				<div class="hero-slider-img">
					<img src="images/product-img.png" alt="product-img">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- End-Main-Section -->

<!--- Start feature-section -->
<section class="ws-section-spacing feature-bg" id="Unique">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="center-title">
					<h2 class="title">Get The Best Application For <br> Your Devices </h2>
					<h4 class="sub-title">cross-platform supported,incudling Win-x64 Android Linux</h4>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6 col-md-12">
				<div class="features">
					<div class="feature-iocn">
						<span class="iocn-bg"><i class="flaticon-startup"></i></span>
					</div>
					<div class="feature-contain">
						<h4 class="feature-title">Quick Launch</h4>
						<p>Based on .NET 6,with Ready-To-Run technology,you can get faster luanch speed of this app.</p>

					</div>
				</div>
			</div>
			<div class="col-lg-6 col-md-12">
				<div class="features active">
					<div class="feature-iocn">
						<span class="iocn-bg bg-02"><i class="flaticon-sketch"></i></span>


					</div>
					<div class="feature-contain">
						<h4 class="feature-title">Unique Design</h4>
						<p>Flat Design & Fluent Design are supported.</p>

					</div>
				</div>
			</div>

			<div class="col-lg-6 col-md-12">
				<div class="features">
					<div class="feature-iocn">
						<span class="iocn-bg bg-03"><i class="flaticon-vision"></i></span>


					</div>
					<div class="feature-contain">
						<h4 class="feature-title">Focusing Attention</h4>
						<p>No advertisement.No bundled software.</p>

					</div>
				</div>
			</div>

			<div class="col-lg-6 col-md-12">
				<div class="features">
					<div class="feature-iocn">
						<span class="iocn-bg bg-04"><i class="flaticon-project-management"></i></span>


					</div>
					<div class="feature-contain">
						<h4 class="feature-title">Extra Secure</h4>
						<p>Official sources & apis.</p>

					</div>
				</div>
			</div>

		</div>
	</div>
</section>
<!--- End feature-section -->

<!--- Start service-section -->
<section class="ws-section-spacing service-bg" id="Features">
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-lg-10">
				<div class="laptop">
					<img src="images/laptop.png" alt="Laptop">
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="center-title">
					<h2 class="title white-title">What features?</h2>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-4 col-md-6">
				<div class="service-box">
					<div class="service-icon">
						<span class="service-icon-bg"><i class="flaticon-cloud-computing"></i></span>
					</div>
					<div class="service-content">
						<h4>Scyn Data</h4>
						<p>With QQ Account logined,scyning your data and crossing devices cannot be easier ever.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-4 col-md-6">
				<div class="service-box">
					<div class="service-icon">
						<span class="service-icon-bg"><i class="flaticon-tap"></i></span>
					</div>
					<div class="service-content">
						<h4>One Touch Install</h4>
						<p>Packed install bags,just one touch to install.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-4 col-md-6">
				<div class="service-box">
					<div class="service-icon">
						<span class="service-icon-bg"><i class="flaticon-adaptive"></i></span>
					</div>
					<div class="service-content">
						<h4>Easy Interface</h4>
						<p>easy for everyone to use.</p>
					</div>
				</div>
			</div>

			<div class="col-lg-4 col-md-6">
				<div class="service-box">
					<div class="service-icon">
						<span class="service-icon-bg"><i class="flaticon-application"></i></span>
					</div>
					<div class="service-content">
						<h4>Daily Report</h4>
						<p>QQ daily recommendation has been supported.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<!--- End service-section -->

<!--- Start FunFact-section -->
<section class="ws-section-spacing fun-fact-bg">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="center-title">
					<h2 class="title">Open Source and Free to all</h2>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-3 col-md-6">
				<div class="fun-box">
					<h2 class="fun-fact-value counter">3</h2><span class="count">k</span>
					<p class="fun-fact-title">Commits</p>
				</div>
			</div>

			<div class="col-lg-3 col-md-6">
				<div class="fun-box br-2">
					<h2 class="fun-fact-value counter">80</h2><span class="count">k</span>
					<p class="fun-fact-title">Active Acounts</p>
				</div>
			</div>


			<div class="col-lg-3 col-md-6">
				<div class="fun-box br-3">
					<h2 class="fun-fact-value counter">20</h2><span class="count">k</span>
					<p class="fun-fact-title">Positive Reviews</p>
				</div>
			</div>


			<div class="col-lg-3 col-md-6">
				<div class="fun-box br-4">
					<h2 class="fun-fact-value counter">15</h2><span class="count">k</span>
					<p class="fun-fact-title">Stars</p>
				</div>
			</div>
		</div>
	</div>
</section>

<!--- End-FunFact-section -->

<!--- Start Footer-section -->
<footer class="same-section-spacing footer-bg">
	<div class="container">
		<div class="row">
			<!-- item -->
			<div class="col-lg-4 col-md-4 col-sm-6">
				<div class="footer-about">
					<div class="footer-title">
						<h3>Lemon App</h3>
					</div>
					<div class="address">
						<p>一只江仔 Twilight./Lemon <br> 0xA2A2CF8C</p>
						<p>Powered by:<br>Windows: WPF&.NET6<br>Android: Android Studio<br>Linux: Avalonia&.NET6 </p>
					</div>
				</div>
			</div>
			<!-- item -->
			<div class="col-lg-2 col-md-4 col-sm-6">
				<div class="footer-listing">
					<div class="footer-title">
						<h3>About Me</h3>
					</div>

					<ul>
						<li><a href="https://cnblogs.com/TwilightLemon">Blogs</a></li>
						<li><a href="https://github.com/TwilightLemon">Github</a></li>
					</ul>
				</div>
			</div>
			<!-- item -->
			<div class="col-lg-2 col-md-4 col-sm-6">
				<div class="footer-listing">
					<div class="footer-title">
						<h3>Links</h3>
					</div>

					<ul>
						<li><a href="https://twlm.tk/">Twlm's Space</a></li>
						<li><a href="#">APIs</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>


	<!--- copyright-area -->
	<div class="copyright">
		<div class="container">
			<div class="row">
				<div class="col-lg-4 col-md-4">
					<p>Copyright &copy; 2016-2022 TwilightLemon All rights reserved.</p>
				</div>

				<div class="col-lg-8 col-md-8">
					<ul>
						<li><a href="#">Private Policy</a></li>
						<li><a href="#">Terms & Conditions</a></li>
						<li><a href="#">Copyright Notifications</a></li>
					</ul>
				</div>

			</div>
		</div>
	</div>

</footer>

<!--- scroll-to-top -->

<a href="#" id="btn-to-top"> <img src="images/scroll-top.gif" alt="scroll-top"></a>

<!-- Jquery.min.js-->

<script src="js/jquery.1.12.4.js"></script>
<!--bootstrap.min.js-->
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
<!--slicknav.min.js-->
<script src="js/jquery.slicknav.min.js"></script>
<!--slickslider.min.js-->
<script src="js/slick.min.js"></script>
<!-- counterup.min.js -->
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<!-- magnific-popup.js -->
<script src="js/lity.min.js"></script>
<!-- wow.js -->
<script type="js/wow.min.js"></script>
<!-- main.js -->
<script src="js/main.js"></script>

</body>
</html>