Portfolio

This section can be used to display multiple cards with an image, a title and a description. Each card can optionally be a link to another resource.

Code

<!--Projects -->
<section class="page-section alternate-bg portfolio">
    <div class="container">
        <div class="heading-container text-center">
            <h2 class="section-heading text-uppercase">Heading</h2>
            <h3 class="section-subheading text-muted">Subheading.</h3>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-sm-6">
                <div class="portfolio-item rounded">
                    <a class="portfolio-link" href="/projects/one.html">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                        </div>
                        <img class="img-fluid" src="/assets/img/portfolio/1.jpg" alt="Project one logo"/>
                    </a>
                    <div class="portfolio-caption">
                        <div class="caption-heading">Project one</div>
                        <div class="caption-subheading text-muted">Click on the image to learn more.</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6">
                <div class="portfolio-item rounded">
                    <img class="img-fluid" src="/assets/img/portfolio/2.jpg" alt="Project two logo" />
                    <div class="portfolio-caption">
                        <div class="caption-heading">Project two</div>
                        <div class="caption-subheading text-muted">This card cannot be clicked.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Output

Customization

You can easily change the image, text and link looking at the example.

Consider the two variations: the first will change on hover and if clicked will link to an external resource. The second one is just a static image with text.

Note: all images in the portfolio should have the same aspect ratio.

If the image has transparency you can set the background color of the element like this:

<img class="img-fluid" src="/assets/img/portfolio/2.jpg" alt="Project two logo" style="background-color: #1234AB;"/>