Gallery

HSM Gallery

HSM framework has included a beautiful gallery feature for your restaurant site. Its designed using the Flexbox model.
- To create a gallery for the images use the class .gallery to wrap around the content.
- Add the class .img-responsive to make the images responsive.

Name 1

Information 1

Name 2

Information 2

Name 3

Information 3

Name 4

Information 4

Name 5

Information 5

Name 6

Information 6

Name 7

Information 7

Name 8

Information 8

HTML Structure


<section class="gallery">

        <div class="card-container">
            <div><img src="images/page-2_img02.jpg" alt="image" class="img-responsive"></div>
            <div>
                 <h3>Name 1</h3>
                <p>Information 1</p>
            </div>
        </div>

        <div class="card-container">
            <div><img src="images/page-2_img02.jpg" alt="image" class="img-responsive"></div>
            <div>
                <h3>Name 2</h3>
                <p>Information 2</p>
            </div>
        </div>

		<div class="card-container">
            <div><img src="images/page-2_img02.jpg" alt="image" class="img-responsive"></div>
            <div>
                 <h3>Name 3</h3>
                <p>Information 3</p>
            </div>
        </div>

        <div class="card-container">
            <div><img src="images/page-2_img02.jpg" alt="image" class="img-responsive"></div>
            <div>
                <h3>Name 4</h3>
                <p>Information 4</p>
            </div>
        </div>

  </section>

See more Examples

Getting Started