Replicating the webpage of Homestayatmelaka.com (Part 3)

Untitled

 

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. 

Advertisements

2 comments

  1. Pingback: Cheap Homestay Discount | Eylizar Homestay Langkawi

  2. Pingback: Cari Homestay Murah Di Pulau Langkawi | Eylizar Homestay Langkawi


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s