Adds tab href to url + opens tab based on hash on page load
A Pen by Richard Peirce on CodePen.
Alasom Lira alasomlira
This file contains hidden or 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
| <section class="timeline"> | |
| <h1>Responsive Timeline</h1> | |
| <ul> | |
| <li> | |
| <div class="content"> | |
| <h2> | |
| <time>2016</time> | |
| </h2> |
This file contains hidden or 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 id="wrapper"> | |
| <!-- Sidebar --> | |
| <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> | |
| <ul class="nav sidebar-nav"> | |
| <li class="sidebar-brand"> | |
| <a href="#!home"> | |
| <!-- <object type="image/svg+xml" data="assets/img/materialize.svg"></object> --> | |
| <img src="http://materializecss.com/res/materialize.svg" alt="main-logo"> | |
| </a> | |
| </li> |
This file contains hidden or 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
| <figure class="tabBlock"> | |
| <ul class="tabBlock-tabs"> | |
| <li class="tabBlock-tab is-active">Tab 1</li> | |
| <li class="tabBlock-tab">Tab 2</li> | |
| </ul> | |
| <div class="tabBlock-content"> | |
| <div class="tabBlock-pane"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias molestiae atque quis blanditiis eaque maiores ducimus optio neque debitis quos dolorum odit unde quibusdam tenetur quaerat magni eius quod tempore.</p> | |
| </div> | |
| <div class="tabBlock-pane"> |
This file contains hidden or 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 id="root" class="container"> | |
| <tabs> | |
| <tab name="Services" :selected="true"> | |
| <h1>What we do</h1> | |
| </tab> | |
| <tab name="Pricing"> | |
| <h1>How much we do it for</h1> | |
| </tab> | |
| <tab name="About Us"> |
alasomlira
/ bootstrap-open-tab-from-url-hash.markdown
Created
November 26, 2019 12:39
Bootstrap open tab from url hash
alasomlira
/ bootstrap-4-tab-accordion.markdown
Created
November 26, 2019 12:47
Bootstrap 4 – Tab/Accordion
A Pen by Daniel Ferenc on CodePen.
alasomlira
/ html-css-only-tabs-with-slider-animation.markdown
Created
November 26, 2019 12:48
HTML / CSS only tabs with slider animation
A Pen by burntcustard on CodePen.
This file contains hidden or 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
| <ul class="funky-move-list"> | |
| <li class="funky-item"> | |
| <a href="#" class="funky-link"> | |
| <span class="artist">Iron Maiden</span> | |
| <span class="title">Listen to: Aces High</span> | |
| </a> | |
| <a href="#" class="funky-link"> | |
| <span class="artist">Black Sabbath</span> | |
| <span class="title">Listen to: Sweet Leaf</span> | |
| </a> |
This file contains hidden or 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
| <!-- | |
| Inspired by Jardson Almeida | |
| https://dribbble.com/shots/2518516-Nike-Promotion-Ads-Parallax-Effect | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Nike Parallax Cards</title> |
alasomlira
/ awesome-music-case-playing-with-backdrop-filter.markdown
Created
November 29, 2019 18:50
Awesome Music Case : Playing with backdrop-filter
This experiment only works on Safari or latest Chrome by enabling Experimental Web Platform through chrome://flags.
If you can't see the effect see this video https://www.facebook.com/ariona.net/videos/1158411530857223/
A Pen by Rian Ariona on CodePen.