粉色寬屏風格的APP軟件整站網站源碼下載



9 33 12



模板描述:粉色寬屏風格 APP軟件 整站網站,粉色寬屏風格的APP軟件整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="css/animate.css" rel='stylesheet' type='text/css' />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/Chart.js"></script>
<script src="js/wow.min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

3. HTML代碼

<!-- Header Part Starts Here -->
<div class="header" id="home">
	<div class="container">
		<div class="col-md-8 header-matter">
			<div class="logo wow bounceInLeft animated">
				<a href="index.html"><img src="images/logo.PNG" alt=""/></a>
			</div>
			<h1 class="wow bounceIn animated">Create Your App Landing Page <br> in No Time with <span>SUTHRI</span></h1>
			<p class="wow fadeInUp animated">An easily customized app landing page template with multi colors<br> and different layouts.</p>
			<form class="ap-but down wow fadeInUp animated">
				<input type="submit" value="" />
				<p><span>1000+</span> Downloads <br>& Counting</p>
			</form>
		</div>
		<div class="col-md-4 iphone wow bounceInRight animated" >
			<img src="images/iphone.PNG" alt="" />
		</div>	
	</div>
</div>
<!-- Header Part ENds Here -->
<!-- Graph Part Starts Here -->
<div class="graph wow fadeInUp animated">
	<div class="container">
		<div class="graph-img">
			<img src="images/iphone-frame.PNG" alt="" />
			<div class="chart wow bounceIn animated">
				<canvas id="canvas" height="229" width="469" style="margin-top: 30px;"></canvas>
					<script>
							var lineChartData = {
							labels : ["January","February","March","April","May","June","July"],
							datasets : [
								{
									fillColor : "rgba(220,220,220,0.5)",
									strokeColor : "rgba(220,220,220,1)",
									pointColor : "rgba(220,220,220,1)",
									pointStrokeColor : "#fff",
									data : [65,59,90,81,56,55,40]
								},
								{
									fillColor : "rgba(151,187,205,0.5)",
									strokeColor : "rgba(151,187,205,1)",
									pointColor : "rgba(151,187,205,1)",
									pointStrokeColor : "#fff",
									data : [28,48,40,19,96,27,100]
								}
							]
						}
					var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
					</script>
				</div>
		</div>
		<h3 class="wow fadeInUp animated">Performance Graph</h3>
		<p class="wow fadeInUp animated">You might forget how many pomodoros you did last Monday, but Pomodrone will not! Check your performance graph from time to time to keep your productivity on a high level.</p>
	</div>
</div>
<!-- Graph Part Starts Here -->
<!--- Usage part Starts Here -->
<div class="usage wow fadeInUp animated">
	<div class="container">
		<div class="usage-top wow bounceIn animated">
			<p>A simplified way to share and connect with people. Manage and grow your contacts through this user-friendly platform with up-to-the-minute cloud synced personal and professional contact information.</p>
			<div class="clearfix"></div>
			<div class="first-img">
				<img src="images/first-image.jpg" alt="">
			</div>
			<div class="second-img">
				<img src="images/second-image.jpg" alt="">
			</div>
			<div class="third-img">
				<img src="images/third-image.JPG" alt="">
			</div>
		</div>
	</div>
</div>
<!--- Usage part Ends Here -->
<!-- Features Part Starts here -->
<div class="features wow fadeInUp animated" id="about">
	<div class="container">
		<div class="col-md-4 feature-data">
			<div class="feat-da-grid  wow bounceIn animated">
				<h4>AWESOME FEATURES</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus leo mattis metus condimentum sollicitudin.</p>
			</div>
			<div class="feat-da-grid  wow bounceIn animated">
				<h4>FULLY CUSTOMIZABLE</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus leo mattis metus condimentum sollicitudin.</p>
			</div>
			<div class="feat-da-grid  wow bounceIn animated">
				<h4>Features</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus leo mattis metus condimentum sollicitudin.</p>
			</div>
		</div>
		<div class="col-md-4 feature-img wow bounceIn animated">
			<img src="images/featu-image.png" alt="" />
		</div>
		<div class="col-md-4 feature-data d_2">
			<div class="feat-da-grid  wow bounceIn animated">
				<h4>SEO FRIENDLY</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus leo mattis metus condimentum sollicitudin.</p>
			</div>
			<div class="feat-da-grid  wow bounceIn animated">
				<h4>8 PREDEFINED COLOR SCHEMES</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus leo mattis metus condimentum sollicitudin.</p>
			</div>
			<div class="feat-da-grid  wow bounceIn animated">
				<h4>MODERN DESIGN</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus leo mattis metus condimentum sollicitudin.</p>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- Features Part Ends here -->
<!-- Packages Part Starts Here -->
<div class="package wow fadeInUp animated">
	<div class="container">
		<div class="package-grid  wow bounceIn animated">
			<div class="price">
				<div class="price-left">
					<h3>FREE</h3>
					<p>For personal use</p>
				</div>
				<div class="price-right">
					<h3><sub>$</sub>0</h3>
					<p>FOREVER</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<ul class="price-list">
				<li><span><img src="images/price-tick.png" alt=""></span> <a href="#">Unlimited Photos</a></li>
				<li><span><img src="images/price-tick.png" alt=""></span> <a href="#">Basic Photo Filters</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Advanced Photo Filters</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Edit From Gallery</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Custom Watermark</a></li>
			</ul>
		</div>
		<div class="package-grid active  wow bounceIn animated">
			<div class="price">
				<div class="price-left">
					<h3>ADDICT <span>POPULAR</span></h3>
					<p>More awesome photo filters</p>
				</div>
				<div class="price-right">
					<h3><sub>$</sub> 49</h3>
					<p>PER MONTH</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<ul class="price-list">
				<li><span><img src="images/price-tick.png" alt=""></span> <a href="#">Unlimited Photos</a></li>
				<li><span><img src="images/price-tick.png" alt=""></span> <a href="#">Basic Photo Filters</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Advanced Photo Filters</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Edit From Gallery</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Custom Watermark</a></li>
			</ul>
		</div>
		<div class="package-grid  wow bounceIn animated">
			<div class="price">
				<div class="price-left">
					<h3>PROFESSIONAL</h3>
					<p>Include your business watermark</p>
				</div>
				<div class="price-right">
					<h3><sub>$</sub>70</h3>
					<p>PER MONTH</p>
				</div>
				<div class="clearfix"></div>
			</div>
			<ul class="price-list">
				<li><span><img src="images/price-tick.png" alt=""></span> <a href="#">Unlimited Photos</a></li>
				<li><span><img src="images/price-tick.png" alt=""></span> <a href="#">Basic Photo Filters</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Advanced Photo Filters</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Edit From Gallery</a></li>
				<li><span><img src="images/price-wrong.png" alt=""></span> <a href="#">Custom Watermark</a></li>
			</ul>
		</div>
		<div class="clearfix"></div>
		<div class="pack-text">
			<h4>Affordable Packages</h4>
			<p>If your app is premium, use this section to list all of your pricing packages complete with the description items.</p>
		</div>
	</div>
</div>
<!-- Packages Part Ends Here -->
<!-- Footer Part Starts here -->
<div class="footer  wow bounceIn animated">
	<div class="container">
		<h3>So ready to give it a try?</h3>
		<div class="ap-stor">
			<a href="#"><img src="images/footer-app.PNG" alt=""/></a>
		</div>
		<div class="foot-bot">
			<div class="mail wow fadeInLeft animated" data-wow-delay="0.5s" style="visibility: visible; -webkit-animation: fadeInLeft 0.5s;">
				<h3>MAIL US</h3>
				<a href="mailto:[email protected]">[email protected]</a>
			</div>
			<div class="social wow fadeInRight animated" data-wow-delay="0.5s" style="visibility: visible; -webkit-animation: fadeInLeft 0.5s;">
				<h3>Follow us</h3>
				<ul class="social-list">
					<li><a href="#" class="fb"></a></li>
					<li><a href="#" class="tw"></a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="foot-nav">
		<ul>
			<li><p>Copyright &copy; 2015 Template by &nbsp;<a href="http://w3layouts.com">W3layouts</a>&nbsp;&nbsp;</p>
			</li>
			<li><a href="#about" class="scroll">About us</a></li>
			<li><a href="#">Support us</a></li>
		</ul>
	</div>
</div>
<!-- Footer Part Ends here -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 網絡科技 科技公司 網絡科技公司 IT公司 網絡公司 軟件公司 IT軟件公司 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 粉色 寬屏 全屏 滿屏
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表