Team 1 Foundation

company team team profiles
1 Download Preview

Team block for displaying your team profiles 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 - Team 1</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">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="team-1 bg-light">

        <div class="grid-container">
            <div class="grid-x grid-padding-x align-center">
                <div class="cell large-8 text-center team-intro">
                    <h1 class="team-intro-title">Our Awesome Team</h1>
                    <p class="lead">We have created a bunch of quality blocks that will help designers, developers and
                        agencies create their websites and web apps in no time.</p>
                    <a href="#" class="hollow button">Learn More</a>
                </div>
            </div>

            <div class="grid-x grid-padding-x align-center team-list">
                <div class="cell medium-6 large-4 text-center">
                    <div class="card team-profile">
                        <div class="card-section text-center">
                            <div class="team-profile-img">
                                <img src="//assets.free-website-resources.com/img/profile-01.jpg" alt="Jacqueline Perry" class="img-fluid">
                            </div>
                            <h5 class="card-title">Jacqueline Perry</h5>
                            <span class="team-profile-designation">UI Designer</span>
                        </div>
                        <div class="grid-x card-footer team-profile-social">
                            <a class="linked-in text-center cell auto" href="#"><span class="fab fa-linkedin-in"></span></a>
                            <a class="behance text-center cell auto" href="#"><span class="fab fa-behance"></span></a>
                            <a class="dribbble text-center cell auto" href="#"><span class="fab fa-dribbble"></span></a>
                        </div>
                    </div>
                </div>
                <div class="cell medium-6 large-4 text-center">
                    <div class="card team-profile">
                        <div class="card-section text-center py-md-5">
                            <div class="team-profile-img">
                                <img src="//assets.free-website-resources.com/img/profile-02.jpg" alt="Nelson Hunter" class="img-fluid">
                            </div>
                            <h5 class="card-title">Nelson Hunter</h5>
                            <span class="team-profile-designation">UI Designer</span>
                        </div>
                        <div class="grid-x card-footer team-profile-social">
                            <a class="linked-in text-center cell auto" href="#"><span class="fab fa-linkedin-in"></span></a>
                            <a class="behance text-center cell auto" href="#"><span class="fab fa-behance"></span></a>
                            <a class="dribbble text-center cell auto" href="#"><span class="fab fa-dribbble"></span></a>
                        </div>
                    </div>
                </div>
                <div class="cell medium-6 large-4 text-center">
                    <div class="card team-profile">
                        <div class="card-section text-center py-md-5">
                            <div class="team-profile-img">
                                <img src="//assets.free-website-resources.com/img/profile-03.jpg" alt="Ida Gibson" class="img-fluid">
                            </div>
                            <h5 class="card-title">Ida Gibson</h5>
                            <span class="team-profile-designation">Lead Developer</span>
                        </div>
                        <div class="grid-x card-footer team-profile-social">
                            <a class="linked-in text-center cell auto" href="#"><span class="fab fa-linkedin-in"></span></a>
                            <a class="behance text-center cell auto" href="#"><span class="fab fa-facebook"></span></a>
                            <a class="dribbble text-center cell auto" href="#"><span class="fab fa-twitter"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <!-- /.team-1 -->

    <!-- 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;
$body-font-color: #6c757d;
$primary: #5863f8;
$gray: #495057;
$white: #fff;
$light-gray: #adb5bd;
$bg-light: #f8f9fa;
$border-color: #dee2e6;

$facebook:  #3b5998;
$twitter:   #1da1f2;
$linked-in: #0077b5;
$behance: #1769ff;
$dribbble: #ea4c89;

$social-colors: () !default;
$social-colors: map-merge((
  "facebook":   $facebook,
  "twitter":    $twitter,
  "linked-in":  $linked-in,
  "behance":    $behance,
  "dribbble":   $dribbble
), $social-colors);

$button-radius: 4px;

.bg-light {
  padding-top: 0;
  background: $bg-light;
}

.team-1 {
  font-family: $body-font-family;
  @include padding-direction('vertical', 1);
}

.team-intro {
  @include padding-direction('horizontal',2 );

  .button {
    margin-top: 1rem;
  }
}

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

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

.button.hollow {
  color: $white;
}

.button {
  border-radius: $button-radius;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 0;

  &.hollow {
    @include button-hollow-style($primary);
    border: solid 2px rgba($primary, .75);

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

.team-list {
  margin-top: .75rem;
}

.team-profile {
  border-radius: 1rem;
  @include margin-direction('vertical', .75);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;

  .card-section {
    padding: 1.25rem;
  }

  .card-title {
    font-family: $header-font-family;
    font-size: 1.25rem;
    line-height: 1.2;
    color: $gray;
    margin-top: 1rem;
    margin-bottom: .5rem;
  }

  .card-footer {
    background-color: $white;
    border-radius: 0 0 1rem 1rem;
    border-top: solid 1px $border-color;
  }
}

.team-profile-social {
  a {
    border-left: 1px solid $border-color;
    font-size: 1rem;
    color: $body-font-color;
    padding-top: .75rem;
    padding-bottom: .75rem;

    &:first-child {
      border-left-width: 0;
    }

    @each $color, $value in $social-colors {
      &.#{$color} {
        &:hover {
          color: $value;
        }
      }
    }
  }
}

.team-profile-designation {
  font-size: .875rem;
  color: $light-gray;
  font-weight: 600;
  text-transform: uppercase;
}

.team-profile-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;

  img {
    transition: transform .5s;

    &:hover {
      transform: scale(1.1);
    }
  }
}


@media #{breakpoint(medium)} {

  .team-1 {
    @include padding-direction('vertical', 3);
  }

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

  .team-list {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }

  .team-profile {
    .card-section {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

    .team-profile-img {
      width: 100px;
      height: 100px;
    }
  }

}


@media #{breakpoint(large)} {

  .team-intro {
    .button {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  .team-profile-social {
    a {
      font-size: 1.25rem;
    }
  }

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.bg-light {
  padding-top: 0;
  background: #f8f9fa;
}

.team-1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.team-intro {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

.team-intro .button {
  margin-top: 1rem;
}

.team-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: 28px;
  line-height: 1.2;
  margin-bottom: 1rem;
}

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

.button.hollow {
  color: #fff;
}

.button {
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 0;
}

.button.hollow {
  border: 1px solid #5863f8;
  color: #5863f8;
  border: solid 2px rgba(88, 99, 248, 0.75);
}

.button.hollow:hover, .button.hollow:focus {
  border-color: #0711a1;
  color: #0711a1;
}

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

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

.team-list {
  margin-top: .75rem;
}

.team-profile {
  border-radius: 1rem;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.team-profile .card-section {
  padding: 1.25rem;
}

.team-profile .card-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;
  line-height: 1.2;
  color: #495057;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.team-profile .card-footer {
  background-color: #fff;
  border-radius: 0 0 1rem 1rem;
  border-top: solid 1px #dee2e6;
}

.team-profile-social a {
  border-left: 1px solid #dee2e6;
  font-size: 1rem;
  color: #6c757d;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.team-profile-social a:first-child {
  border-left-width: 0;
}

.team-profile-social a.facebook:hover {
  color: #3b5998;
}

.team-profile-social a.twitter:hover {
  color: #1da1f2;
}

.team-profile-social a.linked-in:hover {
  color: #0077b5;
}

.team-profile-social a.behance:hover {
  color: #1769ff;
}

.team-profile-social a.dribbble:hover {
  color: #ea4c89;
}

.team-profile-designation {
  font-size: .875rem;
  color: #adb5bd;
  font-weight: 600;
  text-transform: uppercase;
}

.team-profile-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.team-profile-img img {
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}

.team-profile-img img:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@media (min-width: 40em) {
  .team-1 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .team-intro-title {
    font-size: 2.5rem;
  }
  .team-list {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }
  .team-profile .card-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .team-profile .team-profile-img {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 64em) {
  .team-intro .button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .team-profile-social a {
    font-size: 1.25rem;
  }
}

Similar Blocks

Team 2
1
Team 2
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi90ZWFtL3RlYW0tMQ==

By using our website you agree to our Cookie Policy