cards.html

<div data-page="cards" class="page" style="padding: 5px 9px;">

	<!--HEADER開始-->
	<div class="navbar">
		<div class="navbar-inner">
			<div class="left">
				<a href="#" class="back link"><i class="icon icon-back"></i><span>上一頁</span></a>
			</div>
			<div class="center">
				cards
			</div>
			<div class="right">
				<a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
			</div>
		</div>
	</div>
	<!--HEADER結束-->

	<!--要捲動的頁面區塊開始-->
	<div class="page-content">
	<style>
.facebook-card .card-header 
{
display: block;
padding: 10px;
}
.facebook-card .facebook-avatar
{
float: left;
}
.facebook-card .facebook-name 
{
margin-left: 44px;
font-size: 14px;
font-weight: 500;
}
.facebook-card .facebook-date
{
margin-left: 44px;
font-size: 13px;
color: #8e8e93;
}
.facebook-card .card-footer
{
background: #fafafa;
}
.facebook-card .card-footer a
{
color: #81848b;
font-weight: 500;
}
.facebook-card .card-content img
{
display: block;
}
.facebook-card .card-content-inner
{
padding: 15px 10px;
}

.demo-card-header-pic .card-header
{
height: 40vw;
background-size: cover;
background-position: center;
}
	</style>
  <div class="card facebook-card">
  <div class="card-header no-border">
    <div class="facebook-avatar"><img src="img/photo.jpg" width="34" height="34"></div>
    <div class="facebook-name">John Doe</div>
    <div class="facebook-date">Monday at 3:47 PM</div>
  </div>
  <div class="card-content"><img src="img/timeline.jpg" width="100%"></div>
  <div class="card-footer no-border">
    <a href="#" class="link">Like</a>
    <a href="#" class="link">Comment</a>
    <a href="#" class="link">Share</a>
  </div>
</div>
 
<div class="card facebook-card">
  <div class="card-header">
    <div class="facebook-avatar"><img src="img/photo.jpg" width="34" height="34"></div>
    <div class="facebook-name">John Doe</div>
    <div class="facebook-date">Monday at 2:15 PM</div>
  </div>
  <div class="card-content">
    <div class="card-content-inner">
      <p>What a nice photo i took yesterday!</p>
      <img src="img/timeline.jpg" width="100%">
      <p class="color-gray">Likes: 112    Comments: 43</p>
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="link">Like</a>
    <a href="#" class="link">Comment</a>
    <a href="#" class="link">Share</a>
  </div>
</div>

<div class="card demo-card-header-pic">
  <div style="background-image:url(img/style.jpg)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
  <div class="card-content">
    <div class="card-content-inner">
      <p class="color-gray">Posted on January 21, 2015</p>
      <p>Quisque eget vestibulum nulla...</p>
    </div>
  </div>
  <div class="card-footer">
    <a href="#" class="link">Like</a>
    <a href="#" class="link">Read more</a>
  </div>
</div>

<div class="card">
<div class="card-header">New Releases:</div>
<div class="card-content">
 <div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="http://lorempixel.com/88/88/fashion/4" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Yellow Submarine</div>
</div>
<div class="item-subtitle">Beatles</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="http://lorempixel.com/88/88/fashion/5" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Don't Stop Me Now</div>
</div>
<div class="item-subtitle">Queen</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="http://lorempixel.com/88/88/fashion/6" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Billie Jean</div>
</div>
<div class="item-subtitle">Michael Jackson</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card-footer"> <span>January 20, 2015</span><span>5 comments</span></div>
</div>
	</div>
	<!--要捲動的頁面區塊開始-->
  
</div>