Now, in the 9-column div in the single.html page, we will put our single image. For this, first we will put an <article> tag and give it a class of post. Then add a paragraph with the class of meta, as shown here:

<div class="w3-col m9 l9">
  <article class="post">
    <p class="meta">
    </p>
  </article>
</div>

Next, add Posted at 2:00pm on 03-29-2017 by Brad in the meta class:

<p class="meta">
Posted at 2:00pm on 03-29-2017 by Brad
</p>

After this, put <hr /> and then the actual image by adding src="images/1.jpg". As we want this image to animate, we will give it a class of w3-animate-right, as shown here:

<div class="w3-col m9 l9">
  <article class="post">
    <p class="meta">
      Posted at 2:00pm on 03-29-2017 by Brad
    </p>
    <hr/>

    <img src="images/1.jpg" class="w3-animate-right">
  </article>
</div>

Then under this image, we will add another row, w3-row, and a column, w3-col, with l2; this column is where we will put the Back button. Then we'll add a column with l10 as shown here:

<div class="w3-row">
  <div class="w3-col l2">

  </div>
  <div class="w3-col l10">
  
  </div>
</div>

Now in column l2, let's put a line break <br /> and then add a link that will go back to the index.html page. We will give the link the w3-btn and w3-red classes to format it as a button as shown here:

<div class="w3-row">
  <div class="w3-col l2">
    <br />
    <a href="index.html" class="w3-btn w3-red">Back</a>https://epic.packtpub.com/index.php?module=KReports&offset=1&stamp=1490607763044301800&return_module=KReports&action=DetailView&record=1d5f883c-a9a3-ee7f-1d3c-5887f8190664
  </div>

Then in column l10, we'll add Photo Title and also the description. In the description, just paste a sample text in as shown here:

<div class="w3-col l10">
  <h1>Photo Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Let's save this code and go back to single.html in the browser. We can see the image comes in from the right-hand side:

Now, as shown in the preceding screenshot, we can find that the columns are too close. You can see they're up against each other. So, we will add some padding to the post class that we specified for the <article> element. For this, add padding:20px in the style.css file:

.post{
  padding:20px;
}

Also, we will add the class of pic to that main image as shown here:

<img src="images/1.jpg" class="pic w3-animate-right">

Now you can see that the photo actually fits in there, and we're not right up against the side column:

So we have the title, description, and the Back button on the main image. In the next section, we're ready to start creating our WordPress theme.