Skip to content

Instantly share code, notes, and snippets.

@lorens-osman-dev
lorens-osman-dev / index.html
Created December 4, 2022 19:05
Jello Tab Bar (Animated)
<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
lorens-osman-dev / css-timeline-with-custom-properties.markdown
Created December 4, 2022 01:59
CSS Timeline with Custom Properties
@lorens-osman-dev
lorens-osman-dev / index.html
Created December 4, 2022 00:06
Timeline IE
<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>
@lorens-osman-dev
lorens-osman-dev / index.html
Created November 14, 2022 17:16
Liquid Transition Effect
<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">
@lorens-osman-dev
lorens-osman-dev / index.html
Created November 14, 2022 05:43
Liquid Transition Effect
<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">
<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>
@lorens-osman-dev
lorens-osman-dev / index.html
Created October 25, 2022 18:13
WhatsApp Pulse Button
<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
lorens-osman-dev / 3d-scrolling-gallery-timeline.markdown
Created October 18, 2022 20:20
3D Scrolling Gallery/Timeline