We will be focusing on the content section in this tutorial.
1) The content section is made up by divs inside another.
2) First we create a div named entry (the gray box). The purpose of this div is to contain all the entries of homestays.
3) In entry, we create more divs named loop-entry. Loop-entry serves the purpose of displaying the information of each homestay. (1) in the picture is an example of one loop-entry. Each loop-entry is floated to the left so each entry will stack to the right side of each other.
4) Inside each loop-entry, there are two more divs:
- the loop-entry-thumbnail div (the brown box in (2)) – this space is used for display the photo of the homestay.
- the loop-entry-details div (the blue box in (2)) – this space is used for display the name and the description of that particular homestay.
5) In each loop-entry-details, other than the name of the homestay (in H2 tag) and the description, there is also another div that show the price category of that particular homestay (the green box in (2)). We call it loop-entry-cat and set its position to absolute so we can fix its position 0px from the bottom.