<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Simple - Free CSS template by ChocoTemplates.com</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<link href='http//fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css' />
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script>
<![endif]-->
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<!-- top-nav -->
<nav class="top-nav">
<div class="shell">
<a href="#" class="nav-btn">HOMEPAGE<span></span></a>
<span class="top-nav-shadow"></span>
<ul>
<li class="active"><span><a href="#">home</a></span></li>
<li><span><a href="#">services</a></span></li>
<li><span><a href="#">projects</a></span></li>
<li><span><a href="#">solutions</a></span></li>
<li><span><a href="#">jobs</a></span></li>
<li><span><a href="#">blog</a></span></li>
<li><span><a href="#">contacts</a></span></li>
</ul>
</div>
</nav>
<!-- end of top-nav -->
<!-- header -->
<header id="header">
<!-- shell -->
<div class="shell">
<div class="header-inner">
<!-- header-cnt -->
<div class="header-cnt">
<h1 id="logo"><a href="#">Simple</a></h1>
<p>
<span class="mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam ante, egestas tristique consequat ut, pulvinar a ante.</span>
<span class="desktop"> Donec commodo eros at felis tempor at porttitor mauris adipisci morbi in velit sapien modo eros at felis te adispicing ulvinar a ante donec commodo eros at felis.</span>
</p>
<a href="#" class="blue-btn">GET STARTED NOW</a>
</div>
<!-- end of header-cnt -->
<!-- slider -->
<div class="slider-holder">
<div class="flexslider">
<ul class="slides">
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
<li><img src="css/images/slide-img.png" alt="" /></li>
</ul>
</div>
</div>
<!-- end of slider -->
<div class="cl"> </div>
</div>
<div class="cl"> </div>
</div>
<!-- end of shell -->
</header>
<!-- end of header -->
<!-- main -->
<div class="main">
<span class="shadow-top"></span>
<!-- shell -->
<div class="shell">
<div class="container">
<!-- testimonial -->
<section class="testimonial">
<h2>Responsive CSS Template with jQuery Slider</h2>
<p><strong>“</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consequat. Nam leo libero, scelerisque tincidunt commodo id, hendrerit vitae orci. <span class="mobile">Suspendisse eget nibh turpis. Sed at accumsan neque. Praesent purus eros, egestas eu tempus ut, mollis et libero"</span></p>
</section>
<!-- testimonial -->
<section class="blog">
<!-- content -->
<div class="content">
<img src="css/images/i-img.png" alt="" class="alignleft"/>
<div class="cnt">
<h3>We Guarantee Commitment & Quality</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consequat. Nam leo libero, scelerisque tincidunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque. Praesent purus eros, egestas eu temp</p>
<ul>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></li>
<li><a href="#">Cras molestie condimentum consequat. </a></li>
<li><a href="#">Nam leo libero, scelerisque tincidunt commodo id</a></li>
<li><a href="#">Dae molestie condimentum consequat dolor</a></li>
</ul>
</div>
</div>
<!-- end of content -->
<!-- sidebar -->
<aside class="sidebar">
<!-- widget -->
<div class="widget">
<h3>Latest Blog Posts</h3>
<ul>
<li>
<div class="img-holder">
<a href="#"><img src="css/images/post-img.png" alt="" /></a>
</div>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em class="mobile"> idunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque praesent purus </em> </a><span>02.02.2012</span></a> </p>
</li>
<li>
<div class="img-holder">
<a href="#"><img src="css/images/post-img2.png" alt="" /></a>
</div>
<p><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em class="mobile"> idunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque praesent purus </em> </a><span>01.02.2012</span></a> </p>
</li>
<li>
<div class="img-holder">
<a href="#"><img src="css/images/post-img3.png" alt="" /></a>
</div>
<p>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em class="mobile"> idunt commodo id, hendrerit vitae orci. Suspendisse eget nibh turpis. Sed at accumsan neque praesent purus </em>
<span>30.01.2012</span></a></p>
</li>
</ul>
<div class="cl"> </div>
</div>
<a href="#" class="view">View All</a>
<!-- end of widget -->
</aside>
<!-- end of sidebar -->
<div class="cl"> </div>
</section>
<!-- cols -->
<section class="cols">
<div class="col">
<h3>Tableless Construction</h3>
<img src="css/images/cols-img.png" alt="" class="alignleft"/>
<div class="col-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum conse am leo libero, samet dor.</p>
</div>
<a href="#" class="view">View More</a>
</div>
<div class="col">
<h3>We’re Hiring</h3>
<img src="css/images/cols-img2.png" alt="" class="alignleft"/>
<div class="col-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum conse am leo libero, samet dor.</p>
</div>
<a href="#" class="view">View More</a>
</div>
<div class="col">
<h3>Our Partners</h3>
<img src="css/images/cols-img3.png" alt="" class="alignleft"/>
<div class="col-cnt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum conse am leo libero, samet dor.</p>
</div>
<a href="#" class="view">View More</a>
</div>
<div class="cl"> </div>
</section>
<!-- end of cols -->
</div>
<!-- end of shell -->
</div>
<!-- end of container -->
</div>
<!-- end of main -->
</div>
<!-- footer-push -->
<div id="footer-push"></div>
<!-- end of footer-push -->
<!-- end of wrapper -->
<!-- footer -->
<div id="footer">
<span class="shadow-bottom"></span>
<!-- footer-cols -->
<div class="footer-cols">
<!-- shell -->
<div class="shell">
<div class="col">
<h3><a href="#">Solutions</a></h3>
<div class="col-cnt">
<ul>
<li><a href="#">Lorem lipsum dolor </a></li>
<li><a href="#">Ame tleo libero dolor</a><
前端静态模板-浅蓝白-学生作业毕设实训素材.zip
版权申诉
174 浏览量
2022-04-07
22:11:53
上传
评论
收藏 814KB ZIP 举报
前端静态模板-浅蓝白-学生作业毕设实训素材.zip （53个子文件） 
浅蓝白 css images 
sidebar-list-border.png 2KB bullet-footer-col.png 1KB nav-arr.png 4KB header-cnt.png 25KB body.png 18KB slider-tablet.png 13KB i-img.png 61KB post-img3.png 5KB cols-img2.png 12KB control-nav-bg.png 1000B post-img.png 4KB mobile-section-shadow.png 3KB cols-img3.png 10KB control-nav.png 4KB top-nav-shadow.png 1KB slider-mobile.png 13KB header.png 66KB col-separator.png 1KB bullet.png 1KB logo-mobile.png 12KB active-nav-border.png 1KB footer-nav-border.png 1008B post-img2.png 5KB cols-img.png 8KB footer-cols.png 12KB tablet-section-shadow.png 2KB blue-btn.png 8KB header-mobile.png 9KB slider-mobile@2x.png 28KB logo-tablet.png 14KB main-shadow-bottom.png 3KB logo-@2x.png 14KB nav-arr@2x.png 1KB blue-btn2@x.png 4KB slider.png 16KB control-nav-mobile.png 3KB section-shadow.png 2KB logo.png 19KB nav-arr-active.png 3KB blue-btn-mobile.png 5KB header-tablet.png 15KB main-shadow.png 3KB
favicon.ico 1KB header-@2x.png 13KB slide-img.png 324KB mobile-section-shadow@2x.png 2KB flexslider.css 3KB style.css 18KB
index.html 10KB js modernizr.custom.js 7KB jquery.flexslider-min.js 11KB jquery-1.8.0.min.js 90KB functions.js 925B资源评论
