Article Basic Sample with Image

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!

Breaking News: Cat does not give a damn

Author: Cat Lover, Published: Yesterday


Image source: The WEB

This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text around it. Cats are awesome, lazy, and usually get to sleep all day, waking up whenever they feel like it, eating, pooping, sometimes playing with toys, if they feel like it, and jumping or climbing on random places, hiding, and eventually, going back to sleep, until the early morning comes, and they decide its time to wake up and run around like crazy at 4 AM in the morning. Despite all the craziness of a cat, cats are awesome animals and make great pets.


Code:
<article>
<h1>Breaking News: Cat does not give a damn</h1>
<p><strong>Author:</strong> Cat Lover, <strong>Published:</strong> Yesterday</p>
<div>
<img src=\"http://peoplecancode-public.s3.amazonaws.com/cat.jpg\">
<span>Image source: The WEB</span>
</div>

<p>This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text around it. Cats are awesome, lazy, and usually get to sleep all day, waking up whenever they feel like it, eating, pooping, sometimes playing with toys, if they feel like it, and jumping to random places, hiding, and eventually, going back to sleep, until the early morning comes, and they decide its time to wake up and run around like crazy at 4 AM in the morning. Despite all the craziness of a cat, cats are awesome animals and make great pets.</p>
</article>
CSS:
body { font-family: sans-serif; }
h1 {
font-family: serif;
margin-bottom: 0;
}
article {
width: 600px;
margin-left: auto;
margin-right: auto;
}
.image-wrapper {
width: 200px;
float: left;
padding-right: 25px;
padding-bottom: 10px;
}
.image-wrapper img {
width: 100%;
}

.image-wrapper span {
font-family: sans-serif;
font-size: 10px;
color: #ccc;
}

.article-meta {
font-family: sans-serif;
color: #aaa;
font-size: 12px;
}
p {
font-size: 14px;
}