Replicating the webpage of (Part 2)


This tutorial will focus on the notification bar and the sidebar.

1) First the notification bar, you can replicate it exactly by using an unordered list. The black bullet can be change to the star image by specifying: <ul style=”list-style-image: url(img/bullet.jpg);”>, where the bullet.jpg is the screen shot of the star.

2) The sidebar is divided into few sections:

  • the Homestay at Melaka logo
  • the navigation menu
  • the search-box
  • the price menu
  • the maximum visitors menu

3) The logo is a clickable link, so inside the logo div, we embed it as a hyperlink tag.

4) The navigation menu is actually a unordered list too. In the CSS, we specify the list-style as none, so it won’t show the bullets. Then we make sure the text decoration on the links is set to none as well.

5) The search box is implemented by using twitter bootstrap.

6) Both the price menu and the maximum visitor menu is also implemented using unordered list. The steps are same with (4).


One comment

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s