Picture Catalog in HTML and CSS

I created a picture catalog in using HTML and CSS. I will show the source codes and the sample screen shots. A website picture catalog is a set of pictures shown in a tiles or grid pattern. This displays the products, it’s price and other details. The sample pictures I have are taken from my other site : cebucmhotels.wordpress.com.

I used the Sublime text editor to create HTML and CSS. In the samples, the images will automatically arrange when the resolution is adjusted.

See the sample code below.


<html>
<head>
<link rel="stylesheet" type="text/css" href="format.css">
</head>
<body bgcolor="#181818"> <!-- sets the entire page background -->
<ul class="products">
    <li>
        <img src="../catalog/sogod.jpg">
        <a href="#" style="color:white">    
            <h4>North Sky Resort Sogod</h4>
            <p>Sogod, Cebu</p>
        </a>
    </li>
    <li>
        <img src="../catalog/rancho-cancio.jpg">
        <a href="#" style="color:white">   
            <h4>Rancho Cancio</h4>
            <p>Busay, Cebu City</p>
        </a>
    </li>
    <li>
        <img src="../catalog/marriot.jpg">
        <a href="#" style="color:white">    
            <h4>Marriot</h4>
            <p>Cebu Business Park</p>
        </a>
    </li>
    <li>
        <img src="../catalog/plantation-bay.jpg">
        <a href="#" style="color:white">    
            <h4>Plantation Bay</h4>
            <p>Mactan, Cebu</p>
        </a>
    </li><!-- add more list items -->
</ul>
</body>
</html>

ul.products li {
    width: 370px; /* adjust the size of the catalog block */
    display: inline-block; /* this creates the catalog effect */
    text-align: center; /* align the image to center */
    background-color:#282828 ; /* background color of each */
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    border-radius: 10px; /* rounded borders effect */
    border: 2px solid #585858; /* border and color */
}

=========================================

References

1.) Do it with CSS and HTML first

Seamless Responsive Photo Grid

2.) Product View Grid

Using inline-block to Display a Product Grid View

3.) 3×3 html grid

http://www.dreamincode.net/forums/topic/240281-positioning-images-in-a-3×3-grid-sort-of-layout/

References using angular JS ( but I did not added angular JS yet )
making a photo slide show with angular JS

http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/

http://onehungrymind.com/build-a-full-page-angularjs-slideshow/

http://www.sitepoint.com/creating-slide-show-plugin-angularjs/

Advertisements

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