"team"
Bootstrap 4.0.0 Snippet by Shakibur22

<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; } }

Related: See More


Questions / Comments:

how can i have 6 elements instead of 4?

questions () - 6 years ago - Reply 0