A Pen by Nenad Kaevik on CodePen.
lorens-osman-dev
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="amazing-tabs"> | |
| <div class="filters-container"> | |
| <div class="filters-wrapper"> | |
| <ul class="filter-tabs"> | |
| <li> | |
| <button class="filter-button filter-active" data-translate-value="0"> | |
| New | |
| </button> | |
| </li> | |
| <li> |
lorens-osman-dev
/ css-timeline-with-custom-properties.markdown
Created
December 4, 2022 01:59
CSS Timeline with Custom Properties
A Pen by Stas Melnikov on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="ag-timeline-block"> | |
| <div class="ag-timeline_title-box"> | |
| <div class="ag-timeline_tagline">Timeline</div> | |
| <div class="ag-timeline_title">No Flex</div> | |
| </div> | |
| <section class="ag-section"> | |
| <div class="ag-format-container"> | |
| <div class="js-timeline ag-timeline"> | |
| <div class="js-timeline_line ag-timeline_line"> | |
| <div class="js-timeline_line-progress ag-timeline_line-progress"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div id="rgbKineticSlider" class="rgbKineticSlider"></div> | |
| <a href="#" class="menu"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> | |
| <path stroke="none" d="M0 0h24v24H0z" fill="none"/> | |
| <line x1="4" y1="8" x2="40" y2="8" /> | |
| <line x1="0" y1="16" x2="40" y2="16" /> | |
| </svg> | |
| </a> | |
| <div class="wrapper"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div id="rgbKineticSlider" class="rgbKineticSlider"></div> | |
| <a href="#" class="menu"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> | |
| <path stroke="none" d="M0 0h24v24H0z" fill="none"/> | |
| <line x1="4" y1="8" x2="40" y2="8" /> | |
| <line x1="0" y1="16" x2="40" y2="16" /> | |
| </svg> | |
| </a> | |
| <div class="wrapper"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wa__btn_popup"> | |
| <div class="wa__btn_popup_txt">Precisa de ajuda? <strong>Converse conosco</strong></div> | |
| <div class="wa__btn_popup_icon"></div> | |
| </div> | |
| <div class="wa__popup_chat_box"> | |
| <div class="wa__popup_heading"> | |
| <div class="wa__popup_title">Comece uma conversa</div> | |
| <div class="wa__popup_intro">Oi! Clique em um dos nossos membros abaixo para conversar no <strong>WhatsApp ;)</strong> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href="" class="btn-whatsapp-pulse"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <a href="" class="btn-whatsapp-pulse btn-whatsapp-pulse-border"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> |
lorens-osman-dev
/ 3d-scrolling-gallery-timeline.markdown
Created
October 18, 2022 20:20
3D Scrolling Gallery/Timeline
Convert a plain stack of images to an immersive, 3D/parallax scrolling gallery, with GSAP.js. Plus a little DrawSVG to start/finish the dynamically generated timeline.
Featured on Frontend Horse! Watch the video walk-through here: https://www.youtube.com/watch?v=JmYxiTW671g
A Pen by Tom Miller on CodePen.
NewerOlder