Edit This Code:
See Result »
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../lib/w3.css"> <body> <div class="w3-card-4 w3-margin"> <img src="img_woods.jpg" alt="Nature" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>TITLE HEADING</b></h3> <h5>Title description <span class="w3-opacity">April 7, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> <div class="w3-card-4 w3-margin"> <img src="img_bridge.jpg" alt="Norway" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>BLOG ENTRY</b></h3> <h5>Title description <span class="w3-opacity">April 2, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> <div class="w3-card-4 w3-margin"> <img src="img_woods.jpg" alt="Nature" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>TITLE HEADING</b></h3> <h5>Title description <span class="w3-opacity">April 7, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> <div class="w3-card-4 w3-margin"> <img src="img_bridge.jpg" alt="Norway" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>BLOG ENTRY</b></h3> <h5>Title description <span class="w3-opacity">April 2, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> <div class="w3-card-4 w3-margin"> <img src="img_woods.jpg" alt="Nature" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>TITLE HEADING</b></h3> <h5>Title description <span class="w3-opacity">April 7, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> <div class="w3-card-4 w3-margin"> <img src="img_bridge.jpg" alt="Norway" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>BLOG ENTRY</b></h3> <h5>Title description <span class="w3-opacity">April 2, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> <div class="w3-card-4 w3-margin"> <img src="img_woods.jpg" alt="Nature" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>TITLE HEADING</b></h3> <h5>Title description <span class="w3-opacity">April 7, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> <div class="w3-card-4 w3-margin"> <img src="img_bridge.jpg" alt="Norway" style="width:100%"> <div class="w3-container w3-padding-hor-8"> <h3><b>BLOG ENTRY</b></h3> <h5>Title description <span class="w3-opacity">April 2, 2014</span></h5> </div> <div class="w3-container"> <p> Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. </p> </div> </div> </body> </html>
Result: