آموزش طراحی متریال با Materialize (جلسه 12) - کارت ها - بخش دوم

<div class="row">

<div class="col s12 m6">

<div class="card blue-grey lighten-4">

<div class="card-content">

<span class="card-title"><h3>Lea HTML5</h3></span>

<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>

</div>

<div class="card-action">

<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>

<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col s12 m6">

<div class="card blue-grey lighten-4">

<div class="card-image">

<img src="html5-mini-logo.jpg">

</div>

<div class="card-content">

<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>

</div>

<div class="card-action">

<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>

<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col s12 m6">

<div class="card blue-grey lighten-4">

<div class="card-image waves-effect waves-block waves-light">

<img class="activator" src="html5-mini-logo.jpg">

</div>

<div class="card-content activator">

<p>Click the image to reveal more information.</p>

</div>

<div class="card-reveal">

<span class="card-title grey-text text-darken-4">HTML5<i class="material-icons right">close</i></span>

<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>

</div>

<div class="card-action">

<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>

<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>

</div>

</div>

</div>

</div>

<div class="row">

<div class="col s12 m3">

<div class="card-panel teal">

<span class="white-text">Simple Card</span>

</div>

</div>

<div class="col s12 m3">

<div class="card small teal">

<span class="white-text">Small Card</span>

</div>

</div>

<div class="col s12 m3">

<div class="card medium teal">

<span class="white-text">Medium Card</span>

</div>

</div>

<div class="col s12 m3">

<div class="card large teal">

<span class="white-text">Large Card</span>

</div>

</div>

</div>