Building Courses & Gallery Section

The Course Display Section

In the third section, we will style it using a height of 600px.  We will need to increase the fonts and increase the margin so we will add the margin and the text and also keep it centred.

We will apply flex on the div container of cards, then apply grid on the card's body and each of the images will be at a width of 100%. That way, it will not exceed the grid container.

When we add the html code

    <!--third section-->
    <section id="courses" class="third bg-dark pad2">
        <h2 class="font2 center-text mar2">
            Our Courses
        </h2>
        <div class="container">
            <div class="grid grid-3">
                <div class="card">
                    <img class="thumbnail" src="images/work5.jpg" alt="an image" />
                    <div class="pad1">
                        <h6 class="font">Post Title</h6>
                        <p class="font1">This is a lorem, ipsum dolor sit amet consectetur adipisicing</p>
                        <a class="btn" href="#">Read More</a>
                    </div>
                </div>
                <div class="card">
                    <img class="thumbnail" src="images/work5.jpg" alt="an image" />
                    <div class="pad1">
                        <h6 class="font">Post Title</h6>
                        <p class="font1">This is a lorem, ipsum dolor sit amet consectetur adipisicing</p>
                        <a class="btn" href="#">Read More</a>
                    </div>
                </div>
                <div class="card">
                    <img class="thumbnail" src="images/work5.jpg" alt="an image" />
                    <div class="pad1">
                        <h6 class="font">Post Title</h6>
                        <p class="font1">This is a lorem, ipsum dolor sit amet consectetur adipisicing</p>
                        <a class="btn" href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--end of third section-->

In the styling, we will increase the height, and format the images. 

.bg-dark {
    background-color: #4a5f6b;
    color: #fff;
}

.third {
    height: 600px;
}

.thumbnail {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

Now this will look like this.

After that, we will move to the next section which is the gallery.

The Gallery Section

We will complete this section in two parts. 

Let’s start with part-1. Here, we will simply create a nice layout with a collection of images. For that we will create a grid with images.

Before we start HTML, we should make sure that we have images available in our images directory. I made a new directory gallery in my images directory. I did this because it will help me to locate image easily in-future if I have to make any changes with it.  Now, let’s add the html

<!--fourth section-->           
    <section class="second bg-light pad2">
        <h2 class="font2 center-text mar2">
            Check Pics of World’s Biggest Cisco Training Labs
        </h2>
        <div class="container">
          <ul class="grid-section3">
            <li>
                <img class="gallery" src="images/gallery/1.jpeg" alt="image" />
            </li>
            <li>
                <img class="gallery" src="images/gallery/2.jpeg" alt="image" />
            </li>
            <li>
                <img class="gallery" src="images/gallery/3.jpeg" alt="image" />
            </li>
            <li>
                <img class="gallery" src="images/gallery/4.jpeg" alt="image" />
            </li>
            <li>
                <img class="gallery" src="images/gallery/5.jpeg" alt="image" />
            </li>
            <li>
                <img class="gallery" src="images/gallery/6.jpeg" alt="image" />
            </li>
            <li>
                <img class="gallery" src="images/gallery/7.jpeg" alt="image" />
            </li>
            <li>
                <img class="gallery" src="images/gallery/8.jpeg" alt="image" />
            </li>
          </ul>
        </div>
      </section>
    <!--end of fourth section-->

Next, we will style the gallery and position the images and the text.

/* the gallery */
.grid-section3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
}

.gallery {
    border-radius: 5%;
}

When we add the grid, we give the container a grid-template-column of repeat(4,1fr) so the images are positioned in four lines as we can see and if we have more than four images, the grid can repeat the same process. We will also give each of the images a border-radius of 5% so the images are a bit curved.

After the styling, we are done with part-1. Now, we will move to the part-2.

In part-2, we will add FancyBox library to make Zoom-In/enlarge image effects.

FancyBox is built with jQuery. So, if we want to work with it, we have to include jQuery first and then FancyBox. 

Loading jQuery from CDN (Content Delivery Network) is recommended

Here I include both files/libraries.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- fancybox -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js'></script>

We keep these files after footer and within <body>.

After this, we will include necessary styling css file provided by fancy box. We will keep this within <head>.

<!-- fancybox css -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css'>

Now we write some HTML within <li> and after <img> of our fourth section. 

<div class="gallerySection-overlay">

</div>

<div class="gallerySection-overlay">
    <div class="overlay-content">

    </div>
</div>

<div class="gallerySection-overlay">
    <div class="overlay-content">
        <a data-fancybox="item" title="click to zoom-in" href="images/gallery/large-size/1.jpeg">

        </a>
    </div>
</div>

<div class="gallerySection-overlay">
    <div class="overlay-content">
        <a data-fancybox="item" title="click to zoom-in" href="images/gallery/large-size/1.jpeg">
            <div class="magnify-icon">
                <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p>
            </div>
        </a>
    </div>
</div>

Now we write some styling css in style.css to give it some style.

        /* -----------------------------------
              Gallery Section
        --------------------------------------*/
        .gallerySection-overlay {
          position: absolute;
          z-index: 2;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.7);
          width: 100%;
          height: 100%;
          text-align: center;
          visibility: hidden;
          transition: all 0.5s;
          transform: scale(0);
          border-radius: 5%;
        }
        .grid-section3 li:hover .gallerySection-overlay {
          visibility: visible;
          transform: scale(1);
        }
        .gallerySection-overlay .magnify-icon {
          cursor: pointer;
          transition: all 0.25s;
        }
        .gallerySection-overlay .magnify-icon p span i {
          font-size: 15px;
          color: #fff;
          cursor: pointer;
          border-radius: 20px;
          background: #d7442e;
          padding: 10px;
          margin-top: 20%;
        }
        .grid-section3 li{
          position:relative;
        }

You will find an amazing gallery with some nice hover effects and zoom-in feature. Here is the result:

GIF