<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="page">
<div class="page__demo">
<svg width="26" height="28" style="display: none;">
<symbol id="twitter" viewBox="0 0 26 28">
<path d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"></path>
</symbol>
<symbol id="codepen" viewBox="0 0 28 28">
<path d="M3.375 18.266l9.422 6.281v-5.609l-5.219-3.484zM2.406 16.016l3.016-2.016-3.016-2.016v4.031zM15.203 24.547l9.422-6.281-4.203-2.812-5.219 3.484v5.609zM14 16.844l4.25-2.844-4.25-2.844-4.25 2.844zM7.578 12.547l5.219-3.484v-5.609l-9.422 6.281zM22.578 14l3.016 2.016v-4.031zM20.422 12.547l4.203-2.812-9.422-6.281v5.609zM28 9.734v8.531c0 0.391-0.203 0.781-0.531 1l-12.797 8.531c-0.203 0.125-0.438 0.203-0.672 0.203s-0.469-0.078-0.672-0.203l-12.797-8.531c-0.328-0.219-0.531-0.609-0.531-1v-8.531c0-0.391 0.203-0.781 0.531-1l12.797-8.531c0.203-0.125 0.438-0.203 0.672-0.203s0.469 0.078 0.672 0.203l12.797 8.531c0.328 0.219 0.531 0.609 0.531 1z"></path>
</symbol>
<symbol id="linkedin" viewBox="0 0 24 28">
<path d="M5.453 9.766v15.484h-5.156v-15.484h5.156zM5.781 4.984c0.016 1.484-1.109 2.672-2.906 2.672v0h-0.031c-1.734 0-2.844-1.188-2.844-2.672 0-1.516 1.156-2.672 2.906-2.672 1.766 0 2.859 1.156 2.875 2.672zM24 16.375v8.875h-5.141v-8.281c0-2.078-0.75-3.5-2.609-3.5-1.422 0-2.266 0.953-2.641 1.875-0.125 0.344-0.172 0.797-0.172 1.266v8.641h-5.141c0.063-14.031 0-15.484 0-15.484h5.141v2.25h-0.031c0.672-1.062 1.891-2.609 4.672-2.609 3.391 0 5.922 2.219 5.922 6.969z"></path>
</symbol>
</svg>
<input id="purple" class="radio radio_color" type="radio" name="color" checked>
<input id="black" class="radio radio_color" type="radio" name="color">
<input id="blue" class="radio radio_color" type="radio" name="color">
<input id="green" class="radio radio_color" type="radio" name="color">
<input id="red" class="radio radio_color" type="radio" name="color">
<div class="preview-options">
<div class="main-container preview-options__container">
<label for="purple" class="preview-options__param preview-options__color preview-options__color_purple"></label>
<label for="black" class="preview-options__param preview-options__color preview-options__color_black"></label>
<label for="blue" class="preview-options__param preview-options__color preview-options__color_blue"></label>
<label for="green" class="preview-options__param preview-options__color preview-options__color_green"></label>
<label for="red" class="preview-options__param preview-options__color preview-options__color_red"></label>
</div>
</div>
<!-- type1 -->
<!-- teamy_mask-circle -->
<section class="section">
<div class="main-container-">
<header class="section__header">
<h2 class="title section__title">Style 1</h2>
<span class="section__hint">mask 1</span>
</header>
<div class="section__content teamy-team">
<article class="teamy teamy_style1 teamy_mask-circle">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl2_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Suzan Lois</h3>
<span class="teamy__post">Graphic Designer</span>
</div>
</article>
<article class="teamy teamy_style1 teamy_mask-circle teamy_zoom-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl3_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Dora Caelan</h3>
<span class="teamy__post">HR-manager</span>
</div>
</article>
<article class="teamy teamy_style1 teamy_mask-circle teamy_zoom-rotate-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl4_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Rosanna Pattie</h3>
<span class="teamy__post">Illustrator</span>
</div>
</article>
<article class="teamy teamy_style1 teamy_mask-circle teamy_zoom-slide-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl5_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Rose Alpha</h3>
<span class="teamy__post">Photographer</span>
</div>
</article>
</div>
</div>
</section>
<!-- type1 -->
<!-- teamy_mask-triangle -->
<section class="section">
<div class="main-container">
<header class="section__header">
<h2 class="title title_xl section__title">Style 1</h2>
<span class="section__hint">mask 2</span>
</header>
<div class="section__content teamy-team">
<article class="teamy teamy_style1 teamy_mask-triangle">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/man1_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Tyson Amery</h3>
<span class="teamy__post">UI designer</span>
</div>
</article>
<article class="teamy teamy_style1 teamy_mask-triangle teamy_zoom-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/man2_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Stas Melnikov</h3>
<span class="teamy__post">UI developer</span>
</div>
</article>
<article class="teamy teamy_style1 teamy_mask-triangle teamy_zoom-rotate-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl6_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Lise Laurie</h3>
<span class="teamy__post">Photomodel</span>
</div>
</article>
<article class="teamy teamy_style1 teamy_mask-triangle teamy_zoom-slide-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl1_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Effie Eleanora</h3>
<span class="teamy__post">Web-designer</span>
</div>
</article>
</div>
</div>
</section>
<!-- type2 -->
<!-- teamy_mask-circle -->
<section class="section">
<div class="main-container">
<header class="section__header">
<h2 class="title title_xl section__title">Style 2</h2>
<span class="section__hint">mask 1</span>
</header>
<div class="section__content teamy-team">
<article class="teamy teamy_style2 teamy_mask-circle">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl2_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Suzan Lois</h3>
<span class="teamy__post">Graphic Designer</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-circle teamy_zoom-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl3_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Dora Caelan</h3>
<span class="teamy__post">HR-manager</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-circle teamy_zoom-rotate-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl4_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Rosanna Pattie</h3>
<span class="teamy__post">Illustrator</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-circle teamy_zoom-slide-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl5_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Rose Alpha</h3>
<span class="teamy__post">Photographer</span>
</div>
</article>
</div>
</div>
</section>
<!-- type2 -->
<!-- teamy_mask-triangle -->
<section class="section">
<div class="main-container">
<header class="section__header">
<h2 class="title title_xl section__title">Style 2</h2>
<span class="section__hint">mask 2</span>
</header>
<div class="section__content teamy-team">
<article class="teamy teamy_style2 teamy_mask-triangle">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/man1_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Tyson Amery</h3>
<span class="teamy__post">UI designer</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-triangle teamy_zoom-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/man2_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Stas Melnikov</h3>
<span class="teamy__post">UI developer</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-triangle teamy_zoom-rotate-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl6_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Lise Laurie</h3>
<span class="teamy__post">Photomodel</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-triangle teamy_zoom-slide-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl1_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Effie Eleanora</h3>
<span class="teamy__post">Web-designer</span>
</div>
</article>
</div>
</div>
</section>
<!-- type3 -->
<!-- teamy_mask-circle -->
<section class="section">
<div class="main-container">
<header class="section__header">
<h2 class="title title_xl section__title">Style 3</h2>
<span class="section__hint">mask 1</span>
</header>
<div class="section__content teamy-team">
<article class="teamy teamy_style3 teamy_mask-circle">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl2_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Suzan Lois</h3>
<span class="teamy__post">Graphic Designer</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
<article class="teamy teamy_style3 teamy_mask-circle teamy_zoom-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl3_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Dora Caelan</h3>
<span class="teamy__post">HR-manager</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
<article class="teamy teamy_style3 teamy_mask-circle teamy_zoom-rotate-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl4_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Rosanna Pattie</h3>
<span class="teamy__post">Illustrator</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
<article class="teamy teamy_style3 teamy_mask-circle teamy_zoom-slide-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl5_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Rose Alpha</h3>
<span class="teamy__post">Photographer</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- type3 -->
<!-- teamy_mask-triangle -->
<section class="section">
<div class="main-container">
<header class="section__header">
<h2 class="title title_xl section__title">Style 3</h2>
<span class="section__hint">mask 2</span>
</header>
<div class="section__content teamy-team">
<article class="teamy teamy_style3 teamy_mask-triangle">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/man1_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Tyson Amery</h3>
<span class="teamy__post">UI designer</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
<article class="teamy teamy_style3 teamy_mask-triangle teamy_zoom-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/man2_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Stas Melnikov</h3>
<span class="teamy__post">UI developer</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
<article class="teamy teamy_style3 teamy_mask-triangle teamy_zoom-rotate-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl6_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Lise Laurie</h3>
<span class="teamy__post">Photomodel</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
<article class="teamy teamy_style3 teamy_mask-triangle teamy_zoom-slide-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl1_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<div class="teamy__content">
<h3 class="teamy__name">Effie Eleanora</h3>
<span class="teamy__post">Web-designer</span>
</div>
<div class="socials">
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#twitter"></use></svg>
<span class="social__name">Twitter</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#codepen"></use></svg>
<span class="social__name">Codepen</span>
</a>
<a href="#0" class="social">
<svg class="social__icon"><use xlink:href="#linkedin"></use></svg>
<span class="social__name">LinkedIn</span>
</a>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="main-container footer__container">
<a href="http://stas-melnikov.ru/donate/" class="footer__link" rel="noopener noreferrer" target="_blank">Liked? Please, look the page</a>
<a href="http://stas-melnikov.ru" class="footer__link melnik909" rel="noopener noreferrer" target="_blank">Developed by Stas Melnikov</a>
</div>
</footer>
</div>
/*
* 1. core styles
*/
.teamy{
position: relative;
z-index: 1;
overflow: hidden;
}
.teamy__layout{
position: relative;
}
.teamy__preview{
position: relative;
overflow: hidden;
}
.teamy__avatar{
display: block;
max-width: 100%;
position: relative;
z-index: 1;
}
.teamy__preview:before{
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
}
.teamy__back{
width: 100%;
height: 100%;
box-sizing: border-box;
opacity: 0;
will-change: opacity;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.teamy:hover .teamy__back{
opacity: 1;
height: 100%;
transition: opacity .4s cubic-bezier(0.71, 0.05, 0.29, 0.9) .2s;
}
.teamy__name{
margin-top: 0;
margin-bottom: 0;
}
.teamy__post{
display: block;
}
/*
* 2. visual styles
*/
/* common styles for visual styles */
.teamy__back{
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.teamy__content{
padding: 20px;
}
.teamy__name{
font-size: 1.3em;
}
.teamy__post{
margin-top: .5em;
font-size: .8em;
text-transform: uppercase;
}
/* style 1 */
.teamy_style1{
text-align: center;
}
/* style 2 */
.teamy_style2 .teamy__content{
width: 100%;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
z-index: 4;
}
.teamy_style2 .teamy__name{
font-weight: 400;
}
/* style 2 */
.teamy_style3 .teamy__name{
font-size: 2em;
}
/*
* 3. masks
*/
/* mask circle */
.teamy_mask-circle .teamy__preview:before{
width: 0;
height: 0;
padding: 25%;
border-radius: 50%;
transition: transform .3s ease, opacity .3s ease-out;
will-change: opacity, transform;
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
.teamy_mask-circle:hover .teamy__preview:before{
opacity: 1;
transform: translate(-50%, -50%) scale(4);
transition-duration: .6s;
}
/* mask triangle */
.teamy_mask-triangle .teamy__preview:before{
width: 100%;
height: 100%;
opacity: 0;
-webkit-clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
clip-path: polygon(50% 10%, 15% 90%, 85% 90%);
transition-property: transform, opacity;
transition-duration: .2s, .4s;
transition-delay: .4s, 0s;
transition-timing-function: ease-out;
will-change: transform, opacity;
transform: translate(-50%, -50%) scale(1);
}
.teamy_mask-triangle:hover .teamy__preview:before{
opacity: 1;
transform: translate(-50%, -50%) scale(5);
transition-delay: .1s, 0s;
transition-duration: .4s;
}
/*
* 4. animations for preview
*/
/* zoom */
.teamy_zoom-photo .teamy__avatar{
transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
will-change: transform;
transform: scale(1);
}
.teamy_zoom-photo:hover .teamy__avatar{
transform: scale(1.2);
}
/* zoom and rotate */
.teamy_zoom-rotate-photo .teamy__avatar{
transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
will-change: transform;
transform: scale(1) rotate(0);
}
.teamy_zoom-rotate-photo:hover .teamy__avatar{
transform: scale(1.2) rotate(5deg);
}
/* zoom and slide */
.teamy_zoom-slide-photo .teamy__avatar{
transition: transform .4s cubic-bezier(0.71, 0.05, 0.29, 0.9);
will-change: transform;
transform: scale(1) translate(0, 0);
}
.teamy_zoom-slide-photo:hover .teamy__avatar{
transform: scale(1.2) translate(4%, 4%);
}
/*
* 5. default skin
*/
.teamy__preview:before{
background-color: rgba(72, 27, 174, .7);
}
.teamy_style2, .teamy_style3{
color: #fff;
}
.teamy_style2 .teamy__content{
background-color: rgba(72, 27, 174, .85);
}
/*
* demo page
*/
@media screen and (min-width: 768px){
html{
font-size: 62.5%;
}
}
@media screen and (max-width: 767px){
html{
font-size: 50%;
}
}
body{
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
font-size: 1.6rem;
color: #222;
margin: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
:root{
--colorBlack: #222;
--colorWhite: #fff;
--colorGray: #f0f0f0;
--colorAlternative: #a03549;
--colorAlternativeDark: #650813;
}
.title{
margin-top: 0;
margin-bottom: 0;
}
.page{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.page__demo{
flex-grow: 1;
}
.footer{
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-size: 1.4rem;
}
.footer__link{
text-decoration: none;
color: inherit;
}
@media screen and (min-width: 361px){
.footer__container{
display: flex;
justify-content: space-between;
}
}
@media screen and (max-width: 360px){
.melnik909{
display: none;
}
}
/* layout */
.main-container{
max-width: 1400px;
padding-left: 2rem;
padding-right: 2rem;
margin-left: auto;
margin-right: auto;
}
.section:nth-of-type(even){
background-color: var(--colorGray);
}
.section__header{
position: relative;
padding-bottom: 2rem;
text-align: center;
text-transform: uppercase;
}
.section__header:before{
content: "";
width: 5rem;
height: 3px;
background-color: var(--colorAlternative);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.section__title{
font-size: 2.8rem;
}
.section__hint{
font-size: 1.4rem;
display: block;
margin-top: 1rem;
}
.section__content{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
@media screen and (min-width: 641px){
.section{
padding-top: 8rem;
padding-bottom: 8rem;
}
.section__header{
margin-bottom: 6rem;
}
.section__content{
justify-content: center;
}
}
@media screen and (max-width: 640px){
.section{
padding-top: 4rem;
padding-bottom: 4rem;
}
.section__header{
margin-bottom: 3rem;
}
}
/* options */
.radio{
position: absolute;
left: -9999px;
}
.preview-options{
padding-top: 2rem;
}
.preview-options__container{
display: flex;
justify-content: center;
}
.preview-options__param{
display: inline-block;
cursor: pointer;
}
.preview-options__param:not(:last-child){
margin-right: 1.5rem;
}
.preview-options__color:before{
content: "";
width: 3.2rem;
height: 3.2rem;
display: block;
border-radius: 50%;
}
.preview-options__color:after{
content: "";
width: 75%;
height: 3px;
display: block;
margin: 1rem auto 0;
}
.preview-options__color_black:before,
#black:checked ~ .preview-options .preview-options__color_black:after{
background-color: rgba(0, 0, 0, 1);
}
.preview-options__color_purple:before,
#purple:checked ~ .preview-options .preview-options__color_purple:after{
background-color: rgba(72, 27, 174, 1);
}
.preview-options__color_blue:before,
#blue:checked ~ .preview-options .preview-options__color_blue:after{
background-color: rgba(80, 126, 209, 1);
}
.preview-options__color_green:before,
#green:checked ~ .preview-options .preview-options__color_green:after{
background-color: rgba(27, 188, 155, 1);
}
.preview-options__color_red:before,
#red:checked ~ .preview-options .preview-options__color_red:after{
background-color: rgba(160, 53, 73, 1);
}
#black:checked ~ .section .teamy{
--demoColorMask: rgba(0, 0, 0, .7);
--demoColorContent: rgba(0, 0, 0, .85);
--demoColorIcon: rgba(0, 0, 0, 1);
}
#blue:checked ~ .section .teamy{
--demoColorMask: rgba(80, 126, 209, .7);
--demoColorContent: rgba(80, 126, 209, .85);
--demoColorIcon: rgba(80, 126, 209, 1);
}
#green:checked ~ .section .teamy{
--demoColorMask: rgba(42, 155, 132, .7);
--demoColorContent: rgba(42, 155, 132, .85);
--demoColorIcon: rgba(42, 155, 132, 1);
}
#red:checked ~ .section .teamy{
--demoColorMask: rgba(160, 53, 73, .7);
--demoColorContent: rgba(160, 53, 73, .85);
--demoColorIcon: rgba(160, 53, 73, 1);
}
/* demo params */
.teamy__preview:before{
background-color: var(--demoColorMask, rgba(72, 27, 174, .7));
}
.teamy_style2 .teamy__content{
background-color: var(--demoColorContent, rgba(72, 27, 174, .85));
}
/* social buttons */
.social{
box-sizing: border-box;
width: 42px;
height: 42px;
padding: 10px;
background-color: #fff;
border-radius: 100%;
margin: 5px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.social__icon{
width: 100%;
height: 100%;
fill: rgba(72, 27, 174, 1);
fill: var(--demoColorIcon, rgba(72, 27, 174, 1));
}
.social__name{
position: absolute;
left: -9999px;
}
@media screen and (max-width: 640px){
.preview-options{
padding-bottom: 2rem;
border-bottom: 1px solid var(--colorGray);
}
}
@media screen and (min-width: 641px){
.preview-options{
background-color: var(--colorGray);
}
}
/* grid */
.teamy-team{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media screen and (min-width: 849px){
.teamy{
width: 25%;
}
}
@media screen and (min-width: 425px) and (max-width: 848px){
.teamy{
width: 50%;
}
}
@media screen and (max-width: 424px){
.teamy{
width: 100%;
}
.teamy:not(:first-child){
margin-top: 3rem;
}
}
