├── .idea
    ├── modules.xml
    ├── onlineShop.iml
    └── vcs.xml
├── README.md
├── about.html
├── catalog.html
├── contact.html
├── css
    ├── about.css
    ├── carousel.css
    ├── catalog.css
    ├── contact.css
    ├── index.css
    ├── posts.css
    ├── product.css
    ├── shopcart.css
    ├── style.css
    └── timeline.css
├── fonts
    ├── font-awesome
    │   ├── css
    │   │   ├── font-awesome-ie7.css
    │   │   ├── font-awesome-ie7.min.css
    │   │   ├── font-awesome.css
    │   │   └── font-awesome.min.css
    │   ├── font
    │   │   ├── FontAwesome.otf
    │   │   ├── fontawesome-webfont.eot
    │   │   ├── fontawesome-webfont.svg
    │   │   ├── fontawesome-webfont.ttf
    │   │   └── fontawesome-webfont.woff
    │   ├── less
    │   │   ├── bootstrap.less
    │   │   ├── core.less
    │   │   ├── extras.less
    │   │   ├── font-awesome-ie7.less
    │   │   ├── font-awesome.less
    │   │   ├── icons.less
    │   │   ├── mixins.less
    │   │   ├── path.less
    │   │   └── variables.less
    │   └── scss
    │   │   ├── _bootstrap.scss
    │   │   ├── _core.scss
    │   │   ├── _extras.scss
    │   │   ├── _icons.scss
    │   │   ├── _mixins.scss
    │   │   ├── _path.scss
    │   │   ├── _variables.scss
    │   │   ├── font-awesome-ie7.scss
    │   │   └── font-awesome.scss
    └── glyphicons
    │   ├── css
    │       └── glyphicons.css
    │   └── fonts
    │       ├── glyphicons-halflings-regular.eot
    │       ├── glyphicons-halflings-regular.svg
    │       ├── glyphicons-halflings-regular.ttf
    │       ├── glyphicons-halflings-regular.woff
    │       └── glyphicons-halflings-regular.woff2
├── img
    ├── 1.jpg
    ├── 10.jpg
    ├── 11.jpg
    ├── 12.jpg
    ├── 13.jpg
    ├── 14.jpg
    ├── 15.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    ├── 9.jpg
    ├── fashion
    │   ├── female
    │   │   ├── 1.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.jpg
    │   │   ├── 5.jpg
    │   │   ├── 6.jpg
    │   │   ├── 7.jpg
    │   │   └── 8.jpg
    │   └── male
    │   │   ├── 1.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.jpg
    │   │   ├── 5.jpg
    │   │   ├── 6.jpg
    │   │   ├── 7.jpg
    │   │   └── 8.jpg
    ├── front-home-banner.jpg
    └── map
    │   └── map.jpg
├── index.html
├── js
    ├── catalog.js
    ├── product.js
    ├── shopcart.js
    └── style.js
├── posts.html
├── product.html
├── shopcart.html
└── timeline.html


/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/onlineShop.iml" filepath="$PROJECT_DIR$/.idea/onlineShop.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/onlineShop.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # onlineShop
 2 | 用HTML CSS JS 仿写的商城网站，包括[首页](https://psychee.github.io/onlineShop/index.html)
 3 | [关于](https://psychee.github.io/onlineShop/about.html)
 4 | [商品类别](https://psychee.github.io/onlineShop/catalog.html)
 5 | [商品详情](https://psychee.github.io/onlineShop/product.html)
 6 | [购物车](https://psychee.github.io/onlineShop/shopcart.html)
 7 | [博客](https://psychee.github.io/onlineShop/posts.html)等页
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>关于我们</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/about.css">
 10 | 	<link rel="stylesheet" href="css/carousel.css">
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div class="zhan"></div>
 68 | 	<h2 id="title" class="wrapper">
 69 | 		<span class="glyphicon glyphicon-info-sign"></span>
 70 | 		<span class="size-big">About&nbspUs&nbsp</span>
 71 | 		<span class="size-small">MosaicPro&nbspInc.</span>
 72 | 	</h2>
 73 | 	<p id="themes" class="wrapper">
 74 | 		Highly Customizable. Optimized for Performance. Production Ready.
 75 | 	</p>
 76 | 	<div id="products-list" class="wrapper">
 77 | 		<div class="products">
 78 | 			<div class="products-img"></div>
 79 | 			<div class="products-text">
 80 | 				<h4 class="user-name">John Doe</h4>
 81 | 				<p class="user-introduction">
 82 | 					Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
 83 | 				</p>
 84 | 				<span class="icon icon-facebook-sign selected"></span>
 85 | 				<span class="icon icon-twitter-sign"></span>
 86 | 				<span class="icon icon-tumblr-sign"></span>
 87 | 			</div>
 88 | 		</div>
 89 | 		<div class="products">
 90 | 			<div class="products-img"></div>
 91 | 			<div class="products-text">
 92 | 				<h4 class="user-name">John Doe</h4>
 93 | 				<p class="user-introduction">
 94 | 					Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
 95 | 				</p>
 96 | 				<span class="icon icon-facebook-sign selected"></span>
 97 | 				<span class="icon icon-twitter-sign"></span>
 98 | 				<span class="icon icon-tumblr-sign"></span>
 99 | 			</div>
100 | 		</div>
101 | 		<div class="products">
102 | 			<div class="products-img"></div>
103 | 			<div class="products-text">
104 | 				<h4 class="user-name">John Doe</h4>
105 | 				<p class="user-introduction">
106 | 					Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
107 | 				</p>
108 | 				<span class="icon icon-facebook-sign selected"></span>
109 | 				<span class="icon icon-twitter-sign"></span>
110 | 				<span class="icon icon-tumblr-sign"></span>
111 | 			</div>
112 | 		</div>
113 | 		<div class="clear"></div>
114 | 	</div>
115 | 	<div class="hr wrapper">
116 | 		<span class="glyphicon glyphicon-option-horizontal">
117 | 
118 | 		</span>
119 | 	</div>
120 | 	<div id="guide-list" class="wrapper">
121 | 		<div class="guide-border">
122 | 			<div class="guide">
123 | 				<span class="icon icon-shield"></span>
124 | 				<h4>We Build Trusted Websites</h4>
125 | 				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an</p>
126 | 				<a href="#">learn more</a>
127 | 			</div>
128 | 			<div class="guide">
129 | 				<span class="icon icon-group"></span>
130 | 				<h4>We Build Trusted Websites</h4>
131 | 				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an</p>
132 | 				<a href="#">learn more</a>
133 | 			</div>
134 | 		</div>
135 | 		<div class="guide-border">
136 | 			<div class="guide">
137 | 				<span class="icon icon-phone"></span>
138 | 				<h4>We Build Trusted Websites</h4>
139 | 				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an</p>
140 | 				<a href="#">learn more</a>
141 | 			</div>
142 | 			<div class="guide">
143 | 				<span class="icon icon-magic"></span>
144 | 				<h4>We Build Trusted Websites</h4>
145 | 				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an</p>
146 | 				<a href="#">learn more</a>
147 | 			</div>
148 | 		</div>
149 | 		<div class="clear"></div>
150 | 	</div>
151 | 	<div class="hr wrapper">
152 | 		<span class="glyphicon glyphicon-option-horizontal">
153 | 
154 | 		</span>
155 | 	</div>
156 | 	<div id="news" class="wrapper">
157 | 		<div class="carousel">
158 | 			<div class="carousel-imgs">
159 | 				<img src="img/11.jpg" alt="">
160 | 				<img src="img/12.jpg" alt="">
161 | 				<img src="img/13.jpg" alt="">
162 | 			</div>
163 | 			<ul class="carousel-btns">
164 | 				<li class="selected"></li>
165 | 				<li></li>
166 | 				<li></li>
167 | 			</ul>
168 | 		</div>
169 | 		<div class="one-news">
170 | 			<h4>News</h4>
171 | 			<span class="glyphicon glyphicon-info-sign"></span>
172 | 			<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</span>
173 | 		</div>
174 | 		<h3 class="feed">
175 | 			<span class="icon icon-twitter-sign"></span>
176 | 			Twitter feed
177 | 		</h3>
178 | 		<p class="feed-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nunc lorem, rutrum non porta. 
179 | 		<span>01/11/2012</span>
180 | 		</p>
181 | 		<div class="clear"></div>
182 | 	</div>
183 | 	<div id="footer">
184 | 		<div class="wrapper">
185 | 			<div class="foot-top">
186 | 				<div class="quick-links left">
187 | 					<h4>QUICK LINKS</h4>
188 | 					<ul>
189 | 						<li><a>Home</a></li>
190 | 						<li><a>About</a></li>
191 | 						<li><a>pricing</a></li>
192 | 						<li><a>Blog</a></li>
193 | 						<li><a>Contact</a></li>
194 | 					</ul>
195 | 				</div>
196 | 				<div class="about left">
197 | 					<h4>ABOUT</h4>
198 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
199 | 				</div>
200 | 				<div class="out-blog left">
201 | 					<h4>OUR BLOG</h4>
202 | 					<ul>
203 | 						<li><a>What is Lorem Ipsum?</a></li>
204 | 						<li><a>What is Lorem Ipsum?</a></li>
205 | 						<li><a>What is Lorem Ipsum?</a></li>
206 | 						<li><a>What is Lorem Ipsum?</a></li>
207 | 						<li><a>What is Lorem Ipsum?</a></li>
208 | 					</ul>
209 | 				</div>
210 | 				<div class="contact right">
211 | 					<h4>CONTACT</h4>
212 | 					<ul>
213 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
214 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
215 | 					</ul>
216 | 				</div>
217 | 				<div class="social right">
218 | 					<h4>SOCIAL</h4>
219 | 					<ul>
220 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
221 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
222 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
223 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
224 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
225 | 					</ul>
226 | 				</div>
227 | 				<div class="clearfix"></div>
228 | 			</div>
229 | 			<div class="copyright">
230 | 				<span>© 2013 -</span>
231 | 				<a href="#"> mosaicpro.biz</a>
232 | 				<span class="text-right">FLAT KIT</span>
233 | 			</div>
234 | 		</div>
235 | 	</div>
236 | </body>
237 | </html>


--------------------------------------------------------------------------------
/catalog.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>Online Shop</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/carousel.css">
 10 | 	<link rel="stylesheet" href="css/catalog.css">
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div class="zhan"></div>
 68 | 	<div id="center" class="wrapper">
 69 | 		<h2 id="title">
 70 | 			<span class="glyphicon glyphicon-shopping-cart"></span>
 71 | 			Online Shop
 72 | 		</h2>
 73 | 		<div class="carousel">
 74 | 			<div class="carousel-imgs">
 75 | 				<div class="carousel-item">
 76 | 					<div class="carousel-txt">
 77 | 						<h3>Special Offer</h3>
 78 | 						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 79 | 						<h5>Voucher: ABC-DEF123X</h5>
 80 | 						<a href="#">
 81 | 							<span class="glyphicon glyphicon-shopping-cart"></span>
 82 | 							Get it now!
 83 | 						</a>
 84 | 					</div>					
 85 | 					<img src="img/10.jpg" alt="">
 86 | 				</div>
 87 | 				<div class="carousel-item">
 88 | 					<div class="carousel-txt">
 89 | 						<h3>Special Offer</h3>
 90 | 						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 91 | 						<h5>Voucher: ABC-DEF123X</h5>
 92 | 						<a href="#">
 93 | 							<span class="glyphicon glyphicon-shopping-cart"></span>
 94 | 							Get it now!
 95 | 						</a>
 96 | 					</div>					
 97 | 					<img src="img/11.jpg" alt="">
 98 | 				</div>
 99 | 				<div class="carousel-item">
100 | 					<div class="carousel-txt">
101 | 						<h3>Special Offer</h3>
102 | 						<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
103 | 						<h5>Voucher: ABC-DEF123X</h5>
104 | 						<a href="#">
105 | 							<span class="glyphicon glyphicon-shopping-cart"></span>
106 | 							Get it now!
107 | 						</a>
108 | 					</div>					
109 | 					<img src="img/12.jpg" alt="">
110 | 				</div>
111 | 			</div>
112 | 			<ul class="carousel-btns">
113 | 				<li class="selected"></li>
114 | 				<li></li>
115 | 				<li></li>
116 | 				<div class="clear"></div>
117 | 			</ul>
118 | 		</div>
119 | 		<div id="main">
120 | 			<div id="side-bar">
121 | 				<ul>
122 | 					<li><a href="#">Make Up</a><span>35</span></li>
123 | 					<li><a href="#">Fragrances</a><span>30</span></li>
124 | 					<li><a href="#">Nails</a><span>19</span></li>
125 | 					<li><a href="#">Hair Products</a><span>33</span></li>
126 | 					<li><a href="#">Accessories</a><span>17</span></li>
127 | 				</ul>
128 | 				<div class="question">
129 | 					<span class="glyphicon glyphicon-question-sign"></span>
130 | 					<h5>Have a Question?</h5>
131 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
132 | 					<a href="#">
133 | 						<span class="glyphicon glyphicon-comment"></span>
134 | 					Live Support</a>
135 | 				</div>
136 | 				<h5 class="important-note">
137 | 					<span class="glyphicon glyphicon-warning-sign"></span>
138 | 					Important note
139 | 				</h5>
140 | 				<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat massa, ultricies sit amet.</p>
141 | 				<h5 class="important-note">
142 | 					<span class="glyphicon glyphicon-tags"></span>
143 | 					Labels
144 | 				</h5>
145 | 				<p class="labels">
146 | 					<span>responsive blog</span>
147 | 					<span>12 column grid</span><br>
148 | 					<span>awesome</span> 
149 | 					<span>mobile first</span>
150 | 					<br>
151 | 					<span>easy development</span>
152 | 					<span>html template</span></p>
153 | 			</div>
154 | 			<div id="product-list">
155 | 				<ul class="fall-list">
156 | 					<li>
157 | 						<span class="p-price">$101.00</span>
158 | 						<a href="#" class="product-img">
159 | 							<img src="img\fashion\female\1.jpg" alt="">
160 | 						</a>
161 | 						<div class="product-box">
162 | 							<h3>PRODUCT TITLE</h3>
163 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
164 | 							<div class="btn-box">
165 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
166 | 
167 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
168 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
169 | 							</div>
170 | 						</div>	
171 | 					</li>
172 | 					<li>
173 | 						<span class="p-price">$144.00</span>
174 | 						<a href="#" class="product-img">
175 | 							<img src="img\fashion\female\2.jpg" alt="">
176 | 						</a>
177 | 						<div class="product-box">
178 | 							<h3>PRODUCT TITLE</h3>
179 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
180 | 							<div class="btn-box">
181 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
182 | 
183 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
184 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
185 | 							</div>
186 | 						</div>	
187 | 					</li>
188 | 					<li>
189 | 						<span class="p-price">$109.00</span>
190 | 						<a href="#" class="product-img">
191 | 							<img src="img\fashion\female\3.jpg" alt="">
192 | 						</a>
193 | 						<div class="product-box">
194 | 							<h3>PRODUCT TITLE</h3>
195 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
196 | 							<div class="btn-box">
197 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
198 | 
199 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
200 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
201 | 							</div>
202 | 						</div>	
203 | 					</li>
204 | 				</ul>
205 | 				<ul class="fall-list">
206 | 					<li>
207 | 						<span class="p-price">$177.00</span>
208 | 						<a href="#" class="product-img">
209 | 							<img src="img\fashion\male\4.jpg" alt="">
210 | 						</a>
211 | 						<div class="product-box">
212 | 							<h3>PRODUCT TITLE</h3>
213 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
214 | 							<div class="btn-box">
215 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
216 | 
217 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
218 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
219 | 							</div>
220 | 						</div>	
221 | 					</li>
222 | 					<li>
223 | 						<span class="p-price">$99.00</span>
224 | 						<a href="#" class="product-img">
225 | 							<img src="img\fashion\female\5.jpg" alt="">
226 | 						</a>
227 | 						<div class="product-box">
228 | 							<h3>PRODUCT TITLE</h3>
229 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
230 | 							<div class="btn-box">
231 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
232 | 
233 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
234 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
235 | 							</div>
236 | 						</div>	
237 | 					</li>
238 | 					<li>
239 | 						<span class="p-price">$172.00</span>
240 | 						<a href="#" class="product-img">
241 | 							<img src="img\fashion\male\8.jpg" alt="">
242 | 						</a>
243 | 						<div class="product-box">
244 | 							<h3>PRODUCT TITLE</h3>
245 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
246 | 							<div class="btn-box">
247 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
248 | 
249 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
250 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
251 | 							</div>
252 | 						</div>	
253 | 					</li>
254 | 				</ul>
255 | 				<ul class="fall-list">
256 | 					<li>
257 | 						<span class="p-price">$144.00</span>
258 | 						<a href="#" class="product-img">
259 | 							<img src="img\fashion\male\7.jpg" alt="">
260 | 						</a>
261 | 						<div class="product-box">
262 | 							<h3>PRODUCT TITLE</h3>
263 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
264 | 							<div class="btn-box">
265 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
266 | 
267 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
268 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
269 | 							</div>
270 | 						</div>	
271 | 					</li>
272 | 					<li>
273 | 						<span class="p-price">$132.00</span>
274 | 						<a href="#" class="product-img">
275 | 							<img src="img\fashion\female\5.jpg" alt="">
276 | 						</a>
277 | 						<div class="product-box">
278 | 							<h3>PRODUCT TITLE</h3>
279 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
280 | 							<div class="btn-box">
281 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
282 | 
283 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
284 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
285 | 							</div>
286 | 						</div>	
287 | 					</li>
288 | 					<li>
289 | 						<span class="p-price">$132.00</span>
290 | 						<a href="#" class="product-img">
291 | 							<img src="img\fashion\male\3.jpg" alt="">
292 | 						</a>
293 | 						<div class="product-box">
294 | 							<h3>PRODUCT TITLE</h3>
295 | 							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
296 | 							<div class="btn-box">
297 | 								<a href="#" class="glyphicon glyphicon-heart"><span class="wash">wash</span></a>
298 | 
299 | 								<a href="#" class="glyphicon glyphicon-shopping-cart"><span>purchase</span></a>
300 | 								<a href="#" class="glyphicon glyphicon-eye-open"></a>
301 | 							</div>
302 | 						</div>	
303 | 					</li>
304 | 				</ul>
305 | 			</div>
306 | 		</div>
307 | 		<div class="clear"></div>
308 | 	</div>
309 | 
310 | 	<div id="footer">
311 | 		<div class="wrapper">
312 | 			<div class="foot-top">
313 | 				<div class="quick-links left">
314 | 					<h4>QUICK LINKS</h4>
315 | 					<ul>
316 | 						<li><a>Home</a></li>
317 | 						<li><a>About</a></li>
318 | 						<li><a>pricing</a></li>
319 | 						<li><a>Blog</a></li>
320 | 						<li><a>Contact</a></li>
321 | 					</ul>
322 | 				</div>
323 | 				<div class="about left">
324 | 					<h4>ABOUT</h4>
325 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
326 | 				</div>
327 | 				<div class="out-blog left">
328 | 					<h4>OUR BLOG</h4>
329 | 					<ul>
330 | 						<li><a>What is Lorem Ipsum?</a></li>
331 | 						<li><a>What is Lorem Ipsum?</a></li>
332 | 						<li><a>What is Lorem Ipsum?</a></li>
333 | 						<li><a>What is Lorem Ipsum?</a></li>
334 | 						<li><a>What is Lorem Ipsum?</a></li>
335 | 					</ul>
336 | 				</div>
337 | 				<div class="contact right">
338 | 					<h4>CONTACT</h4>
339 | 					<ul>
340 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
341 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
342 | 					</ul>
343 | 				</div>
344 | 				<div class="social right">
345 | 					<h4>SOCIAL</h4>
346 | 					<ul>
347 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
348 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
349 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
350 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
351 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
352 | 					</ul>
353 | 				</div>
354 | 				<div class="clearfix"></div>
355 | 			</div>
356 | 			<div class="copyright">
357 | 				<span>© 2013 -</span>
358 | 				<a href="#"> mosaicpro.biz</a>
359 | 				<span class="text-right">FLAT KIT</span>
360 | 			</div>
361 | 		</div>
362 | 	</div>
363 | 	<script src="js/style.js"></script>
364 | 	<script src="js/catalog.js"></script>
365 | </body>
366 | </html>


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>联系我们</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/contact.css">
 10 | 	<link rel="stylesheet" href="css/carousel.css">
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div class="zhan"></div>
 68 | 	<div id="center" class="wrapper">
 69 | 		<img src="img/map/map.jpg" alt="地图" class="map">
 70 | 		<h2 class="title">
 71 | 			<span class="glyphicon glyphicon-map-marker"></span>
 72 | 			Contact
 73 | 		</h2>
 74 | 		<div class="message">
 75 | 			<div class="send">
 76 | 				<form action="">
 77 | 					<input type="text" class="name" name="name" placeholder="YOUR NAME">
 78 | 					<input type="text" class="phone" name="phone" placeholder="PHONE"><br>
 79 | 					<textarea name="message" class="text" rows="5" placeholder="YOUR MESSAGE"></textarea>
 80 | 					<button><span class="glyphicon glyphicon-envelope"></span>Send message</button>
 81 | 				</form>
 82 | 			</div>
 83 | 			<div class="business">
 84 | 				<h4>John Doe</h4>
 85 | 				<h5>Business manager at Business</h5>
 86 | 				<p><abbr title="Work email">e-mail:</abbr><a href="#"> john.doe@mybiz.com</a></p>
 87 | 				<p><abbr title="Work Phone">phone:</abbr> (012) 345-678-901</p>
 88 | 				<p><abbr title="Work Fax">fax:</abbr> (012) 678-132-901</p>
 89 | 				<br>
 90 | 				<br>
 91 | 				<h5>You can also find us:</h5>
 92 | 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique rutrum libero, vel bibendum nunc consectetur sed.</p>
 93 | 			</div>
 94 | 			<div class="clear"></div>
 95 | 		</div>
 96 | 		<div class="important">
 97 | 			<h5 class="important-note">
 98 | 				<span class="glyphicon glyphicon-warning-sign"></span>
 99 | 				Important note
100 | 			</h5>
101 | 			<p class="text">
102 | 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat massa, ultricies sit amet <a href="#">mattis vitae</a>, lacinia in quam. Nullam nec congue odio. Aenean tincidunt commodo urna, et pulvinar arcu varius sed. Quisque ullamcorper arcu sit amet justo dapibus, eget suscipit sapien egestas. Proin lobortis nibh non risus mollis, sed mattis orci imperdiet. <a href="#">Donec sit amet</a> tincidunt tellus. Etiam ut faucibus nisi. Mauris elit justo, pretium ultrices quam vitae, ultrices scelerisque tellus. Sed quis ullamcorper libero. Etiam blandit faucibus nulla sit amet gravida.
103 | 			</p>
104 | 		</div>
105 | 	</div>
106 | 	<div id="footer">
107 | 		<div class="wrapper">
108 | 			<div class="foot-top">
109 | 				<div class="quick-links left">
110 | 					<h4>QUICK LINKS</h4>
111 | 					<ul>
112 | 						<li><a>Home</a></li>
113 | 						<li><a>About</a></li>
114 | 						<li><a>pricing</a></li>
115 | 						<li><a>Blog</a></li>
116 | 						<li><a>Contact</a></li>
117 | 					</ul>
118 | 				</div>
119 | 				<div class="about left">
120 | 					<h4>ABOUT</h4>
121 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
122 | 				</div>
123 | 				<div class="out-blog left">
124 | 					<h4>OUR BLOG</h4>
125 | 					<ul>
126 | 						<li><a>What is Lorem Ipsum?</a></li>
127 | 						<li><a>What is Lorem Ipsum?</a></li>
128 | 						<li><a>What is Lorem Ipsum?</a></li>
129 | 						<li><a>What is Lorem Ipsum?</a></li>
130 | 						<li><a>What is Lorem Ipsum?</a></li>
131 | 					</ul>
132 | 				</div>
133 | 				<div class="contact right">
134 | 					<h4>CONTACT</h4>
135 | 					<ul>
136 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
137 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
138 | 					</ul>
139 | 				</div>
140 | 				<div class="social right">
141 | 					<h4>SOCIAL</h4>
142 | 					<ul>
143 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
144 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
145 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
146 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
147 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
148 | 					</ul>
149 | 				</div>
150 | 				<div class="clearfix"></div>
151 | 			</div>
152 | 			<div class="copyright">
153 | 				<span>© 2013 -</span>
154 | 				<a href="#"> mosaicpro.biz</a>
155 | 				<span class="text-right">FLAT KIT</span>
156 | 			</div>
157 | 		</div>
158 | 	</div>
159 | </body>
160 | </html>


--------------------------------------------------------------------------------
/css/about.css:
--------------------------------------------------------------------------------
  1 | .zhan{
  2 | 	height: 100px;
  3 | }
  4 | .clear{
  5 | 	clear: both;
  6 | }
  7 | /*title 开始*/
  8 | #title{
  9 |     color: #575655;
 10 | }
 11 | #title .glyphicon{
 12 |     font-size: 24px;
 13 | 	font-weight: normal;
 14 | }
 15 | #title .size-big,#title .size-small{
 16 | 	color: #7c7c7c;
 17 | }
 18 | #title .size-big{
 19 |     font-size: 24px;
 20 |     font-weight: 400;
 21 | }
 22 | #title .size-small{
 23 | 	font-size: 6px;
 24 |     font-weight: 300;
 25 | 	color: #afafaf;
 26 |     font-style: italic;
 27 | 	vertical-align: middle;
 28 | }
 29 | /*title 结束*/
 30 | /*themes 开始*/
 31 | #themes{
 32 | 	height: 30px;
 33 | 	width: 928px;
 34 | 	margin-top: 15px; 
 35 | 	padding: 15px;
 36 | 	border: 1px solid #efefef;
 37 | 	font-size: 21px;
 38 | 	font-weight: 200;
 39 |     background: #f4f4f4;
 40 |     text-align: center;    
 41 | }
 42 | /*themes 结束*/
 43 | /*products-list 开始*/
 44 | #products-list{
 45 | 	margin-top: 15px;
 46 | }
 47 | #products-list .products{
 48 | 	width: 300px;
 49 | 	height: 343px;
 50 |     padding: 4px;
 51 |     border: 1px solid #ddd;    
 52 | }
 53 | #products-list .products:nth-child(3n+1){
 54 | 	margin-right: 15px;
 55 | 	float: left;
 56 | }
 57 | #products-list .products:nth-child(3n+2){
 58 | 	margin-right: 15px;
 59 | 	float: left;
 60 | }
 61 | #products-list .products:nth-child(3n){
 62 | 	float: right;
 63 | }
 64 | #products-list .products-img{
 65 | 	width: 300px;
 66 | 	height: 200px;
 67 | 	background: #f4f4f4 url(../img/8.jpg) 300px 200px;
 68 | }
 69 | #products-list .products-text{
 70 |     color: #7c7c7c;
 71 |     padding: 9px;
 72 | }
 73 | #products-list .user-name{
 74 | 	font-weight: 400;
 75 |     color: #4d4d4d;
 76 |     font-size: 17px;
 77 |     margin-bottom: 5px;
 78 | }
 79 | #products-list .icon{
 80 |     font-size: 30px;
 81 | }
 82 | #products-list .selected{
 83 |     color: #e5412d;
 84 | }
 85 | /*products-list 结束*/
 86 | 
 87 | /*hr 开始*/
 88 | .hr{
 89 | 	height: 2px;
 90 | 	background: #f4f4f4;
 91 | 	margin: 20px auto;
 92 | 	position: relative;	
 93 | 	text-align: center;
 94 | }
 95 | .hr .glyphicon{
 96 | 	font-size: 40px;
 97 | 	position: absolute;
 98 | 	top: 50%;
 99 | 	left: 450px;
100 | 	margin-top: -18px;
101 | 	padding: 0 10px;
102 | 	background: #fff;
103 | }
104 | /*hr 结束*/
105 | /*guide-list 开始*/
106 | #guide-list{
107 | 	margin-top: 30px;
108 | }
109 | #guide-list .guide-border{
110 | 	width: 442px;
111 | /*	height: 252px;*/
112 |     border: 1px solid #efefef;
113 |     padding: 15px;
114 |     
115 | }
116 | #guide-list .guide-border:nth-child(2n+1)
117 | {
118 | 	float: left;
119 | }
120 | #guide-list .guide-border:nth-child(2n)
121 | {
122 | 	float: right;
123 | }
124 | #guide-list .guide{
125 | 	padding: 10px;
126 | }
127 | #guide-list .icon{
128 | 	width: 60px;
129 | 	height: 60px;
130 |     color: #e2e2e2;
131 |     font-size: 50px;
132 |     float:left;
133 |     margin:10px;
134 | }
135 | #guide-list h4{
136 | 	font-size: 17px;
137 | 	margin: 0 0 5px;
138 |     font-weight: 400;
139 |     color: #4d4d4d;
140 | }
141 | #guide-list a{
142 | 	color: #e5412d;
143 | }
144 | #guide-list a:hover{
145 | 	color: #1d1d1d;
146 | }
147 | /*guide-list 结束*/
148 | 
149 | /*news 开始*/
150 | #news{
151 | 	margin-bottom: 50px;
152 | }
153 | #news .carousel{
154 | 	float: left;
155 | 	margin-right: 15px;
156 | }
157 | #news .one-news{
158 | 	width: 440px;
159 | 	height: 65px;
160 | 	float: left;
161 |     border: 1px solid #efefef;
162 |     background: #f4f4f4;
163 |     padding: 15px;
164 |     color: #333333;
165 | }
166 | #news h4{
167 | 	font-weight: 400;
168 |     color: #4d4d4d;
169 |     margin-bottom: 5px;
170 |     font-size: 14px;
171 | }
172 | #news .one-news .glyphicon{
173 |     color: #e2e2e2;
174 |     font-size: 32px;
175 |     float: left;
176 |     margin-right: 17px;
177 | }
178 | #news .feed{
179 | 	color: #7c7c7c;
180 |     font-size: 14px;
181 | 	float: left;
182 |     font-weight: 400;
183 |     line-height: 50px;
184 | }
185 | #news .feed .icon{
186 |     color: #7c7c7c;
187 |     font-size: 20px;
188 | 	margin-right: 5px;
189 | }
190 | #news .feed-content{
191 | 	width: 440px;
192 | 	height: 40px;
193 | 	padding: 15px;
194 | 	float: left;
195 | 	border: 1px solid #efefef;
196 | 	background: #f4f4f4;
197 |     line-height: 20px;
198 |     color: #333333;
199 | }
200 | #news .feed-content span{
201 |     display: inline-block;
202 |     padding: 2px 4px;
203 |     font-size: 11.844px;
204 |     font-weight: bold;
205 |     line-height: 14px;
206 |     color: #ffffff;
207 |     background: #333333;
208 |     border-radius: 3px;
209 | }
210 | 
211 | /*news 结束*/
212 | 
213 | 


--------------------------------------------------------------------------------
/css/carousel.css:
--------------------------------------------------------------------------------
 1 | /*轮播图组件 开始*/
 2 | .carousel{
 3 | 	width: 472px;
 4 | 	height: 254px;
 5 | 	overflow: hidden;
 6 | }
 7 | .carousel-imgs{
 8 | 	width: 1416px;
 9 | 	height: 224px;
10 | }
11 | .carousel-imgs img{
12 | 	width: 472px;
13 | 	height: 224px;
14 | 	float: left;
15 | }
16 | .carousel-btns{
17 | 	height: 30px;
18 | 	line-height: 30px;
19 | 	float: right;
20 | }
21 | .carousel-btns li{
22 | 	width: 10px;
23 | 	height: 10px;
24 | 	background: #f09388;
25 | 	display: inline-block;
26 | 	margin-right: 5px;
27 | }
28 | .carousel-btns .selected{
29 | 	background: #e5412d;
30 | }
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | /*轮播图组件 结束*/


--------------------------------------------------------------------------------
/css/catalog.css:
--------------------------------------------------------------------------------
  1 | /*title 开始*/
  2 | #title{
  3 | 	font-weight: 400;
  4 | 	margin-bottom: 10px;
  5 | }
  6 | #title .glyphicon{
  7 | 	color: #575655;
  8 | 	font-size: 27px;
  9 | }
 10 | /*title 结束*/
 11 | /*carousel 开始*/
 12 | .carousel{
 13 | 	width: 960px;
 14 | 	position: relative;
 15 | }
 16 | .carousel-imgs{
 17 | 	width: 2880px;
 18 | 	position: relative;
 19 | 	left: 0;
 20 | 	transition: left 1s ease;
 21 | }
 22 | .carousel-item{
 23 | 	width: 960px;
 24 | 	height: 235px;
 25 | 	float: left;
 26 | }
 27 | .carousel-txt{
 28 | 	float: left;
 29 | 	width: 361px;
 30 | 	height: 194px;
 31 | 	padding: 15px;
 32 | 	text-align: center;
 33 | 	background: #f4f4f4;
 34 | }
 35 | .carousel-txt h3{
 36 | 	font-size: 26px;
 37 | 	color: #4d4d4d;
 38 | 	font-weight: 400;
 39 | }
 40 | .carousel-txt p{
 41 | 	color: #7c7c7c;
 42 | 	line-height: 20px;
 43 | }
 44 | .carousel-txt h5{
 45 | 	height: 48px;
 46 | 	color: #7c7c7c;
 47 | }
 48 | .carousel-txt a{
 49 | 	display: block;
 50 | 	background: #424242;
 51 | 	color: #ffffff;
 52 | 	font-size: 17.5px;
 53 | 	height: 44px;
 54 | 	line-height: 44px;
 55 | }
 56 | .carousel-imgs img{
 57 | 	float:right;
 58 | 	width: 554px;
 59 | }
 60 | /*carousel 结束*/
 61 | /*main 开始*/
 62 | #main{
 63 | 	margin: 15px 0 30px;
 64 | }
 65 | 
 66 | /*product-list 开始*/
 67 | #product-list{
 68 | 	float: right;
 69 | }
 70 | #product-list li{
 71 | 	background: #f4f4f4;
 72 | 	margin-bottom: 15px;
 73 | 	position: relative;
 74 | 	overflow: hidden;
 75 | }
 76 | #product-list .p-price{
 77 | 	position: absolute;
 78 | 	right: -30px;
 79 |     top: 13px;
 80 | 	color: #fff;
 81 | 	background: #609450;
 82 | 	width: 120px;
 83 | 	height: 34px;
 84 | 	line-height: 34px;
 85 | 	font-weight: bold;
 86 | 	text-align: center;
 87 | 	-webkit-transform:rotate(45deg);
 88 | }
 89 | #product-list .fall-list{
 90 | 	width: 222px;
 91 | 	float: left;
 92 | 	margin-right: 25px;
 93 | }
 94 | #product-list .fall-list:last-child{
 95 | 	margin-right: 0;
 96 | }
 97 | #product-list .product-img{
 98 | 	width: 222px;
 99 | }
100 | #product-list .product-img img{
101 | 	width: 100%;
102 | }
103 | #product-list .product-box{
104 | 	padding: 15px;
105 | 	overflow: hidden;
106 | }
107 | #product-list .product-box h3{
108 | 	font-weight: bold;
109 | 	margin-bottom: 5px;
110 | }
111 | #product-list .product-box p{
112 | 	line-height: normal;
113 | 	margin-bottom: 5px;
114 | }
115 | #product-list .glyphicon-heart{
116 | 	background: #424242;
117 | 	color: #fff;
118 | 	display: inline-block;
119 | 	width: 40px;
120 | 	height: 30px;
121 | 	line-height: 30px;
122 | 	font-size: 16px;
123 | 	text-align: center;
124 | 	float: left;
125 | 	position: relative;
126 | }
127 | #product-list .glyphicon-heart:hover .wash{
128 | 	display: block;
129 | }
130 | #product-list .wash{
131 | 	background: #e86555;
132 | 	color: #fff;
133 | 	padding: 5px;
134 | 	line-height: 20px;
135 | 	position: absolute;
136 | 	left:0;
137 | 	top:-35px;
138 | 	display: none;
139 | }
140 | #product-list .wash:after{
141 | 	content: '';
142 | 	border: 5px solid transparent;
143 | 	border-top:5px solid #e86555;
144 | 	width: 0;
145 | 	height: 0;
146 | 	position: absolute;
147 | 	bottom: -9px;
148 | 	left:50%;
149 | 	margin-left: -5px;
150 | }
151 | #product-list .glyphicon-shopping-cart{
152 | 	display: inline-block;
153 | 	color: #fff;
154 | 	padding: 5px 12px;
155 | 	float: left;
156 | 	font-size: 14px;
157 | 	background:#609450;
158 | 	height: 20px;
159 | 	line-height: 20px;
160 | }
161 | #product-list .glyphicon-shopping-cart span{
162 | 	margin-left: 3px;
163 | }
164 | 
165 | #product-list .glyphicon-eye-open{
166 |     background: #e7e7e7;
167 |     color: #000;
168 |     width: 39px;
169 |     height: 30px;
170 |     line-height: 30px;
171 |     text-align: center;
172 |     font-size: 16px;
173 |     float: right;
174 | }
175 | 
176 | /*product-list 结束*/
177 | /*main 结束*/


--------------------------------------------------------------------------------
/css/contact.css:
--------------------------------------------------------------------------------
  1 | #center{
  2 | 	margin-bottom: 15px;
  3 | }
  4 | /*map 开始*/
  5 | .map{
  6 | 	height: 500px;
  7 | 	margin-bottom: 15px;
  8 | }
  9 | /*map 结束*/
 10 | /*title 开始*/
 11 | .title{
 12 | 	font-size: 24px;
 13 | 	font-weight: normal;
 14 | 	margin-bottom: 15px;
 15 | }
 16 | .title .glyphicon{
 17 |     color: #575655;
 18 |     font-size: 27px;
 19 | }
 20 | /*title 结束*/
 21 | /*message 开始*/
 22 | /*.message{
 23 | 	margin-bottom: 15px;
 24 | }*/
 25 | .send{
 26 | 	float: left;
 27 | 	width: 554px;
 28 | }
 29 | .send input{
 30 | 	width: 255px;
 31 | 	padding: 4px 6px;
 32 | 	margin-bottom: 10px;
 33 | 	font-size: 12px;
 34 | 	font-weight: normal;
 35 | }
 36 | .send .name{
 37 | 	margin-right: 8px;
 38 | }
 39 | .send .text{
 40 | 	width: 540px;
 41 | 	height: 100px;
 42 | 	padding: 4px 6px;
 43 | 	margin-bottom: 10px;
 44 | }
 45 | .send button{
 46 | 	padding: 7px;
 47 |     background: #e5412d;
 48 |     border-color: #e5412d;
 49 |     color: #ffffff;
 50 |     border:1px solid #e5412d;
 51 | 	cursor: pointer;
 52 | }
 53 | .send button span{
 54 | 	color: #ee887b;
 55 | 	margin-right: 10px;
 56 | }
 57 | .business{
 58 | 	float: right;
 59 | 	width: 362px;
 60 |     background: #424242;
 61 |     color: #fff;
 62 |     padding: 15px;
 63 | }
 64 | .business h4{
 65 |     font-size: 26px;
 66 |     font-weight: 400;
 67 |     margin-bottom: 5px;
 68 | }
 69 | .business h5{
 70 | 	font-size: 13px;
 71 | }
 72 | .business p{
 73 | 	line-height: 20px;
 74 | }
 75 | .business p a{
 76 | 	color: #fff;
 77 | }
 78 | .business abbr{
 79 |     cursor: help;
 80 |     border-bottom: 1px dotted #999999;
 81 | }
 82 | /*message 结束*/
 83 | /*important 开始*/
 84 | .important-note{
 85 | 	font-weight: normal;
 86 | 	margin-bottom: 10px;
 87 | }
 88 | .important-note .glyphicon{
 89 | 	font-size: 16px;
 90 | 	font-weight: normal;
 91 | 	margin-right: 5px;
 92 | }
 93 | .important .text{
 94 | 	background: #f4f4f4;
 95 |     border: 1px solid #efefef;
 96 |     padding: 15px;
 97 | }
 98 | .important .text a{
 99 |     text-decoration: underline;
100 |     color: #e5412d;
101 | }
102 | .important .text a:hover{
103 | 	text-decoration: none;
104 | 	color: #333333;
105 | }
106 | /*important 结束*/


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
  1 | /*banner 开始*/
  2 | #banner{
  3 | 	height: 356px;
  4 | 	background: #1f2123;
  5 | 	/*margin-top: 88px;*/
  6 | 	/*border-top: 88px solid transparent;*/
  7 | 	padding-top: 88px;
  8 | }
  9 | #banner .banner-content{
 10 | 	width: 420px;
 11 | 	height: 280px;
 12 | 	position: absolute;
 13 | 	right: 0;
 14 | 	top: 50%;
 15 | 	margin-top: -140px;
 16 | 	text-align: center;
 17 | }
 18 | #banner .banner-content h1{
 19 | 	color: #fff;
 20 | 	height: 46px;
 21 | 	line-height: 46px;
 22 | 	font-size: 40px;
 23 | }
 24 | #banner .banner-content p{
 25 | 	color: #fff;
 26 | 	line-height: 25px;
 27 | 	text-align: right;
 28 | 	margin-top: 30px;
 29 | 	margin-bottom: 30px;
 30 | }
 31 | #banner .banner-content a{
 32 | 	display: inline-block;
 33 | 	color: #fff;
 34 | 	padding: 10px;
 35 | 	margin-right: 50px;
 36 | }
 37 | #banner .banner-content .check-out{
 38 | 	background: #e5412d;
 39 | }
 40 | #banner .banner-content .buy-now{
 41 | 	background: #e7e7e7;
 42 | 	color: #333333;
 43 | 	margin-right: 0;
 44 | }
 45 | /*#banner-bg{
 46 | 	height: 356px;
 47 | 	background: url(../img/front-home-banner.jpg) no-repeat;
 48 | }*/
 49 | /*banner 结束*/
 50 | /*awesome 开始*/
 51 | #awesome{
 52 | 	height: 100px;
 53 | 	background: #f4f4f4;
 54 | 	border-bottom: 1px solid #efefef;
 55 | 	text-align: center;
 56 | 	line-height: 100px;
 57 | 	text-shadow: 0 1px 0 #fff;
 58 | }
 59 | #awesome span{
 60 | 	margin-right: 5px;
 61 | }
 62 | #text-primary{
 63 | 	font-size: 26px;
 64 | 	color: #e5412d;
 65 | 	font-weight: bold;
 66 | }
 67 | #text-features{
 68 | 	color: #4d4d4d;
 69 | 	font-size: 26px;
 70 | }
 71 | #hidden-phone{
 72 | 	color: #ccc;
 73 | 	font-style: italic;
 74 | }
 75 | /*awesome 结束*/
 76 | #slogan {
 77 | 	background: #f4f4f4; 
 78 | 	border: 1px	solid #efefef;
 79 | 	padding: 15px;
 80 | 	margin: 15px auto;
 81 | 	color: #7c7c7c;
 82 | }
 83 | #features{
 84 | 	overflow: hidden;
 85 | }
 86 | #features li{
 87 | 	width:197px;
 88 | 	/*height: 225px;*/
 89 | 	padding: 15px;
 90 | 	margin-right: 15px;
 91 | 	border: 1px solid #efefef;
 92 | 	float: left;
 93 | 	text-align: center;
 94 | }
 95 | #features .selected{
 96 | 	background: #e5412d;
 97 | 	color: #fff;
 98 | }
 99 | #features .selected h3,#features .selected p,#features .selected a,#features .selected span{
100 | 	color: #fff;
101 | }	
102 | #features li:last-child{
103 | 	width:196px;
104 | 	margin-right: 0px;
105 | 	float:right;
106 | }
107 | #features .glyphicon{
108 | 	font-size: 70px;
109 | 	color: #e2e2e2;
110 | }
111 | #features h3{
112 | 	font-family: 'Roboto Slab',sans-serif;
113 | 	font-size: 17.5px;
114 | 	margin:10px 0 10px;
115 | 	font-weight: 400;
116 | 	color:#4d4d4d;
117 | }
118 | #features p{
119 | 	color:#7c7c7c;
120 | 	line-height: normal;
121 | 	margin-bottom: 10px;
122 | }
123 | #features a{
124 | 	color: #e5412d;
125 | }
126 | #follow-us{
127 | 	height: 137px;
128 | 	border: 1px soild #efefef;
129 | 	margin-top: 15px;
130 | 	padding: 15px;
131 | 	background: #f4f4f4;
132 | 	text-align: center;	
133 | }
134 | #follow-us h3{
135 | 	font-size:21px;
136 | 	font-weight: 200;
137 | 	line-height: 30px;
138 | 	color: #7c7c7c;
139 | 	margin-bottom: 20px;
140 | }
141 | #follow-list li{
142 | 	display: inline-block;
143 | 	margin-right: 20px;
144 | 	line-height: 20px;
145 | }
146 | #follow-list .icon{
147 | 	font-size: 55px;
148 | }
149 | #follow-list a{
150 | 	font-size: 12px;
151 | 	color: #444444;
152 | }
153 | #follow-list .selected a{
154 | 	color:#e5412d;
155 | }
156 | #follow-list .selected .icon{
157 | 	color:#e5412d;
158 | }
159 | 
160 | /*testimonials 开始*/
161 | #testimonials{
162 |     font-size: 24.5px;
163 | 	color: #7c7c7c;
164 | 	font-family: 'Roboto Slab', sans-serif;
165 | 	font-weight: 400;
166 | 	padding: 15px 0 15px;
167 | }
168 | #testimonials .glyphicon{
169 | 	padding-right: 10px;
170 | }
171 | /*testimonials 结束*/
172 | /*user-list 开始*/
173 | #user-list{
174 | 	overflow: hidden;
175 | }
176 | #user-list .user{
177 | 	width: 440px;
178 | 	height: 73px;
179 |     border: 1px solid #efefef;
180 |     /*float:left;*/
181 |     padding: 15px;
182 |     color: #7c7c7c;
183 |     font-family: 'Roboto', sans-serif;
184 | }
185 | /*#user-list .user:last-child{
186 | 	float: right;
187 | }*/
188 | #user-list .user:nth-child(2n+1){
189 | 	float: left;
190 | }
191 | #user-list .user:nth-child(2n){
192 | 	float: right;
193 | }
194 | #user-list .glyphicon{
195 | 	width: 50px;
196 | 	height: 50px;
197 | 	color: #e2e2e2;
198 |     font-size: 50px;
199 | 	float: left;
200 | 	margin: 0 25px 15px 0;
201 | }
202 | #user-list .by{
203 | 	font-weight: bold;
204 | 	margin-top: 10px;
205 | }
206 | #user-list .by a{
207 | 	color: #e5412d;
208 | }
209 | #user-list .by a:hover{
210 | 	color: #000;
211 | }
212 | /*user-list 结束*/
213 | /*bner 开始*/
214 | #bner{
215 | 	height: 45px;
216 | 	margin: 15px auto;
217 | 	padding: 15px;
218 | 	border: 1px solid #efefef;
219 |     background: #f4f4f4;
220 |     width: 930px;
221 | }
222 | #bner .bner-left{
223 | 	width: 600px;
224 | 	text-align: center;
225 | 	float: left;
226 | }
227 | #bner .bner-left h2{
228 | 	font-size: 26px;
229 | 	font-weight: 400;
230 |     color: #4d4d4d;
231 | }
232 | #bner .bner-left strong{
233 | 	color: #e5412d
234 | }
235 | #bner .bner-left p{
236 | 	font-size: 13px;
237 |     color: #7c7c7c;
238 | }
239 | #bner .bner-right{
240 | 	width: 300px;
241 | 	height: 42px;
242 | 	display: inline-block;
243 | 
244 | 	background: #e5412d;
245 |     border-color: #e5412d;
246 |     color: #ffffff;
247 |     position: relative;
248 | 
249 | }
250 | #bner .bner-right span{
251 |     color: rgba(255, 255, 255, 0.4);
252 |     font-size: 24px;
253 |     float: left;
254 |     position: relative;
255 |     left: 15px;
256 |     top: 9px;
257 | }
258 | #bner .bner-right p{
259 |     font-size: 13px;
260 |     line-height: normal;
261 |     font-weight: 600;
262 |     margin: 5px 0 0 50px;
263 | }
264 | #bner .bner-right p:last-child{
265 | 	margin-top:0px;
266 | }
267 | /*bner 结束*/


--------------------------------------------------------------------------------
/css/posts.css:
--------------------------------------------------------------------------------
  1 | /*title 开始*/
  2 | #title{
  3 | 	font-weight: 400;
  4 | 	margin-bottom: 10px;
  5 | 	font-size: 30px;
  6 | }
  7 | #title .glyphicon{
  8 | 	color: #575655;
  9 | 	padding-right: 5px;
 10 | }
 11 | /*title 结束*/
 12 | /*main 开始*/
 13 | #main{
 14 | 	margin: 15px 0 30px;
 15 | }
 16 | 
 17 | /*hr 开始*/
 18 | .hr{
 19 | 	height: 2px;
 20 | 	background: #f4f4f4;
 21 | 	margin: 30px auto;
 22 | 	position: relative;	
 23 | 	text-align: center;
 24 | }
 25 | .hr .glyphicon{
 26 | 	font-size: 30px;
 27 | 	position: absolute;
 28 | 	top: 50%;
 29 | 	left: 90px;
 30 | 	margin-top: -15px;
 31 | 	padding: 0 10px;
 32 | 	background: #fff;
 33 | }
 34 | /*hr 结束*/
 35 | /*question-list 开始*/
 36 | #question-list{
 37 | 	width: 715px;
 38 | 	float: right;
 39 | }
 40 | .question-box{
 41 | 	border: 1px solid #efefef;
 42 |     padding: 15px;
 43 |     margin: 0 auto 15px;
 44 | }
 45 | .img-box{
 46 |     display: block;
 47 |     padding: 3px;
 48 |     border: 1px solid #efefef;
 49 |     background: #fff;
 50 | }
 51 | .one .img-box,.three .img-box{
 52 | 	float: left;
 53 |     margin-right: 15px;
 54 | }
 55 | .two .img-box,.four .img-box{
 56 | 	float: right;
 57 |     margin-left: 15px;
 58 | }
 59 | .one .img-box img,.four .img-box img{
 60 | 	width: 213px;
 61 | }
 62 | .two .img-box img,.three .img-box img{
 63 | 	width: 320px;
 64 | }
 65 | .one .text-box,.four .text-box{
 66 | 	width: 430px;
 67 | }
 68 | .two .text-box,.three .text-box{
 69 | 	width: 340px;
 70 | }
 71 | .text-box{
 72 | 	float: left;
 73 | }
 74 | .text-box h4{
 75 |     color: #4d4d4d;
 76 |     font-weight: bold;
 77 |     font-size: 14px;
 78 |     margin-bottom: 5px;
 79 | }
 80 | .text-box a{
 81 |     color: #e5412d;
 82 | }
 83 | .text-box .a-hover:hover{
 84 | 	color: #333333;
 85 | }
 86 | .text-box .glyphicon{
 87 | 	margin-right: 5px;
 88 | }
 89 | .text-box .glyphicon-calendar,.text-box .glyphicon-comment{
 90 | 	margin-left: 5px;
 91 | }
 92 | .text-box .txt{
 93 | 	margin: 15px 0 10px 0;
 94 | }
 95 | .text-box .strong{
 96 | 	font-weight: 700;
 97 | }
 98 | .four{
 99 | 	background: #f4f4f4;
100 | }
101 | 
102 | 
103 | /*question-list 结束*/
104 | /*main 结束*/


--------------------------------------------------------------------------------
/css/product.css:
--------------------------------------------------------------------------------
  1 | /*title 开始*/
  2 | #title{
  3 | 	font-size: 24px;
  4 | 	font-weight: normal;
  5 | 	margin-bottom: 15px;
  6 | }
  7 | #title .glyphicon{
  8 |     color: #575655;
  9 |     font-size: 27px;
 10 | }
 11 | /*title 结束*/
 12 | /*center 开始*/
 13 | #center{
 14 | 	margin-bottom: 40px;
 15 | }
 16 | /*center 结束*/
 17 | /*main 开始*/
 18 | #main{
 19 | 	margin-bottom: 15px;
 20 | }
 21 | #main-left{
 22 | 	float: left;
 23 | }
 24 | #main-right{
 25 | 	float: right;
 26 | 	width: 635px;
 27 | }
 28 | /*main-left 开始*/
 29 | #main-left{
 30 | 	margin-right: 5px;
 31 | 	width: 312px;
 32 | }
 33 | #main-left .big-img-box{
 34 |     display: block;
 35 |     padding: 3px;
 36 |     border: 1px solid #efefef;
 37 | }
 38 | #main-left .big-img-box .big-img{
 39 | 	width: 302px;
 40 | 	height: 452px;
 41 | }
 42 | /*hr 开始*/
 43 | #main-left .hr{
 44 | 	height: 2px;
 45 | 	background: #f4f4f4;
 46 | 	margin: 30px auto;
 47 | 	position: relative;	
 48 | 	text-align: center;
 49 | }
 50 | #main-left .hr .glyphicon{
 51 | 	font-size: 37px;
 52 | 	position: absolute;
 53 | 	top: 50%;
 54 | 	left: 130px;
 55 | 	margin-top: -15px;
 56 | 	padding: 0 15px;
 57 | 	background: #fff;
 58 | }
 59 | /*hr 结束*/
 60 | #main-left ul{
 61 | 	margin-top: 40px;
 62 | }
 63 | #main-left ul li{
 64 | 	float: left;
 65 | 	margin-right: 5px;
 66 | }
 67 | #main-left ul li:last-child{
 68 | 	float: right;
 69 | 	margin-right: 0;
 70 | }
 71 | #main-left .small-img-box{
 72 | 	padding: 5px;
 73 |     border: 1px solid #efefef;
 74 |     display: inline-block;
 75 | }
 76 | #main-left .small-img{
 77 | 	width: 62px;
 78 | 	height: 93px;
 79 | }
 80 | /*main-left 结束*/
 81 | 
 82 | /*main-right 开始*/
 83 | /*right-top 开始*/
 84 | #main-right .detail{
 85 | 	float: left;
 86 | 	width: 366px;
 87 | }
 88 | #main-right .detail .p-body{
 89 | 	margin: 15px 0;
 90 | 	background: #f4f4f4;
 91 |     border: 1px solid #efefef;
 92 |     padding: 15px;
 93 | }
 94 | #main-right .detail .important-note{
 95 | 	padding: 15px;
 96 | 	border: 1px solid #efefef;
 97 | 	color: #fff;
 98 | 	background: #bbbbbb;
 99 | 	margin-top: 5px;
100 | }
101 | #main-right .add{
102 | 	width: 227px;
103 | 	float: right;
104 | 	border: 1px solid #efefef;
105 |     padding: 15px;
106 |     position: relative;
107 |     margin: 0 0 15px 10px;
108 |     overflow: hidden;
109 | }
110 | #main-right .add .off{
111 |     position: absolute;
112 |     right: -30px;
113 |     top: 13px;
114 |     color: #fff;
115 |     background: #609450;
116 |     width: 120px;
117 |     height: 34px;
118 |     line-height: 34px;
119 |     font-weight: bold;
120 |     font-size: 15px;
121 |     text-align: center;
122 |     -webkit-transform: rotate(45deg);
123 | }
124 | #main-right .add h4{
125 | 	font-size: 35px;
126 |     line-height: 40px;
127 |     font-weight: normal;
128 | }
129 | #main-right .add .price{
130 | 	color: #d7d7d7;
131 | }
132 | #main-right .add .btn-title{
133 | 	margin-top: 20px;
134 | 	font-weight: 600;
135 | }
136 | #select-size{
137 | 	padding: 2px 10px;
138 |     background: #e8e8e8;
139 |     width: 225px;
140 |     margin: 5px 0;
141 | }
142 | #select-size option{
143 | 	background: #fff;
144 | }
145 | #main-right input{
146 |     border: 1px solid #efefef;
147 |     color: #A7A7A7;
148 |     padding: 4px 6px;
149 |     margin: 10px 0;
150 |     width: 210px;
151 | }
152 | #main-right .butten{
153 |     padding: 10px;
154 |     font-weight: 600;
155 |     background: #609450;
156 |     border-color: #609450;
157 |     color: #ffffff;
158 |     width: 203px;
159 |     display: block;
160 |     text-align: left;
161 |     font-size: 19px;
162 |     margin-top: 10px;
163 | }
164 | #main-right .butten .glyphicon{
165 | 	margin-right: 10px;
166 | }
167 | #main-right .share{
168 | 	float: right;
169 | 	margin: 10px 0;
170 | }
171 | #main-right .share .txt{
172 |     vertical-align: middle;
173 | }
174 | #main-right .share .icon{
175 | 	font-size: 28px;
176 | 	vertical-align: middle;
177 |     color: #64625f;
178 | }
179 | /*right-top 结束*/
180 | /*hr 开始*/
181 | #main-right .hr{
182 | 	height: 2px;
183 | 	background: #f4f4f4;
184 | 	margin: 30px auto;
185 | 	position: relative;	
186 | 	text-align: center;
187 | }
188 | #main-right .hr .glyphicon{
189 | 	font-size: 37px;
190 | 	position: absolute;
191 | 	top: 50%;
192 | 	left: 300px;
193 | 	margin-top: -15px;
194 | 	padding: 0 15px;
195 | 	background: #fff;
196 | }
197 | /*hr 结束*/
198 | /*right-bottom 开始*/
199 | #main-right .right-bottom{
200 | 	border:1px solid #efefef;
201 | }
202 | #main-right .right-bottom .btn-box{
203 | 	border-bottom: 1px solid #efefef;
204 | 	height: 35px;
205 | }  
206 | #main-right .right-bottom .btn-box li{
207 | 	float: left;
208 | 	height: 35px;
209 | 	line-height: 35px;
210 | 	padding: 0 15px;
211 | 	border-right: 1px solid #efefef;
212 | 	display: block;
213 | }
214 | #main-right .right-bottom .btn-box li span{
215 | 	margin-right: 5px;
216 | 	font-size: 15px;
217 | }
218 | #main-right .right-bottom ul .active{
219 | 	color: #505050;
220 | 	height: 36px;
221 | 	background: #fff;
222 | }
223 | #main-right .content-box>div{
224 | 	display: none;
225 | 	padding: 15px;
226 | }
227 | #main-right .content-box .active{
228 | 	display: block;
229 | }
230 | 
231 | #main-right .one-customer{
232 | 	margin-bottom: 15px;
233 | }
234 | #main-right .one-customer:last-child{
235 | 	margin-bottom: 0;
236 | }
237 | #main-right .one-customer .glyphicon-fire{
238 | 	font-size: 5em;
239 | 	float: right;
240 | 	margin-left: 5px;
241 | 	color: #d7d7d7;
242 | }
243 | #main-right .one-customer .star{
244 | 	color: #d7d7d7;
245 | 	margin: 5px 0;
246 | }
247 | #main-right .one-customer .glyphicon-star{
248 | 	color: #e5412d;
249 | 	margin-right: 3px;
250 | }
251 | #main-right .one-customer .glyphicon-star-empty{
252 | 	margin-right: 8px;
253 | }
254 | #main-right .one-customer .text{
255 | 	line-height: 20px;
256 | }
257 | 
258 | 
259 | /*right-bottom 结束*/
260 | /*main-right 结束*/
261 | /*main 结束*/
262 | 
263 | /*弹层 开始*/
264 | .dialog-box{
265 | 	background: rgba(0,0,0,0.6);
266 | 	/*position: absolute;*/
267 | 	position: fixed;
268 | 	left:0;
269 | 	top:0;
270 | 	right: 0;
271 | 	bottom: 0;
272 | 	z-index:999;
273 | 	display: none;
274 | }
275 | .content{
276 | 	width: 423px;
277 | 	height: 498px;
278 | 	background: #fff;
279 | 	position: absolute;
280 | 	left:50%;
281 | 	/*top:50%;*/
282 | 	top:-249px;
283 | 	margin-left: -212px;
284 | 	margin-top: -249px;
285 | }
286 | 
287 | @keyframes show{
288 | 	100%{
289 | 		top:50%;
290 | 	}
291 | }
292 | .dialog-title{
293 | 	height: 30px;
294 | 	background: #f4f4ff;
295 | 	border-bottom: 1px solid #efefef;
296 | 	text-align: right;
297 | 	line-height: 30px;
298 | }
299 | .dialog-close{
300 | 	margin-right:8px;
301 | 	cursor: pointer;
302 | }
303 | .dialog-body{
304 | 	text-align: center;
305 | 	height: 406px;
306 | }
307 | .dialog-body img{
308 | 	width: 265px;
309 | 	height: 395px;
310 | 	margin:10px 0;
311 | 	position: absolute;
312 | 	left:80px;
313 | 	top:25px;
314 | }
315 | .dialog-prev,.dialog-next{
316 | 	width: 40px;
317 | 	height: 40px;
318 | 	background: rgba(0,0,0,0.6);
319 | 	border-radius: 50%;
320 | 	text-align: center;
321 | 	line-height: 40px;
322 | 	font-size: 30px;
323 | 	color:#fff;
324 | 	position: absolute;
325 | 	top:50%;
326 | 	margin-top:-20px;
327 | }
328 | .dialog-prev{
329 | 	left:95px;
330 | }
331 | .dialog-next{
332 | 	right:95px;
333 | }
334 | .dialog-btns{
335 | 	height: 40px;
336 | 	background: #f4f4ff;
337 | 	border-top: 1px solid #efefef;
338 | 	padding: 10px 15px;
339 | }
340 | .dialog-btns span{
341 | 	height: 30px;
342 | 	line-height: 30px;
343 | 	color:#fff;
344 | 	padding: 0 10px;
345 | 	display: inline-block;
346 | 	font-size: 16px;
347 | 	font-weight: bold;
348 | }
349 | .prev-btn{
350 | 	background: #e5412d;
351 | }
352 | .next-btn{
353 | 	background: #5cc7dd;
354 | }
355 | .slide-btn{
356 | 	background: #609450;
357 | }
358 | .dialog-btns span.download-btn{
359 | 	background: #f5f5f5;
360 | 	color:#000;
361 | 	border:1px solid #cccccc;
362 | }
363 | 
364 | @keyframes hide{
365 | 	100%{
366 | 		opacity: 0;
367 | 	}
368 | }
369 | 
370 | 
371 | 
372 | 
373 | /*弹层 结束*/


--------------------------------------------------------------------------------
/css/shopcart.css:
--------------------------------------------------------------------------------
  1 | /*top 开始*/
  2 | .title{
  3 | 	font-size: 24px;
  4 | 	font-weight: normal;
  5 | 	margin-bottom: 15px;
  6 | 	float: left;
  7 | }
  8 | .title .glyphicon{
  9 |     color: #575655;
 10 |     font-size: 27px;
 11 | }
 12 | .top .selected{
 13 | 	float: right;
 14 | 	line-height: 32px;
 15 | 	font-weight: 600;
 16 | }
 17 | #selected{
 18 | 	width: 220px;
 19 | 	background: #e7e7e7;
 20 | 	padding: 5px;
 21 | }
 22 | #selected option{
 23 | 	background: #fff;
 24 | }
 25 | /*top 结束*/
 26 | /*table 开始*/
 27 | .middle{
 28 |     border: 1px solid #efefef;
 29 |     border-spacing: 0;
 30 |     border-top: 0;
 31 |     margin-bottom: 15px;
 32 | }
 33 | .middle .praduct{
 34 | 	text-align: left;
 35 | }
 36 | thead th{
 37 | 	text-align: left;
 38 | }
 39 | th{
 40 | 	padding: 8px 0 8px 2px;
 41 | 	border: 1px solid #efefef;
 42 | 	border-left: 0;
 43 | 	border-top: 0;
 44 | }
 45 | .w31{
 46 | 	width: 31px;
 47 | 	text-align: center;
 48 | }
 49 | .w39{
 50 | 	width: 39px;
 51 | }
 52 | .w521{
 53 | 	width: 521px;
 54 | }
 55 | .w67{
 56 | 	width: 67px;
 57 | }
 58 | .w97{
 59 | 	width: 97px;
 60 | }
 61 | thead{
 62 | 	background: #e5412d; 
 63 | 	color: #fff;
 64 | 	height: 20px;
 65 | 	border-color: #e5412d;
 66 | }
 67 | .middle thead th{
 68 | 	border-color: #e5412d;
 69 | }
 70 | th .checkbox{
 71 | 	width: 15px;
 72 | 	height: 15px;
 73 | 	border-radius:7px;
 74 | }
 75 | tbody tr:hover,tbody tr.selected{
 76 | 	background: #bdbdbd;
 77 | }
 78 | tbody th{
 79 | 	font-weight: normal;
 80 | }
 81 | tbody .bgc{
 82 | 	background: #fafafa;
 83 | }
 84 | .middle .img-box{
 85 | 	display: block;
 86 |     padding: 3px;
 87 |     border: 1px solid #efefef;
 88 |     background: #fff;
 89 |     width: 80px;
 90 |     float: left;
 91 |     margin-left: 10px;
 92 |     margin-right: 10px;
 93 | }
 94 | .middle .img-box img{
 95 | 	width: 80px;
 96 | }
 97 | .middle .text-box{
 98 | 	float: left;
 99 | }
100 | .middle .text-box h5{
101 |     font-weight: 400;
102 |     color: #4d4d4d;
103 |     font-size: 14px;
104 | }
105 | .middle .text-box a{
106 | 	margin-bottom: 10px;
107 | 	display: block;
108 | }
109 | .middle .text-box a p{
110 |     color: #e5412d;
111 |     font-weight: normal;
112 | }
113 | .middle .text-box a p:hover{
114 |     color: #4d4d4d;
115 | }
116 | .middle .text-box .type{
117 | 	float: left;
118 | 	margin-right: 5px;
119 | 	font-weight: normal;
120 | }
121 | .middle .text-box .type .grey{
122 | 	border-radius: 3px;
123 |     display: inline-block;
124 |     padding: 2px 4px;
125 |     font-size: 12px;
126 |     font-weight: bold;
127 |     line-height: 14px;
128 |     color: #ffffff;
129 |     background: #999999;
130 | }
131 | .middle .text{
132 | 	width: 36px;
133 | 	height: 20px;
134 | 	padding: 4px 6px;
135 |     border: 1px solid #efefef;
136 |     color: #A7A7A7;
137 | }
138 | /*table 结束*/
139 | 
140 | /*bottom 开始*/
141 | .discount{
142 | 	float: left;
143 |     border: 1px solid #efefef;
144 |     padding: 15px;
145 |     position: relative;
146 |     background: #f4f4f4;
147 |     margin: 0 0 15px;
148 |     width: 441px;
149 | }
150 | .discount strong{
151 | 	display: block;
152 | }
153 | .discount input{
154 | 	display: block;
155 | 	margin: 15px 0;
156 |     border: 1px solid #efefef;
157 |     color: #A7A7A7;
158 |     padding: 4px 6px;
159 |     height: 20px;
160 | 	width: 428px;
161 | }
162 | .discount button{
163 | 	display: block;
164 |     background: #424242;
165 |     color: #fff;
166 |     border: 1px solid #424242;
167 |     padding: 4px 12px;
168 |     font-size: 14px;
169 |     font-weight: bold;
170 | }
171 | .price{
172 | 	font-size: 14px;
173 | 	width: 229px;
174 | 	height: 99px;
175 | 	margin-left: 15px;
176 | 	float: left;
177 | 	text-align: right;
178 | }
179 | .price .strong{
180 | 	font-weight: bolder;
181 | }
182 | .buy{
183 | 	width: 229px;
184 | 	float: right;
185 | }
186 | .buy p{
187 |     font-size: 15px;
188 |     color: #222;
189 |     height: 29px;
190 |     padding: 0 10px;
191 |     line-height: 29px;
192 |     background: #e5e5e5;
193 |     text-align: center;
194 |     font-weight: bold;
195 |     margin-bottom: 15px;
196 | }
197 | .buy button{
198 |     font-weight: 600;
199 |     padding: 10px;
200 |     background: #e5412d;
201 |     border: 1px solid #e5412d;
202 |     color: #ffffff;
203 |     width: 100%;
204 |     font-size: 17px;
205 | }
206 | .buy span{
207 | 	color: rgba(255, 255, 255, 0.4);
208 | 	margin-right: 17px;
209 | 	font-size: 15px;
210 | }
211 | /*bottom 结束*/


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /*样式重置*/
  2 | *{
  3 | 	margin: 0;
  4 | 	padding: 0;
  5 | }
  6 | ul, ol{
  7 | 	list-style: none;
  8 | }
  9 | a{
 10 | 	text-decoration: none;
 11 | }
 12 | img{
 13 | 	border: 0;
 14 | }
 15 | 
 16 | /*通用样式 开始*/
 17 | body{
 18 | 	font-size: 13px;
 19 | /*	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
 20 | 	font-family: 'Roboto', sans-serif;
 21 |     color: #7c7c7c;
 22 | }
 23 | .wrapper{
 24 | 	width: 960px;
 25 | 	margin: 0 auto;
 26 | }
 27 | .arrow{
 28 | 	width: 0;
 29 | 	height: 0;
 30 | 	border: 4px solid transparent;
 31 | 	border-top-color: #bdbdbd;
 32 | 	display: inline-block;
 33 | }
 34 | .zhan{
 35 | 	height: 100px;
 36 | }
 37 | .clear{
 38 | 	clear: both;
 39 | }
 40 | /*通用样式 结束*/
 41 | 
 42 | /*header 开始*/
 43 | #header{
 44 | 	width: 100%;
 45 | 	height: 88px;
 46 | 	position: fixed;
 47 | 	z-index: 1;
 48 | }
 49 | #top-nav{
 50 | 	height: 30px;
 51 | 	line-height: 30px;
 52 | 	background: #f4f4f4;
 53 | 	border-bottom: 1px solid #dbdbdb;
 54 | }
 55 | #top-nav .glyphicon-search{
 56 | 	text-indent: 15px;
 57 | 	color: #dbdbdb;
 58 | 	font-size: 15px;
 59 | }
 60 | #top-nav .glyphicon-search:hover{
 61 | 	color: #f00;
 62 | 	cursor: pointer;/*鼠标变手形*/
 63 | }
 64 | #search-box{
 65 | 	width: 48px;
 66 | 	border-right: 1px solid #bdbdbd;
 67 | 	float: left; 
 68 | }
 69 | #top-menu{
 70 | 	height: 30px;
 71 | 	float: right;
 72 | }
 73 | #top-menu li{
 74 | 	float: left;
 75 | 	margin-right: 10px;
 76 | }
 77 | #top-menu .follow-us{
 78 | 	color: #dbdbdb;
 79 | }
 80 | #top-menu .follow-us:hover{
 81 | 	color: #040404;
 82 | }
 83 | #top-menu .share a{
 84 | 	font-size: 17px;
 85 | 	color: #dbdbdb;
 86 | }
 87 | #top-menu .share a:hover{
 88 | 	color: #f00;
 89 | }
 90 | #top-menu .btn{
 91 | 	width: 82px;
 92 | 	height: 30px;
 93 | 	text-align: center;
 94 | 	margin-right: 1px;
 95 | }
 96 | #top-menu .btn:hover{
 97 | 	background: #f4f4f4;
 98 | }
 99 | #top-menu .btn:hover a{
100 | 	color: #040404;
101 | }
102 | #top-menu .btn:hover .glyphicon{
103 | 	color: #f00;
104 | }
105 | #top-menu .btn a{
106 | 	color: #fff;
107 | }
108 | #top-menu .login{
109 | 	background: #424242;
110 | }
111 | #top-menu .register{
112 | 	background: #e5412d;
113 | }
114 | #nav{
115 | 	height: 56px;
116 | 	line-height: 56px;
117 | 	border-bottom: 1px solid #39;
118 | 	background: #393939;
119 | }
120 | #nav .logo{
121 | 	color: #e5412d;
122 | 	font-size: 36px;
123 | 	float: left;
124 | }
125 | #nav .nav-menu{
126 | 	float: right;
127 | }
128 | #nav .nav-menu > li{
129 | 	float: left;
130 | 	padding: 0 10px;
131 | 	position: relative;
132 | }
133 | #nav .nav-menu > li.menu-btn:hover .sub-menu{
134 | 	display: block;
135 | 	animation: showul 0.2s ease forwards;
136 | }
137 | @keyframes showul{
138 | 	0%{
139 | 		
140 | 	}
141 | 	100%{
142 | 		top: 56px;
143 | 	}
144 | }
145 | #nav .nav-menu .sub-menu{
146 | 	background: #fff;
147 | }
148 | /*#nav .nav-menu > li:hover .sub-menu{
149 | 	display: block;
150 | }*/
151 | #nav .nav-menu a{
152 | 	font-size: 14px;
153 | 	color: #7c7c7c;
154 | 	font-weight: bold;
155 | }
156 | #nav .nav-menu .selected a{
157 | 	color: #fff;
158 | }
159 | #nav .sub-menu{
160 | 	width: 150px;
161 | 	position: absolute;
162 | 	top: 120px;
163 | 	border: 1px solid #bdbdbd;
164 | 	border-top: 0;
165 | 	display: none;
166 | 	background-color: #fff;
167 | }
168 | #nav .sub-menu li{
169 | 	line-height: 30px;
170 | 	padding: 0 10px;
171 | }
172 | #nav .sub-menu a{
173 | 	color: #939494;
174 | }
175 | #nav .sub-menu a:hover{
176 | 	color: #000;
177 | }
178 | /*header 结束*/
179 | /*footer 开始*/
180 | #footer{
181 | 	background: #1f2123;
182 | 	padding: 15px 0 15px 0;
183 | 	font-weight: 600;
184 | }
185 | #footer h4{
186 | 	font-size: 15px;
187 |     font-weight: 700;
188 |     color: #fff;
189 |     margin: 0 0 8px;
190 | }
191 | #footer .left{
192 | 	float: left;
193 | 	margin-right: 14px;
194 | 	text-align: center;
195 | }
196 | #footer .right{
197 | 	float: right;
198 | 	text-align: center;
199 | }
200 | #footer ul li{
201 | 	background: #191a1c;
202 |     margin: 0 0 1px;
203 |     line-height: 30px;
204 |     height: 30px;  
205 | }
206 | #footer .quick-links li{
207 |     color: #e5412d; 
208 |     width: 142px;
209 | }
210 | #footer .about{
211 | 	width: 335px;
212 | }
213 | #footer .about p{
214 |     color: #919192;
215 | 	background: #191a1c;
216 | 	padding: 15px;
217 | 	font-weight: 600;
218 |     line-height: 20px;
219 | }
220 | #footer .out-blog li{
221 | 	color: #e5412d; 
222 |     width: 224px;
223 | }
224 | #footer .contact li{
225 | 	text-align: left;
226 | 	color: #919192; 
227 |     width: 212px;
228 |     padding-left: 5px;
229 | }
230 | #footer .contact span{
231 | 	width: 17px;
232 | 	height: 17px;
233 | }
234 | #footer .social{
235 | 	margin-top: 15px;
236 | 	width: 212px;
237 | }
238 | #footer .social li{
239 | 	background: #1f2123;
240 | 	display: inline-block;
241 | 	font-size: 24px;
242 | }
243 | #footer .social a{
244 | 	font-size: 30px;
245 | 	color: #919192; 
246 | }
247 | #footer .social .selected{
248 |     color: #e5412d;
249 | }
250 | .clearfix{
251 | 	clear: both;
252 | }
253 | #footer .copyright{
254 | 	color: #fff;
255 | 	margin-top: 15px;
256 | }
257 | #footer .copyright a{
258 | 	color: #e5412d;  
259 | }
260 | #footer .text-right{
261 | 	float: right;
262 | }
263 | /*footer 结束*/
264 | 
265 | /*side-bar 开始*/
266 | #side-bar{
267 | 	width: 229px;
268 | 	float: left;
269 | }
270 | #side-bar ul{
271 | 	margin-bottom: 15px;
272 | }
273 | #side-bar li{
274 | 	height: 39px;
275 | 	padding: 0 10px;
276 | 	background: #f4f4f4;
277 |     border-bottom: 1px solid #efefef;
278 |     line-height: 39px;
279 | }
280 | #side-bar li a{
281 |     color: #000000;
282 |     font-weight: bold;
283 | }
284 | #side-bar li span{
285 | 	display: inline-block;
286 |     padding: 2px 10px;
287 |     margin: 10px 0;
288 |     font-size: 11.844px;
289 |     font-weight: bold;
290 |     line-height: 14px;
291 |     color: #ffffff;
292 |     background: #9d9d9d;
293 |     border-radius: 10px;
294 |     float: right;
295 | }
296 | #side-bar .question{
297 |     background: #424242;
298 |     padding: 15px;
299 |     color: #fff;
300 |     text-align: center;
301 | }
302 | #side-bar .question .glyphicon-question-sign{
303 | 	font-size: 75px;
304 | }
305 | #side-bar .question h5{
306 | 	font-size: 17.5px;
307 | 	font-weight: 400;
308 | 	margin: 10px 0 5px;
309 | }
310 | #side-bar .question a{
311 |     background: #e5412d;
312 |     display: block;
313 |     padding: 7px 0;
314 |     color: #fff;
315 |     margin-top: 10px;
316 |     font-weight: 600;
317 | }
318 | #side-bar .question a .glyphicon{
319 | 	padding-right: 5px;
320 | }
321 | #side-bar .important-note{
322 | 	margin:15px 0;
323 | 	font-weight: normal;
324 | }
325 | #side-bar .important-note .glyphicon{
326 | 	font-size: 16px;
327 | 	font-weight: normal;
328 | 	margin-right: 5px;
329 | }
330 | #side-bar .text{
331 | 	padding: 15px;
332 | 	background: #f4f4f4;		
333 | }
334 | #side-bar .labels{
335 | 	padding: 15px;
336 | 	background: #f4f4f4;
337 | 	text-align: center;
338 | }
339 | #side-bar .labels span{
340 | 	background: #999;
341 | 	font-size: 11px;
342 | 	color: #fff;
343 |     padding: 2px 4px;
344 |     margin-top: 3px;
345 |     display: inline-block;
346 |     font-weight: bold;
347 |     border-radius: 3px;
348 | }
349 | /*side-bar 结束*/
350 | 
351 | 
352 | 
353 | 
354 | 


--------------------------------------------------------------------------------
/css/timeline.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/css/timeline.css


--------------------------------------------------------------------------------
/fonts/font-awesome/font/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/font-awesome/font/FontAwesome.otf


--------------------------------------------------------------------------------
/fonts/font-awesome/font/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/font-awesome/font/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/fonts/font-awesome/font/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/font-awesome/font/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/fonts/font-awesome/font/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/font-awesome/font/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/fonts/font-awesome/less/bootstrap.less:
--------------------------------------------------------------------------------
 1 | /* BOOTSTRAP SPECIFIC CLASSES
 2 |  * -------------------------- */
 3 | 
 4 | /* Bootstrap 2.0 sprites.less reset */
 5 | [class^="icon-"],
 6 | [class*=" icon-"] {
 7 |   display: inline;
 8 |   width: auto;
 9 |   height: auto;
10 |   line-height: normal;
11 |   vertical-align: baseline;
12 |   background-image: none;
13 |   background-position: 0% 0%;
14 |   background-repeat: repeat;
15 |   margin-top: 0;
16 | }
17 | 
18 | /* more sprites.less reset */
19 | .icon-white,
20 | .nav-pills > .active > a > [class^="icon-"],
21 | .nav-pills > .active > a > [class*=" icon-"],
22 | .nav-list > .active > a > [class^="icon-"],
23 | .nav-list > .active > a > [class*=" icon-"],
24 | .navbar-inverse .nav > .active > a > [class^="icon-"],
25 | .navbar-inverse .nav > .active > a > [class*=" icon-"],
26 | .dropdown-menu > li > a:hover > [class^="icon-"],
27 | .dropdown-menu > li > a:hover > [class*=" icon-"],
28 | .dropdown-menu > .active > a > [class^="icon-"],
29 | .dropdown-menu > .active > a > [class*=" icon-"],
30 | .dropdown-submenu:hover > a > [class^="icon-"],
31 | .dropdown-submenu:hover > a > [class*=" icon-"] {
32 |   background-image: none;
33 | }
34 | 
35 | 
36 | /* keeps Bootstrap styles with and without icons the same */
37 | .btn, .nav {
38 |   [class^="icon-"],
39 |   [class*=" icon-"] {
40 | //    display: inline;
41 |     &.icon-large { line-height: .9em; }
42 |     &.icon-spin { display: inline-block; }
43 |   }
44 | }
45 | .nav-tabs, .nav-pills {
46 |   [class^="icon-"],
47 |   [class*=" icon-"] {
48 |     &, &.icon-large { line-height: .9em; }
49 |   }
50 | }
51 | .btn {
52 |   [class^="icon-"],
53 |   [class*=" icon-"] {
54 |     &.pull-left, &.pull-right {
55 |       &.icon-2x { margin-top: .18em; }
56 |     }
57 |     &.icon-spin.icon-large { line-height: .8em; }
58 |   }
59 | }
60 | .btn.btn-small {
61 |   [class^="icon-"],
62 |   [class*=" icon-"] {
63 |     &.pull-left, &.pull-right {
64 |       &.icon-2x { margin-top: .25em; }
65 |     }
66 |   }
67 | }
68 | .btn.btn-large {
69 |   [class^="icon-"],
70 |   [class*=" icon-"] {
71 |     margin-top: 0; // overrides bootstrap default
72 |     &.pull-left, &.pull-right {
73 |       &.icon-2x { margin-top: .05em; }
74 |     }
75 |     &.pull-left.icon-2x { margin-right: .2em; }
76 |     &.pull-right.icon-2x { margin-left: .2em; }
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/less/core.less:
--------------------------------------------------------------------------------
  1 | /* FONT AWESOME CORE
  2 |  * -------------------------- */
  3 | 
  4 | [class^="icon-"],
  5 | [class*=" icon-"] {
  6 |   .icon-FontAwesome();
  7 | }
  8 | 
  9 | [class^="icon-"]:before,
 10 | [class*=" icon-"]:before {
 11 |   text-decoration: inherit;
 12 |   display: inline-block;
 13 |   cursor: default;
 14 |   speak: none;
 15 | }
 16 | 
 17 | /* makes the font 33% larger relative to the icon container */
 18 | .icon-large:before {
 19 |   vertical-align: -10%;
 20 |   font-size: 4/3em;
 21 | }
 22 | 
 23 | /* makes sure icons active on rollover in links */
 24 | a {
 25 |   [class^="icon-"],
 26 |   [class*=" icon-"] {
 27 |     display: inline;
 28 |   }
 29 | }
 30 | 
 31 | /* increased font size for icon-large */
 32 | [class^="icon-"],
 33 | [class*=" icon-"] {
 34 |   &.icon-fixed-width {
 35 |     display: inline-block;
 36 |     width: 16/14em;
 37 |     text-align: right;
 38 |     padding-right: 4/14em;
 39 |     &.icon-large {
 40 |       width: 20/14em;
 41 |     }
 42 |   }
 43 | }
 44 | 
 45 | .icons-ul {
 46 |   margin-left: @icons-li-width;
 47 |   list-style-type: none;
 48 | 
 49 |   > li { position: relative; }
 50 | 
 51 |   .icon-li {
 52 |     position: absolute;
 53 |     left: -@icons-li-width;
 54 |     width: @icons-li-width;
 55 |     text-align: center;
 56 |     line-height: inherit;
 57 |   }
 58 | }
 59 | 
 60 | // allows usage of the hide class directly on font awesome icons
 61 | [class^="icon-"],
 62 | [class*=" icon-"] {
 63 |   &.hide {
 64 |     display: none;
 65 |   }
 66 | }
 67 | 
 68 | .icon-muted { color: @iconMuted; }
 69 | .icon-light { color: @iconLight; }
 70 | .icon-dark { color: @iconDark; }
 71 | 
 72 | // Icon Borders
 73 | // -------------------------
 74 | 
 75 | .icon-border {
 76 |   border: solid 1px @borderColor;
 77 |   padding: .2em .25em .15em;
 78 |   .border-radius(3px);
 79 | }
 80 | 
 81 | // Icon Sizes
 82 | // -------------------------
 83 | 
 84 | .icon-2x {
 85 |   font-size: 2em;
 86 |   &.icon-border {
 87 |     border-width: 2px;
 88 |     .border-radius(4px);
 89 |   }
 90 | }
 91 | .icon-3x {
 92 |   font-size: 3em;
 93 |   &.icon-border {
 94 |     border-width: 3px;
 95 |     .border-radius(5px);
 96 |   }
 97 | }
 98 | .icon-4x {
 99 |   font-size: 4em;
100 |   &.icon-border {
101 |     border-width: 4px;
102 |     .border-radius(6px);
103 |   }
104 | }
105 | 
106 | .icon-5x {
107 |   font-size: 5em;
108 |   &.icon-border {
109 |     border-width: 5px;
110 |     .border-radius(7px);
111 |   }
112 | }
113 | 
114 | 
115 | // Floats & Margins
116 | // -------------------------
117 | 
118 | // Quick floats
119 | .pull-right { float: right; }
120 | .pull-left { float: left; }
121 | 
122 | [class^="icon-"],
123 | [class*=" icon-"] {
124 |   &.pull-left {
125 |     margin-right: .3em;
126 |   }
127 |   &.pull-right {
128 |     margin-left: .3em;
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/less/extras.less:
--------------------------------------------------------------------------------
 1 | /* EXTRAS
 2 |  * -------------------------- */
 3 | 
 4 | /* Stacked and layered icon */
 5 | .icon-stack();
 6 | 
 7 | /* Animated rotating icon */
 8 | .icon-spin {
 9 |   display: inline-block;
10 |   -moz-animation: spin 2s infinite linear;
11 |   -o-animation: spin 2s infinite linear;
12 |   -webkit-animation: spin 2s infinite linear;
13 |   animation: spin 2s infinite linear;
14 | }
15 | a .icon-spin {
16 |   display: inline-block;
17 |   text-decoration: none;
18 | }
19 | 
20 | @-moz-keyframes spin {
21 |   0% { -moz-transform: rotate(0deg); }
22 |   100% { -moz-transform: rotate(359deg); }
23 | }
24 | @-webkit-keyframes spin {
25 |   0% { -webkit-transform: rotate(0deg); }
26 |   100% { -webkit-transform: rotate(359deg); }
27 | }
28 | @-o-keyframes spin {
29 |   0% { -o-transform: rotate(0deg); }
30 |   100% { -o-transform: rotate(359deg); }
31 | }
32 | @-ms-keyframes spin {
33 |   0% { -ms-transform: rotate(0deg); }
34 |   100% { -ms-transform: rotate(359deg); }
35 | }
36 | @keyframes spin {
37 |   0% { transform: rotate(0deg); }
38 |   100% { transform: rotate(359deg); }
39 | }
40 | 
41 | /* Icon rotations and mirroring */
42 | .icon-rotate-90:before {
43 |   -webkit-transform: rotate(90deg);
44 |   -moz-transform: rotate(90deg);
45 |   -ms-transform: rotate(90deg);
46 |   -o-transform: rotate(90deg);
47 |   transform: rotate(90deg);
48 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
49 | }
50 | 
51 | .icon-rotate-180:before {
52 |   -webkit-transform: rotate(180deg);
53 |   -moz-transform: rotate(180deg);
54 |   -ms-transform: rotate(180deg);
55 |   -o-transform: rotate(180deg);
56 |   transform: rotate(180deg);
57 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
58 | }
59 | 
60 | .icon-rotate-270:before {
61 |   -webkit-transform: rotate(270deg);
62 |   -moz-transform: rotate(270deg);
63 |   -ms-transform: rotate(270deg);
64 |   -o-transform: rotate(270deg);
65 |   transform: rotate(270deg);
66 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
67 | }
68 | 
69 | .icon-flip-horizontal:before {
70 |   -webkit-transform: scale(-1, 1);
71 |   -moz-transform: scale(-1, 1);
72 |   -ms-transform: scale(-1, 1);
73 |   -o-transform: scale(-1, 1);
74 |   transform: scale(-1, 1);
75 | }
76 | 
77 | .icon-flip-vertical:before {
78 |   -webkit-transform: scale(1, -1);
79 |   -moz-transform: scale(1, -1);
80 |   -ms-transform: scale(1, -1);
81 |   -o-transform: scale(1, -1);
82 |   transform: scale(1, -1);
83 | }
84 | 
85 | /* ensure rotation occurs inside anchor tags */
86 | a {
87 |   .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
88 |     &:before { display: inline-block; }
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/less/font-awesome.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  *  Font Awesome 3.2.0
 3 |  *  the iconic font designed for Bootstrap
 4 |  *  ------------------------------------------------------------------------------
 5 |  *  The full suite of pictographic icons, examples, and documentation can be
 6 |  *  found at http://fontawesome.io.  Stay up to date on Twitter at
 7 |  *  http://twitter.com/fontawesome.
 8 |  *
 9 |  *  License
10 |  *  ------------------------------------------------------------------------------
11 |  *  - The Font Awesome font is licensed under SIL OFL 1.1 -
12 |  *    http://scripts.sil.org/OFL
13 |  *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
14 |  *    http://opensource.org/licenses/mit-license.html
15 |  *  - Font Awesome documentation licensed under CC BY 3.0 -
16 |  *    http://creativecommons.org/licenses/by/3.0/
17 |  *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
18 |  *    "Font Awesome by Dave Gandy - http://fontawesome.io"
19 |  *
20 |  *  Author - Dave Gandy
21 |  *  ------------------------------------------------------------------------------
22 |  *  Email: dave@fontawesome.io
23 |  *  Twitter: http://twitter.com/byscuits
24 |  *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
25 |  */
26 | 
27 | @import "variables.less";
28 | @import "mixins.less";
29 | @import "path.less";
30 | @import "core.less";
31 | @import "bootstrap.less";
32 | @import "extras.less";
33 | @import "icons.less";
34 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/less/icons.less:
--------------------------------------------------------------------------------
  1 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
  2 |    readers do not read off random characters that represent icons */
  3 | 
  4 | .icon-glass:before { content: @glass; }
  5 | .icon-music:before { content: @music; }
  6 | .icon-search:before { content: @search; }
  7 | .icon-envelope-alt:before { content: @envelope-alt; }
  8 | .icon-heart:before { content: @heart; }
  9 | .icon-star:before { content: @star; }
 10 | .icon-star-empty:before { content: @star-empty; }
 11 | .icon-user:before { content: @user; }
 12 | .icon-film:before { content: @film; }
 13 | .icon-th-large:before { content: @th-large; }
 14 | .icon-th:before { content: @th; }
 15 | .icon-th-list:before { content: @th-list; }
 16 | .icon-ok:before { content: @ok; }
 17 | .icon-remove:before { content: @remove; }
 18 | .icon-zoom-in:before { content: @zoom-in; }
 19 | .icon-zoom-out:before { content: @zoom-out; }
 20 | .icon-power-off:before,
 21 | .icon-off:before { content: @off; }
 22 | .icon-signal:before { content: @signal; }
 23 | .icon-cog:before { content: @cog; }
 24 | .icon-trash:before { content: @trash; }
 25 | .icon-home:before { content: @home; }
 26 | .icon-file-alt:before { content: @file-alt; }
 27 | .icon-time:before { content: @time; }
 28 | .icon-road:before { content: @road; }
 29 | .icon-download-alt:before { content: @download-alt; }
 30 | .icon-download:before { content: @download; }
 31 | .icon-upload:before { content: @upload; }
 32 | .icon-inbox:before { content: @inbox; }
 33 | .icon-play-circle:before { content: @play-circle; }
 34 | .icon-rotate-right:before,
 35 | .icon-repeat:before { content: @repeat; }
 36 | .icon-refresh:before { content: @refresh; }
 37 | .icon-list-alt:before { content: @list-alt; }
 38 | .icon-lock:before { content: @lock; }
 39 | .icon-flag:before { content: @flag; }
 40 | .icon-headphones:before { content: @headphones; }
 41 | .icon-volume-off:before { content: @volume-off; }
 42 | .icon-volume-down:before { content: @volume-down; }
 43 | .icon-volume-up:before { content: @volume-up; }
 44 | .icon-qrcode:before { content: @qrcode; }
 45 | .icon-barcode:before { content: @barcode; }
 46 | .icon-tag:before { content: @tag; }
 47 | .icon-tags:before { content: @tags; }
 48 | .icon-book:before { content: @book; }
 49 | .icon-bookmark:before { content: @bookmark; }
 50 | .icon-print:before { content: @print; }
 51 | .icon-camera:before { content: @camera; }
 52 | .icon-font:before { content: @font; }
 53 | .icon-bold:before { content: @bold; }
 54 | .icon-italic:before { content: @italic; }
 55 | .icon-text-height:before { content: @text-height; }
 56 | .icon-text-width:before { content: @text-width; }
 57 | .icon-align-left:before { content: @align-left; }
 58 | .icon-align-center:before { content: @align-center; }
 59 | .icon-align-right:before { content: @align-right; }
 60 | .icon-align-justify:before { content: @align-justify; }
 61 | .icon-list:before { content: @list; }
 62 | .icon-indent-left:before { content: @indent-left; }
 63 | .icon-indent-right:before { content: @indent-right; }
 64 | .icon-facetime-video:before { content: @facetime-video; }
 65 | .icon-picture:before { content: @picture; }
 66 | .icon-pencil:before { content: @pencil; }
 67 | .icon-map-marker:before { content: @map-marker; }
 68 | .icon-adjust:before { content: @adjust; }
 69 | .icon-tint:before { content: @tint; }
 70 | .icon-edit:before { content: @edit; }
 71 | .icon-share:before { content: @share; }
 72 | .icon-check:before { content: @check; }
 73 | .icon-move:before { content: @move; }
 74 | .icon-step-backward:before { content: @step-backward; }
 75 | .icon-fast-backward:before { content: @fast-backward; }
 76 | .icon-backward:before { content: @backward; }
 77 | .icon-play:before { content: @play; }
 78 | .icon-pause:before { content: @pause; }
 79 | .icon-stop:before { content: @stop; }
 80 | .icon-forward:before { content: @forward; }
 81 | .icon-fast-forward:before { content: @fast-forward; }
 82 | .icon-step-forward:before { content: @step-forward; }
 83 | .icon-eject:before { content: @eject; }
 84 | .icon-chevron-left:before { content: @chevron-left; }
 85 | .icon-chevron-right:before { content: @chevron-right; }
 86 | .icon-plus-sign:before { content: @plus-sign; }
 87 | .icon-minus-sign:before { content: @minus-sign; }
 88 | .icon-remove-sign:before { content: @remove-sign; }
 89 | .icon-ok-sign:before { content: @ok-sign; }
 90 | .icon-question-sign:before { content: @question-sign; }
 91 | .icon-info-sign:before { content: @info-sign; }
 92 | .icon-screenshot:before { content: @screenshot; }
 93 | .icon-remove-circle:before { content: @remove-circle; }
 94 | .icon-ok-circle:before { content: @ok-circle; }
 95 | .icon-ban-circle:before { content: @ban-circle; }
 96 | .icon-arrow-left:before { content: @arrow-left; }
 97 | .icon-arrow-right:before { content: @arrow-right; }
 98 | .icon-arrow-up:before { content: @arrow-up; }
 99 | .icon-arrow-down:before { content: @arrow-down; }
100 | .icon-mail-forward:before,
101 | .icon-share-alt:before { content: @share-alt; }
102 | .icon-resize-full:before { content: @resize-full; }
103 | .icon-resize-small:before { content: @resize-small; }
104 | .icon-plus:before { content: @plus; }
105 | .icon-minus:before { content: @minus; }
106 | .icon-asterisk:before { content: @asterisk; }
107 | .icon-exclamation-sign:before { content: @exclamation-sign; }
108 | .icon-gift:before { content: @gift; }
109 | .icon-leaf:before { content: @leaf; }
110 | .icon-fire:before { content: @fire; }
111 | .icon-eye-open:before { content: @eye-open; }
112 | .icon-eye-close:before { content: @eye-close; }
113 | .icon-warning-sign:before { content: @warning-sign; }
114 | .icon-plane:before { content: @plane; }
115 | .icon-calendar:before { content: @calendar; }
116 | .icon-random:before { content: @random; }
117 | .icon-comment:before { content: @comment; }
118 | .icon-magnet:before { content: @magnet; }
119 | .icon-chevron-up:before { content: @chevron-up; }
120 | .icon-chevron-down:before { content: @chevron-down; }
121 | .icon-retweet:before { content: @retweet; }
122 | .icon-shopping-cart:before { content: @shopping-cart; }
123 | .icon-folder-close:before { content: @folder-close; }
124 | .icon-folder-open:before { content: @folder-open; }
125 | .icon-resize-vertical:before { content: @resize-vertical; }
126 | .icon-resize-horizontal:before { content: @resize-horizontal; }
127 | .icon-bar-chart:before { content: @bar-chart; }
128 | .icon-twitter-sign:before { content: @twitter-sign; }
129 | .icon-facebook-sign:before { content: @facebook-sign; }
130 | .icon-camera-retro:before { content: @camera-retro; }
131 | .icon-key:before { content: @key; }
132 | .icon-cogs:before { content: @cogs; }
133 | .icon-comments:before { content: @comments; }
134 | .icon-thumbs-up-alt:before { content: @thumbs-up-alt; }
135 | .icon-thumbs-down-alt:before { content: @thumbs-down-alt; }
136 | .icon-star-half:before { content: @star-half; }
137 | .icon-heart-empty:before { content: @heart-empty; }
138 | .icon-signout:before { content: @signout; }
139 | .icon-linkedin-sign:before { content: @linkedin-sign; }
140 | .icon-pushpin:before { content: @pushpin; }
141 | .icon-external-link:before { content: @external-link; }
142 | .icon-signin:before { content: @signin; }
143 | .icon-trophy:before { content: @trophy; }
144 | .icon-github-sign:before { content: @github-sign; }
145 | .icon-upload-alt:before { content: @upload-alt; }
146 | .icon-lemon:before { content: @lemon; }
147 | .icon-phone:before { content: @phone; }
148 | .icon-unchecked:before,
149 | .icon-check-empty:before { content: @check-empty; }
150 | .icon-bookmark-empty:before { content: @bookmark-empty; }
151 | .icon-phone-sign:before { content: @phone-sign; }
152 | .icon-twitter:before { content: @twitter; }
153 | .icon-facebook:before { content: @facebook; }
154 | .icon-github:before { content: @github; }
155 | .icon-unlock:before { content: @unlock; }
156 | .icon-credit-card:before { content: @credit-card; }
157 | .icon-rss:before { content: @rss; }
158 | .icon-hdd:before { content: @hdd; }
159 | .icon-bullhorn:before { content: @bullhorn; }
160 | .icon-bell:before { content: @bell; }
161 | .icon-certificate:before { content: @certificate; }
162 | .icon-hand-right:before { content: @hand-right; }
163 | .icon-hand-left:before { content: @hand-left; }
164 | .icon-hand-up:before { content: @hand-up; }
165 | .icon-hand-down:before { content: @hand-down; }
166 | .icon-circle-arrow-left:before { content: @circle-arrow-left; }
167 | .icon-circle-arrow-right:before { content: @circle-arrow-right; }
168 | .icon-circle-arrow-up:before { content: @circle-arrow-up; }
169 | .icon-circle-arrow-down:before { content: @circle-arrow-down; }
170 | .icon-globe:before { content: @globe; }
171 | .icon-wrench:before { content: @wrench; }
172 | .icon-tasks:before { content: @tasks; }
173 | .icon-filter:before { content: @filter; }
174 | .icon-briefcase:before { content: @briefcase; }
175 | .icon-fullscreen:before { content: @fullscreen; }
176 | .icon-group:before { content: @group; }
177 | .icon-link:before { content: @link; }
178 | .icon-cloud:before { content: @cloud; }
179 | .icon-beaker:before { content: @beaker; }
180 | .icon-cut:before { content: @cut; }
181 | .icon-copy:before { content: @copy; }
182 | .icon-paperclip:before,
183 | .icon-paper-clip:before { content: @paper-clip; }
184 | .icon-save:before { content: @save; }
185 | .icon-sign-blank:before { content: @sign-blank; }
186 | .icon-reorder:before { content: @reorder; }
187 | .icon-list-ul:before { content: @list-ul; }
188 | .icon-list-ol:before { content: @list-ol; }
189 | .icon-strikethrough:before { content: @strikethrough; }
190 | .icon-underline:before { content: @underline; }
191 | .icon-table:before { content: @table; }
192 | .icon-magic:before { content: @magic; }
193 | .icon-truck:before { content: @truck; }
194 | .icon-pinterest:before { content: @pinterest; }
195 | .icon-pinterest-sign:before { content: @pinterest-sign; }
196 | .icon-google-plus-sign:before { content: @google-plus-sign; }
197 | .icon-google-plus:before { content: @google-plus; }
198 | .icon-money:before { content: @money; }
199 | .icon-caret-down:before { content: @caret-down; }
200 | .icon-caret-up:before { content: @caret-up; }
201 | .icon-caret-left:before { content: @caret-left; }
202 | .icon-caret-right:before { content: @caret-right; }
203 | .icon-columns:before { content: @columns; }
204 | .icon-sort:before { content: @sort; }
205 | .icon-sort-down:before { content: @sort-down; }
206 | .icon-sort-up:before { content: @sort-up; }
207 | .icon-envelope:before { content: @envelope; }
208 | .icon-linkedin:before { content: @linkedin; }
209 | .icon-rotate-left:before,
210 | .icon-undo:before { content: @undo; }
211 | .icon-legal:before { content: @legal; }
212 | .icon-dashboard:before { content: @dashboard; }
213 | .icon-comment-alt:before { content: @comment-alt; }
214 | .icon-comments-alt:before { content: @comments-alt; }
215 | .icon-bolt:before { content: @bolt; }
216 | .icon-sitemap:before { content: @sitemap; }
217 | .icon-umbrella:before { content: @umbrella; }
218 | .icon-paste:before { content: @paste; }
219 | .icon-lightbulb:before { content: @lightbulb; }
220 | .icon-exchange:before { content: @exchange; }
221 | .icon-cloud-download:before { content: @cloud-download; }
222 | .icon-cloud-upload:before { content: @cloud-upload; }
223 | .icon-user-md:before { content: @user-md; }
224 | .icon-stethoscope:before { content: @stethoscope; }
225 | .icon-suitcase:before { content: @suitcase; }
226 | .icon-bell-alt:before { content: @bell-alt; }
227 | .icon-coffee:before { content: @coffee; }
228 | .icon-food:before { content: @food; }
229 | .icon-file-text-alt:before { content: @file-text-alt; }
230 | .icon-building:before { content: @building; }
231 | .icon-hospital:before { content: @hospital; }
232 | .icon-ambulance:before { content: @ambulance; }
233 | .icon-medkit:before { content: @medkit; }
234 | .icon-fighter-jet:before { content: @fighter-jet; }
235 | .icon-beer:before { content: @beer; }
236 | .icon-h-sign:before { content: @h-sign; }
237 | .icon-plus-sign-alt:before { content: @plus-sign-alt; }
238 | .icon-double-angle-left:before { content: @double-angle-left; }
239 | .icon-double-angle-right:before { content: @double-angle-right; }
240 | .icon-double-angle-up:before { content: @double-angle-up; }
241 | .icon-double-angle-down:before { content: @double-angle-down; }
242 | .icon-angle-left:before { content: @angle-left; }
243 | .icon-angle-right:before { content: @angle-right; }
244 | .icon-angle-up:before { content: @angle-up; }
245 | .icon-angle-down:before { content: @angle-down; }
246 | .icon-desktop:before { content: @desktop; }
247 | .icon-laptop:before { content: @laptop; }
248 | .icon-tablet:before { content: @tablet; }
249 | .icon-mobile-phone:before { content: @mobile-phone; }
250 | .icon-circle-blank:before { content: @circle-blank; }
251 | .icon-quote-left:before { content: @quote-left; }
252 | .icon-quote-right:before { content: @quote-right; }
253 | .icon-spinner:before { content: @spinner; }
254 | .icon-circle:before { content: @circle; }
255 | .icon-mail-reply:before,
256 | .icon-reply:before { content: @reply; }
257 | .icon-github-alt:before { content: @github-alt; }
258 | .icon-folder-close-alt:before { content: @folder-close-alt; }
259 | .icon-folder-open-alt:before { content: @folder-open-alt; }
260 | .icon-expand-alt:before { content: @expand-alt; }
261 | .icon-collapse-alt:before { content: @collapse-alt; }
262 | .icon-smile:before { content: @smile; }
263 | .icon-frown:before { content: @frown; }
264 | .icon-meh:before { content: @meh; }
265 | .icon-gamepad:before { content: @gamepad; }
266 | .icon-keyboard:before { content: @keyboard; }
267 | .icon-flag-alt:before { content: @flag-alt; }
268 | .icon-flag-checkered:before { content: @flag-checkered; }
269 | .icon-terminal:before { content: @terminal; }
270 | .icon-code:before { content: @code; }
271 | .icon-reply-all:before { content: @reply-all; }
272 | .icon-mail-reply-all:before { content: @mail-reply-all; }
273 | .icon-star-half-full:before,
274 | .icon-star-half-empty:before { content: @star-half-empty; }
275 | .icon-location-arrow:before { content: @location-arrow; }
276 | .icon-crop:before { content: @crop; }
277 | .icon-code-fork:before { content: @code-fork; }
278 | .icon-unlink:before { content: @unlink; }
279 | .icon-question:before { content: @question; }
280 | .icon-info:before { content: @info; }
281 | .icon-exclamation:before { content: @exclamation; }
282 | .icon-superscript:before { content: @superscript; }
283 | .icon-subscript:before { content: @subscript; }
284 | .icon-eraser:before { content: @eraser; }
285 | .icon-puzzle-piece:before { content: @puzzle-piece; }
286 | .icon-microphone:before { content: @microphone; }
287 | .icon-microphone-off:before { content: @microphone-off; }
288 | .icon-shield:before { content: @shield; }
289 | .icon-calendar-empty:before { content: @calendar-empty; }
290 | .icon-fire-extinguisher:before { content: @fire-extinguisher; }
291 | .icon-rocket:before { content: @rocket; }
292 | .icon-maxcdn:before { content: @maxcdn; }
293 | .icon-chevron-sign-left:before { content: @chevron-sign-left; }
294 | .icon-chevron-sign-right:before { content: @chevron-sign-right; }
295 | .icon-chevron-sign-up:before { content: @chevron-sign-up; }
296 | .icon-chevron-sign-down:before { content: @chevron-sign-down; }
297 | .icon-html5:before { content: @html5; }
298 | .icon-css3:before { content: @css3; }
299 | .icon-anchor:before { content: @anchor; }
300 | .icon-unlock-alt:before { content: @unlock-alt; }
301 | .icon-bullseye:before { content: @bullseye; }
302 | .icon-ellipsis-horizontal:before { content: @ellipsis-horizontal; }
303 | .icon-ellipsis-vertical:before { content: @ellipsis-vertical; }
304 | .icon-rss-sign:before { content: @rss-sign; }
305 | .icon-play-sign:before { content: @play-sign; }
306 | .icon-ticket:before { content: @ticket; }
307 | .icon-minus-sign-alt:before { content: @minus-sign-alt; }
308 | .icon-check-minus:before { content: @check-minus; }
309 | .icon-level-up:before { content: @level-up; }
310 | .icon-level-down:before { content: @level-down; }
311 | .icon-check-sign:before { content: @check-sign; }
312 | .icon-edit-sign:before { content: @edit-sign; }
313 | .icon-external-link-sign:before { content: @external-link-sign; }
314 | .icon-share-sign:before { content: @share-sign; }
315 | .icon-compass:before { content: @compass; }
316 | .icon-collapse:before { content: @collapse; }
317 | .icon-collapse-top:before { content: @collapse-top; }
318 | .icon-expand:before { content: @expand; }
319 | .icon-euro:before,
320 | .icon-eur:before { content: @eur; }
321 | .icon-gbp:before { content: @gbp; }
322 | .icon-dollar:before,
323 | .icon-usd:before { content: @usd; }
324 | .icon-rupee:before,
325 | .icon-inr:before { content: @inr; }
326 | .icon-yen:before,
327 | .icon-jpy:before { content: @jpy; }
328 | .icon-renminbi:before,
329 | .icon-cny:before { content: @cny; }
330 | .icon-won:before,
331 | .icon-krw:before { content: @krw; }
332 | .icon-bitcoin:before,
333 | .icon-btc:before { content: @btc; }
334 | .icon-file:before { content: @file; }
335 | .icon-file-text:before { content: @file-text; }
336 | .icon-sort-by-alphabet:before { content: @sort-by-alphabet; }
337 | .icon-sort-by-alphabet-alt:before { content: @sort-by-alphabet-alt; }
338 | .icon-sort-by-attributes:before { content: @sort-by-attributes; }
339 | .icon-sort-by-attributes-alt:before { content: @sort-by-attributes-alt; }
340 | .icon-sort-by-order:before { content: @sort-by-order; }
341 | .icon-sort-by-order-alt:before { content: @sort-by-order-alt; }
342 | .icon-thumbs-up:before { content: @thumbs-up; }
343 | .icon-thumbs-down:before { content: @thumbs-down; }
344 | .icon-youtube-sign:before { content: @youtube-sign; }
345 | .icon-youtube:before { content: @youtube; }
346 | .icon-xing:before { content: @xing; }
347 | .icon-xing-sign:before { content: @xing-sign; }
348 | .icon-youtube-play:before { content: @youtube-play; }
349 | .icon-dropbox:before { content: @dropbox; }
350 | .icon-stackexchange:before { content: @stackexchange; }
351 | .icon-instagram:before { content: @instagram; }
352 | .icon-flickr:before { content: @flickr; }
353 | .icon-adn:before { content: @adn; }
354 | .icon-bitbucket:before { content: @bitbucket; }
355 | .icon-bitbucket-sign:before { content: @bitbucket-sign; }
356 | .icon-tumblr:before { content: @tumblr; }
357 | .icon-tumblr-sign:before { content: @tumblr-sign; }
358 | .icon-long-arrow-down:before { content: @long-arrow-down; }
359 | .icon-long-arrow-up:before { content: @long-arrow-up; }
360 | .icon-long-arrow-left:before { content: @long-arrow-left; }
361 | .icon-long-arrow-right:before { content: @long-arrow-right; }
362 | .icon-apple:before { content: @apple; }
363 | .icon-windows:before { content: @windows; }
364 | .icon-android:before { content: @android; }
365 | .icon-linux:before { content: @linux; }
366 | .icon-dribble:before { content: @dribble; }
367 | .icon-skype:before { content: @skype; }
368 | .icon-foursquare:before { content: @foursquare; }
369 | .icon-trello:before { content: @trello; }
370 | .icon-female:before { content: @female; }
371 | .icon-male:before { content: @male; }
372 | .icon-gittip:before { content: @gittip; }
373 | .icon-sun:before { content: @sun; }
374 | .icon-moon:before { content: @moon; }
375 | .icon-archive:before { content: @archive; }
376 | .icon-bug:before { content: @bug; }
377 | .icon-vk:before { content: @vk; }
378 | .icon-weibo:before { content: @weibo; }
379 | .icon-renren:before { content: @renren; }
380 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/less/mixins.less:
--------------------------------------------------------------------------------
 1 | // Mixins
 2 | // --------------------------
 3 | 
 4 | .icon(@icon) {
 5 |   .icon-FontAwesome();
 6 |   content: @icon;
 7 | }
 8 | 
 9 | .icon-FontAwesome() {
10 |   font-family: FontAwesome;
11 |   font-weight: normal;
12 |   font-style: normal;
13 |   text-decoration: inherit;
14 |   -webkit-font-smoothing: antialiased;
15 |   *margin-right: .3em; // fixes ie7 issues
16 | }
17 | 
18 | .border-radius(@radius) {
19 |   -webkit-border-radius: @radius;
20 |   -moz-border-radius: @radius;
21 |   border-radius: @radius;
22 | }
23 | 
24 | .icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) {
25 |   .icon-stack {
26 |     position: relative;
27 |     display: inline-block;
28 |     width: @width;
29 |     height: @height;
30 |     line-height: @width;
31 |     vertical-align: -35%;
32 |     [class^="icon-"],
33 |     [class*=" icon-"] {
34 |       display: block;
35 |       text-align: center;
36 |       position: absolute;
37 |       width: 100%;
38 |       height: 100%;
39 |       font-size: @top-font-size;
40 |       line-height: inherit;
41 |       *line-height: @height;
42 |     }
43 |     .icon-stack-base {
44 |       font-size: @base-font-size;
45 |       *line-height: @height / @base-font-size;
46 |     }
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/less/path.less:
--------------------------------------------------------------------------------
 1 | /* FONT PATH
 2 |  * -------------------------- */
 3 | 
 4 | @font-face {
 5 |   font-family: 'FontAwesome';
 6 |   src: url('@{FontAwesomePath}/fontawesome-webfont.eot?v=@{FontAwesomeVersion}');
 7 |   src: url('@{FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=@{FontAwesomeVersion}') format('embedded-opentype'),
 8 |     url('@{FontAwesomePath}/fontawesome-webfont.woff?v=@{FontAwesomeVersion}') format('woff'),
 9 |     url('@{FontAwesomePath}/fontawesome-webfont.ttf?v=@{FontAwesomeVersion}') format('truetype'),
10 |     url('@{FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=@{FontAwesomeVersion}') format('svg');
11 | //  src: url('@{FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts
12 |   font-weight: normal;
13 |   font-style: normal;
14 | }
15 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/less/variables.less:
--------------------------------------------------------------------------------
  1 | // Variables
  2 | // --------------------------
  3 | 
  4 | @FontAwesomePath:    "../font";
  5 | //@FontAwesomePath:    "//netdna.bootstrapcdn.com/font-awesome/3.2.0/font"; // for referencing Bootstrap CDN font files directly
  6 | @FontAwesomeVersion: "3.2.0";
  7 | @borderColor:        #eee;
  8 | @iconMuted:          #eee;
  9 | @iconLight:          #fff;
 10 | @iconDark:           #333;
 11 | @icons-li-width:     30/14em;
 12 | 
 13 | 
 14 |   @glass: "\f000";
 15 | 
 16 |   @music: "\f001";
 17 | 
 18 |   @search: "\f002";
 19 | 
 20 |   @envelope-alt: "\f003";
 21 | 
 22 |   @heart: "\f004";
 23 | 
 24 |   @star: "\f005";
 25 | 
 26 |   @star-empty: "\f006";
 27 | 
 28 |   @user: "\f007";
 29 | 
 30 |   @film: "\f008";
 31 | 
 32 |   @th-large: "\f009";
 33 | 
 34 |   @th: "\f00a";
 35 | 
 36 |   @th-list: "\f00b";
 37 | 
 38 |   @ok: "\f00c";
 39 | 
 40 |   @remove: "\f00d";
 41 | 
 42 |   @zoom-in: "\f00e";
 43 | 
 44 |   @zoom-out: "\f010";
 45 | 
 46 |   @off: "\f011";
 47 | 
 48 |   @signal: "\f012";
 49 | 
 50 |   @cog: "\f013";
 51 | 
 52 |   @trash: "\f014";
 53 | 
 54 |   @home: "\f015";
 55 | 
 56 |   @file-alt: "\f016";
 57 | 
 58 |   @time: "\f017";
 59 | 
 60 |   @road: "\f018";
 61 | 
 62 |   @download-alt: "\f019";
 63 | 
 64 |   @download: "\f01a";
 65 | 
 66 |   @upload: "\f01b";
 67 | 
 68 |   @inbox: "\f01c";
 69 | 
 70 |   @play-circle: "\f01d";
 71 | 
 72 |   @repeat: "\f01e";
 73 | 
 74 |   @refresh: "\f021";
 75 | 
 76 |   @list-alt: "\f022";
 77 | 
 78 |   @lock: "\f023";
 79 | 
 80 |   @flag: "\f024";
 81 | 
 82 |   @headphones: "\f025";
 83 | 
 84 |   @volume-off: "\f026";
 85 | 
 86 |   @volume-down: "\f027";
 87 | 
 88 |   @volume-up: "\f028";
 89 | 
 90 |   @qrcode: "\f029";
 91 | 
 92 |   @barcode: "\f02a";
 93 | 
 94 |   @tag: "\f02b";
 95 | 
 96 |   @tags: "\f02c";
 97 | 
 98 |   @book: "\f02d";
 99 | 
100 |   @bookmark: "\f02e";
101 | 
102 |   @print: "\f02f";
103 | 
104 |   @camera: "\f030";
105 | 
106 |   @font: "\f031";
107 | 
108 |   @bold: "\f032";
109 | 
110 |   @italic: "\f033";
111 | 
112 |   @text-height: "\f034";
113 | 
114 |   @text-width: "\f035";
115 | 
116 |   @align-left: "\f036";
117 | 
118 |   @align-center: "\f037";
119 | 
120 |   @align-right: "\f038";
121 | 
122 |   @align-justify: "\f039";
123 | 
124 |   @list: "\f03a";
125 | 
126 |   @indent-left: "\f03b";
127 | 
128 |   @indent-right: "\f03c";
129 | 
130 |   @facetime-video: "\f03d";
131 | 
132 |   @picture: "\f03e";
133 | 
134 |   @pencil: "\f040";
135 | 
136 |   @map-marker: "\f041";
137 | 
138 |   @adjust: "\f042";
139 | 
140 |   @tint: "\f043";
141 | 
142 |   @edit: "\f044";
143 | 
144 |   @share: "\f045";
145 | 
146 |   @check: "\f046";
147 | 
148 |   @move: "\f047";
149 | 
150 |   @step-backward: "\f048";
151 | 
152 |   @fast-backward: "\f049";
153 | 
154 |   @backward: "\f04a";
155 | 
156 |   @play: "\f04b";
157 | 
158 |   @pause: "\f04c";
159 | 
160 |   @stop: "\f04d";
161 | 
162 |   @forward: "\f04e";
163 | 
164 |   @fast-forward: "\f050";
165 | 
166 |   @step-forward: "\f051";
167 | 
168 |   @eject: "\f052";
169 | 
170 |   @chevron-left: "\f053";
171 | 
172 |   @chevron-right: "\f054";
173 | 
174 |   @plus-sign: "\f055";
175 | 
176 |   @minus-sign: "\f056";
177 | 
178 |   @remove-sign: "\f057";
179 | 
180 |   @ok-sign: "\f058";
181 | 
182 |   @question-sign: "\f059";
183 | 
184 |   @info-sign: "\f05a";
185 | 
186 |   @screenshot: "\f05b";
187 | 
188 |   @remove-circle: "\f05c";
189 | 
190 |   @ok-circle: "\f05d";
191 | 
192 |   @ban-circle: "\f05e";
193 | 
194 |   @arrow-left: "\f060";
195 | 
196 |   @arrow-right: "\f061";
197 | 
198 |   @arrow-up: "\f062";
199 | 
200 |   @arrow-down: "\f063";
201 | 
202 |   @share-alt: "\f064";
203 | 
204 |   @resize-full: "\f065";
205 | 
206 |   @resize-small: "\f066";
207 | 
208 |   @plus: "\f067";
209 | 
210 |   @minus: "\f068";
211 | 
212 |   @asterisk: "\f069";
213 | 
214 |   @exclamation-sign: "\f06a";
215 | 
216 |   @gift: "\f06b";
217 | 
218 |   @leaf: "\f06c";
219 | 
220 |   @fire: "\f06d";
221 | 
222 |   @eye-open: "\f06e";
223 | 
224 |   @eye-close: "\f070";
225 | 
226 |   @warning-sign: "\f071";
227 | 
228 |   @plane: "\f072";
229 | 
230 |   @calendar: "\f073";
231 | 
232 |   @random: "\f074";
233 | 
234 |   @comment: "\f075";
235 | 
236 |   @magnet: "\f076";
237 | 
238 |   @chevron-up: "\f077";
239 | 
240 |   @chevron-down: "\f078";
241 | 
242 |   @retweet: "\f079";
243 | 
244 |   @shopping-cart: "\f07a";
245 | 
246 |   @folder-close: "\f07b";
247 | 
248 |   @folder-open: "\f07c";
249 | 
250 |   @resize-vertical: "\f07d";
251 | 
252 |   @resize-horizontal: "\f07e";
253 | 
254 |   @bar-chart: "\f080";
255 | 
256 |   @twitter-sign: "\f081";
257 | 
258 |   @facebook-sign: "\f082";
259 | 
260 |   @camera-retro: "\f083";
261 | 
262 |   @key: "\f084";
263 | 
264 |   @cogs: "\f085";
265 | 
266 |   @comments: "\f086";
267 | 
268 |   @thumbs-up-alt: "\f087";
269 | 
270 |   @thumbs-down-alt: "\f088";
271 | 
272 |   @star-half: "\f089";
273 | 
274 |   @heart-empty: "\f08a";
275 | 
276 |   @signout: "\f08b";
277 | 
278 |   @linkedin-sign: "\f08c";
279 | 
280 |   @pushpin: "\f08d";
281 | 
282 |   @external-link: "\f08e";
283 | 
284 |   @signin: "\f090";
285 | 
286 |   @trophy: "\f091";
287 | 
288 |   @github-sign: "\f092";
289 | 
290 |   @upload-alt: "\f093";
291 | 
292 |   @lemon: "\f094";
293 | 
294 |   @phone: "\f095";
295 | 
296 |   @check-empty: "\f096";
297 | 
298 |   @bookmark-empty: "\f097";
299 | 
300 |   @phone-sign: "\f098";
301 | 
302 |   @twitter: "\f099";
303 | 
304 |   @facebook: "\f09a";
305 | 
306 |   @github: "\f09b";
307 | 
308 |   @unlock: "\f09c";
309 | 
310 |   @credit-card: "\f09d";
311 | 
312 |   @rss: "\f09e";
313 | 
314 |   @hdd: "\f0a0";
315 | 
316 |   @bullhorn: "\f0a1";
317 | 
318 |   @bell: "\f0a2";
319 | 
320 |   @certificate: "\f0a3";
321 | 
322 |   @hand-right: "\f0a4";
323 | 
324 |   @hand-left: "\f0a5";
325 | 
326 |   @hand-up: "\f0a6";
327 | 
328 |   @hand-down: "\f0a7";
329 | 
330 |   @circle-arrow-left: "\f0a8";
331 | 
332 |   @circle-arrow-right: "\f0a9";
333 | 
334 |   @circle-arrow-up: "\f0aa";
335 | 
336 |   @circle-arrow-down: "\f0ab";
337 | 
338 |   @globe: "\f0ac";
339 | 
340 |   @wrench: "\f0ad";
341 | 
342 |   @tasks: "\f0ae";
343 | 
344 |   @filter: "\f0b0";
345 | 
346 |   @briefcase: "\f0b1";
347 | 
348 |   @fullscreen: "\f0b2";
349 | 
350 |   @group: "\f0c0";
351 | 
352 |   @link: "\f0c1";
353 | 
354 |   @cloud: "\f0c2";
355 | 
356 |   @beaker: "\f0c3";
357 | 
358 |   @cut: "\f0c4";
359 | 
360 |   @copy: "\f0c5";
361 | 
362 |   @paper-clip: "\f0c6";
363 | 
364 |   @save: "\f0c7";
365 | 
366 |   @sign-blank: "\f0c8";
367 | 
368 |   @reorder: "\f0c9";
369 | 
370 |   @list-ul: "\f0ca";
371 | 
372 |   @list-ol: "\f0cb";
373 | 
374 |   @strikethrough: "\f0cc";
375 | 
376 |   @underline: "\f0cd";
377 | 
378 |   @table: "\f0ce";
379 | 
380 |   @magic: "\f0d0";
381 | 
382 |   @truck: "\f0d1";
383 | 
384 |   @pinterest: "\f0d2";
385 | 
386 |   @pinterest-sign: "\f0d3";
387 | 
388 |   @google-plus-sign: "\f0d4";
389 | 
390 |   @google-plus: "\f0d5";
391 | 
392 |   @money: "\f0d6";
393 | 
394 |   @caret-down: "\f0d7";
395 | 
396 |   @caret-up: "\f0d8";
397 | 
398 |   @caret-left: "\f0d9";
399 | 
400 |   @caret-right: "\f0da";
401 | 
402 |   @columns: "\f0db";
403 | 
404 |   @sort: "\f0dc";
405 | 
406 |   @sort-down: "\f0dd";
407 | 
408 |   @sort-up: "\f0de";
409 | 
410 |   @envelope: "\f0e0";
411 | 
412 |   @linkedin: "\f0e1";
413 | 
414 |   @undo: "\f0e2";
415 | 
416 |   @legal: "\f0e3";
417 | 
418 |   @dashboard: "\f0e4";
419 | 
420 |   @comment-alt: "\f0e5";
421 | 
422 |   @comments-alt: "\f0e6";
423 | 
424 |   @bolt: "\f0e7";
425 | 
426 |   @sitemap: "\f0e8";
427 | 
428 |   @umbrella: "\f0e9";
429 | 
430 |   @paste: "\f0ea";
431 | 
432 |   @lightbulb: "\f0eb";
433 | 
434 |   @exchange: "\f0ec";
435 | 
436 |   @cloud-download: "\f0ed";
437 | 
438 |   @cloud-upload: "\f0ee";
439 | 
440 |   @user-md: "\f0f0";
441 | 
442 |   @stethoscope: "\f0f1";
443 | 
444 |   @suitcase: "\f0f2";
445 | 
446 |   @bell-alt: "\f0f3";
447 | 
448 |   @coffee: "\f0f4";
449 | 
450 |   @food: "\f0f5";
451 | 
452 |   @file-text-alt: "\f0f6";
453 | 
454 |   @building: "\f0f7";
455 | 
456 |   @hospital: "\f0f8";
457 | 
458 |   @ambulance: "\f0f9";
459 | 
460 |   @medkit: "\f0fa";
461 | 
462 |   @fighter-jet: "\f0fb";
463 | 
464 |   @beer: "\f0fc";
465 | 
466 |   @h-sign: "\f0fd";
467 | 
468 |   @plus-sign-alt: "\f0fe";
469 | 
470 |   @double-angle-left: "\f100";
471 | 
472 |   @double-angle-right: "\f101";
473 | 
474 |   @double-angle-up: "\f102";
475 | 
476 |   @double-angle-down: "\f103";
477 | 
478 |   @angle-left: "\f104";
479 | 
480 |   @angle-right: "\f105";
481 | 
482 |   @angle-up: "\f106";
483 | 
484 |   @angle-down: "\f107";
485 | 
486 |   @desktop: "\f108";
487 | 
488 |   @laptop: "\f109";
489 | 
490 |   @tablet: "\f10a";
491 | 
492 |   @mobile-phone: "\f10b";
493 | 
494 |   @circle-blank: "\f10c";
495 | 
496 |   @quote-left: "\f10d";
497 | 
498 |   @quote-right: "\f10e";
499 | 
500 |   @spinner: "\f110";
501 | 
502 |   @circle: "\f111";
503 | 
504 |   @reply: "\f112";
505 | 
506 |   @github-alt: "\f113";
507 | 
508 |   @folder-close-alt: "\f114";
509 | 
510 |   @folder-open-alt: "\f115";
511 | 
512 |   @expand-alt: "\f116";
513 | 
514 |   @collapse-alt: "\f117";
515 | 
516 |   @smile: "\f118";
517 | 
518 |   @frown: "\f119";
519 | 
520 |   @meh: "\f11a";
521 | 
522 |   @gamepad: "\f11b";
523 | 
524 |   @keyboard: "\f11c";
525 | 
526 |   @flag-alt: "\f11d";
527 | 
528 |   @flag-checkered: "\f11e";
529 | 
530 |   @terminal: "\f120";
531 | 
532 |   @code: "\f121";
533 | 
534 |   @reply-all: "\f122";
535 | 
536 |   @mail-reply-all: "\f122";
537 | 
538 |   @star-half-empty: "\f123";
539 | 
540 |   @location-arrow: "\f124";
541 | 
542 |   @crop: "\f125";
543 | 
544 |   @code-fork: "\f126";
545 | 
546 |   @unlink: "\f127";
547 | 
548 |   @question: "\f128";
549 | 
550 |   @info: "\f129";
551 | 
552 |   @exclamation: "\f12a";
553 | 
554 |   @superscript: "\f12b";
555 | 
556 |   @subscript: "\f12c";
557 | 
558 |   @eraser: "\f12d";
559 | 
560 |   @puzzle-piece: "\f12e";
561 | 
562 |   @microphone: "\f130";
563 | 
564 |   @microphone-off: "\f131";
565 | 
566 |   @shield: "\f132";
567 | 
568 |   @calendar-empty: "\f133";
569 | 
570 |   @fire-extinguisher: "\f134";
571 | 
572 |   @rocket: "\f135";
573 | 
574 |   @maxcdn: "\f136";
575 | 
576 |   @chevron-sign-left: "\f137";
577 | 
578 |   @chevron-sign-right: "\f138";
579 | 
580 |   @chevron-sign-up: "\f139";
581 | 
582 |   @chevron-sign-down: "\f13a";
583 | 
584 |   @html5: "\f13b";
585 | 
586 |   @css3: "\f13c";
587 | 
588 |   @anchor: "\f13d";
589 | 
590 |   @unlock-alt: "\f13e";
591 | 
592 |   @bullseye: "\f140";
593 | 
594 |   @ellipsis-horizontal: "\f141";
595 | 
596 |   @ellipsis-vertical: "\f142";
597 | 
598 |   @rss-sign: "\f143";
599 | 
600 |   @play-sign: "\f144";
601 | 
602 |   @ticket: "\f145";
603 | 
604 |   @minus-sign-alt: "\f146";
605 | 
606 |   @check-minus: "\f147";
607 | 
608 |   @level-up: "\f148";
609 | 
610 |   @level-down: "\f149";
611 | 
612 |   @check-sign: "\f14a";
613 | 
614 |   @edit-sign: "\f14b";
615 | 
616 |   @external-link-sign: "\f14c";
617 | 
618 |   @share-sign: "\f14d";
619 | 
620 |   @compass: "\f14e";
621 | 
622 |   @collapse: "\f150";
623 | 
624 |   @collapse-top: "\f151";
625 | 
626 |   @expand: "\f152";
627 | 
628 |   @eur: "\f153";
629 | 
630 |   @gbp: "\f154";
631 | 
632 |   @usd: "\f155";
633 | 
634 |   @inr: "\f156";
635 | 
636 |   @jpy: "\f157";
637 | 
638 |   @cny: "\f158";
639 | 
640 |   @krw: "\f159";
641 | 
642 |   @btc: "\f15a";
643 | 
644 |   @file: "\f15b";
645 | 
646 |   @file-text: "\f15c";
647 | 
648 |   @sort-by-alphabet: "\f15d";
649 | 
650 |   @sort-by-alphabet-alt: "\f15e";
651 | 
652 |   @sort-by-attributes: "\f160";
653 | 
654 |   @sort-by-attributes-alt: "\f161";
655 | 
656 |   @sort-by-order: "\f162";
657 | 
658 |   @sort-by-order-alt: "\f163";
659 | 
660 |   @thumbs-up: "\f164";
661 | 
662 |   @thumbs-down: "\f165";
663 | 
664 |   @youtube-sign: "\f166";
665 | 
666 |   @youtube: "\f167";
667 | 
668 |   @xing: "\f168";
669 | 
670 |   @xing-sign: "\f169";
671 | 
672 |   @youtube-play: "\f16a";
673 | 
674 |   @dropbox: "\f16b";
675 | 
676 |   @stackexchange: "\f16c";
677 | 
678 |   @instagram: "\f16d";
679 | 
680 |   @flickr: "\f16e";
681 | 
682 |   @adn: "\f170";
683 | 
684 |   @bitbucket: "\f171";
685 | 
686 |   @bitbucket-sign: "\f172";
687 | 
688 |   @tumblr: "\f173";
689 | 
690 |   @tumblr-sign: "\f174";
691 | 
692 |   @long-arrow-down: "\f175";
693 | 
694 |   @long-arrow-up: "\f176";
695 | 
696 |   @long-arrow-left: "\f177";
697 | 
698 |   @long-arrow-right: "\f178";
699 | 
700 |   @apple: "\f179";
701 | 
702 |   @windows: "\f17a";
703 | 
704 |   @android: "\f17b";
705 | 
706 |   @linux: "\f17c";
707 | 
708 |   @dribble: "\f17d";
709 | 
710 |   @skype: "\f17e";
711 | 
712 |   @foursquare: "\f180";
713 | 
714 |   @trello: "\f181";
715 | 
716 |   @female: "\f182";
717 | 
718 |   @male: "\f183";
719 | 
720 |   @gittip: "\f184";
721 | 
722 |   @sun: "\f185";
723 | 
724 |   @moon: "\f186";
725 | 
726 |   @archive: "\f187";
727 | 
728 |   @bug: "\f188";
729 | 
730 |   @vk: "\f189";
731 | 
732 |   @weibo: "\f18a";
733 | 
734 |   @renren: "\f18b";
735 | 
736 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/scss/_bootstrap.scss:
--------------------------------------------------------------------------------
 1 | /* BOOTSTRAP SPECIFIC CLASSES
 2 |  * -------------------------- */
 3 | 
 4 | /* Bootstrap 2.0 sprites.less reset */
 5 | [class^="icon-"],
 6 | [class*=" icon-"] {
 7 |   display: inline;
 8 |   width: auto;
 9 |   height: auto;
10 |   line-height: normal;
11 |   vertical-align: baseline;
12 |   background-image: none;
13 |   background-position: 0% 0%;
14 |   background-repeat: repeat;
15 |   margin-top: 0;
16 | }
17 | 
18 | /* more sprites.less reset */
19 | .icon-white,
20 | .nav-pills > .active > a > [class^="icon-"],
21 | .nav-pills > .active > a > [class*=" icon-"],
22 | .nav-list > .active > a > [class^="icon-"],
23 | .nav-list > .active > a > [class*=" icon-"],
24 | .navbar-inverse .nav > .active > a > [class^="icon-"],
25 | .navbar-inverse .nav > .active > a > [class*=" icon-"],
26 | .dropdown-menu > li > a:hover > [class^="icon-"],
27 | .dropdown-menu > li > a:hover > [class*=" icon-"],
28 | .dropdown-menu > .active > a > [class^="icon-"],
29 | .dropdown-menu > .active > a > [class*=" icon-"],
30 | .dropdown-submenu:hover > a > [class^="icon-"],
31 | .dropdown-submenu:hover > a > [class*=" icon-"] {
32 |   background-image: none;
33 | }
34 | 
35 | 
36 | /* keeps Bootstrap styles with and without icons the same */
37 | .btn, .nav {
38 |   [class^="icon-"],
39 |   [class*=" icon-"] {
40 |     //    display: inline;
41 |     &.icon-large { line-height: .9em; }
42 |     &.icon-spin { display: inline-block; }
43 |   }
44 | }
45 | .nav-tabs, .nav-pills {
46 |   [class^="icon-"],
47 |   [class*=" icon-"] {
48 |     &, &.icon-large { line-height: .9em; }
49 |   }
50 | }
51 | .btn {
52 |   [class^="icon-"],
53 |   [class*=" icon-"] {
54 |     &.pull-left, &.pull-right {
55 |       &.icon-2x { margin-top: .18em; }
56 |     }
57 |     &.icon-spin.icon-large { line-height: .8em; }
58 |   }
59 | }
60 | .btn.btn-small {
61 |   [class^="icon-"],
62 |   [class*=" icon-"] {
63 |     &.pull-left, &.pull-right {
64 |       &.icon-2x { margin-top: .25em; }
65 |     }
66 |   }
67 | }
68 | .btn.btn-large {
69 |   [class^="icon-"],
70 |   [class*=" icon-"] {
71 |     margin-top: 0; // overrides bootstrap default
72 |     &.pull-left, &.pull-right {
73 |       &.icon-2x { margin-top: .05em; }
74 |     }
75 |     &.pull-left.icon-2x { margin-right: .2em; }
76 |     &.pull-right.icon-2x { margin-left: .2em; }
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/scss/_core.scss:
--------------------------------------------------------------------------------
  1 | /* FONT AWESOME CORE
  2 |  * -------------------------- */
  3 | 
  4 | [class^="icon-"],
  5 | [class*=" icon-"] {
  6 |   @include icon-FontAwesome();
  7 | }
  8 | 
  9 | [class^="icon-"]:before,
 10 | [class*=" icon-"]:before {
 11 |   text-decoration: inherit;
 12 |   display: inline-block;
 13 |   cursor: default;
 14 |   speak: none;
 15 | }
 16 | 
 17 | /* makes the font 33% larger relative to the icon container */
 18 | .icon-large:before {
 19 |   vertical-align: -10%;
 20 |   font-size: (4em/3);
 21 | }
 22 | 
 23 | /* makes sure icons active on rollover in links */
 24 | a {
 25 |   [class^="icon-"],
 26 |   [class*=" icon-"] {
 27 |     display: inline;
 28 |   }
 29 | }
 30 | 
 31 | /* increased font size for icon-large */
 32 | [class^="icon-"],
 33 | [class*=" icon-"] {
 34 |   &.icon-fixed-width {
 35 |     display: inline-block;
 36 |     width: (16em/14);
 37 |     text-align: right;
 38 |     padding-right: (4em/14);
 39 |     &.icon-large {
 40 |       width: (20em/14);
 41 |     }
 42 |   }
 43 | }
 44 | 
 45 | .icons-ul {
 46 |   margin-left: $icons-li-width;
 47 |   list-style-type: none;
 48 | 
 49 |   > li { position: relative; }
 50 | 
 51 |   .icon-li {
 52 |     position: absolute;
 53 |     left: -$icons-li-width;
 54 |     width: $icons-li-width;
 55 |     text-align: center;
 56 |     line-height: inherit;
 57 |   }
 58 | }
 59 | 
 60 | // allows usage of the hide class directly on font awesome icons
 61 | [class^="icon-"],
 62 | [class*=" icon-"] {
 63 |   &.hide {
 64 |     display: none;
 65 |   }
 66 | }
 67 | 
 68 | .icon-muted { color: $iconMuted; }
 69 | .icon-light { color: $iconLight; }
 70 | .icon-dark { color: $iconDark; }
 71 | 
 72 | // Icon Borders
 73 | // -------------------------
 74 | 
 75 | .icon-border {
 76 |   border: solid 1px $borderColor;
 77 |   padding: .2em .25em .15em;
 78 |   @include border-radius(3px);
 79 | }
 80 | 
 81 | // Icon Sizes
 82 | // -------------------------
 83 | 
 84 | .icon-2x {
 85 |   font-size: 2em;
 86 |   &.icon-border {
 87 |     border-width: 2px;
 88 |     @include border-radius(4px);
 89 |   }
 90 | }
 91 | .icon-3x {
 92 |   font-size: 3em;
 93 |   &.icon-border {
 94 |     border-width: 3px;
 95 |     @include border-radius(5px);
 96 |   }
 97 | }
 98 | .icon-4x {
 99 |   font-size: 4em;
100 |   &.icon-border {
101 |     border-width: 4px;
102 |     @include border-radius(6px);
103 |   }
104 | }
105 | 
106 | .icon-5x {
107 |   font-size: 5em;
108 |   &.icon-border {
109 |     border-width: 5px;
110 |     @include border-radius(7px);
111 |   }
112 | }
113 | 
114 | 
115 | // Floats & Margins
116 | // -------------------------
117 | 
118 | // Quick floats
119 | .pull-right { float: right; }
120 | .pull-left { float: left; }
121 | 
122 | [class^="icon-"],
123 | [class*=" icon-"] {
124 |   &.pull-left {
125 |     margin-right: .3em;
126 |   }
127 |   &.pull-right {
128 |     margin-left: .3em;
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/scss/_extras.scss:
--------------------------------------------------------------------------------
 1 | /* EXTRAS
 2 |  * -------------------------- */
 3 | 
 4 | /* Stacked and layered icon */
 5 | @include icon-stack();
 6 | 
 7 | /* Animated rotating icon */
 8 | .icon-spin {
 9 |   display: inline-block;
10 |   -moz-animation: spin 2s infinite linear;
11 |   -o-animation: spin 2s infinite linear;
12 |   -webkit-animation: spin 2s infinite linear;
13 |   animation: spin 2s infinite linear;
14 | }
15 | a .icon-spin {
16 |   display: inline-block;
17 |   text-decoration: none;
18 | }
19 | 
20 | @-moz-keyframes spin {
21 |   0% { -moz-transform: rotate(0deg); }
22 |   100% { -moz-transform: rotate(359deg); }
23 | }
24 | @-webkit-keyframes spin {
25 |   0% { -webkit-transform: rotate(0deg); }
26 |   100% { -webkit-transform: rotate(359deg); }
27 | }
28 | @-o-keyframes spin {
29 |   0% { -o-transform: rotate(0deg); }
30 |   100% { -o-transform: rotate(359deg); }
31 | }
32 | @-ms-keyframes spin {
33 |   0% { -ms-transform: rotate(0deg); }
34 |   100% { -ms-transform: rotate(359deg); }
35 | }
36 | @keyframes spin {
37 |   0% { transform: rotate(0deg); }
38 |   100% { transform: rotate(359deg); }
39 | }
40 | 
41 | /* Icon rotations and mirroring */
42 | .icon-rotate-90:before {
43 |   -webkit-transform: rotate(90deg);
44 |   -moz-transform: rotate(90deg);
45 |   -ms-transform: rotate(90deg);
46 |   -o-transform: rotate(90deg);
47 |   transform: rotate(90deg);
48 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
49 | }
50 | 
51 | .icon-rotate-180:before {
52 |   -webkit-transform: rotate(180deg);
53 |   -moz-transform: rotate(180deg);
54 |   -ms-transform: rotate(180deg);
55 |   -o-transform: rotate(180deg);
56 |   transform: rotate(180deg);
57 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
58 | }
59 | 
60 | .icon-rotate-270:before {
61 |   -webkit-transform: rotate(270deg);
62 |   -moz-transform: rotate(270deg);
63 |   -ms-transform: rotate(270deg);
64 |   -o-transform: rotate(270deg);
65 |   transform: rotate(270deg);
66 |   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
67 | }
68 | 
69 | .icon-flip-horizontal:before {
70 |   -webkit-transform: scale(-1, 1);
71 |   -moz-transform: scale(-1, 1);
72 |   -ms-transform: scale(-1, 1);
73 |   -o-transform: scale(-1, 1);
74 |   transform: scale(-1, 1);
75 | }
76 | 
77 | .icon-flip-vertical:before {
78 |   -webkit-transform: scale(1, -1);
79 |   -moz-transform: scale(1, -1);
80 |   -ms-transform: scale(1, -1);
81 |   -o-transform: scale(1, -1);
82 |   transform: scale(1, -1);
83 | }
84 | 
85 | /* ensure rotation occurs inside anchor tags */
86 | a {
87 |   .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
88 |     &:before { display: inline-block; }
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // Mixins
 2 | // --------------------------
 3 | 
 4 | @mixin icon($icon) {
 5 |   @include icon-FontAwesome();
 6 |   content: $icon;
 7 | }
 8 | 
 9 | @mixin icon-FontAwesome() {
10 |   font-family: FontAwesome;
11 |   font-weight: normal;
12 |   font-style: normal;
13 |   text-decoration: inherit;
14 |   -webkit-font-smoothing: antialiased;
15 |   *margin-right: .3em; // fixes ie7 issues
16 | }
17 | 
18 | @mixin border-radius($radius) {
19 |   -webkit-border-radius: $radius;
20 |   -moz-border-radius: $radius;
21 |   border-radius: $radius;
22 | }
23 | 
24 | @mixin icon-stack($width: 2em, $height: 2em, $top-font-size: 1em, $base-font-size: 2em) {
25 |   .icon-stack {
26 |     position: relative;
27 |     display: inline-block;
28 |     width: $width;
29 |     height: $height;
30 |     line-height: $width;
31 |     vertical-align: -35%;
32 |     [class^="icon-"],
33 |     [class*=" icon-"] {
34 |       display: block;
35 |       text-align: center;
36 |       position: absolute;
37 |       width: 100%;
38 |       height: 100%;
39 |       font-size: $top-font-size;
40 |       line-height: inherit;
41 |       *line-height: $height;
42 |     }
43 |     .icon-stack-base {
44 |       font-size: $base-font-size;
45 |       *line-height: #{$height / $base-font-size}em;
46 |     }
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/scss/_path.scss:
--------------------------------------------------------------------------------
 1 | /* FONT PATH
 2 |  * -------------------------- */
 3 | 
 4 | @font-face {
 5 |   font-family: 'FontAwesome';
 6 |   src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?v=#{$FontAwesomeVersion}');
 7 |   src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=#{$FontAwesomeVersion}') format('embedded-opentype'),
 8 |     url('#{$FontAwesomePath}/fontawesome-webfont.woff?v=#{$FontAwesomeVersion}') format('woff'),
 9 |     url('#{$FontAwesomePath}/fontawesome-webfont.ttf?v=#{$FontAwesomeVersion}') format('truetype'),
10 |     url('#{$FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=#{$FontAwesomeVersion}') format('svg');
11 | //  src: url('#{$FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts
12 |   font-weight: normal;
13 |   font-style: normal;
14 | }
15 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/scss/_variables.scss:
--------------------------------------------------------------------------------
  1 | // Variables
  2 | // --------------------------
  3 | 
  4 | $FontAwesomePath: "../font" !default;
  5 | $FontAwesomeVersion: "3.2.0" !default;
  6 | $borderColor: #eeeeee !default;
  7 | $iconMuted: #eeeeee !default;
  8 | $iconLight: white !default;
  9 | $iconDark: #333333 !default;
 10 | $icons-li-width: (30em/14);
 11 | 
 12 | 
 13 | $glass: "\f000";
 14 | 
 15 | $music: "\f001";
 16 | 
 17 | $search: "\f002";
 18 | 
 19 | $envelope-alt: "\f003";
 20 | 
 21 | $heart: "\f004";
 22 | 
 23 | $star: "\f005";
 24 | 
 25 | $star-empty: "\f006";
 26 | 
 27 | $user: "\f007";
 28 | 
 29 | $film: "\f008";
 30 | 
 31 | $th-large: "\f009";
 32 | 
 33 | $th: "\f00a";
 34 | 
 35 | $th-list: "\f00b";
 36 | 
 37 | $ok: "\f00c";
 38 | 
 39 | $remove: "\f00d";
 40 | 
 41 | $zoom-in: "\f00e";
 42 | 
 43 | $zoom-out: "\f010";
 44 | 
 45 | $off: "\f011";
 46 | 
 47 | $signal: "\f012";
 48 | 
 49 | $cog: "\f013";
 50 | 
 51 | $trash: "\f014";
 52 | 
 53 | $home: "\f015";
 54 | 
 55 | $file-alt: "\f016";
 56 | 
 57 | $time: "\f017";
 58 | 
 59 | $road: "\f018";
 60 | 
 61 | $download-alt: "\f019";
 62 | 
 63 | $download: "\f01a";
 64 | 
 65 | $upload: "\f01b";
 66 | 
 67 | $inbox: "\f01c";
 68 | 
 69 | $play-circle: "\f01d";
 70 | 
 71 | $repeat: "\f01e";
 72 | 
 73 | $refresh: "\f021";
 74 | 
 75 | $list-alt: "\f022";
 76 | 
 77 | $lock: "\f023";
 78 | 
 79 | $flag: "\f024";
 80 | 
 81 | $headphones: "\f025";
 82 | 
 83 | $volume-off: "\f026";
 84 | 
 85 | $volume-down: "\f027";
 86 | 
 87 | $volume-up: "\f028";
 88 | 
 89 | $qrcode: "\f029";
 90 | 
 91 | $barcode: "\f02a";
 92 | 
 93 | $tag: "\f02b";
 94 | 
 95 | $tags: "\f02c";
 96 | 
 97 | $book: "\f02d";
 98 | 
 99 | $bookmark: "\f02e";
100 | 
101 | $print: "\f02f";
102 | 
103 | $camera: "\f030";
104 | 
105 | $font: "\f031";
106 | 
107 | $bold: "\f032";
108 | 
109 | $italic: "\f033";
110 | 
111 | $text-height: "\f034";
112 | 
113 | $text-width: "\f035";
114 | 
115 | $align-left: "\f036";
116 | 
117 | $align-center: "\f037";
118 | 
119 | $align-right: "\f038";
120 | 
121 | $align-justify: "\f039";
122 | 
123 | $list: "\f03a";
124 | 
125 | $indent-left: "\f03b";
126 | 
127 | $indent-right: "\f03c";
128 | 
129 | $facetime-video: "\f03d";
130 | 
131 | $picture: "\f03e";
132 | 
133 | $pencil: "\f040";
134 | 
135 | $map-marker: "\f041";
136 | 
137 | $adjust: "\f042";
138 | 
139 | $tint: "\f043";
140 | 
141 | $edit: "\f044";
142 | 
143 | $share: "\f045";
144 | 
145 | $check: "\f046";
146 | 
147 | $move: "\f047";
148 | 
149 | $step-backward: "\f048";
150 | 
151 | $fast-backward: "\f049";
152 | 
153 | $backward: "\f04a";
154 | 
155 | $play: "\f04b";
156 | 
157 | $pause: "\f04c";
158 | 
159 | $stop: "\f04d";
160 | 
161 | $forward: "\f04e";
162 | 
163 | $fast-forward: "\f050";
164 | 
165 | $step-forward: "\f051";
166 | 
167 | $eject: "\f052";
168 | 
169 | $chevron-left: "\f053";
170 | 
171 | $chevron-right: "\f054";
172 | 
173 | $plus-sign: "\f055";
174 | 
175 | $minus-sign: "\f056";
176 | 
177 | $remove-sign: "\f057";
178 | 
179 | $ok-sign: "\f058";
180 | 
181 | $question-sign: "\f059";
182 | 
183 | $info-sign: "\f05a";
184 | 
185 | $screenshot: "\f05b";
186 | 
187 | $remove-circle: "\f05c";
188 | 
189 | $ok-circle: "\f05d";
190 | 
191 | $ban-circle: "\f05e";
192 | 
193 | $arrow-left: "\f060";
194 | 
195 | $arrow-right: "\f061";
196 | 
197 | $arrow-up: "\f062";
198 | 
199 | $arrow-down: "\f063";
200 | 
201 | $share-alt: "\f064";
202 | 
203 | $resize-full: "\f065";
204 | 
205 | $resize-small: "\f066";
206 | 
207 | $plus: "\f067";
208 | 
209 | $minus: "\f068";
210 | 
211 | $asterisk: "\f069";
212 | 
213 | $exclamation-sign: "\f06a";
214 | 
215 | $gift: "\f06b";
216 | 
217 | $leaf: "\f06c";
218 | 
219 | $fire: "\f06d";
220 | 
221 | $eye-open: "\f06e";
222 | 
223 | $eye-close: "\f070";
224 | 
225 | $warning-sign: "\f071";
226 | 
227 | $plane: "\f072";
228 | 
229 | $calendar: "\f073";
230 | 
231 | $random: "\f074";
232 | 
233 | $comment: "\f075";
234 | 
235 | $magnet: "\f076";
236 | 
237 | $chevron-up: "\f077";
238 | 
239 | $chevron-down: "\f078";
240 | 
241 | $retweet: "\f079";
242 | 
243 | $shopping-cart: "\f07a";
244 | 
245 | $folder-close: "\f07b";
246 | 
247 | $folder-open: "\f07c";
248 | 
249 | $resize-vertical: "\f07d";
250 | 
251 | $resize-horizontal: "\f07e";
252 | 
253 | $bar-chart: "\f080";
254 | 
255 | $twitter-sign: "\f081";
256 | 
257 | $facebook-sign: "\f082";
258 | 
259 | $camera-retro: "\f083";
260 | 
261 | $key: "\f084";
262 | 
263 | $cogs: "\f085";
264 | 
265 | $comments: "\f086";
266 | 
267 | $thumbs-up-alt: "\f087";
268 | 
269 | $thumbs-down-alt: "\f088";
270 | 
271 | $star-half: "\f089";
272 | 
273 | $heart-empty: "\f08a";
274 | 
275 | $signout: "\f08b";
276 | 
277 | $linkedin-sign: "\f08c";
278 | 
279 | $pushpin: "\f08d";
280 | 
281 | $external-link: "\f08e";
282 | 
283 | $signin: "\f090";
284 | 
285 | $trophy: "\f091";
286 | 
287 | $github-sign: "\f092";
288 | 
289 | $upload-alt: "\f093";
290 | 
291 | $lemon: "\f094";
292 | 
293 | $phone: "\f095";
294 | 
295 | $check-empty: "\f096";
296 | 
297 | $bookmark-empty: "\f097";
298 | 
299 | $phone-sign: "\f098";
300 | 
301 | $twitter: "\f099";
302 | 
303 | $facebook: "\f09a";
304 | 
305 | $github: "\f09b";
306 | 
307 | $unlock: "\f09c";
308 | 
309 | $credit-card: "\f09d";
310 | 
311 | $rss: "\f09e";
312 | 
313 | $hdd: "\f0a0";
314 | 
315 | $bullhorn: "\f0a1";
316 | 
317 | $bell: "\f0a2";
318 | 
319 | $certificate: "\f0a3";
320 | 
321 | $hand-right: "\f0a4";
322 | 
323 | $hand-left: "\f0a5";
324 | 
325 | $hand-up: "\f0a6";
326 | 
327 | $hand-down: "\f0a7";
328 | 
329 | $circle-arrow-left: "\f0a8";
330 | 
331 | $circle-arrow-right: "\f0a9";
332 | 
333 | $circle-arrow-up: "\f0aa";
334 | 
335 | $circle-arrow-down: "\f0ab";
336 | 
337 | $globe: "\f0ac";
338 | 
339 | $wrench: "\f0ad";
340 | 
341 | $tasks: "\f0ae";
342 | 
343 | $filter: "\f0b0";
344 | 
345 | $briefcase: "\f0b1";
346 | 
347 | $fullscreen: "\f0b2";
348 | 
349 | $group: "\f0c0";
350 | 
351 | $link: "\f0c1";
352 | 
353 | $cloud: "\f0c2";
354 | 
355 | $beaker: "\f0c3";
356 | 
357 | $cut: "\f0c4";
358 | 
359 | $copy: "\f0c5";
360 | 
361 | $paper-clip: "\f0c6";
362 | 
363 | $save: "\f0c7";
364 | 
365 | $sign-blank: "\f0c8";
366 | 
367 | $reorder: "\f0c9";
368 | 
369 | $list-ul: "\f0ca";
370 | 
371 | $list-ol: "\f0cb";
372 | 
373 | $strikethrough: "\f0cc";
374 | 
375 | $underline: "\f0cd";
376 | 
377 | $table: "\f0ce";
378 | 
379 | $magic: "\f0d0";
380 | 
381 | $truck: "\f0d1";
382 | 
383 | $pinterest: "\f0d2";
384 | 
385 | $pinterest-sign: "\f0d3";
386 | 
387 | $google-plus-sign: "\f0d4";
388 | 
389 | $google-plus: "\f0d5";
390 | 
391 | $money: "\f0d6";
392 | 
393 | $caret-down: "\f0d7";
394 | 
395 | $caret-up: "\f0d8";
396 | 
397 | $caret-left: "\f0d9";
398 | 
399 | $caret-right: "\f0da";
400 | 
401 | $columns: "\f0db";
402 | 
403 | $sort: "\f0dc";
404 | 
405 | $sort-down: "\f0dd";
406 | 
407 | $sort-up: "\f0de";
408 | 
409 | $envelope: "\f0e0";
410 | 
411 | $linkedin: "\f0e1";
412 | 
413 | $undo: "\f0e2";
414 | 
415 | $legal: "\f0e3";
416 | 
417 | $dashboard: "\f0e4";
418 | 
419 | $comment-alt: "\f0e5";
420 | 
421 | $comments-alt: "\f0e6";
422 | 
423 | $bolt: "\f0e7";
424 | 
425 | $sitemap: "\f0e8";
426 | 
427 | $umbrella: "\f0e9";
428 | 
429 | $paste: "\f0ea";
430 | 
431 | $lightbulb: "\f0eb";
432 | 
433 | $exchange: "\f0ec";
434 | 
435 | $cloud-download: "\f0ed";
436 | 
437 | $cloud-upload: "\f0ee";
438 | 
439 | $user-md: "\f0f0";
440 | 
441 | $stethoscope: "\f0f1";
442 | 
443 | $suitcase: "\f0f2";
444 | 
445 | $bell-alt: "\f0f3";
446 | 
447 | $coffee: "\f0f4";
448 | 
449 | $food: "\f0f5";
450 | 
451 | $file-text-alt: "\f0f6";
452 | 
453 | $building: "\f0f7";
454 | 
455 | $hospital: "\f0f8";
456 | 
457 | $ambulance: "\f0f9";
458 | 
459 | $medkit: "\f0fa";
460 | 
461 | $fighter-jet: "\f0fb";
462 | 
463 | $beer: "\f0fc";
464 | 
465 | $h-sign: "\f0fd";
466 | 
467 | $plus-sign-alt: "\f0fe";
468 | 
469 | $double-angle-left: "\f100";
470 | 
471 | $double-angle-right: "\f101";
472 | 
473 | $double-angle-up: "\f102";
474 | 
475 | $double-angle-down: "\f103";
476 | 
477 | $angle-left: "\f104";
478 | 
479 | $angle-right: "\f105";
480 | 
481 | $angle-up: "\f106";
482 | 
483 | $angle-down: "\f107";
484 | 
485 | $desktop: "\f108";
486 | 
487 | $laptop: "\f109";
488 | 
489 | $tablet: "\f10a";
490 | 
491 | $mobile-phone: "\f10b";
492 | 
493 | $circle-blank: "\f10c";
494 | 
495 | $quote-left: "\f10d";
496 | 
497 | $quote-right: "\f10e";
498 | 
499 | $spinner: "\f110";
500 | 
501 | $circle: "\f111";
502 | 
503 | $reply: "\f112";
504 | 
505 | $github-alt: "\f113";
506 | 
507 | $folder-close-alt: "\f114";
508 | 
509 | $folder-open-alt: "\f115";
510 | 
511 | $expand-alt: "\f116";
512 | 
513 | $collapse-alt: "\f117";
514 | 
515 | $smile: "\f118";
516 | 
517 | $frown: "\f119";
518 | 
519 | $meh: "\f11a";
520 | 
521 | $gamepad: "\f11b";
522 | 
523 | $keyboard: "\f11c";
524 | 
525 | $flag-alt: "\f11d";
526 | 
527 | $flag-checkered: "\f11e";
528 | 
529 | $terminal: "\f120";
530 | 
531 | $code: "\f121";
532 | 
533 | $reply-all: "\f122";
534 | 
535 | $mail-reply-all: "\f122";
536 | 
537 | $star-half-empty: "\f123";
538 | 
539 | $location-arrow: "\f124";
540 | 
541 | $crop: "\f125";
542 | 
543 | $code-fork: "\f126";
544 | 
545 | $unlink: "\f127";
546 | 
547 | $question: "\f128";
548 | 
549 | $info: "\f129";
550 | 
551 | $exclamation: "\f12a";
552 | 
553 | $superscript: "\f12b";
554 | 
555 | $subscript: "\f12c";
556 | 
557 | $eraser: "\f12d";
558 | 
559 | $puzzle-piece: "\f12e";
560 | 
561 | $microphone: "\f130";
562 | 
563 | $microphone-off: "\f131";
564 | 
565 | $shield: "\f132";
566 | 
567 | $calendar-empty: "\f133";
568 | 
569 | $fire-extinguisher: "\f134";
570 | 
571 | $rocket: "\f135";
572 | 
573 | $maxcdn: "\f136";
574 | 
575 | $chevron-sign-left: "\f137";
576 | 
577 | $chevron-sign-right: "\f138";
578 | 
579 | $chevron-sign-up: "\f139";
580 | 
581 | $chevron-sign-down: "\f13a";
582 | 
583 | $html5: "\f13b";
584 | 
585 | $css3: "\f13c";
586 | 
587 | $anchor: "\f13d";
588 | 
589 | $unlock-alt: "\f13e";
590 | 
591 | $bullseye: "\f140";
592 | 
593 | $ellipsis-horizontal: "\f141";
594 | 
595 | $ellipsis-vertical: "\f142";
596 | 
597 | $rss-sign: "\f143";
598 | 
599 | $play-sign: "\f144";
600 | 
601 | $ticket: "\f145";
602 | 
603 | $minus-sign-alt: "\f146";
604 | 
605 | $check-minus: "\f147";
606 | 
607 | $level-up: "\f148";
608 | 
609 | $level-down: "\f149";
610 | 
611 | $check-sign: "\f14a";
612 | 
613 | $edit-sign: "\f14b";
614 | 
615 | $external-link-sign: "\f14c";
616 | 
617 | $share-sign: "\f14d";
618 | 
619 | $compass: "\f14e";
620 | 
621 | $collapse: "\f150";
622 | 
623 | $collapse-top: "\f151";
624 | 
625 | $expand: "\f152";
626 | 
627 | $eur: "\f153";
628 | 
629 | $gbp: "\f154";
630 | 
631 | $usd: "\f155";
632 | 
633 | $inr: "\f156";
634 | 
635 | $jpy: "\f157";
636 | 
637 | $cny: "\f158";
638 | 
639 | $krw: "\f159";
640 | 
641 | $btc: "\f15a";
642 | 
643 | $file: "\f15b";
644 | 
645 | $file-text: "\f15c";
646 | 
647 | $sort-by-alphabet: "\f15d";
648 | 
649 | $sort-by-alphabet-alt: "\f15e";
650 | 
651 | $sort-by-attributes: "\f160";
652 | 
653 | $sort-by-attributes-alt: "\f161";
654 | 
655 | $sort-by-order: "\f162";
656 | 
657 | $sort-by-order-alt: "\f163";
658 | 
659 | $thumbs-up: "\f164";
660 | 
661 | $thumbs-down: "\f165";
662 | 
663 | $youtube-sign: "\f166";
664 | 
665 | $youtube: "\f167";
666 | 
667 | $xing: "\f168";
668 | 
669 | $xing-sign: "\f169";
670 | 
671 | $youtube-play: "\f16a";
672 | 
673 | $dropbox: "\f16b";
674 | 
675 | $stackexchange: "\f16c";
676 | 
677 | $instagram: "\f16d";
678 | 
679 | $flickr: "\f16e";
680 | 
681 | $adn: "\f170";
682 | 
683 | $bitbucket: "\f171";
684 | 
685 | $bitbucket-sign: "\f172";
686 | 
687 | $tumblr: "\f173";
688 | 
689 | $tumblr-sign: "\f174";
690 | 
691 | $long-arrow-down: "\f175";
692 | 
693 | $long-arrow-up: "\f176";
694 | 
695 | $long-arrow-left: "\f177";
696 | 
697 | $long-arrow-right: "\f178";
698 | 
699 | $apple: "\f179";
700 | 
701 | $windows: "\f17a";
702 | 
703 | $android: "\f17b";
704 | 
705 | $linux: "\f17c";
706 | 
707 | $dribble: "\f17d";
708 | 
709 | $skype: "\f17e";
710 | 
711 | $foursquare: "\f180";
712 | 
713 | $trello: "\f181";
714 | 
715 | $female: "\f182";
716 | 
717 | $male: "\f183";
718 | 
719 | $gittip: "\f184";
720 | 
721 | $sun: "\f185";
722 | 
723 | $moon: "\f186";
724 | 
725 | $archive: "\f187";
726 | 
727 | $bug: "\f188";
728 | 
729 | $vk: "\f189";
730 | 
731 | $weibo: "\f18a";
732 | 
733 | $renren: "\f18b";
734 | 
735 | 


--------------------------------------------------------------------------------
/fonts/font-awesome/scss/font-awesome.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  *  Font Awesome 3.2.0
 3 |  *  the iconic font designed for Bootstrap
 4 |  *  ------------------------------------------------------------------------------
 5 |  *  The full suite of pictographic icons, examples, and documentation can be
 6 |  *  found at http://fontawesome.io.  Stay up to date on Twitter at
 7 |  *  http://twitter.com/fontawesome.
 8 |  *
 9 |  *  License
10 |  *  ------------------------------------------------------------------------------
11 |  *  - The Font Awesome font is licensed under SIL OFL 1.1 -
12 |  *    http://scripts.sil.org/OFL
13 |  *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
14 |  *    http://opensource.org/licenses/mit-license.html
15 |  *  - Font Awesome documentation licensed under CC BY 3.0 -
16 |  *    http://creativecommons.org/licenses/by/3.0/
17 |  *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
18 |  *    "Font Awesome by Dave Gandy - http://fontawesome.io"
19 |  *
20 |  *  Author - Dave Gandy
21 |  *  ------------------------------------------------------------------------------
22 |  *  Email: dave@fontawesome.io
23 |  *  Twitter: http://twitter.com/byscuits
24 |  *  Work: Lead Product Designer @ Kyruus - http://kyruus.com
25 |  */
26 | 
27 | @import "variables";
28 | @import "mixins";
29 | @import "path";
30 | @import "core";
31 | @import "bootstrap";
32 | @import "extras";
33 | @import "icons";
34 | 


--------------------------------------------------------------------------------
/fonts/glyphicons/css/glyphicons.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  *
  3 |  *  Project:  GLYPHICONS
  4 |  *  Author:   Jan Kovarik - www.glyphicons.com
  5 |  *  Twitter:  @jankovarik
  6 |  *
  7 |  */
  8 | html,
  9 | html .halflings {
 10 |   -webkit-font-smoothing: antialiased !important;
 11 | }
 12 | @font-face {
 13 |   font-family: 'Glyphicons Halflings';
 14 | 
 15 |   src: url('../fonts/glyphicons-halflings-regular.eot');
 16 |   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 17 | }
 18 | .glyphicon {
 19 |   position: relative;
 20 |   top: 1px;
 21 |   display: inline-block;
 22 |   font-family: 'Glyphicons Halflings';
 23 |   font-style: normal;
 24 |   font-weight: normal;
 25 |   line-height: 1;
 26 | 
 27 |   -webkit-font-smoothing: antialiased;
 28 |   -moz-osx-font-smoothing: grayscale;
 29 | }
 30 | .glyphicon-asterisk:before {
 31 |   content: "\002a";
 32 | }
 33 | .glyphicon-plus:before {
 34 |   content: "\002b";
 35 | }
 36 | .glyphicon-euro:before,
 37 | .glyphicon-eur:before {
 38 |   content: "\20ac";
 39 | }
 40 | .glyphicon-minus:before {
 41 |   content: "\2212";
 42 | }
 43 | .glyphicon-cloud:before {
 44 |   content: "\2601";
 45 | }
 46 | .glyphicon-envelope:before {
 47 |   content: "\2709";
 48 | }
 49 | .glyphicon-pencil:before {
 50 |   content: "\270f";
 51 | }
 52 | .glyphicon-glass:before {
 53 |   content: "\e001";
 54 | }
 55 | .glyphicon-music:before {
 56 |   content: "\e002";
 57 | }
 58 | .glyphicon-search:before {
 59 |   content: "\e003";
 60 | }
 61 | .glyphicon-heart:before {
 62 |   content: "\e005";
 63 | }
 64 | .glyphicon-star:before {
 65 |   content: "\e006";
 66 | }
 67 | .glyphicon-star-empty:before {
 68 |   content: "\e007";
 69 | }
 70 | .glyphicon-user:before {
 71 |   content: "\e008";
 72 | }
 73 | .glyphicon-film:before {
 74 |   content: "\e009";
 75 | }
 76 | .glyphicon-th-large:before {
 77 |   content: "\e010";
 78 | }
 79 | .glyphicon-th:before {
 80 |   content: "\e011";
 81 | }
 82 | .glyphicon-th-list:before {
 83 |   content: "\e012";
 84 | }
 85 | .glyphicon-ok:before {
 86 |   content: "\e013";
 87 | }
 88 | .glyphicon-remove:before {
 89 |   content: "\e014";
 90 | }
 91 | .glyphicon-zoom-in:before {
 92 |   content: "\e015";
 93 | }
 94 | .glyphicon-zoom-out:before {
 95 |   content: "\e016";
 96 | }
 97 | .glyphicon-off:before {
 98 |   content: "\e017";
 99 | }
100 | .glyphicon-signal:before {
101 |   content: "\e018";
102 | }
103 | .glyphicon-cog:before {
104 |   content: "\e019";
105 | }
106 | .glyphicon-trash:before {
107 |   content: "\e020";
108 | }
109 | .glyphicon-home:before {
110 |   content: "\e021";
111 | }
112 | .glyphicon-file:before {
113 |   content: "\e022";
114 | }
115 | .glyphicon-time:before {
116 |   content: "\e023";
117 | }
118 | .glyphicon-road:before {
119 |   content: "\e024";
120 | }
121 | .glyphicon-download-alt:before {
122 |   content: "\e025";
123 | }
124 | .glyphicon-download:before {
125 |   content: "\e026";
126 | }
127 | .glyphicon-upload:before {
128 |   content: "\e027";
129 | }
130 | .glyphicon-inbox:before {
131 |   content: "\e028";
132 | }
133 | .glyphicon-play-circle:before {
134 |   content: "\e029";
135 | }
136 | .glyphicon-repeat:before {
137 |   content: "\e030";
138 | }
139 | .glyphicon-refresh:before {
140 |   content: "\e031";
141 | }
142 | .glyphicon-list-alt:before {
143 |   content: "\e032";
144 | }
145 | .glyphicon-lock:before {
146 |   content: "\e033";
147 | }
148 | .glyphicon-flag:before {
149 |   content: "\e034";
150 | }
151 | .glyphicon-headphones:before {
152 |   content: "\e035";
153 | }
154 | .glyphicon-volume-off:before {
155 |   content: "\e036";
156 | }
157 | .glyphicon-volume-down:before {
158 |   content: "\e037";
159 | }
160 | .glyphicon-volume-up:before {
161 |   content: "\e038";
162 | }
163 | .glyphicon-qrcode:before {
164 |   content: "\e039";
165 | }
166 | .glyphicon-barcode:before {
167 |   content: "\e040";
168 | }
169 | .glyphicon-tag:before {
170 |   content: "\e041";
171 | }
172 | .glyphicon-tags:before {
173 |   content: "\e042";
174 | }
175 | .glyphicon-book:before {
176 |   content: "\e043";
177 | }
178 | .glyphicon-bookmark:before {
179 |   content: "\e044";
180 | }
181 | .glyphicon-print:before {
182 |   content: "\e045";
183 | }
184 | .glyphicon-camera:before {
185 |   content: "\e046";
186 | }
187 | .glyphicon-font:before {
188 |   content: "\e047";
189 | }
190 | .glyphicon-bold:before {
191 |   content: "\e048";
192 | }
193 | .glyphicon-italic:before {
194 |   content: "\e049";
195 | }
196 | .glyphicon-text-height:before {
197 |   content: "\e050";
198 | }
199 | .glyphicon-text-width:before {
200 |   content: "\e051";
201 | }
202 | .glyphicon-align-left:before {
203 |   content: "\e052";
204 | }
205 | .glyphicon-align-center:before {
206 |   content: "\e053";
207 | }
208 | .glyphicon-align-right:before {
209 |   content: "\e054";
210 | }
211 | .glyphicon-align-justify:before {
212 |   content: "\e055";
213 | }
214 | .glyphicon-list:before {
215 |   content: "\e056";
216 | }
217 | .glyphicon-indent-left:before {
218 |   content: "\e057";
219 | }
220 | .glyphicon-indent-right:before {
221 |   content: "\e058";
222 | }
223 | .glyphicon-facetime-video:before {
224 |   content: "\e059";
225 | }
226 | .glyphicon-picture:before {
227 |   content: "\e060";
228 | }
229 | .glyphicon-map-marker:before {
230 |   content: "\e062";
231 | }
232 | .glyphicon-adjust:before {
233 |   content: "\e063";
234 | }
235 | .glyphicon-tint:before {
236 |   content: "\e064";
237 | }
238 | .glyphicon-edit:before {
239 |   content: "\e065";
240 | }
241 | .glyphicon-share:before {
242 |   content: "\e066";
243 | }
244 | .glyphicon-check:before {
245 |   content: "\e067";
246 | }
247 | .glyphicon-move:before {
248 |   content: "\e068";
249 | }
250 | .glyphicon-step-backward:before {
251 |   content: "\e069";
252 | }
253 | .glyphicon-fast-backward:before {
254 |   content: "\e070";
255 | }
256 | .glyphicon-backward:before {
257 |   content: "\e071";
258 | }
259 | .glyphicon-play:before {
260 |   content: "\e072";
261 | }
262 | .glyphicon-pause:before {
263 |   content: "\e073";
264 | }
265 | .glyphicon-stop:before {
266 |   content: "\e074";
267 | }
268 | .glyphicon-forward:before {
269 |   content: "\e075";
270 | }
271 | .glyphicon-fast-forward:before {
272 |   content: "\e076";
273 | }
274 | .glyphicon-step-forward:before {
275 |   content: "\e077";
276 | }
277 | .glyphicon-eject:before {
278 |   content: "\e078";
279 | }
280 | .glyphicon-chevron-left:before {
281 |   content: "\e079";
282 | }
283 | .glyphicon-chevron-right:before {
284 |   content: "\e080";
285 | }
286 | .glyphicon-plus-sign:before {
287 |   content: "\e081";
288 | }
289 | .glyphicon-minus-sign:before {
290 |   content: "\e082";
291 | }
292 | .glyphicon-remove-sign:before {
293 |   content: "\e083";
294 | }
295 | .glyphicon-ok-sign:before {
296 |   content: "\e084";
297 | }
298 | .glyphicon-question-sign:before {
299 |   content: "\e085";
300 | }
301 | .glyphicon-info-sign:before {
302 |   content: "\e086";
303 | }
304 | .glyphicon-screenshot:before {
305 |   content: "\e087";
306 | }
307 | .glyphicon-remove-circle:before {
308 |   content: "\e088";
309 | }
310 | .glyphicon-ok-circle:before {
311 |   content: "\e089";
312 | }
313 | .glyphicon-ban-circle:before {
314 |   content: "\e090";
315 | }
316 | .glyphicon-arrow-left:before {
317 |   content: "\e091";
318 | }
319 | .glyphicon-arrow-right:before {
320 |   content: "\e092";
321 | }
322 | .glyphicon-arrow-up:before {
323 |   content: "\e093";
324 | }
325 | .glyphicon-arrow-down:before {
326 |   content: "\e094";
327 | }
328 | .glyphicon-share-alt:before {
329 |   content: "\e095";
330 | }
331 | .glyphicon-resize-full:before {
332 |   content: "\e096";
333 | }
334 | .glyphicon-resize-small:before {
335 |   content: "\e097";
336 | }
337 | .glyphicon-exclamation-sign:before {
338 |   content: "\e101";
339 | }
340 | .glyphicon-gift:before {
341 |   content: "\e102";
342 | }
343 | .glyphicon-leaf:before {
344 |   content: "\e103";
345 | }
346 | .glyphicon-fire:before {
347 |   content: "\e104";
348 | }
349 | .glyphicon-eye-open:before {
350 |   content: "\e105";
351 | }
352 | .glyphicon-eye-close:before {
353 |   content: "\e106";
354 | }
355 | .glyphicon-warning-sign:before {
356 |   content: "\e107";
357 | }
358 | .glyphicon-plane:before {
359 |   content: "\e108";
360 | }
361 | .glyphicon-calendar:before {
362 |   content: "\e109";
363 | }
364 | .glyphicon-random:before {
365 |   content: "\e110";
366 | }
367 | .glyphicon-comment:before {
368 |   content: "\e111";
369 | }
370 | .glyphicon-magnet:before {
371 |   content: "\e112";
372 | }
373 | .glyphicon-chevron-up:before {
374 |   content: "\e113";
375 | }
376 | .glyphicon-chevron-down:before {
377 |   content: "\e114";
378 | }
379 | .glyphicon-retweet:before {
380 |   content: "\e115";
381 | }
382 | .glyphicon-shopping-cart:before {
383 |   content: "\e116";
384 | }
385 | .glyphicon-folder-close:before {
386 |   content: "\e117";
387 | }
388 | .glyphicon-folder-open:before {
389 |   content: "\e118";
390 | }
391 | .glyphicon-resize-vertical:before {
392 |   content: "\e119";
393 | }
394 | .glyphicon-resize-horizontal:before {
395 |   content: "\e120";
396 | }
397 | .glyphicon-hdd:before {
398 |   content: "\e121";
399 | }
400 | .glyphicon-bullhorn:before {
401 |   content: "\e122";
402 | }
403 | .glyphicon-bell:before {
404 |   content: "\e123";
405 | }
406 | .glyphicon-certificate:before {
407 |   content: "\e124";
408 | }
409 | .glyphicon-thumbs-up:before {
410 |   content: "\e125";
411 | }
412 | .glyphicon-thumbs-down:before {
413 |   content: "\e126";
414 | }
415 | .glyphicon-hand-right:before {
416 |   content: "\e127";
417 | }
418 | .glyphicon-hand-left:before {
419 |   content: "\e128";
420 | }
421 | .glyphicon-hand-up:before {
422 |   content: "\e129";
423 | }
424 | .glyphicon-hand-down:before {
425 |   content: "\e130";
426 | }
427 | .glyphicon-circle-arrow-right:before {
428 |   content: "\e131";
429 | }
430 | .glyphicon-circle-arrow-left:before {
431 |   content: "\e132";
432 | }
433 | .glyphicon-circle-arrow-up:before {
434 |   content: "\e133";
435 | }
436 | .glyphicon-circle-arrow-down:before {
437 |   content: "\e134";
438 | }
439 | .glyphicon-globe:before {
440 |   content: "\e135";
441 | }
442 | .glyphicon-wrench:before {
443 |   content: "\e136";
444 | }
445 | .glyphicon-tasks:before {
446 |   content: "\e137";
447 | }
448 | .glyphicon-filter:before {
449 |   content: "\e138";
450 | }
451 | .glyphicon-briefcase:before {
452 |   content: "\e139";
453 | }
454 | .glyphicon-fullscreen:before {
455 |   content: "\e140";
456 | }
457 | .glyphicon-dashboard:before {
458 |   content: "\e141";
459 | }
460 | .glyphicon-paperclip:before {
461 |   content: "\e142";
462 | }
463 | .glyphicon-heart-empty:before {
464 |   content: "\e143";
465 | }
466 | .glyphicon-link:before {
467 |   content: "\e144";
468 | }
469 | .glyphicon-phone:before {
470 |   content: "\e145";
471 | }
472 | .glyphicon-pushpin:before {
473 |   content: "\e146";
474 | }
475 | .glyphicon-usd:before {
476 |   content: "\e148";
477 | }
478 | .glyphicon-gbp:before {
479 |   content: "\e149";
480 | }
481 | .glyphicon-sort:before {
482 |   content: "\e150";
483 | }
484 | .glyphicon-sort-by-alphabet:before {
485 |   content: "\e151";
486 | }
487 | .glyphicon-sort-by-alphabet-alt:before {
488 |   content: "\e152";
489 | }
490 | .glyphicon-sort-by-order:before {
491 |   content: "\e153";
492 | }
493 | .glyphicon-sort-by-order-alt:before {
494 |   content: "\e154";
495 | }
496 | .glyphicon-sort-by-attributes:before {
497 |   content: "\e155";
498 | }
499 | .glyphicon-sort-by-attributes-alt:before {
500 |   content: "\e156";
501 | }
502 | .glyphicon-unchecked:before {
503 |   content: "\e157";
504 | }
505 | .glyphicon-expand:before {
506 |   content: "\e158";
507 | }
508 | .glyphicon-collapse-down:before {
509 |   content: "\e159";
510 | }
511 | .glyphicon-collapse-up:before {
512 |   content: "\e160";
513 | }
514 | .glyphicon-log-in:before {
515 |   content: "\e161";
516 | }
517 | .glyphicon-flash:before {
518 |   content: "\e162";
519 | }
520 | .glyphicon-log-out:before {
521 |   content: "\e163";
522 | }
523 | .glyphicon-new-window:before {
524 |   content: "\e164";
525 | }
526 | .glyphicon-record:before {
527 |   content: "\e165";
528 | }
529 | .glyphicon-save:before {
530 |   content: "\e166";
531 | }
532 | .glyphicon-open:before {
533 |   content: "\e167";
534 | }
535 | .glyphicon-saved:before {
536 |   content: "\e168";
537 | }
538 | .glyphicon-import:before {
539 |   content: "\e169";
540 | }
541 | .glyphicon-export:before {
542 |   content: "\e170";
543 | }
544 | .glyphicon-send:before {
545 |   content: "\e171";
546 | }
547 | .glyphicon-floppy-disk:before {
548 |   content: "\e172";
549 | }
550 | .glyphicon-floppy-saved:before {
551 |   content: "\e173";
552 | }
553 | .glyphicon-floppy-remove:before {
554 |   content: "\e174";
555 | }
556 | .glyphicon-floppy-save:before {
557 |   content: "\e175";
558 | }
559 | .glyphicon-floppy-open:before {
560 |   content: "\e176";
561 | }
562 | .glyphicon-credit-card:before {
563 |   content: "\e177";
564 | }
565 | .glyphicon-transfer:before {
566 |   content: "\e178";
567 | }
568 | .glyphicon-cutlery:before {
569 |   content: "\e179";
570 | }
571 | .glyphicon-header:before {
572 |   content: "\e180";
573 | }
574 | .glyphicon-compressed:before {
575 |   content: "\e181";
576 | }
577 | .glyphicon-earphone:before {
578 |   content: "\e182";
579 | }
580 | .glyphicon-phone-alt:before {
581 |   content: "\e183";
582 | }
583 | .glyphicon-tower:before {
584 |   content: "\e184";
585 | }
586 | .glyphicon-stats:before {
587 |   content: "\e185";
588 | }
589 | .glyphicon-sd-video:before {
590 |   content: "\e186";
591 | }
592 | .glyphicon-hd-video:before {
593 |   content: "\e187";
594 | }
595 | .glyphicon-subtitles:before {
596 |   content: "\e188";
597 | }
598 | .glyphicon-sound-stereo:before {
599 |   content: "\e189";
600 | }
601 | .glyphicon-sound-dolby:before {
602 |   content: "\e190";
603 | }
604 | .glyphicon-sound-5-1:before {
605 |   content: "\e191";
606 | }
607 | .glyphicon-sound-6-1:before {
608 |   content: "\e192";
609 | }
610 | .glyphicon-sound-7-1:before {
611 |   content: "\e193";
612 | }
613 | .glyphicon-copyright-mark:before {
614 |   content: "\e194";
615 | }
616 | .glyphicon-registration-mark:before {
617 |   content: "\e195";
618 | }
619 | .glyphicon-cloud-download:before {
620 |   content: "\e197";
621 | }
622 | .glyphicon-cloud-upload:before {
623 |   content: "\e198";
624 | }
625 | .glyphicon-tree-conifer:before {
626 |   content: "\e199";
627 | }
628 | .glyphicon-tree-deciduous:before {
629 |   content: "\e200";
630 | }
631 | .glyphicon-cd:before {
632 |   content: "\e201";
633 | }
634 | .glyphicon-save-file:before {
635 |   content: "\e202";
636 | }
637 | .glyphicon-open-file:before {
638 |   content: "\e203";
639 | }
640 | .glyphicon-level-up:before {
641 |   content: "\e204";
642 | }
643 | .glyphicon-copy:before {
644 |   content: "\e205";
645 | }
646 | .glyphicon-paste:before {
647 |   content: "\e206";
648 | }
649 | .glyphicon-alert:before {
650 |   content: "\e209";
651 | }
652 | .glyphicon-equalizer:before {
653 |   content: "\e210";
654 | }
655 | .glyphicon-king:before {
656 |   content: "\e211";
657 | }
658 | .glyphicon-queen:before {
659 |   content: "\e212";
660 | }
661 | .glyphicon-pawn:before {
662 |   content: "\e213";
663 | }
664 | .glyphicon-bishop:before {
665 |   content: "\e214";
666 | }
667 | .glyphicon-knight:before {
668 |   content: "\e215";
669 | }
670 | .glyphicon-baby-formula:before {
671 |   content: "\e216";
672 | }
673 | .glyphicon-tent:before {
674 |   content: "\26fa";
675 | }
676 | .glyphicon-blackboard:before {
677 |   content: "\e218";
678 | }
679 | .glyphicon-bed:before {
680 |   content: "\e219";
681 | }
682 | .glyphicon-apple:before {
683 |   content: "\f8ff";
684 | }
685 | .glyphicon-erase:before {
686 |   content: "\e221";
687 | }
688 | .glyphicon-hourglass:before {
689 |   content: "\231b";
690 | }
691 | .glyphicon-lamp:before {
692 |   content: "\e223";
693 | }
694 | .glyphicon-duplicate:before {
695 |   content: "\e224";
696 | }
697 | .glyphicon-piggy-bank:before {
698 |   content: "\e225";
699 | }
700 | .glyphicon-scissors:before {
701 |   content: "\e226";
702 | }
703 | .glyphicon-bitcoin:before {
704 |   content: "\e227";
705 | }
706 | .glyphicon-btc:before {
707 |   content: "\e227";
708 | }
709 | .glyphicon-xbt:before {
710 |   content: "\e227";
711 | }
712 | .glyphicon-yen:before {
713 |   content: "\00a5";
714 | }
715 | .glyphicon-jpy:before {
716 |   content: "\00a5";
717 | }
718 | .glyphicon-ruble:before {
719 |   content: "\20bd";
720 | }
721 | .glyphicon-rub:before {
722 |   content: "\20bd";
723 | }
724 | .glyphicon-scale:before {
725 |   content: "\e230";
726 | }
727 | .glyphicon-ice-lolly:before {
728 |   content: "\e231";
729 | }
730 | .glyphicon-ice-lolly-tasted:before {
731 |   content: "\e232";
732 | }
733 | .glyphicon-education:before {
734 |   content: "\e233";
735 | }
736 | .glyphicon-option-horizontal:before {
737 |   content: "\e234";
738 | }
739 | .glyphicon-option-vertical:before {
740 |   content: "\e235";
741 | }
742 | .glyphicon-menu-hamburger:before {
743 |   content: "\e236";
744 | }
745 | .glyphicon-modal-window:before {
746 |   content: "\e237";
747 | }
748 | .glyphicon-oil:before {
749 |   content: "\e238";
750 | }
751 | .glyphicon-grain:before {
752 |   content: "\e239";
753 | }
754 | .glyphicon-sunglasses:before {
755 |   content: "\e240";
756 | }
757 | .glyphicon-text-size:before {
758 |   content: "\e241";
759 | }
760 | .glyphicon-text-color:before {
761 |   content: "\e242";
762 | }
763 | .glyphicon-text-background:before {
764 |   content: "\e243";
765 | }
766 | .glyphicon-object-align-top:before {
767 |   content: "\e244";
768 | }
769 | .glyphicon-object-align-bottom:before {
770 |   content: "\e245";
771 | }
772 | .glyphicon-object-align-horizontal:before {
773 |   content: "\e246";
774 | }
775 | .glyphicon-object-align-left:before {
776 |   content: "\e247";
777 | }
778 | .glyphicon-object-align-vertical:before {
779 |   content: "\e248";
780 | }
781 | .glyphicon-object-align-right:before {
782 |   content: "\e249";
783 | }
784 | .glyphicon-triangle-right:before {
785 |   content: "\e250";
786 | }
787 | .glyphicon-triangle-left:before {
788 |   content: "\e251";
789 | }
790 | .glyphicon-triangle-bottom:before {
791 |   content: "\e252";
792 | }
793 | .glyphicon-triangle-top:before {
794 |   content: "\e253";
795 | }
796 | .glyphicon-console:before {
797 |   content: "\e254";
798 | }
799 | .glyphicon-superscript:before {
800 |   content: "\e255";
801 | }
802 | .glyphicon-subscript:before {
803 |   content: "\e256";
804 | }
805 | .glyphicon-menu-left:before {
806 |   content: "\e257";
807 | }
808 | .glyphicon-menu-right:before {
809 |   content: "\e258";
810 | }
811 | .glyphicon-menu-down:before {
812 |   content: "\e259";
813 | }
814 | .glyphicon-menu-up:before {
815 |   content: "\e260";
816 | }


--------------------------------------------------------------------------------
/fonts/glyphicons/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/glyphicons/fonts/glyphicons-halflings-regular.eot


--------------------------------------------------------------------------------
/fonts/glyphicons/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/glyphicons/fonts/glyphicons-halflings-regular.ttf


--------------------------------------------------------------------------------
/fonts/glyphicons/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/glyphicons/fonts/glyphicons-halflings-regular.woff


--------------------------------------------------------------------------------
/fonts/glyphicons/fonts/glyphicons-halflings-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/fonts/glyphicons/fonts/glyphicons-halflings-regular.woff2


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/1.jpg


--------------------------------------------------------------------------------
/img/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/10.jpg


--------------------------------------------------------------------------------
/img/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/11.jpg


--------------------------------------------------------------------------------
/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/12.jpg


--------------------------------------------------------------------------------
/img/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/13.jpg


--------------------------------------------------------------------------------
/img/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/14.jpg


--------------------------------------------------------------------------------
/img/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/15.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/2.jpg


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/3.jpg


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/4.jpg


--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/5.jpg


--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/6.jpg


--------------------------------------------------------------------------------
/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/7.jpg


--------------------------------------------------------------------------------
/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/8.jpg


--------------------------------------------------------------------------------
/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/9.jpg


--------------------------------------------------------------------------------
/img/fashion/female/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/1.jpg


--------------------------------------------------------------------------------
/img/fashion/female/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/2.jpg


--------------------------------------------------------------------------------
/img/fashion/female/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/3.jpg


--------------------------------------------------------------------------------
/img/fashion/female/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/4.jpg


--------------------------------------------------------------------------------
/img/fashion/female/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/5.jpg


--------------------------------------------------------------------------------
/img/fashion/female/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/6.jpg


--------------------------------------------------------------------------------
/img/fashion/female/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/7.jpg


--------------------------------------------------------------------------------
/img/fashion/female/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/female/8.jpg


--------------------------------------------------------------------------------
/img/fashion/male/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/1.jpg


--------------------------------------------------------------------------------
/img/fashion/male/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/2.jpg


--------------------------------------------------------------------------------
/img/fashion/male/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/3.jpg


--------------------------------------------------------------------------------
/img/fashion/male/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/4.jpg


--------------------------------------------------------------------------------
/img/fashion/male/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/5.jpg


--------------------------------------------------------------------------------
/img/fashion/male/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/6.jpg


--------------------------------------------------------------------------------
/img/fashion/male/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/7.jpg


--------------------------------------------------------------------------------
/img/fashion/male/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/fashion/male/8.jpg


--------------------------------------------------------------------------------
/img/front-home-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/front-home-banner.jpg


--------------------------------------------------------------------------------
/img/map/map.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ppsyche/onlineShop/7f799a842e1014119ca9170d4c7ae679336032c5/img/map/map.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>首页</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/index.css">
 10 | 
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div id="banner">
 68 | 		<div class="wrapper" style="position: relative;">
 69 | 			<img src="img/front-home-banner.jpg" alt="">
 70 | 			<div class="banner-content">
 71 | 				<h1>FLAT KIT Template</h1>
 72 | 				<p>
 73 | 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis vulputate nunc, fermentum blandit eros eleifend a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, lorem nec molestie pharetra, felis mi vulputate sem, ac vehicula odio augue in odio. Quisque cursus dui
 74 | 				</p>
 75 | 				<a href="#" class="check-out"><span class="glyphicon glyphicon-menu-right"></span> check it out</a>
 76 | 				<a href="#" class="buy-now"><span class="glyphicon glyphicon-usd"></span> buy it now</a>
 77 | 			</div>
 78 | 		</div>		
 79 | 	</div>
 80 | 	<div id="awesome">
 81 | 		<span id="text-primary">Awesome</span>
 82 | 		<span id="text-features">Features</span>
 83 | 		<span id="hidden-phone">Lovely headline here</span>
 84 | 	</div>
 85 | 	<div id="content" class="wrapper">
 86 | 		<div id="slogan">
 87 | 		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to
 88 | 		</div>
 89 | 		<ul id="features">
 90 | 			<li>
 91 | 			<span class="glyphicon glyphicon-time"></span>
 92 | 			<h3>Fully Responsive</h3>
 93 | 			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
 94 | 			<a href="#">learn more</a>
 95 | 			</li>
 96 | 			<li>
 97 | 			<span class="glyphicon glyphicon-phone"></span>
 98 | 			<h3>Mobile Friendly</h3>
 99 | 			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
100 | 			<a href="#">learn more</a>
101 | 			</li>
102 | 			<li class="selected">
103 | 			<span class="glyphicon glyphicon-cutlery"></span>
104 | 			<h3>Easy Customizable</h3>
105 | 			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
106 | 			<a href="#">learn more</a>
107 | 			</li>
108 | 			<li>
109 | 			<span class="glyphicon glyphicon-cutlery"></span>
110 | 			<h3>Unlimited colors</h3>
111 | 			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley. of.type and scrambled it to</p>
112 | 			<a href="#">learn more</a>
113 | 			</li>
114 | 		</ul>
115 | 		<div id="follow-us">
116 | 			<h3>Follow us on:</h3>
117 | 			<ul id="follow-list">
118 | 				<li class="selected"><a href="#"><span class="icon icon-facebook-sign"></span><br>facebook</a></li>
119 | 				<li><a href="#"><span class="icon icon-google-plus-sign"></span><br>google+</a></li>
120 | 				<li><a href="#"><span class="icon icon-twitter-sign"></span><br>twitter</a></li>
121 | 				<li><a href="#"><span class="icon icon-tumblr-sign"></span><br>forrst</a></li>
122 | 				<li><a href="#"><span class="icon icon-share-sign"></span><br>skype</a></li>
123 | 			</ul>
124 | 		</div>
125 | 	</div>
126 | 	<h3 id="testimonials" class="wrapper">
127 | 		<span class="glyphicon glyphicon-comment"></span>
128 | 		Testimonials
129 | 	</h3>
130 | 	<div id="user-list" class="wrapper">
131 | 		<div class="user">
132 | 			<span class="glyphicon glyphicon-user"></span>
133 | 			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
134 | 			<p class="by">by&nbsp<a href="#">john&nbspdoe</a></p>
135 | 		</div>
136 | 		<div class="user">
137 | 			<span class="glyphicon glyphicon-user"></span>
138 | 			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
139 | 			<p class="by">by&nbsp<a href="#">jane&nbspdoe</a></p>
140 | 		</div>
141 | 	</div>
142 | 	<div id="bner" class="wrapper">
143 | 		<div class="bner-left">
144 | 			<h2>Give your ADMIN a new look <strong>Today</strong></h2>
145 | 			<p>Unlimited Colors | 420+ Icons Included | Fully Responsive | Duzines of Pages</p>
146 | 		</div>
147 | 		<a href="#" class="bner-right">
148 | 			<span class="glyphicon glyphicon-usd"></span>
149 | 			<p>Buy it now!</p>
150 | 			<p>on ThemeForest.net</p>
151 | 		</a>
152 | 	</div>
153 | 	<div id="footer">
154 | 		<div class="wrapper">
155 | 			<div class="foot-top">
156 | 				<div class="quick-links left">
157 | 					<h4>QUICK LINKS</h4>
158 | 					<ul>
159 | 						<li><a>Home</a></li>
160 | 						<li><a>About</a></li>
161 | 						<li><a>pricing</a></li>
162 | 						<li><a>Blog</a></li>
163 | 						<li><a>Contact</a></li>
164 | 					</ul>
165 | 				</div>
166 | 				<div class="about left">
167 | 					<h4>ABOUT</h4>
168 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
169 | 				</div>
170 | 				<div class="out-blog left">
171 | 					<h4>OUR BLOG</h4>
172 | 					<ul>
173 | 						<li><a>What is Lorem Ipsum?</a></li>
174 | 						<li><a>What is Lorem Ipsum?</a></li>
175 | 						<li><a>What is Lorem Ipsum?</a></li>
176 | 						<li><a>What is Lorem Ipsum?</a></li>
177 | 						<li><a>What is Lorem Ipsum?</a></li>
178 | 					</ul>
179 | 				</div>
180 | 				<div class="contact right">
181 | 					<h4>CONTACT</h4>
182 | 					<ul>
183 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
184 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
185 | 					</ul>
186 | 				</div>
187 | 				<div class="social right">
188 | 					<h4>SOCIAL</h4>
189 | 					<ul>
190 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
191 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
192 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
193 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
194 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
195 | 					</ul>
196 | 				</div>
197 | 				<div class="clearfix"></div>
198 | 			</div>
199 | 			<div class="copyright">
200 | 				<span>© 2013 -</span>
201 | 				<a href="#"> mosaicpro.biz</a>
202 | 				<span class="text-right">FLAT KIT</span>
203 | 			</div>
204 | 		</div>
205 | 	</div>
206 | </body>
207 | </html>
208 | <!-- icon icon-facebook-sign -->
209 | 


--------------------------------------------------------------------------------
/js/catalog.js:
--------------------------------------------------------------------------------
 1 | var btnBox = getClass('carousel-btns')[0];
 2 | var aBtns = btnBox.getElementsByTagName('li');
 3 | var aItem = getClass('carousel-item');
 4 | var oImgBox = getClass('carousel-imgs')[0];
 5 | var oCarousel = getClass('carousel')[0];
 6 | var iNow = 0;
 7 | var timer;
 8 | 
 9 | for(var i=0; i<aBtns.length; i++){
10 | 	aBtns[i].index = i;
11 | 	aBtns[i].onclick = function() {
12 | 		change(this.index);
13 | 		iNow = this.index;
14 | 	}
15 | }
16 | run();
17 | oCarousel.onmouseover = function(){
18 | 	clearInterval(timer);
19 | }
20 | oCarousel.onmouseout = function(){
21 | 	run();
22 | }
23 | function run(){
24 | 	timer = setInterval(function(){
25 | 		iNow++;
26 | 		if(iNow == aBtns.length){
27 | 			iNow = 0;
28 | 		}
29 | 		change(iNow);
30 | 	},4000);
31 | }
32 | 
33 | function change(idx){
34 | 	for (var j = 0; j < aBtns.length; j++) {
35 | 		aBtns[j].className = '';
36 | 	}
37 | 	// animate(oImgBox,{
38 | 	// 	left:-aItem[0].offsetWidth * idx
39 | 	// });
40 | 	oImgBox.style.left = -aItem[0].offsetWidth * idx +"px";
41 | 	aBtns[idx].className = 'selected';
42 | }


--------------------------------------------------------------------------------
/js/product.js:
--------------------------------------------------------------------------------
 1 | //选项卡
 2 | var oTabBox = document.getElementById('right-bottom'),
 3 | 	aLii = oTabBox.getElementsByTagName('li'),
 4 | 	aDiv = getClass('js-box',oTabBox);
 5 | 
 6 | 	for (var i = 0; i < aLii.length; i++) {
 7 | 		aLii[i].index = i;
 8 | 		aLii[i].onclick = function(){
 9 | 			for (var j = 0; j < aDiv.length; j++) {
10 | 				aDiv[j].style.display = 'none';
11 | 				aLii[j].className = '';
12 | 			}
13 | 			this.className = 'active';
14 | 			aDiv[this.index].style.display = 'block';
15 | 		}
16 | 	}
17 | // 弹层
18 | 
19 | var oSmallImg = getClass('small-imgs')[0];
20 | var aDialogLi = oSmallImg.getElementsByTagName('li');
21 | var oDialogBox = getClass('dialog-box')[0];
22 | var oDialogBody = getClass('dialog-body',oDialogBox)[0];
23 | var oDialogImg = oDialogBody.getElementsByTagName('img')[0];
24 | var oDialogClose = getClass('dialog-close',oDialogBox)[0];
25 | var oDialogPrev = getClass('dialog-prev',oDialogBox)[0];
26 | var oDialogNext = getClass('dialog-next',oDialogBox)[0];
27 | var oSlideBtn = getClass('slide-btn',oDialogBox)[0];
28 | var oContent = getClass('content',oDialogBox)[0];
29 | var iNow = 0;
30 | for(var i=0; i<aDialogLi.length; i++){
31 | 	aDialogLi[i].index = i;
32 | 	aDialogLi[i].onclick = function(){
33 | 		var oImg = this.getElementsByTagName('img')[0];
34 | 		oDialogBox.style.display = 'block';
35 | 		oDialogImg.src=oImg.src;
36 | 
37 | 		oContent.style.animation = 'show 1s ease forwards';
38 | 		iNow = this.index;
39 | 	}
40 | }
41 | // 关闭弹层
42 | oDialogBox.onclick = function(e){
43 | 	var target = e.target || event.srcElement;
44 | 	if(target == oDialogBox || target == oDialogClose){
45 | 		oDialogBox.style.display = 'none';
46 | 	}
47 | }
48 | oDialogPrev.onclick = function(){
49 | 	iNow--;
50 | 	if(iNow == -1){
51 | 		iNow = aDialogLi.length -1;
52 | 	}
53 | 	slideNext();
54 | 	/*var prevLi = aDialogLi[iNow];
55 | 	oDialogImg.src = prevLi.getElementsByTagName('img')[0].src;*/
56 | 
57 | }
58 | oDialogNext.onclick = function(){
59 | 	iNow++;
60 | 	if(iNow == aDialogLi.length){
61 | 		iNow = 0;
62 | 	}
63 | 	slideNext();
64 | 	//oDialogImg.src = prevLi.getElementsByTagName('img')[0].src;
65 | }
66 | function slideNext(){
67 | 	//取到下一个li
68 | 	var nextLi = aDialogLi[iNow];
69 | 	//取到下一个li里的图片的src属性
70 | 	var nextSrc = nextLi.getElementsByTagName('img')[0].src;
71 | 	//创建一个新的img
72 | 	var oImg = document.createElement('img');
73 | 	oImg.src=nextSrc;
74 | 	//获取到原有图片
75 | 	var oldImg = oDialogBody.children[0];
76 | 	//插入一张新图，在原有图片前边
77 | 	oDialogBody.insertBefore(oImg,oldImg);
78 | 	//原有图片动画隐藏
79 | 	oldImg.style.animation = 'hide 1s ease forwards';
80 | 	//原有图片动画隐藏后 remove掉
81 | 	setTimeout(function(){
82 | 		oDialogBody.removeChild(oldImg);
83 | 	},1000);
84 | }
85 | var timer = '';
86 | oSlideBtn.onclick = function(){
87 | 	if(timer){
88 | 		clearInterval(timer);
89 | 		timer = '';
90 | 	}else{
91 | 		timer = setInterval(function(){
92 | 			oDialogPrev.onclick();
93 | 		},1000);
94 | 	}
95 | }
96 | 


--------------------------------------------------------------------------------
/js/shopcart.js:
--------------------------------------------------------------------------------
 1 | var oTbody = document.getElementsByTagName('tbody')[0];
 2 | var aTr = oTbody.getElementsByTagName('tr');
 3 | 
 4 | var oThead = document.getElementsByTagName('thead')[0];
 5 | var oTr = oThead.getElementsByTagName('tr')[0];
 6 | var oCheckAll = oTr.getElementsByTagName('input')[0];
 7 | var aCheck = getClass('checkbox',oTbody);
 8 | 
 9 | for (var i = 0; i < aTr.length; i++) {
10 | 	aTr[i].onclick = function(){
11 | 		var oCheck = this.getElementsByTagName('input')[0];
12 | 		if(this.className == 'selected'){
13 | 			this.className = '';
14 | 			oCheck.checked = false;
15 | 		}else{
16 | 			this.className = "selected";
17 | 			oCheck.checked = true;
18 | 		}
19 | 		//判断是否全被勾上
20 | 		var aCheckTr = getClass('selected',oTbody);
21 | 		if(aCheckTr.length == aTr.length){
22 | 			oCheckAll.checked = true;
23 | 		}
24 | 		else{
25 | 			oCheckAll.checked = false;
26 | 		}
27 | 		
28 | 	}
29 | }
30 | 
31 | oCheckAll.onclick = function(){
32 | 	if(oCheckAll.checked == true){
33 | 		oCheckAll.checked = true;
34 | 		for (var i = 0; i < aTr.length; i++) {
35 | 			aTr[i].className = "selected";
36 | 			aCheck[i].checked = true;
37 | 		}
38 | 	}
39 | 	else{
40 | 		oCheckAll.checked = false;
41 | 		for (var i = 0; i < aTr.length; i++) {
42 | 			aTr[i].className = "";
43 | 			aCheck[i].checked = false;
44 | 		}
45 | 	}
46 | }


--------------------------------------------------------------------------------
/js/style.js:
--------------------------------------------------------------------------------
 1 | function getClass(clsName,context){
 2 | 	var result = [];
 3 | 	context = context || document;
 4 | 	var arr = context.getElementsByTagName('*');
 5 | 	for(var i=0; i<arr.length; i++){
 6 | 		//class  保留字 .className
 7 | 		//'aa bb' == 'aa'   'aacc'
 8 | 		if(arr[i].className.indexOf(clsName) != -1){
 9 | 			result.push(arr[i]);
10 | 		}
11 | 	}
12 | 	return result;
13 | }
14 | var oMenuBox = document.getElementById('menu-box');
15 | var aLi = getClass('menu-btn',oMenuBox);
16 | 
17 | for(var i=0; i<aLi.length; i++){
18 | 	aLi[i].onmouseover = function(){
19 | 		// alert("hahah");
20 | 		// console.log(aLi[i]); //i = 2;
21 | 		//this  //对当前对象的引用
22 | 		var aUl = this.getElementsByTagName('ul'); 
23 | 		aUl[0].style.display = 'block';
24 | 	}
25 | 	aLi[i].onmouseout = function(){
26 | 		var oUl = this.getElementsByTagName('ul')[0];
27 | 		oUl.style.display = 'none';
28 | 	}
29 | }
30 | 
31 | //console.log(i);
32 | 
33 | function animate(elem, attr, callback){
34 | 	clearInterval(elem.timer);
35 | 	elem.timer = setInterval(function(){
36 | 		var bStop = true;//一个标识位，true代表可以停止定时器，false代表不可不停止
37 | 		for(var prop in attr){//1:width
38 | 			var curr = parseInt(getStyle(elem, prop));
39 | 			if(prop == 'opacity'){
40 | 				curr = parseInt(getStyle(elem, prop)*100);
41 | 			}
42 | 			var speed = (attr[prop] -  curr) / 8;
43 | 			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
44 | 
45 | 			if(curr != attr[prop]){
46 | 				bStop = false;
47 | 			}
48 | 
49 | 			if(prop == 'opacity'){
50 | 				elem.style.opacity = (curr + speed) / 100;
51 | 				elem.style.filter = 'alpha(opacity='+(curr + speed)+')';
52 | 			}else{
53 | 				elem.style[prop] = curr + speed + 'px';
54 | 			}
55 | 		}
56 | 		if(bStop){
57 | 			clearInterval(elem.timer);
58 | 			callback && callback();
59 | 		}
60 | 	}, 30);
61 | }
62 | 
63 | function getStyle(elem, attr){
64 | 	if(elem.currentStyle){//IE
65 | 		return elem.currentStyle[attr];
66 | 	}else{
67 | 		return getComputedStyle(elem, false)[attr];
68 | 	}
69 | }
70 | 
71 | 
72 | 
73 | 
74 | 
75 | 
76 | 
77 | 
78 | 
79 | 


--------------------------------------------------------------------------------
/posts.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>Document</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/posts.css">
 10 | 	<link rel="stylesheet" href="css/carousel.css">
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div class="zhan"></div>
 68 | 	<div id="center" class="wrapper">
 69 | 		<h2 id="title">
 70 | 			<span class="glyphicon glyphicon-list-alt"></span>
 71 | 			Blog
 72 | 		</h2>
 73 | 		<div id="main">
 74 | 			<div id="side-bar">
 75 | 				<ul>
 76 | 					<li><a href="#">Make Up</a><span>35</span></li>
 77 | 					<li><a href="#">Fragrances</a><span>30</span></li>
 78 | 					<li><a href="#">Nails</a><span>19</span></li>
 79 | 					<li><a href="#">Hair Products</a><span>33</span></li>
 80 | 					<li><a href="#">Accessories</a><span>17</span></li>
 81 | 				</ul>
 82 | 				<div class="hr">
 83 | 					<span class="glyphicon glyphicon-option-horizontal">
 84 | 
 85 | 					</span>
 86 | 				</div>
 87 | 				<h5 class="important-note">
 88 | 					<span class="glyphicon glyphicon-warning-sign"></span>
 89 | 					Important note
 90 | 				</h5>
 91 | 				<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat massa, ultricies sit amet.</p>
 92 | 				<div class="hr">
 93 | 					<span class="glyphicon glyphicon-option-horizontal">
 94 | 
 95 | 					</span>
 96 | 				</div>
 97 | 				<h5 class="important-note">
 98 | 					<span class="glyphicon glyphicon-tags"></span>
 99 | 					Labels
100 | 				</h5>
101 | 				<p class="labels">
102 | 					<span>responsive blog</span>
103 | 					<span>12 column grid</span><br>
104 | 					<span>awesome</span> 
105 | 					<span>mobile first</span>
106 | 					<br>
107 | 					<span>easy development</span>
108 | 					<span>html template</span></p>
109 | 			</div>
110 | 			<div id="question-list">
111 | 				<div class="question-box one">
112 | 					<a href="#" class="img-box">
113 | 						<img src="img/2.jpg" alt="">
114 | 					</a>
115 | 					<div class="text-box">
116 | 						<h4>WHAT IS LOREM IPSUM?</h4>
117 | 						<p>
118 | 							<span class="glyphicon glyphicon-user"></span>by
119 | 							<a href="#" class="a-hover">mosaicpro</a>
120 | 							<span class="glyphicon glyphicon-calendar"></span>
121 | 							on 15th June, 2013
122 | 							<span class="glyphicon glyphicon-comment"></span>
123 | 							15 comments
124 | 						</p>
125 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
126 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
127 | 					</div>
128 | 
129 | 					<div class="clear"></div>
130 | 				</div>
131 | 				<div class="question-box two">
132 | 					<a href="#" class="img-box">
133 | 						<img src="img/4.jpg" alt="">
134 | 					</a>
135 | 					<div class="text-box">
136 | 						<h4>WHAT IS LOREM IPSUM?</h4>
137 | 						<p>
138 | 							<span class="glyphicon glyphicon-user"></span>by
139 | 							<a href="#">mosaicpro</a>
140 | 							<span class="glyphicon glyphicon-calendar"></span>
141 | 							on 15th June, 2013
142 | 						</p>
143 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
144 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
145 | 						<span class="glyphicon glyphicon-comment"></span>
146 | 							15 comments
147 | 					</div>
148 | 
149 | 					<div class="clear"></div>
150 | 				</div>
151 | 
152 | 				<div class="question-box three">
153 | 					<a href="#" class="img-box">
154 | 						<img src="img/7.jpg" alt="">
155 | 					</a>
156 | 					<div class="text-box">
157 | 						<h4>WHAT IS LOREM IPSUM?</h4>
158 | 						<p>
159 | 							<span class="glyphicon glyphicon-user"></span>by
160 | 							<a href="#">mosaicpro</a>
161 | 							<span class="glyphicon glyphicon-calendar"></span>
162 | 							on 15th June, 2013
163 | 						</p>
164 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
165 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
166 | 						<span class="glyphicon glyphicon-comment"></span>
167 | 							15 comments
168 | 					</div>
169 | 
170 | 					<div class="clear"></div>
171 | 				</div>
172 | 				<div class="question-box four">
173 | 					<a href="#" class="img-box">
174 | 						<img src="img/8.jpg" alt="">
175 | 					</a>
176 | 					<div class="text-box">
177 | 						<h4>WHAT IS LOREM IPSUM?</h4>
178 | 						<p>
179 | 							<span class="glyphicon glyphicon-user"></span>by
180 | 							<a href="#">mosaicpro</a>
181 | 							<span class="glyphicon glyphicon-calendar"></span>
182 | 							on 15th June, 2013
183 | 							<span class="glyphicon glyphicon-comment"></span>
184 | 							15 comments
185 | 						</p>
186 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
187 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
188 | 					</div>
189 | 
190 | 					<div class="clear"></div>
191 | 				</div>
192 | 
193 | 
194 | 
195 | 			</div>
196 | 		</div>
197 | 		<div class="clear"></div>
198 | 	</div>
199 | 
200 | 	<div id="footer">
201 | 		<div class="wrapper">
202 | 			<div class="foot-top">
203 | 				<div class="quick-links left">
204 | 					<h4>QUICK LINKS</h4>
205 | 					<ul>
206 | 						<li><a>Home</a></li>
207 | 						<li><a>About</a></li>
208 | 						<li><a>pricing</a></li>
209 | 						<li><a>Blog</a></li>
210 | 						<li><a>Contact</a></li>
211 | 					</ul>
212 | 				</div>
213 | 				<div class="about left">
214 | 					<h4>ABOUT</h4>
215 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
216 | 				</div>
217 | 				<div class="out-blog left">
218 | 					<h4>OUR BLOG</h4>
219 | 					<ul>
220 | 						<li><a>What is Lorem Ipsum?</a></li>
221 | 						<li><a>What is Lorem Ipsum?</a></li>
222 | 						<li><a>What is Lorem Ipsum?</a></li>
223 | 						<li><a>What is Lorem Ipsum?</a></li>
224 | 						<li><a>What is Lorem Ipsum?</a></li>
225 | 					</ul>
226 | 				</div>
227 | 				<div class="contact right">
228 | 					<h4>CONTACT</h4>
229 | 					<ul>
230 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
231 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
232 | 					</ul>
233 | 				</div>
234 | 				<div class="social right">
235 | 					<h4>SOCIAL</h4>
236 | 					<ul>
237 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
238 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
239 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
240 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
241 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
242 | 					</ul>
243 | 				</div>
244 | 				<div class="clearfix"></div>
245 | 			</div>
246 | 			<div class="copyright">
247 | 				<span>© 2013 -</span>
248 | 				<a href="#"> mosaicpro.biz</a>
249 | 				<span class="text-right">FLAT KIT</span>
250 | 			</div>
251 | 		</div>
252 | 	</div>
253 | </body>
254 | </html>


--------------------------------------------------------------------------------
/product.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>商品详情</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/product.css">
 10 | 	<link rel="stylesheet" href="css/carousel.css">
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div class="zhan"></div>
 68 | 	<div id="center" class="wrapper">
 69 | 		<h2 id="title">
 70 | 			<span class="glyphicon glyphicon-gift"></span>
 71 | 			Product name goes here
 72 | 		</h2>
 73 | 		<div id="main">
 74 | 			<div id="main-left">
 75 | 				<a class="big-img-box">
 76 | 					<img src="img\fashion\female\1.jpg" alt="" class="big-img">
 77 | 				</a>
 78 | 				<div class="hr">
 79 | 					<span class="glyphicon glyphicon-picture">
 80 | 					</span>
 81 | 				</div>
 82 | 				<ul class="small-imgs">
 83 | 					<li>
 84 | 						<a href="#" class="small-img-box">
 85 | 							<img src="img\fashion\female\1.jpg" alt="图1" class="small-img">
 86 | 						</a>
 87 | 					</li>
 88 | 					<li>
 89 | 						<a href="#" class="small-img-box">
 90 | 							<img src="img\fashion\female\2.jpg" alt="图2" class="small-img">
 91 | 						</a>
 92 | 					</li>
 93 | 					<li>
 94 | 						<a href="#" class="small-img-box">
 95 | 							<img src="img\fashion\female\3.jpg" alt="图3" class="small-img">
 96 | 						</a>
 97 | 					</li>
 98 | 					<li>
 99 | 						<a href="#" class="small-img-box">
100 | 							<img src="img\fashion\female\4.jpg" alt="图4" class="small-img">
101 | 						</a>
102 | 					</li>
103 | 				</ul>
104 | 			</div>
105 | 			<div id="main-right">
106 | 				<div class="right-top">
107 | 					<div class="detail">
108 | 						<h3>
109 | 							<span class="glyphicon glyphicon-list-alt"></span>
110 | 							Product description
111 | 						</h3>
112 | 						<div class="p-body">
113 | 							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis porta purus, pulvinar mattis nulla tempus ut. Curabitur quis dui orci. Ut nisi dolor, dignissim a aliquet quis, vulputate id dui. Proin ultrices ultrices ligula.</p><br>
114 | 							<p>Dictum varius turpis faucibus non. Curabitur faucibus ultrices nunc, nec aliquet leo tempor cursus. Pellentesque sed felis ipsum.</p>
115 | 						</div>
116 | 						<h3>
117 | 							<span class="glyphicon glyphicon-warning-sign"></span>
118 | 							Important note
119 | 						</h3>
120 | 						<p class="important-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat massa, ultricies sit amet.</p>
121 | 					</div>
122 | 					<div class="add">
123 | 						<span class="off">50% Off</span>
124 | 						<h4>$1,000.00</h4>
125 | 						<p class="price">$1,119 incl. VAT</p>
126 | 						<p class="btn-title">Select size</p>
127 | 						<select name="select" id="select-size">
128 | 							<option value="1">Option</option>
129 | 							<option value="2">Option</option>
130 | 							<option value="3">Option</option>
131 | 						</select>
132 | 						<p class="btn-title">Qty</p>
133 | 						<input type="text" value="1">
134 | 						<a href="#" class="butten"><span class="glyphicon glyphicon-shopping-cart"></span>
135 | 						Add to cart</a>
136 | 						<div class="share">
137 | 							<span class="txt">Share</span> 
138 | 							<a class="icon icon-facebook-sign"></a>
139 | 							<a class="icon icon-twitter-sign"></a>
140 | 						</div>
141 | 					</div>
142 | 					<div class="clear"></div>
143 | 				</div>
144 | 				<div class="hr">
145 | 					<span class="glyphicon glyphicon-briefcase">
146 | 					</span>
147 | 				</div>
148 | 				<div class="right-bottom" id="right-bottom">
149 | 					<ul class="btn-box">
150 | 						<li class="active"><span class="glyphicon glyphicon-star"></span>Reviews</li>
151 | 						<li><span class="glyphicon glyphicon-blackboard"></span>Delivery</li>
152 | 					</ul>
153 | 					<div class="content-box">
154 | 						<div class="active customer js-box">
155 | 							<div class="one-customer">
156 | 								<span class="glyphicon glyphicon-fire"></span>
157 | 								<h5>Customer name</h5>
158 | 								<p class="star">
159 | 									<span class="glyphicon glyphicon-star"></span>
160 | 									<span class="glyphicon glyphicon-star"></span>
161 | 									<span class="glyphicon glyphicon-star"></span>
162 | 									<span class="glyphicon glyphicon-star"></span>
163 | 									<span class="glyphicon glyphicon-star-empty"></span>
164 | 									<span class="glyphicon glyphicon-calendar"></span>
165 | 									<span>on 22th June, 2013 </span>
166 | 								</p>
167 | 								<p class="text">Aliquam rutrum, sem at scelerisque tempor, nulla diam pulvinar tortor, id pulvinar massa velit eu purus. Curabitur eu fringilla diam, sed suscipit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis enim vel odio imperdiet faucibus. Aliquam erat volutpat.</p>
168 | 							</div>
169 | 							<div class="one-customer">
170 | 								<span class="glyphicon glyphicon-fire"></span>
171 | 								<h5>Customer name</h5>
172 | 								<p class="star">
173 | 									<span class="glyphicon glyphicon-star"></span>
174 | 									<span class="glyphicon glyphicon-star"></span>
175 | 									<span class="glyphicon glyphicon-star"></span>
176 | 									<span class="glyphicon glyphicon-star"></span>
177 | 									<span class="glyphicon glyphicon-star-empty"></span>
178 | 									<span class="glyphicon glyphicon-calendar"></span>
179 | 									<span>on 22th June, 2013 </span>
180 | 								</p>
181 | 								<p class="text">Aliquam rutrum, sem at scelerisque tempor, nulla diam pulvinar tortor, id pulvinar massa velit eu purus. Curabitur eu fringilla diam, sed suscipit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras iaculis enim vel odio imperdiet faucibus. Aliquam erat volutpat.</p>
182 | 							</div>
183 | 						</div>
184 | 						<div class="js-box">
185 | 							<p>
186 | 								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis porta purus, pulvinar mattis nulla tempus ut. Curabitur quis dui orci. Ut nisi dolor, dignissim a aliquet quis, vulputate id dui. Proin ultrices ultrices ligula, dictum varius turpis faucibus non. Curabitur faucibus ultrices nunc, nec aliquet leo tempor cursus. Pellentesque sed felis ipsum. Quisque in lacus sed ante malesuada condimentum et a risus. Morbi accumsan euismod rutrum. Etiam vitae turpis eu est lacinia condimentum a sit amet erat. Sed augue turpis, lobortis ac feugiat eget, cursus ac justo.
187 | 							</p>
188 | 						</div>
189 | 					</div>
190 | 				</div>
191 | 			</div>
192 | 		</div>
193 | 		<div class="clear"></div>
194 | 	</div>
195 | 	<div id="footer">
196 | 		<div class="wrapper">
197 | 			<div class="foot-top">
198 | 				<div class="quick-links left">
199 | 					<h4>QUICK LINKS</h4>
200 | 					<ul>
201 | 						<li><a>Home</a></li>
202 | 						<li><a>About</a></li>
203 | 						<li><a>pricing</a></li>
204 | 						<li><a>Blog</a></li>
205 | 						<li><a>Contact</a></li>
206 | 					</ul>
207 | 				</div>
208 | 				<div class="about left">
209 | 					<h4>ABOUT</h4>
210 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
211 | 				</div>
212 | 				<div class="out-blog left">
213 | 					<h4>OUR BLOG</h4>
214 | 					<ul>
215 | 						<li><a>What is Lorem Ipsum?</a></li>
216 | 						<li><a>What is Lorem Ipsum?</a></li>
217 | 						<li><a>What is Lorem Ipsum?</a></li>
218 | 						<li><a>What is Lorem Ipsum?</a></li>
219 | 						<li><a>What is Lorem Ipsum?</a></li>
220 | 					</ul>
221 | 				</div>
222 | 				<div class="contact right">
223 | 					<h4>CONTACT</h4>
224 | 					<ul>
225 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
226 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
227 | 					</ul>
228 | 				</div>
229 | 				<div class="social right">
230 | 					<h4>SOCIAL</h4>
231 | 					<ul>
232 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
233 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
234 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
235 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
236 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
237 | 					</ul>
238 | 				</div>
239 | 				<div class="clearfix"></div>
240 | 			</div>
241 | 			<div class="copyright">
242 | 				<span>© 2013 -</span>
243 | 				<a href="#"> mosaicpro.biz</a>
244 | 				<span class="text-right">FLAT KIT</span>
245 | 			</div>
246 | 		</div>
247 | 	</div>
248 | 
249 | 
250 | 	<div class="dialog-box">
251 | 		<div class="content">
252 | 			<div class="dialog-title">
253 | 				<span class="dialog-close">X</span>
254 | 			</div>
255 | 			<div class="dialog-body">
256 | 				<img src="img\fashion\female\1.jpg" alt="">
257 | 				<span class="dialog-prev">&lt;</span>
258 | 				<span class="dialog-next">&gt;</span>
259 | 			</div>
260 | 			<div class="dialog-btns">
261 | 				<span class="prev-btn">next</span>
262 | 				<span class="next-btn">previous</span>
263 | 				<span class="slide-btn">slideshow</span>
264 | 				<span class="download-btn">download</span>
265 | 			</div>
266 | 		</div>
267 | 	</div>
268 | 	<script src="js/style.js"></script>
269 | 	<script src="js/product.js"></script>
270 | </body>
271 | </html>


--------------------------------------------------------------------------------
/shopcart.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>Document</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/shopcart.css">
 10 | 	<link rel="stylesheet" href="css/carousel.css">
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div class="zhan"></div>
 68 | 	<div id="center" class="wrapper">
 69 | 		<div class="top">
 70 | 			<h2 class="title">
 71 | 				<span class="glyphicon glyphicon-shopping-cart"></span>
 72 | 				Shopping Cart
 73 | 			</h2>
 74 | 			<div class="selected">
 75 | 				<span>With selected:</span>
 76 | 				<select name="selected" id="selected">
 77 | 					<option value="1">Action</option>
 78 | 					<option value="2">Action</option>
 79 | 					<option value="3">Action</option>
 80 | 				</select>
 81 | 			</div>
 82 | 			<div class="clear"></div>
 83 | 		</div>
 84 | 		<table class="middle">
 85 | 			<thead>
 86 | 				<tr">
 87 | 					<th class="w31"><input type="checkbox" class="checkbox"></th>
 88 | 					<th class="w39">No.</th>
 89 | 					<th class="w521"></th>
 90 | 					<th class="w67">Qty</th>
 91 | 					<th class="w97">Price</th>
 92 | 					<th class="w97">VAT</th>
 93 | 					<th class="w97">TAX incl.</th>
 94 | 				</tr>
 95 | 			</thead>
 96 | 			<tbody>
 97 | 				<tr class="selected">
 98 | 					<th><input type="checkbox" class="checkbox" checked></th>
 99 | 					<th>1</th>
100 | 					<th class="praduct">
101 | 						<a href="#" class="img-box"><img src="img\fashion\female\1.jpg" alt=""></a>
102 | 						<div class="text-box">
103 | 							<a href="#">
104 | 								<h5>Product name goes here</h5><p>Product Category</p>
105 | 							</a>
106 | 							<div class="type">
107 | 								<span>Size:</span>
108 | 								<br>
109 | 								<span class="grey">3-4 Years</span>
110 | 							</div>
111 | 							<div class="type">
112 | 								<span>Color:</span>
113 | 								<br>
114 | 								<span class="grey">Blue Navy</span>
115 | 							</div>
116 | 						</div>
117 | 					</th>
118 | 					<th><input type="text" class="text" value="1"></th>
119 | 					<th>$1,000.00</th>
120 | 					<th>$119.00</th>
121 | 					<th>$1,119.00</th>
122 | 				</tr>
123 | 				<tr class="bgc">
124 | 					<th><input type="checkbox" class="checkbox"></th>
125 | 					<th>2</th>
126 | 					<th class="praduct">
127 | 						<a href="#" class="img-box"><img src="img\fashion\female\2.jpg" alt=""></a>
128 | 						<div class="text-box">
129 | 							<a href="#">
130 | 								<h5>Product name goes here</h5><p>Product Category</p>
131 | 							</a>
132 | 							<div class="type">
133 | 								<span>Size:</span>
134 | 								<br>
135 | 								<span class="grey">3-4 Years</span>
136 | 							</div>
137 | 							<div class="type">
138 | 								<span>Color:</span>
139 | 								<br>
140 | 								<span class="grey">Blue Navy</span>
141 | 							</div>
142 | 						</div>
143 | 					</th>
144 | 					<th><input type="text" class="text" value="1"></th>
145 | 					<th>$1,000.00</th>
146 | 					<th>$119.00</th>
147 | 					<th>$1,119.00</th>
148 | 				</tr>
149 | 				<tr>
150 | 					<th><input type="checkbox" class="checkbox"></th>
151 | 					<th>3</th>
152 | 					<th class="praduct">
153 | 						<a href="#" class="img-box"><img src="img\fashion\female\3.jpg" alt=""></a>
154 | 						<div class="text-box">
155 | 							<a href="#">
156 | 								<h5>Product name goes here</h5><p>Product Category</p>
157 | 							</a>
158 | 							<div class="type">
159 | 								<span>Size:</span>
160 | 								<br>
161 | 								<span class="grey">3-4 Years</span>
162 | 							</div>
163 | 							<div class="type">
164 | 								<span>Color:</span>
165 | 								<br>
166 | 								<span class="grey">Blue Navy</span>
167 | 							</div>
168 | 						</div>
169 | 					</th>
170 | 					<th><input type="text" class="text" value="1"></th>
171 | 					<th>$1,000.00</th>
172 | 					<th>$119.00</th>
173 | 					<th>$1,119.00</th>
174 | 				</tr>
175 | 			</tbody>	
176 | 		</table>
177 | 		<div class="bottom">
178 | 			<center class="discount">
179 | 				<strong>Discount Code:</strong>
180 | 				<input type="text" value="723-WTX31">
181 | 				<button>Apply code</button>
182 | 			</center>
183 | 			<table class="price">
184 | 				<tr>
185 | 					<td>Subtotal:</td>
186 | 					<td class="strong">$1,000.00</td>
187 | 				</tr>
188 | 				<tr>
189 | 					<td>Delivery:</td>
190 | 					<td class="strong">$5.00</td>
191 | 				</tr>
192 | 				<tr>
193 | 					<td>VAT:</td>
194 | 					<td class="strong">$119.00</td>
195 | 				</tr>
196 | 			</table>
197 | 			<div class="buy">
198 | 				<p>Total: $1,195.95</p>
199 | 				<button><span class="glyphicon glyphicon-arrow-right"></span>Proceed to Payment</button>
200 | 			</div>
201 | 		</div>
202 | 		<div class="clear"></div>
203 | 	</div>
204 | 	<div id="footer">
205 | 		<div class="wrapper">
206 | 			<div class="foot-top">
207 | 				<div class="quick-links left">
208 | 					<h4>QUICK LINKS</h4>
209 | 					<ul>
210 | 						<li><a>Home</a></li>
211 | 						<li><a>About</a></li>
212 | 						<li><a>pricing</a></li>
213 | 						<li><a>Blog</a></li>
214 | 						<li><a>Contact</a></li>
215 | 					</ul>
216 | 				</div>
217 | 				<div class="about left">
218 | 					<h4>ABOUT</h4>
219 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
220 | 				</div>
221 | 				<div class="out-blog left">
222 | 					<h4>OUR BLOG</h4>
223 | 					<ul>
224 | 						<li><a>What is Lorem Ipsum?</a></li>
225 | 						<li><a>What is Lorem Ipsum?</a></li>
226 | 						<li><a>What is Lorem Ipsum?</a></li>
227 | 						<li><a>What is Lorem Ipsum?</a></li>
228 | 						<li><a>What is Lorem Ipsum?</a></li>
229 | 					</ul>
230 | 				</div>
231 | 				<div class="contact right">
232 | 					<h4>CONTACT</h4>
233 | 					<ul>
234 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
235 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
236 | 					</ul>
237 | 				</div>
238 | 				<div class="social right">
239 | 					<h4>SOCIAL</h4>
240 | 					<ul>
241 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
242 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
243 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
244 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
245 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
246 | 					</ul>
247 | 				</div>
248 | 				<div class="clearfix"></div>
249 | 			</div>
250 | 			<div class="copyright">
251 | 				<span>© 2013 -</span>
252 | 				<a href="#"> mosaicpro.biz</a>
253 | 				<span class="text-right">FLAT KIT</span>
254 | 			</div>
255 | 		</div>
256 | 	</div>
257 | 	<script src="js/style.js"></script>
258 | 	<script src="js/shopcart.js"></script>
259 | </body>
260 | </html>


--------------------------------------------------------------------------------
/timeline.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="UTF-8">
  5 | 	<title>Document</title>
  6 | 	<link rel="stylesheet" href="fonts/glyphicons/css/glyphicons.css">
  7 | 	<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">
  8 | 	<link rel="stylesheet" href="css/style.css">
  9 | 	<link rel="stylesheet" href="css/posts.css">
 10 | 	<link rel="stylesheet" href="css/carousel.css">
 11 | </head>
 12 | <body>
 13 | 	<div id="header">
 14 | 		<div id="top-nav">
 15 | 			<div class="wrapper">
 16 | 				<div id="search-box">
 17 | 					<span class="glyphicon glyphicon-search"></span>
 18 | 				</div>
 19 | 				<div id="top-menu">
 20 | 					<ul>
 21 | 						<li class="follow-us">关注我们</li>
 22 | 						<li class="share"><a href="#"><span class="icon icon-facebook"></span></a></li>
 23 | 						<li class="share"><a href="#"><span class="icon icon-twitter"></span></a></li>
 24 | 						<li class="share"><a href="#"><span class="icon icon-youtube"></span></a></li>
 25 | 						<li class="share"><a href="#"><span class="icon icon-google-plus"></span></a></li>
 26 | 						<li class="btn login">
 27 | 							<a href="#">
 28 | 								<span class="glyphicon glyphicon-lock"></span>
 29 | 								登录
 30 | 							</a>
 31 | 						</li> 
 32 | 						<li class="btn register">
 33 | 							<a href="#">
 34 | 								<span class="glyphicon glyphicon-user"></span> 
 35 | 								注册
 36 | 							</a>
 37 | 						</li>
 38 | 					</ul>
 39 | 				</div>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div id="nav">
 43 | 			<div class="wrapper">
 44 | 				<h1 class="logo">网上商城</h1>
 45 | 				<ul class="nav-menu">
 46 | 					<li class="selected"><a href="index.html">首页</a></li>
 47 | 					<li><a href="about.html">关于我们</a></li>
 48 | 					<li class="menu-btn">
 49 | 						<a href="#">商城 <span class="arrow"></span></a>
 50 | 						<ul class="sub-menu">
 51 | 							<li><a href="catalog.html">商品类别</a></li>
 52 | 							<li><a href="product.html">商品详情</a></li>
 53 | 							<li><a href="shopcart.html">购物车</a></li>
 54 | 						</ul>
 55 | 					</li>
 56 | 					<li class="menu-btn"><a href="#">博客 <span class="arrow"></span></a>
 57 | 					<ul class="sub-menu">
 58 | 							<li><a href="posts.html">Blog Posts</a></li>
 59 | 							<li><a href="timeline.html">Blog Timeline</a></li>
 60 | 						</ul>
 61 | 					</li>
 62 | 					<li><a href="contact.html">联系我们</a></li>
 63 | 				</ul>
 64 | 			</div>
 65 | 		</div>
 66 | 	</div>
 67 | 	<div class="zhan"></div>
 68 | 	<div id="center" class="wrapper">
 69 | 		<h2 id="title">
 70 | 			<span class="glyphicon glyphicon-list-alt"></span>
 71 | 			Blog
 72 | 		</h2>
 73 | 		<div id="main">
 74 | 			<div id="side-bar">
 75 | 				<ul>
 76 | 					<li><a href="#">Make Up</a><span>35</span></li>
 77 | 					<li><a href="#">Fragrances</a><span>30</span></li>
 78 | 					<li><a href="#">Nails</a><span>19</span></li>
 79 | 					<li><a href="#">Hair Products</a><span>33</span></li>
 80 | 					<li><a href="#">Accessories</a><span>17</span></li>
 81 | 				</ul>
 82 | 				<div class="hr">
 83 | 					<span class="glyphicon glyphicon-option-horizontal">
 84 | 
 85 | 					</span>
 86 | 				</div>
 87 | 				<h5 class="important-note">
 88 | 					<span class="glyphicon glyphicon-warning-sign"></span>
 89 | 					Important note
 90 | 				</h5>
 91 | 				<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi erat massa, ultricies sit amet.</p>
 92 | 				<div class="hr">
 93 | 					<span class="glyphicon glyphicon-option-horizontal">
 94 | 
 95 | 					</span>
 96 | 				</div>
 97 | 				<h5 class="important-note">
 98 | 					<span class="glyphicon glyphicon-tags"></span>
 99 | 					Labels
100 | 				</h5>
101 | 				<p class="labels">
102 | 					<span>responsive blog</span>
103 | 					<span>12 column grid</span><br>
104 | 					<span>awesome</span> 
105 | 					<span>mobile first</span>
106 | 					<br>
107 | 					<span>easy development</span>
108 | 					<span>html template</span></p>
109 | 			</div>
110 | 			<div id="question-list">
111 | 				<div class="question-box one">
112 | 					<a href="#" class="img-box">
113 | 						<img src="img/2.jpg" alt="">
114 | 					</a>
115 | 					<div class="text-box">
116 | 						<h4>WHAT IS LOREM IPSUM?</h4>
117 | 						<p>
118 | 							<span class="glyphicon glyphicon-user"></span>by
119 | 							<a href="#" class="a-hover">mosaicpro</a>
120 | 							<span class="glyphicon glyphicon-calendar"></span>
121 | 							on 15th June, 2013
122 | 							<span class="glyphicon glyphicon-comment"></span>
123 | 							15 comments
124 | 						</p>
125 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
126 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
127 | 					</div>
128 | 
129 | 					<div class="clear"></div>
130 | 				</div>
131 | 				<div class="question-box two">
132 | 					<a href="#" class="img-box">
133 | 						<img src="img/4.jpg" alt="">
134 | 					</a>
135 | 					<div class="text-box">
136 | 						<h4>WHAT IS LOREM IPSUM?</h4>
137 | 						<p>
138 | 							<span class="glyphicon glyphicon-user"></span>by
139 | 							<a href="#">mosaicpro</a>
140 | 							<span class="glyphicon glyphicon-calendar"></span>
141 | 							on 15th June, 2013
142 | 						</p>
143 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
144 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
145 | 						<span class="glyphicon glyphicon-comment"></span>
146 | 							15 comments
147 | 					</div>
148 | 
149 | 					<div class="clear"></div>
150 | 				</div>
151 | 
152 | 				<div class="question-box three">
153 | 					<a href="#" class="img-box">
154 | 						<img src="img/7.jpg" alt="">
155 | 					</a>
156 | 					<div class="text-box">
157 | 						<h4>WHAT IS LOREM IPSUM?</h4>
158 | 						<p>
159 | 							<span class="glyphicon glyphicon-user"></span>by
160 | 							<a href="#">mosaicpro</a>
161 | 							<span class="glyphicon glyphicon-calendar"></span>
162 | 							on 15th June, 2013
163 | 						</p>
164 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
165 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
166 | 						<span class="glyphicon glyphicon-comment"></span>
167 | 							15 comments
168 | 					</div>
169 | 
170 | 					<div class="clear"></div>
171 | 				</div>
172 | 				<div class="question-box four">
173 | 					<a href="#" class="img-box">
174 | 						<img src="img/8.jpg" alt="">
175 | 					</a>
176 | 					<div class="text-box">
177 | 						<h4>WHAT IS LOREM IPSUM?</h4>
178 | 						<p>
179 | 							<span class="glyphicon glyphicon-user"></span>by
180 | 							<a href="#">mosaicpro</a>
181 | 							<span class="glyphicon glyphicon-calendar"></span>
182 | 							on 15th June, 2013
183 | 							<span class="glyphicon glyphicon-comment"></span>
184 | 							15 comments
185 | 						</p>
186 | 						<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
187 | 						<a href="#" class="strong"><span class="glyphicon glyphicon-menu-right"></span>read more</a>
188 | 					</div>
189 | 
190 | 					<div class="clear"></div>
191 | 				</div>
192 | 
193 | 
194 | 
195 | 			</div>
196 | 		</div>
197 | 		<div class="clear"></div>
198 | 	</div>
199 | 
200 | 	<div id="footer">
201 | 		<div class="wrapper">
202 | 			<div class="foot-top">
203 | 				<div class="quick-links left">
204 | 					<h4>QUICK LINKS</h4>
205 | 					<ul>
206 | 						<li><a>Home</a></li>
207 | 						<li><a>About</a></li>
208 | 						<li><a>pricing</a></li>
209 | 						<li><a>Blog</a></li>
210 | 						<li><a>Contact</a></li>
211 | 					</ul>
212 | 				</div>
213 | 				<div class="about left">
214 | 					<h4>ABOUT</h4>
215 | 					<p>Lorem Ipsum is simply dummy text of the printing and typesetting dustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
216 | 				</div>
217 | 				<div class="out-blog left">
218 | 					<h4>OUR BLOG</h4>
219 | 					<ul>
220 | 						<li><a>What is Lorem Ipsum?</a></li>
221 | 						<li><a>What is Lorem Ipsum?</a></li>
222 | 						<li><a>What is Lorem Ipsum?</a></li>
223 | 						<li><a>What is Lorem Ipsum?</a></li>
224 | 						<li><a>What is Lorem Ipsum?</a></li>
225 | 					</ul>
226 | 				</div>
227 | 				<div class="contact right">
228 | 					<h4>CONTACT</h4>
229 | 					<ul>
230 | 						<li><span class="glyphicon glyphicon-phone"></span>01&nbsp230&nbsp1958</li>
231 | 						<li><span class="glyphicon glyphicon-envelope"></span>contact@mosaicpro.biz</li>
232 | 					</ul>
233 | 				</div>
234 | 				<div class="social right">
235 | 					<h4>SOCIAL</h4>
236 | 					<ul>
237 | 						<li><a href="#" class="icon icon-facebook-sign selected"></a></li>
238 | 						<li><a href="#" class="icon icon-twitter-sign"></a></li>
239 | 						<li><a href="#" class="icon icon-linkedin-sign"></a></li>
240 | 						<li><a href="#" class="icon icon-google-plus-sign"></a></li>
241 | 						<li><a href="#" class="icon icon-edit-sign"></a></li>
242 | 					</ul>
243 | 				</div>
244 | 				<div class="clearfix"></div>
245 | 			</div>
246 | 			<div class="copyright">
247 | 				<span>© 2013 -</span>
248 | 				<a href="#"> mosaicpro.biz</a>
249 | 				<span class="text-right">FLAT KIT</span>
250 | 			</div>
251 | 		</div>
252 | 	</div>
253 | </body>
254 | </html>


--------------------------------------------------------------------------------