任茂勇 3 gadi atpakaļ
revīzija
ebb9b909e4
17 mainītis faili ar 1791 papildinājumiem un 0 dzēšanām
  1. 1 0
      100素材网.txt
  2. 110 0
      contact.html
  3. 82 0
      css/grids.css
  4. 582 0
      css/style.css
  5. 164 0
      details.html
  6. BIN
      images/Thumbs.db
  7. BIN
      images/bg.png
  8. BIN
      images/bg24.png
  9. BIN
      images/dailishang.png
  10. BIN
      images/dianchi.png
  11. BIN
      images/dingdan.png
  12. BIN
      images/yonghu.png
  13. 60 0
      index.html
  14. 319 0
      music.html
  15. 265 0
      photos.html
  16. 203 0
      videos.html
  17. 5 0
      www.100sucai.com.url

+ 1 - 0
100素材网.txt

@@ -0,0 +1 @@
+http://www.100sucai.com

+ 110 - 0
contact.html

@@ -0,0 +1,110 @@
+<a href="http://www.100sucai.com" style="display:none">http://www.100sucai.com</a>
+<!DOCTYPE HTML>
+<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
+"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Gallery Station webtemplate for high end mobiles, like samsung, nokia, lg, sony erricsson, htc mobile website templates for free | Contact :: w3layouts</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <!---- Css Files ------->
+     <link rel="stylesheet" href="css/style.css" type="text/css" >
+     <link rel="stylesheet" href="css/grids.css" type="text/css" media="all" />
+  <!---- End Css Files ------->	
+</head>
+	<body>
+		<div id="page">
+			<div id="header">
+				<div class="logo">
+					<a href="index.html"><img src="images/logo.png" alt="" /></a>
+			    </div>		
+	    <div class="header_right">	            
+            <div id="contactFormContainer">
+                <div id="contactLink"> <a href="contact.html"> </a></div>
+            </div>
+            <div id="socialiconsContainer">
+                 <div id="socilaiconLink"><a href="contact.html"> </a></div>
+            </div>
+            </div>	 
+         <div class="clear"></div>	
+        <div class="drp-dwn">
+	 	<select onChange="window.location=this.options[this.selectedIndex].value">
+			<option  value="index.html">Home</option>
+			<option value="photos.html">Photos</option>
+			<option value="videos.html">videos</option>
+			<option value="music.html">Music</option>
+			<option value="articles.html">Articles</option>
+			<option value="contact.html">Contact</option>
+		</select>
+	</div>		
+	</div>    	
+	<div id="content">
+		<div id="main">
+			 <div class="section group">
+				<div class="col span_2_of_3">
+					<h2>Contact Us</h2>
+				  <div class="contact-form">
+					    <form>
+					    	<div>
+						    	<span><label>Name</label></span>
+						    	<span><input type="text" value=""></span>
+						    </div>
+						    <div>
+						    	<span><label>E-mail</label></span>
+						    	<span><input type="text" value=""></span>
+						    </div>
+						    <div>
+						     	<span><label>Fax</label></span>
+						    	<span><input type="text" value=""></span>
+						    </div>
+						    <div>
+						    	<span><label>Subject</label></span>
+						    	<span><textarea> </textarea></span>
+						    </div>
+						   <div>
+						   		<span><input type="submit" value="Submit"></span>
+						  </div>
+					    </form>
+				  </div>
+  				</div>
+				<div class="col span_1_of_3">
+					<h2>Share Us</h2>
+					<div id="socialicons">
+                    <div class="social-icons">						
+		                <ul>
+		                    <li><a class="facebook" href="#" target="_blank"> </a></li>
+		                    <li><a class="twitter" href="#" target="_blank"></a></li>
+		                    <li><a class="googleplus" href="#" target="_blank"></a></li>		                   
+		                    <li><a class="in" href="#" target="_blank"></a></li>
+		                    <div class="clear"></div>
+		                </ul>
+		 		    </div>  
+		 		    <div class="social-icons">						
+		                <ul>
+		                    <li><a class="pinterest" href="#" target="_blank"></a></li>
+		                    <li><a class="dribbble" href="#" target="_blank"></a></li>
+		                    <li><a class="vimeo" href="#" target="_blank"></a></li>
+		                     <li><a class="rss" href="#" target="_blank"></a></li>
+		                     
+		                    <div class="clear"></div>
+		                </ul>
+		 		    </div> 
+                  </div>
+					<div class="contact_info">
+    	 				<h2>Find Us Here</h2>
+					    	  <div class="map">
+							   	    <iframe width="100%" height="150" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Lighthouse+Point,+FL,+United+States&amp;aq=4&amp;oq=light&amp;sll=26.275636,-80.087265&amp;sspn=0.04941,0.104628&amp;ie=UTF8&amp;hq=&amp;hnear=Lighthouse+Point,+Broward,+Florida,+United+States&amp;t=m&amp;z=14&amp;ll=26.275636,-80.087265&amp;output=embed"></iframe><br><small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Lighthouse+Point,+FL,+United+States&amp;aq=4&amp;oq=light&amp;sll=26.275636,-80.087265&amp;sspn=0.04941,0.104628&amp;ie=UTF8&amp;hq=&amp;hnear=Lighthouse+Point,+Broward,+Florida,+United+States&amp;t=m&amp;z=14&amp;ll=26.275636,-80.087265" style="color:#666;text-align:left;font-size:12px">View Larger Map</a></small>
+							  </div>
+      				</div>
+				 </div>
+			  </div>      			
+   </div>
+    </div>
+    <div class="copy_right">
+						<p>All Rights Reseverd | Design by  <a href="http://w3layouts.com">W3Layouts</a></p>
+		   			</div>
+   </div>
+</body>
+</html>

+ 82 - 0
css/grids.css

@@ -0,0 +1,82 @@
+/*
+Author: W3layout
+Author URL: http://w3layouts.com
+License: Creative Commons Attribution 3.0 Unported
+License URL: http://creativecommons.org/licenses/by/3.0/
+*/
+body{
+	color: #222;
+	font-size: 13px;
+	font-family:Arial, Helvetica, sans-serif;
+}
+/***** End Header ****/
+/**
+ * Grid container
+ */
+#tiles {
+  list-style-type: none;
+  position: relative; /** Needed to ensure items are laid out relative to this container **/
+  /**margin: 0;*/
+}
+
+/**
+ * Grid items
+ */
+#tiles li {
+  background-color: #ffffff;
+ /** border: 1px solid #DDDDDD;*/
+  display: table;
+  margin:5px auto;
+  margin-top: 40px;
+}
+
+#tiles li.inactive {
+  visibility: hidden;
+  opacity: 0;
+  float:left;
+}
+
+#tiles li img {
+  display:block;
+  padding:5px;
+}
+/**
+ * Grid item text
+ */
+#tiles li p {
+  color: #666;
+  font-size: 10px;
+}
+#tiles li p img{
+	/**float:left;*/
+	padding:3px 8px 5px 10px;
+	cursor:pointer;
+}
+#tiles li p span{
+	/**float:right;*/
+	padding-top:3px;
+	padding-right:5px;
+}
+#tiles li p span{
+	color: #666;
+}
+/**
+ * Some extra styles to randomize heights of grid items.
+ */
+/**#tiles ali:nth-child(3n) {
+  height: 175px;
+}
+
+#tiles ali:nth-child(4n-3) {
+  padding-bottom: 30px;
+}
+
+#tiles ali:nth-child(5n) {
+  height: 250px;
+}*/
+
+/** General page styling **/
+#main {
+  padding: 30px 0 30px 0;
+}
+

+ 582 - 0
css/style.css

@@ -0,0 +1,582 @@
+/*
+Author: W3layout
+Author URL: http://w3layouts.com
+License: Creative Commons Attribution 3.0 Unported
+License URL: http://creativecommons.org/licenses/by/3.0/
+*/
+ /* reset */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
+article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
+ol,ul{list-style:none;margin:0;padding:0;}
+blockquote,q{quotes:none;}
+blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
+table{border-collapse:collapse;border-spacing:0;}
+/* start editing from here */
+a{text-decoration:none;}
+.txt-rt{text-align:right;}/* text align right */
+.txt-lt{text-align:left;}/* text align left */
+.txt-center{text-align:center;}/* text align center */
+.float-rt{float:right;}/* float right */
+.float-lt{float:left;}/* float left */
+.clear{clear:both;}/* clear float */
+.pos-relative{position:relative;}/* Position Relative */
+.pos-absolute{position:absolute;}/* Position Absolute */
+.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
+.vertical-top{	vertical-align:top;}/* vertical align top */
+.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
+nav.vertical ul li{	display:block;}/* vertical menu */
+nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
+img{max-width:100%;}
+/*end reset*/
+.wrap{
+	width:100%;
+	margin:0 auto;	
+}
+body{
+	color: #333;
+	background:url(../images/bg2.png);	
+	font-family:Arial, Helvetica, sans-serif;
+}
+/**** Header ****/
+#header{
+	background-image:url(../images/noise.png);
+	background-color:#2A3F44;
+	padding-bottom: 8px;
+}
+.logo{
+	float:left;
+	padding-top:5px;
+}
+.header_right{
+	float:right;
+	width:80px;
+	padding-top:20px;
+}
+#socialiconsContainer{
+            	float:right;
+            }
+            #socilaiconLink a{
+            	background-image:url(../images/noise.png);
+	            background-color:#2A3F44;
+            	height:40px;
+            	width:40px;
+            	background-image:url(../images/share.png);
+            	display:block;
+            	cursor:pointer;
+            }
+/**** Contact Form ****/
+       #contactFormContainer{
+            	float:right;
+         }             
+            #contactLink a{
+            	background-image:url(../images/noise.png);
+	            background-color:#2A3F44;
+            	height:40px;
+            	width:40px;
+            	background-image:url(../images/mail.png);
+            	display:block;
+            	cursor:pointer;
+       }
+            #contactLink:hover a{
+            	background-image:url(../images/mail-hover.png);
+            }
+/********** Social Icons **************/
+.social-icons {
+	margin:10px 0px;
+}
+.social-icons ul li:first-child, ol li:first-child {
+	margin-top: 0px;
+	margin-left:0;
+}
+.social-icons li {
+	display:inline-block;
+	width:40px;
+	height: 40px;
+	background: none;
+	padding: 0px;
+	 margin-bottom:5px;
+	 margin-left:8px;
+}
+.social-icons li a {
+	height:40px;
+	width: 40px;
+	display: block;
+	text-indent: -9999px;
+	background:rgba(0, 0, 0, 0.5) url(../images/social-icons.png);
+}
+.social-icons a.facebook:hover {
+	background-position: 0px top;
+}
+.social-icons a.facebook {
+	background-position: 0px bottom;
+}
+.social-icons a.twitter {
+	background-position: -40px bottom;
+}
+.social-icons a.twitter:hover {
+	background-position: -40px top;
+}
+.social-icons a.googleplus {
+	background-position: -440px bottom;
+}
+.social-icons a.googleplus:hover {
+	background-position: -440px top;
+}
+.social-icons a.rss {
+	background-position: -400px bottom;
+}
+.social-icons a.rss:hover {
+	background-position: -400px top;
+}
+.social-icons a.pinterest {
+	background-position: -480px bottom;
+}
+.social-icons a.pinterest:hover {
+	background-position: -480px top;
+}
+.social-icons a.dribbble {
+	background-position: -160px bottom;
+}
+.social-icons a.dribbble:hover {
+	background-position: -160px top;
+}
+.social-iconst a.dribbble:hover {
+	background-position: -160px top;
+}
+.social-icons a.vimeo {
+	background-position: -120px bottom;
+}
+.social-icons a.vimeo:hover {
+	background-position: -120px top;
+}
+.social-icons a.in {
+	background-position: -360px bottom;
+}
+.social-icons a.in:hover {
+	background-position: -360px top;
+}
+/***** Search box ************/
+.search_box{
+	margin:0 10px 20px 10px;
+	width:230px;
+	position:relative;
+	border: 1px solid rgba(255,255,255,0.6);
+    outline:none;
+    background:#eee;
+}
+.text-box{
+	width:80%;
+	padding:10px;
+	font-size:1.1em;
+    color: #555;
+    background:none;
+    border:none;
+    outline: none;
+}
+.search_box:hover{
+    outline: none;
+    background-position: 0 -3em;
+}
+.search_box input[type="submit"]{
+	border:none;
+	cursor:pointer;
+	background: url(../images/search.png) no-repeat 0px 14px;
+	position: absolute;
+	width: 25px;
+	right:0px;
+	height: 30px;
+}
+/**** End Search Box ****************/
+/*** End Header ***/
+/*menu*/
+.drp-dwn{
+	margin:0px 10px;
+}
+.drp-dwn select {
+	padding: 4px;
+	outline: none;
+	display: block !important;
+	width: 100%;
+	color: #000;
+	border: 1px solid rgb(92, 72, 87);
+	background: rgba(255, 255, 255, 0.59);
+	cursor: pointer;
+}
+.right-content{
+	float:right;
+	width:86%;
+}
+/**** Details Page *****/
+.content{
+	width:90.8%;
+	padding:2% 4%;
+}
+.content h3 a{
+	font-size:1.1em;
+    color:#347280;
+    padding-bottom:5px;
+}
+.box1 h3 a:hover{
+	text-decoration:underline;
+	color:#444;
+}
+.box1 span{
+	font-size:0.8em;
+	color:#666;
+	display:block;
+}
+.box1 span.comments{
+	color:#F03E14;
+	font-size:1em;
+	text-decoration:underline;
+	cursor:pointer;
+	display:inline;
+}
+.box1 span.comments:hover{
+	text-decoration:none;
+}
+.box1{	
+    border-bottom:1px solid #D8D8D8;
+}
+.blog-img{
+	width:95%;
+	margin:10px 0;
+	position: relative;
+	border:2px solid #fff;
+}
+.blog-data{
+   	width:100%;
+}
+.blog-data span a{
+	color:#EB7F1A;
+	font-size:1em;
+}
+.blog-data span a:hover{
+	text-decoration:underline;	
+}
+.blog-data p{
+    font-size:0.8em;
+    line-height:1.8em;
+    color:#6D6B6B;
+    font-family:Arial, Helvetica, sans-serif;
+}
+/****** Comment Area ******/
+.comments-area h3{
+	color: rgb(80, 80, 80);
+	font-size: 1.2em;
+	text-transform: uppercase;
+	padding: 0px 0px 7px 0px;
+	margin-bottom: 15px;
+	border-bottom: 5px solid #D5D5D5;
+}
+.comments-area h3 img{
+	vertical-align:middle;
+	padding-right:5px;
+}
+.comments-area{
+	margin-top:20px;
+	color: #666;
+}
+.comments-area p{
+	position: relative;
+	padding: 8px 0;
+}
+.comments-area label{
+	display: block;
+	font-size:0.9em;
+	padding-bottom: 5px;
+}
+.comments-area span{
+	color: #F05F3D;
+	position: absolute;
+	left: 4px;
+	top: 33px;
+	font-size: 1em;
+}
+.comments-area input[type="text"],.comments-area textarea{
+	padding:8px 15px;
+	width:88%;
+	color: #444;	
+	border:1px solid #ccc;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 0.8em;
+	background:#FFF;
+	-webkit-appearance:none;
+	outline: none;
+	display: block;	
+}
+.comments-area input[type="submit"]{
+	font-size:1.1em;
+	text-transform:uppercase;
+	padding:8px 25px;
+	color:#F05F3D;
+	cursor:pointer;
+    background: #d7d7d7;
+	border:1px solid #EEE;
+	cursor:pointer;
+}
+.comments-area [type="submit"]:hover{
+	color: rgb(80, 80, 80);
+	background:#FFF;
+}
+.comments-area textarea{
+	width: 88%;
+	height: 100px;
+}
+/*---comment box--*/
+.comment{
+	position:relative;
+	margin:25px 0;
+}
+.comment h2{
+	margin:0;
+	border:1px solid #C4C4C4;
+	padding:10px 15px;
+}
+.comment h2 a,
+.comment h2{
+	font-weight:normal;
+	font-size:12px;
+	color:rgb(155, 155, 155);
+	margin:0 0 10px 0;
+}
+.comment box{
+	float:left;
+}
+.comment box div{
+	padding:5px;
+	border:none;
+}
+.comment h2{
+	font-size: 1em;
+	padding: 7px;
+}
+.comment h2 span{
+	color:#F05F3D;
+}
+.comment ul.list{
+	margin:0;
+	padding:0;
+	list-style:none;
+}
+.comment .list li{
+	display:block;
+	padding:10px 0;
+	border: 1px solid #DDD;
+	margin:0 0 18px 0;
+}
+.comment .preview,
+.comment .data{
+	float:left;
+}
+.comment .preview{
+	width:50px;
+	padding:0 5px;
+	border-right: 1px solid #ccc;
+}
+.comment .preview img{
+	background: #fff;
+}
+.comment .preview img,
+.comment .preview a{
+	display:block;
+	padding: 3px;
+}
+.comment .data{
+	width:60%;
+	padding:0 5px;
+}
+.comment .data .title{
+	color:#666;
+	font-size:16px;
+	margin:0 0 5px 0;
+}
+.comment .data a{
+	color:#F05F3D;
+}
+.comment .data .title a{
+	font-size:12px;
+}
+.comment .data p{
+	margin:0;
+	padding:0;
+	font-size:0.7em;
+    line-height:1.8em;
+    color:#6D6B6B;
+    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
+}
+.leave-reply{
+	margin: 10px 0;
+}
+.leave-comment a{
+	font-size: 1.1em;
+}
+.leave-reply{
+	color: #F05F3D;
+	margin: 10px 0;
+	font-size: 1em;
+	padding: 7px;
+	background: #ddd;
+}
+/*--respond---*/
+#respond{
+	color: #666;
+	position: relative;
+}
+#reply-title{
+	color: #777;
+	font-size: 1em;
+}
+a#cancel-comment-reply-link{
+	color:#F05F3D;
+}
+.comment-notes{
+	color:rgb(155, 155, 155);
+}
+#commentform p{
+	position: relative;
+	padding: 8px 0;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size:0.8em;
+}
+#commentform label{
+	display: block;
+	padding-bottom: 5px;
+	font-size:0.9em;
+}
+#commentform span{
+	color:#F05F3D;
+	position: absolute;
+	font-size:1em;
+}
+#commentform input[type="text"]{
+	padding: 10px 15px;
+	width:88%;
+	color: #555;
+	border:1px solid #CCC;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size:1em;
+	color: rgb(155, 155, 155);
+	outline: none;
+	display: block;
+	
+}
+#commentform input[type="submit"]{
+	color:#F05F3D;
+	background: #fff;
+	padding:8px 12px;
+	border:1px solid #CCC;
+	cursor:pointer;
+	font-size:1.1em;
+}
+#commentform [type="submit"]:hover{
+	color:#666;
+}
+#commentform textarea{
+	padding: 10px 15px;
+	width:88%;
+	color: #555;
+	font-size:0.8em;
+	outline: none;
+	height: 100px;
+	display: block;
+		border:1px solid #CCC;
+	font-family: Arial, Helvetica, sans-serif;
+	color: rgb(155, 155, 155);
+	font-size:1em;
+}
+/**** End Comment Area ****/
+/**** Contact Form ***/
+.span_2_of_3  h2,.span_1_of_3 h2{
+	font-size:1.5em;
+	color:rgb(155, 155, 155);
+	margin:0 0 10px 0;
+	text-transform:uppercase;
+	text-decoration:underline;
+}
+.span_2_of_3 {
+	width:92%;
+	padding:0% 4%; 
+}
+.span_1_of_3 {
+	width:92%;
+	padding:4%; 
+}
+.contact-form{
+	position:relative;
+}
+.contact-form div{
+	padding:5px 0;
+}
+.contact-form span{
+	display:block;
+	font-size:0.8125em;
+	color: #333;
+	padding-bottom:5px;
+	font-family :verdana, arial, helvetica, helve, sans-serif;
+}
+.contact-form input[type="text"],.contact-form textarea{
+		    padding:8px;
+			display:block;
+			width:92%;
+			background:#fcfcfc;
+			border:1px solid #ECECEC;
+			outline:none;
+			color:#464646;
+			font-size:1em;
+			border:1px solid #CCC;
+			font-family:Arial, Helvetica, sans-serif;
+}
+.contact-form textarea{
+		resize:none;
+		height:100px;		
+}
+.contact-form input[type="submit"]{
+	font-size:1em;
+	padding:8px 20px;
+	color:#FFF;
+	border:none;
+	cursor:pointer;
+	background-image:url(../images/noise.png);
+    background-color:#2A3F44;
+	text-decoration: none;
+	text-transform:uppercase;
+	outline: 0;
+    font-family:Arial, Helvetica, sans-serif;
+}
+.contact-form input[type="submit"]:hover{
+    background:#292929;  
+}
+.company_address p{
+	font-size:0.8em;
+	color:#333;
+	padding:3px 0;
+	font-family :verdana, arial, helvetica, helve, sans-serif;
+}
+.company_address p span{
+	text-decoration:underline;
+	color:#333;
+	cursor:pointer;
+}
+.map{
+	border:1px solid #C7C7C7;
+	margin:10px 0;
+}
+.copy_right{
+   padding:5px 0;
+  text-align:center;
+ }
+  .copy_right p{
+	font-size:0.8123em;
+	color: #444;
+	line-height:1.6em;
+ }
+  .copy_right p a{
+	color:#222;
+	font-size:1em;
+	text-decoration:underline;
+ }
+  .copy_right p a:hover{
+	color:#F05F3D;
+	text-decoration:none;
+ }

+ 164 - 0
details.html

@@ -0,0 +1,164 @@
+<a href="http://www.100sucai.com" style="display:none">http://www.100sucai.com</a>
+<!DOCTYPE HTML>
+<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
+"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Gallery Station webtemplate for high end mobiles, like samsung, nokia, lg, sony erricsson, htc mobile website templates for free | Details :: w3layouts</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <!---- Css Files ------->
+     <link rel="stylesheet" href="css/style.css" type="text/css" >
+  <!---- End Css Files ------->	
+</head>
+	<body>
+		<div id="page">
+			<div id="header">
+				<div class="logo">
+					<a href="index.html"><img src="images/logo.png" alt="" /></a>
+			    </div>		
+	    <div class="header_right">	            
+            <div id="contactFormContainer">
+                <div id="contactLink"> <a href="contact.html"> </a></div>
+            </div>
+            <div id="socialiconsContainer">
+                 <div id="socilaiconLink"><a href="contact.html"> </a></div>
+            </div>
+            </div>		 
+         <div class="clear"></div>	
+        <div class="drp-dwn">
+	 	<select onChange="window.location=this.options[this.selectedIndex].value">
+			<option  value="index.html">Home</option>
+			<option value="photos.html">Photos</option>
+			<option value="videos.html">videos</option>
+			<option value="music.html">Music</option>
+			<option value="photos.html">Articles</option>
+			<option value="contact.html">Contact</option>
+		</select>
+	</div>		
+</div>  	
+			<div class="content">
+			<div class="box1">
+   				 <h3><a href="details.html">Many desktop packages and web page</a></h3>
+    				<span>By Kieth Deviec- 2 hours ago<br/><span class="comments">8 Comments</span></span> 
+			   <div class="blog-img">
+					<img src="images/blog-img.jpg">
+				</div>
+				<div class="blog-data">
+				    <p>Lorem Ipsum is that it has a more-or-less normal Many desktop publishing packages and web page making it look like readable English. Many desktop publishing packages and web page editors  as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors.</p>
+				</div>
+			<div class="clear"></div>
+		</div>			
+		<!----------------  Comment Area -------------------->
+		<div class="comments-area">
+						<h3>Leave a comment</h3>
+							<form>
+								<p>
+									<label>Name</label>
+									<span>*</span>
+									<input type="text" value="">
+								</p>
+								<p>
+									<label>Email</label>
+									<span>*</span>
+									<input type="text" value="">
+								</p>
+								<p>
+									<label>Website</label>
+									<input type="text" value="">
+								</p>
+								<p>
+									<label>Subject</label>
+									<span>*</span>
+									<textarea></textarea>
+								</p>
+								<p>
+									<input type="submit" value="Post">
+								</p>
+							</form>		
+						</div>
+						
+						<div class="box comment">
+	    <h2><span>(0)</span> Comment's</h2>
+	    <ul class="list">
+	        <li>
+	            <div class="preview"><a href="#"><img src="http://lorempixel.com/50/50" alt=""></a></div>
+	            <div class="data">
+	                <div class="title">Jake Sully <a href="#"> June 20, 2013</a></div>
+	                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+	            </div>
+	            <div class="clear"></div>
+	        </li>
+	        <li>
+	            <div class="preview"><a href="#"><img src="http://lorempixel.com/50/50" alt=""></a></div>
+	            <div class="data">
+	                <div class="title">Jake Sully <a href="#"> June 20, 2013</a></div>
+	                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+	            </div>
+	            <div class="clear"></div>
+	        </li>
+	        <li>
+	            <div class="preview"><a href="#"><img src="http://lorempixel.com/50/50" alt=""></a></div>
+	            <div class="data">
+	                <div class="title">Jake Sully <a href="#"> June 20, 2013</a></div>
+	                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+	            </div>
+	            <div class="clear"></div>
+	        </li>
+	        <li>
+	            <div class="preview"><a href="#"><img src="http://lorempixel.com/50/50" alt=""></a></div>
+	            <div class="data">
+	                <div class="title">Jake Sully <a href="#"> June 20, 2013</a></div>
+	                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+	            </div>
+	            <div class="clear"></div>
+	        </li>
+	        <li>
+	            <div class="preview"><a href="#"><img src="http://lorempixel.com/50/50" alt=""></a></div>
+	            <div class="data">
+	                <div class="title">Jake Sully <a href="#"> June 20, 2013</a></div>
+	                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+	            </div>
+	            <div class="clear"></div>
+	        </li>
+	    </ul>
+	  <div class="clear"></div>
+	</div>
+	
+	<div id="respond">
+		<h3 id="reply-title">Leave a Reply <small><a id="cancel-comment-reply-link" href="#" style="">Cancel reply</a></small></h3>
+		<form id="commentform">
+			<p class="comment-notes">Your email address will not be published. Required fields are marked &nbsp;<span class="required">*</span></p>
+			<p class="comment-form-author"><label for="author">Name</label>
+				<span class="required">*</span>
+				<input id="author" name="author" type="text" value="" size="30" aria-required="true">
+			</p>
+			<p class="comment-form-email">
+				<label for="email">Email</label> <span class="required">*</span>
+				<input id="email" name="email" type="text" value="" size="30" aria-required="true">
+			</p>
+			<p class="comment-form-url">
+				<label for="url">Website</label>
+				<input id="url" name="url" type="text" value="http://w3layouts.com" size="30">
+			</p>
+			<p class="comment-form-comment">
+				<label for="comment">Comment</label>
+				<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
+			</p>
+			<p class="form-allowed-tags">You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:  <code>&lt;a href="" title=""&gt; &lt;abbr title=""&gt; &lt;acronym title=""&gt; &lt;b&gt; &lt;blockquote cite=""&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=""&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=""&gt; &lt;strike&gt; &lt;strong&gt; </code></p>						<p class="form-submit">
+			<input name="submit" type="submit" id="submit" value="Post Comment">
+			
+			</p>
+		</form>
+	</div>
+	<div class="clear"> </div>
+		<!----------------- End Comment Area ----------------->				
+    </div>
+    <div class="copy_right">
+						<p>All Rights Reseverd | Design by  <a href="http://w3layouts.com">W3Layouts</a></p>
+		   			</div>
+   </div>
+</body>
+</html>

BIN
images/Thumbs.db


BIN
images/bg.png


BIN
images/bg24.png


BIN
images/dailishang.png


BIN
images/dianchi.png


BIN
images/dingdan.png


BIN
images/yonghu.png


+ 60 - 0
index.html

@@ -0,0 +1,60 @@
+<a href="http://www.100sucai.com" style="display:none">http://www.100sucai.com</a>
+<!DOCTYPE HTML>
+<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
+"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+	<title>骑享数据统计</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	  <!---- Css Files ------->
+		 <link rel="stylesheet" href="css/style.css" type="text/css" >
+		 <link rel="stylesheet" href="css/grids.css" type="text/css" media="all" />
+	  <!---- End Css Files ------->	
+	</head>
+	<body>
+		<div id="content">
+			<div id="main">
+        		<ul id="tiles">
+					<a href="https://bi.aliyuncs.com/token3rd/dashboard/view/pc.htm?pageId=40897638-eb55-4d4d-b611-2883c26d2a5f&accessToken=a89f32e7ab085129a18a71a202066857" class="swipebox" title="Image Name">   
+						<li>
+							<img src="images/dianchi.png" alt="" style="width: 50px; height: 50px;" />
+							<p>
+								<span>电池情况统计</span>
+							</p>
+						</li>
+					</a>
+					<a href="https://bi.aliyuncs.com/token3rd/dashboard/view/pc.htm?pageId=1ffc7a5b-78d3-49ac-906d-d00e07d326bb&accessToken=664bc1177a9d6dd802f66aee4a92f3c5" class="swipebox" title="Image Name">    
+						<li>
+							<img src="images/yonghu.png" alt="" style="width: 50px; height: 50px;" />
+						    <p>	
+								<span>用户情况统计</span>
+							</p>
+						 </li>
+					</a>
+					<a href="https://bi.aliyuncs.com/token3rd/dashboard/view/pc.htm?pageId=b8240b9e-76aa-4402-b43c-7a0d4b0fcd1d&accessToken=4bcbb4ee4858867dc4a8f457fd9d5b08" class="swipebox" title="Image Name"> 
+						<li>
+							<img src="images/dingdan.png" alt="" style="width: 50px; height: 50px;" />
+							<p>
+								<span>订单及营收统计</span>
+							</p>
+						</li>
+					</a>
+					<a href="https://bi.aliyuncs.com/token3rd/dashboard/view/pc.htm?pageId=35f09e73-dc44-47af-afca-5b276a6f7b30&accessToken=1529821442cffe2a6660daa9e56817a6" class="swipebox" title="Image Name">   
+						<li>
+							<img src="images/dailishang.png" alt="" style="width: 50px; height: 50px;" />
+							<p>
+								<span>代理商情况统计</span>
+							</p>
+						</li>
+					</a>
+            
+        <!-- End of grid blocks -->
+				</ul>
+			</div>
+		</div>
+    
+	</body>
+</html>

+ 319 - 0
music.html

@@ -0,0 +1,319 @@
+<a href="http://www.100sucai.com" style="display:none">http://www.100sucai.com</a>
+<!DOCTYPE HTML>
+<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
+"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Gallery Station webtemplate for high end mobiles, like samsung, nokia, lg, sony erricsson, htc mobile website templates for free | Music :: w3layouts</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <!---- Css Files ------->
+     <link rel="stylesheet" href="css/style.css" type="text/css" >
+     <link rel="stylesheet" href="css/grids.css" type="text/css" media="all" />
+  <!---- End Css Files ------->	
+</head>
+	<body>
+		<div id="page">
+			<div id="header">
+				<div class="logo">
+					<a href="index.html"><img src="images/logo.png" alt="" /></a>
+			    </div>		
+	    <div class="header_right">	            
+            <div id="contactFormContainer">
+                <div id="contactLink"> <a href="contact.html"> </a></div>
+            </div>
+            <div id="socialiconsContainer">
+                 <div id="socilaiconLink"><a href="contact.html"> </a></div>
+            </div>
+            </div>		 
+         <div class="clear"></div>	
+        <div class="drp-dwn">
+	 	<select onChange="window.location=this.options[this.selectedIndex].value">
+			<option  value="index.html">Home</option>
+			<option value="photos.html">Photos</option>
+			<option value="videos.html">videos</option>
+			<option value="music.html" selected="selected">Music</option>
+			<option value="photos.html">Articles</option>
+			<option value="contact.html">Contact</option>
+		</select>
+	</div>		
+	</div>    	
+			<div id="content">
+				<div id="main">
+        			<ul id="tiles">
+        <!--
+          These are our grid items. Notice how each one has classes assigned that
+          are used for filtering. The classes match the "data-filter" properties above.
+          -->
+       <a href="images/img16_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img16.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+      <a href="images/img17_b.jpg" class="swipebox" title="Image Name">   <li>
+          <img src="images/img17.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+       <a href="images/img18_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img18.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+      <a href="images/img19_b.jpg" class="swipebox" title="Image Name">   <li>
+          <img src="images/img19.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+         <li>
+          <img src="images/video5.jpg" height="188" width="300" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+       <a href="images/img20_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img20.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+        <a href="images/img21_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img21.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+      <a href="images/img22_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img22.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+        <a href="images/img23_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img23.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img24_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img24.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img25_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img25.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+     <a href="images/img26_b.jpg" class="swipebox" title="Image Name">     <li data-filter-class='["photos", "blog"]'>
+          <img src="images/img26.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+       <a href="images/img27_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img27.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+         <li>
+          <img src="images/video6.jpg" height="188" width="300" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+       <a href="images/img28_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img28.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+        <a href="images/img29_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img29.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img30_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img30.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+      <a href="images/img31_b.jpg" class="swipebox" title="Image Name">   <li>
+          <img src="images/img31.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+        <a href="images/img32_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img32.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+      <a href="images/img33_b.jpg" class="swipebox" title="Image Name">   <li>
+          <img src="images/img33.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+         <li>
+          <img src="images/video7.jpg" height="188" width="300" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+        <a href="images/img34_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img34.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img35_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img35.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img36_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img36.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img37_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img37.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>              
+         <li>
+          <img src="images/video1.jpg" height="188" width="300" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li> 
+        <!-- End of grid blocks -->
+      </ul>
+  		 </div>
+    </div>
+    			<div class="copy_right">
+						<p> All Rights Reseverd | Design by  <a href="http://w3layouts.com">W3Layouts</a></p>
+		   			</div>
+   </div>
+</body>
+</html>

+ 265 - 0
photos.html

@@ -0,0 +1,265 @@
+<a href="http://www.100sucai.com" style="display:none">http://www.100sucai.com</a>
+<!DOCTYPE HTML>
+<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
+"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Gallery Station webtemplate for high end mobiles, like samsung, nokia, lg, sony erricsson, htc mobile website templates for free | Photos :: w3layouts</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <!---- Css Files ------->
+     <link rel="stylesheet" href="css/style.css" type="text/css" >
+     <link rel="stylesheet" href="css/grids.css" type="text/css" media="all" />
+  <!---- End Css Files ------->	
+</head>
+	<body>
+		<div id="page">
+			<div id="header">
+				<div class="logo">
+					<a href="index.html"><img src="images/logo.png" alt="" /></a>
+			    </div>		
+	    <div class="header_right">	            
+            <div id="contactFormContainer">
+                <div id="contactLink"> <a href="contact.html"> </a></div>
+            </div>
+            <div id="socialiconsContainer">
+                 <div id="socilaiconLink"><a href="contact.html"> </a></div>
+            </div>
+            </div>		 
+         <div class="clear"></div>	
+        <div class="drp-dwn">
+	 	<select onChange="window.location=this.options[this.selectedIndex].value">
+			<option  value="index.html">Home</option>
+			<option value="photos.html" selected="selected">Photos</option>
+			<option value="videos.html">videos</option>
+			<option value="music.html">Music</option>
+			<option value="photos.html">Articles</option>
+			<option value="contact.html">Contact</option>
+		</select>
+	</div>		
+	</div>    	
+			<div id="content">
+				<div id="main">
+        			<ul id="tiles">
+       <a href="images/img1_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img1.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+      <a href="images/img2_b.jpg" class="swipebox" title="Image Name">    <li>
+          <img src="images/img2.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+         <a href="images/img3_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img3.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+       <a href="images/img4_b.jpg" class="swipebox" title="Image Name">   <li>
+          <img src="images/img4.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+       <a href="images/img5_b.jpg" class="swipebox" title="Image Name">   <li>
+          <img src="images/img5.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+        <a href="images/img6_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img6.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+         <a href="images/img7_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img7.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img8_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img8.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+     <a href="images/img9_b.jpg" class="swipebox" title="Image Name">     <li>
+          <img src="images/img9.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+         <a href="images/img10_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img10.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+       <a href="images/img11_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img11.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+        <a href="images/img12_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img12.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+        <a href="images/img13_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img13.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>
+      <a href="images/img14_b.jpg" class="swipebox" title="Image Name">   <li>
+          <img src="images/img14.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+       <a href="images/img15_b.jpg" class="swipebox" title="Image Name">  <li>
+          <img src="images/img15.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>   
+       <a href="images/img40_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img40.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>       
+     <a href="images/img41_b.jpg" class="swipebox" title="Image Name"><li>
+          <img src="images/img41.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+    <a href="images/img42_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img42.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+      </li></a>
+       <a href="images/img43_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img43.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+       <a href="images/img44_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img44.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+       </li></a>
+        <a href="images/img45_b.jpg" class="swipebox" title="Image Name"> <li>
+          <img src="images/img45.jpg" alt="" />
+          <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li></a>      
+        <!-- End of grid blocks -->
+      </ul>
+      </div>
+    </div>
+          <div class="copy_right">
+			  <p>All Rights Reseverd | Design by  <a href="http://w3layouts.com">W3Layouts</a></p>
+		  </div>
+   </div>
+</body>
+</html>

+ 203 - 0
videos.html

@@ -0,0 +1,203 @@
+<a href="http://www.100sucai.com" style="display:none">http://www.100sucai.com</a>
+<!DOCTYPE HTML>
+<html>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
+"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Gallery Station webtemplate for high end mobiles, like samsung, nokia, lg, sony erricsson, htc mobile website templates for free | videos :: w3layouts</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <!---- Css Files ------->
+     <link rel="stylesheet" href="css/style.css" type="text/css" >
+     <link rel="stylesheet" href="css/grids.css" type="text/css" media="all" />
+  <!---- End Css Files ------->	
+</head>
+	<body>
+		<div id="page">
+			<div id="header">
+				<div class="logo">
+					<a href="index.html"><img src="images/logo.png" alt="" /></a>
+			    </div>		
+	   <div class="header_right">	            
+            <div id="contactFormContainer">
+                <div id="contactLink"> <a href="contact.html"> </a></div>
+            </div>
+            <div id="socialiconsContainer">
+                 <div id="socilaiconLink"><a href="contact.html"> </a></div>
+            </div>
+            </div>	 
+         <div class="clear"></div>	
+        <div class="drp-dwn">
+	 	<select onChange="window.location=this.options[this.selectedIndex].value">
+			<option  value="index.html">Home</option>
+			<option value="photos.html">Photos</option>
+			<option value="videos.html" selected="selected">videos</option>
+			<option value="music.html">Music</option>
+			<option value="photos.html">Articles</option>
+			<option value="contact.html">Contact</option>
+		</select>
+	</div>		
+	</div>    	
+			<div id="content">
+				<div id="main">
+        			<ul id="tiles">
+        <!--
+          These are our grid items. Notice how each one has classes assigned that
+          are used for filtering. The classes match the "data-filter" properties above.
+          -->
+             
+                
+         <li>
+          <img src="images/video3.jpg"  alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>       
+         <li data-filter-class='["music", "video"]'>
+          <img src="images/video4.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>       
+         <li>
+          <img src="images/video5.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>    
+        <li>
+          <img src="images/video2.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>   
+         <li>
+          <img src="images/video6.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>       
+         <li>
+          <img src="images/video7.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+                   
+         <li>
+          <img src="images/video1.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+       
+        <li>
+          <img src="images/video3.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+        <li>
+          <img src="images/video4.jpg" alt="" />
+             <p><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>s
+             	<div class="clear"></div>
+             </p>
+        </li>
+        <li>
+          <img src="images/video5.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+        <li>
+          <img src="images/video6.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>       
+        <li>
+          <img src="images/video7.jpg" alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>
+        <li>
+          <img src="images/video8.jpg"  alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>    
+         <li>
+          <img src="images/video5.jpg"  alt="" />
+             <p><a href="details.html"><img src="images/blog-icon1.png" title="posted date" alt="" />
+             	<img src="images/blog-icon2.png" title="views" alt="" />
+             	<img src="images/blog-icon3.png" title="comments" alt="" />
+             	<img src="images/blog-icon5.png" title="link" alt="" />
+             	<span>Sample Text</span>
+             	<div class="clear"></div>
+             </a></p>
+        </li>         
+        <!-- End of grid blocks -->
+      </ul>
+      </div>
+    </div>
+    	<div class="copy_right">
+				<p>All Rights Reseverd | Design by  <a href="http://w3layouts.com">W3Layouts</a></p>
+		  </div>
+   </div>
+</body>
+</html>

+ 5 - 0
www.100sucai.com.url

@@ -0,0 +1,5 @@
+[InternetShortcut]
+URL=http://www.100sucai.com/
+IDList=
+[{000214A0-0000-0000-C000-000000000046}]
+Prop3=19,2