Team 2 Foundation
Team block with image background 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 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">
<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-2 align-middle grid-x va-height">
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell medium-10 large-8 text-center">
<h1 class="team-intro-title">Our Crew</h1>
<p class="lead">We have the best of players in our team who created the <a href="#">FWR blocks</a>. You can learn more about our team and company culture by visiting each member's profile. If you are interested to join our company, you can shoot us an <a href="mailto:">email</a>.</p>
</div>
</div>
<div class="grid-x align-center team-list">
<div class="cell medium-4 text-center team-profile-wrap">
<div class="team-profile">
<div class="team-profile-img">
<img src="//assets.free-website-resources.com/img/profile-04.jpg" alt="Jacqueline Perry" class="img-fluid">
</div>
<h5 class="team-profile-name">John Doe</h5>
<p class="team-profile-designation">Lead Designer</p>
<div class="team-profile-social align-center">
<a class="linked-in" href="#">
<span class="fab fa-linkedin-in"></span>
<span class="fab fa-linkedin-in social-hover"></span>
</a>
<a class="behance" href="#">
<span class="fab fa-behance"></span>
<span class="fab fa-behance social-hover"></span>
</a>
<a class="dribbble" href="#">
<span class="fab fa-dribbble"></span>
<span class="fab fa-dribbble social-hover"></span>
</a>
</div>
</div>
</div>
<div class="cell medium-4 text-center team-profile-wrap">
<div class="team-profile">
<div class="team-profile-img">
<img src="//assets.free-website-resources.com/img/profile-05.jpg" alt="Mary Jane">
</div>
<h5 class="team-profile-name">Mary Jane</h5>
<p class="team-profile-designation">Lead Developer</p>
<div class="team-profile-social align-center">
<a class="linked-in" href="#">
<span class="fab fa-linkedin-in"></span>
<span class="fab fa-linkedin-in social-hover"></span>
</a>
<a class="behance" href="#">
<span class="fab fa-behance"></span>
<span class="fab fa-behance social-hover"></span>
</a>
<a class="dribbble" href="#">
<span class="fab fa-dribbble"></span>
<span class="fab fa-dribbble social-hover"></span>
</a>
</div>
</div>
</div>
<div class="cell medium-4 text-center team-profile-wrap">
<div class="team-profile">
<div class="team-profile-img">
<img src="//assets.free-website-resources.com/img/profile-06.jpg" alt="Josh Thompson" class="img-fluid">
</div>
<h5 class="team-profile-name">Josh Thompson</h5>
<p class="team-profile-designation">Marketing Manager</p>
<div class="team-profile-social align-center">
<a class="linked-in" href="#">
<span class="fab fa-linkedin-in"></span>
<span class="fab fa-linkedin-in social-hover"></span>
</a>
<a class="behance" href="#">
<span class="fab fa-behance"></span>
<span class="fab fa-behance social-hover"></span>
</a>
<a class="dribbble" href="#">
<span class="fab fa-dribbble"></span>
<span class="fab fa-dribbble social-hover"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="team-bg-overlay"></div>
</div>
<!-- /.team-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;
$gray: #adb5bd;
$white: #fff;
$black: #000;
$text-light: #ced4da;
$light-gray: #6c757d;
$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);
$team-profile-radius: 50%;
// Custom CSS
.team-2 {
@include padding-direction('vertical', 1.5);
}
.grid-container {
z-index: 6;
}
.team-bg-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba($black, .75);
display: block;
z-index: 0;
}
.team-2 {
font-family: $body-font-family;
background: url("https://assets.free-website-resources.com/img/team-bg.jpg") no-repeat center center/cover;
min-height: 100vh;
position: relative;
padding-bottom: 30px;
z-index: 2;
color: $white;
a {
color: $primary;
&:hover {
color: darken($primary, 15%);
}
}
}
.team-intro-title {
font-family: $header-font-family;
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.5;
color: $text-light;
a {
color: $white;
font-weight: 600;
border-bottom: 1px solid transparent;
-webkit-transition: border-bottom-color .3s;
transition: border-bottom-color .3s;
&:hover{
color: $white;
border-color: $white;
text-decoration: none;
}
}
}
.team-list {
margin-top: .5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.team-profile-wrap {
max-width: 400px;
background: $white;
padding: 0 1rem;
&:first-child {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
&:last-child {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
+ .team-profile-wrap {
border-top: 2px solid $border-color;
}
}
.team-profile {
padding: 1.5rem;
}
.team-profile-img {
width: 80px;
height: 80px;
overflow: hidden;
border-radius: $team-profile-radius;
margin: 0 auto;
img {
transform: scale(1);
transition: transform .5s;
}
}
.team-profile-name {
font-family: $header-font-family;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
color: $light-gray;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: .5rem;
}
.team-profile-designation {
font-size: .875rem;
line-height: 1.5;
color: $light-gray;
font-weight: 400;
font-family: $header-font-family;
}
.team-profile-social {
margin-top: 1.5rem;
a {
width: 44px;
height: 44px;
display: inline-block;
vertical-align: middle;
color: $gray !important;
overflow: hidden;
@each $color,
$value in $social-colors {
&.#{$color} {
.social-hover {
background-color: $value;
}
}
}
span {
width: 44px;
line-height: 44px;
border-radius: $team-profile-radius;
background-color: $white;
}
.social-hover {
color: $white;
}
}
}
@media #{breakpoint(medium)} {
.team-list {
margin-top: 2rem;
padding-left: 0;
padding-right: 0;
}
.team-profile {
padding-left: 1.25rem;
padding-right: 1.25rem;
.team-profile-img {
width: 120px;
height: 120px;
img {
transform: scale(1.2);
transition: transform .5s;
}
}
}
.team-profile-wrap {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
&:hover img {
transform: scale(1);
}
&:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 1rem;
}
&:last-child {
border-top-right-radius: 1rem;
border-bottom-left-radius: 0;
}
+ .team-profile-wrap {
border-top: none;
border-left: 2px solid $border-color;
}
}
.team-profile-social {
a {
span {
position: relative;
top: 0;
transition: top .3s;
}
&:hover {
span {
top: -44px;
}
}
}
}
}
@media #{breakpoint(large)} {
.team-2 {
@include padding-direction('vertical', 3);
}
.team-list {
padding-top: 3rem;
}
}
/**
* Foundation for Sites by ZURB
* Version 6.4.4-rc1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
.team-2 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.grid-container {
z-index: 6;
}
.team-bg-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
display: block;
z-index: 0;
}
.team-2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: url("https://assets.free-website-resources.com/img/team-bg.jpg") no-repeat center center/cover;
min-height: 100vh;
position: relative;
padding-bottom: 30px;
z-index: 2;
color: #fff;
}
.team-2 a {
color: #5863f8;
}
.team-2 a:hover {
color: #0f1ef5;
}
.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: 2.5rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.5;
color: #ced4da;
}
.lead a {
color: #fff;
font-weight: 600;
border-bottom: 1px solid transparent;
-webkit-transition: border-bottom-color .3s;
transition: border-bottom-color .3s;
}
.lead a:hover {
color: #fff;
border-color: #fff;
text-decoration: none;
}
.team-list {
margin-top: .5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.team-profile-wrap {
max-width: 400px;
background: #fff;
padding: 0 1rem;
}
.team-profile-wrap:first-child {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.team-profile-wrap:last-child {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
.team-profile-wrap + .team-profile-wrap {
border-top: 2px solid #dee2e6;
}
.team-profile {
padding: 1.5rem;
}
.team-profile-img {
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 50%;
margin: 0 auto;
}
.team-profile-img img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.team-profile-name {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
color: #6c757d;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: .5rem;
}
.team-profile-designation {
font-size: .875rem;
line-height: 1.5;
color: #6c757d;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.team-profile-social {
margin-top: 1.5rem;
}
.team-profile-social a {
width: 44px;
height: 44px;
display: inline-block;
vertical-align: middle;
color: #adb5bd !important;
overflow: hidden;
}
.team-profile-social a.facebook .social-hover {
background-color: #3b5998;
}
.team-profile-social a.twitter .social-hover {
background-color: #1da1f2;
}
.team-profile-social a.linked-in .social-hover {
background-color: #0077b5;
}
.team-profile-social a.behance .social-hover {
background-color: #1769ff;
}
.team-profile-social a.dribbble .social-hover {
background-color: #ea4c89;
}
.team-profile-social a span {
width: 44px;
line-height: 44px;
border-radius: 50%;
background-color: #fff;
}
.team-profile-social a .social-hover {
color: #fff;
}
@media (min-width: 40em) {
.team-list {
margin-top: 2rem;
padding-left: 0;
padding-right: 0;
}
.team-profile {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.team-profile .team-profile-img {
width: 120px;
height: 120px;
}
.team-profile .team-profile-img img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.team-profile-wrap {
padding-top: 3rem;
padding-bottom: 3rem;
margin-bottom: 0;
}
.team-profile-wrap:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
.team-profile-wrap:first-child {
border-top-right-radius: 0;
border-bottom-left-radius: 1rem;
}
.team-profile-wrap:last-child {
border-top-right-radius: 1rem;
border-bottom-left-radius: 0;
}
.team-profile-wrap + .team-profile-wrap {
border-top: none;
border-left: 2px solid #dee2e6;
}
.team-profile-social a span {
position: relative;
top: 0;
-webkit-transition: top .3s;
transition: top .3s;
}
.team-profile-social a:hover span {
top: -44px;
}
}
@media (min-width: 64em) {
.team-2 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.team-list {
padding-top: 3rem;
}
}