Portfolio block to display your portfolio of client websites, applications or photography on websites and landing pages.

Dependencies

  • Foundation 6
  • FontAwesome
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Foundation Blocks - Portfolio 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="portfolio-2">
        <div class="grid-container">
            <div class="grid-x grid-padding-x align-center">
                <div class="cell medium-10 large-8 text-center portfolio-intro">
                    <h1 class="portfolio-intro-title">Awesome design for your content</h1>
                    <p class="lead">FWR blocks contains a variety of blocks and elements that you can mix and match to create various layouts. FWR blocks follow a similar pattern and design style so you can reuse it in your websites and web applications.</p>
                    <div class="portfolio-actions text-center">
                        <button class="button primary">View Portfolio</button>
                        <button class="button hollow">About FWR blocks</button>
                    </div>
                </div>
            </div>
            <div class="grid-x grid-padding-x portfolio-list">
                <div class="cell medium-6 large-4">
                    <div class="portfolio-item">
                        <div class="portfolio-img">
                            <img src="//assets.free-website-resources.com/img/portfolio-7.jpg" alt="portfolio image">
                            <div class="portfolio-hover"></div>
                        </div>
                        <div class="portfolio-meta">
                            <h5 class="portfolio-title text-uppercase">WebMeeting Features</h5>
                            <p class="text-muted">FWR blocks are beautifully crafted with creativity, passion and quality.</p>
                        </div>
                    </div>
                </div>

                <div class="cell medium-6 large-4">
                    <div class="portfolio-item">
                        <div class="portfolio-img">
                            <img src="//assets.free-website-resources.com/img/portfolio-8.png" alt="portfolio image">
                            <div class="portfolio-hover"></div>
                        </div>
                        <div class="portfolio-meta">
                            <h5 class="portfolio-title text-uppercase">Young Bloods</h5>
                            <p class="text-muted">FWR blocks bring in a fresh air of art and design in their blocks.</p>
                        </div>
                    </div>
                </div>

                <div class="cell medium-6 large-4">
                    <div class="portfolio-item">
                        <div class="portfolio-img">
                            <img src="//assets.free-website-resources.com/img/portfolio-9.jpg" alt="portfolio image">
                            <div class="portfolio-hover"></div>
                        </div>
                        <div class="portfolio-meta">
                            <h5 class="portfolio-title text-uppercase">Nike90 Store</h5>
                            <p class="text-muted">FWR blocks are reusable code blocks for designers, developers and agencies.</p>
                        </div>
                    </div>
                </div>

                <div class="cell medium-6 large-4">
                    <div class="portfolio-item">
                        <div class="portfolio-img">
                            <img src="//assets.free-website-resources.com/img/portfolio-10.png" alt="portfolio image">
                            <div class="portfolio-hover"></div>
                        </div>
                        <div class="portfolio-meta">
                            <h5 class="portfolio-title text-uppercase">Women Inventor</h5>
                            <p class="text-muted">You can use FWR blocks for personal or commercial purpose with attribution.</p>
                        </div>
                    </div>
                </div>

                <div class="cell medium-6 large-4">
                    <div class="portfolio-item">
                        <div class="portfolio-img">
                            <img src="//assets.free-website-resources.com/img/portfolio-11.png" alt="portfolio image">
                            <div class="portfolio-hover"></div>
                        </div>
                        <div class="portfolio-meta">
                            <h5 class="portfolio-title text-uppercase">Pomodoro App</h5>
                            <p class="text-muted">FWR blocks is the must have tool for designers and developers.</p>
                        </div>
                    </div>
                </div>

                <div class="cell medium-6 large-4">
                    <div class="portfolio-item">
                        <div class="portfolio-img">
                            <img src="//assets.free-website-resources.com/img/portfolio-12.png" alt="portfolio image">
                            <div class="portfolio-hover"></div>
                        </div>
                        <div class="portfolio-meta">
                            <h5 class="portfolio-title text-uppercase">Glax landing</h5>
                            <p class="text-muted">FWR blocks are made with Bootstrap and minimal custom styling.</p>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- /.portfolio-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>
// Foundation variables and mixins
@import "~foundation-sites/scss/foundation";

// Variables
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$header-font-family: $body-font-family;
$primary: #5863f8;
$light-gray: #6c757d;
$white: #fff;
$border-radius: 50px;

.portfolio-2 {
  font-family: $body-font-family;
  @include padding-direction('vertical', 1.5);
}

.portfolio-intro-title {
  font-family: $header-font-family;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.portfolio-intro {
  .lead {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5;
  }
}

.portfolio-list {
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;

  .cell {
    margin-top: 1.5rem;
  }
}

.portfolio-img {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;

  img {
    transform: scale(1.05);
    opacity: 1;
    filter: grayscale(70%);
    transition: transform .3s, opacity .3s, filter 1s;
  }

  &:hover {
    img {
      filter: grayscale(0%);
      transform: scale(1);
      opacity: 1;
    }

    .portfolio-hover {
      &::before {
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
      }
    }
  }
}

.portfolio-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    background-color: rgba($white, .5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
    transition: transform .6s;
  }
}

.portfolio-item {
  max-width: 340px;
  margin: 0 auto;
}

.portfolio-title {
  font-family: $header-font-family;
  font-size: 1.25rem;
  font-weight: 600;
  color: $primary;
}

.portfolio-meta {
  padding: 1rem .25rem;

  p {
    line-height: 1.5;
  }
}

.portfolio-actions {
  margin-top: 1.5rem;

  .button {
    margin: .5rem .25rem 0;
  }
}

.button {
  border-radius: $border-radius;
  font-size: 16px;
  line-height: 1.5;
  padding: .5rem 1rem;
  display: inline-block;
  margin-bottom: 0;

  &.primary {
    @include button-style($primary, 'auto', $white);
    border: solid 2px $primary;
  }

  &.hollow {
    @include button-hollow-style($white);
    border: solid 2px $primary;
    color: $primary;

    &:hover, &:focus, &:active {
      background-color: $primary;
      color: $white;
      border-color: $primary;
    }
  }
}

.text-uppercase {
  text-transform: uppercase;
}

.text-muted {
  color: $light-gray;
}


@media #{breakpoint(medium)} {

  .portfolio-item {
    max-width: 400px;
    margin-left: .5rem;
    margin-right: .5rem;
  }

}


@media #{breakpoint(large)} {

  .portfolio-2 {
    @include padding-direction('vertical', 3);
  }

  .portfolio-intro-title {
    font-size: 2.5rem;
  }

  .button {
    padding: .75rem 1.875rem;
  }

  .portfolio-list {
    margin-top: 3rem;
  }

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.portfolio-2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.portfolio-intro-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.portfolio-intro .lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5;
}

.portfolio-list {
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.portfolio-list .cell {
  margin-top: 1.5rem;
}

.portfolio-img {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.portfolio-img img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  opacity: 1;
  -webkit-filter: grayscale(70%);
          filter: grayscale(70%);
  -webkit-transition: opacity .3s, -webkit-transform .3s, -webkit-filter 1s;
  transition: opacity .3s, -webkit-transform .3s, -webkit-filter 1s;
  transition: transform .3s, opacity .3s, filter 1s;
  transition: transform .3s, opacity .3s, filter 1s, -webkit-transform .3s, -webkit-filter 1s;
}

.portfolio-img:hover img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.portfolio-img:hover .portfolio-hover::before {
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
          transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}

.portfolio-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.portfolio-hover::before {
  content: '';
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
          transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
  -webkit-transition: -webkit-transform .6s;
  transition: -webkit-transform .6s;
  transition: transform .6s;
  transition: transform .6s, -webkit-transform .6s;
}

.portfolio-item {
  max-width: 340px;
  margin: 0 auto;
}

.portfolio-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.25rem;
  font-weight: 600;
  color: #5863f8;
}

.portfolio-meta {
  padding: 1rem .25rem;
}

.portfolio-meta p {
  line-height: 1.5;
}

.portfolio-actions {
  margin-top: 1.5rem;
}

.portfolio-actions .button {
  margin: .5rem .25rem 0;
}

.button {
  border-radius: 50px;
  font-size: 16px;
  line-height: 1.5;
  padding: .5rem 1rem;
  display: inline-block;
  margin-bottom: 0;
}

.button.primary {
  background-color: #5863f8;
  color: #fff;
  border: solid 2px #5863f8;
}

.button.primary:hover, .button.primary:focus {
  background-color: #1827f5;
  color: #fff;
}

.button.hollow {
  border: 1px solid #fff;
  color: #fff;
  border: solid 2px #5863f8;
  color: #5863f8;
}

.button.hollow:hover, .button.hollow:focus {
  border-color: #807f7f;
  color: #807f7f;
}

.button.hollow:hover.disabled, .button.hollow:hover[disabled], .button.hollow:focus.disabled, .button.hollow:focus[disabled] {
  border: 1px solid #fff;
  color: #fff;
}

.button.hollow:hover, .button.hollow:focus, .button.hollow:active {
  background-color: #5863f8;
  color: #fff;
  border-color: #5863f8;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-muted {
  color: #6c757d;
}

@media (min-width: 40em) {
  .portfolio-item {
    max-width: 400px;
    margin-left: .5rem;
    margin-right: .5rem;
  }
}

@media (min-width: 64em) {
  .portfolio-2 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .portfolio-intro-title {
    font-size: 2.5rem;
  }
  .button {
    padding: .75rem 1.875rem;
  }
  .portfolio-list {
    margin-top: 3rem;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9wb3J0Zm9saW8vcG9ydGZvbGlvLTI=