A Pen by Junaid Khalid on CodePen.
Alasom Lira alasomlira
alasomlira
/ dynamic-html5-audio-player.markdown
Last active
December 11, 2019 12:42
Dynamic HTML5 Audio Player
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
| <nav id="colorNav"> | |
| <ul> | |
| <li class="green"> | |
| <a href="#" class="fa fa-windows"></a> | |
| <ul> | |
| <li><a href="#">Dropdown item 1</a></li> | |
| <li><a href="#">Dropdown item 2</a></li> | |
| <li><a href="#">Dropdown item 2</a></li> | |
| <li><a href="#">Dropdown item 2</a></li> | |
| </ul> |
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 id="slider" class="section"> | |
| <div class="slider"> | |
| <div class="slider__container"> | |
| <div class="slider__item slide-burger"> | |
| <div class="slider__content grid"> | |
| <div class="column"> | |
| <h1 class="title">Veggie</h1> | |
| <h1 class="title">Burguer</h1> | |
| </div> | |
| <div class="column"><img src="https://mverissimo.github.io/tweenslideshow/dist/assets/images/burger.png" class="image burger"></div> |
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
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> |
alasomlira
/ bootstrap-carousel-zoom-effect.markdown
Created
December 10, 2019 12:06
Bootstrap Carousel Zoom Effect
A Pen by Altaf Hussain Patel 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
| <div class="wrap"> | |
| <div class="wrap-inner"> | |
| <div class="swiper-outter"> | |
| <div id="video-swiper" class="swiper-container"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"> | |
| <div class="video-container"> | |
| <div class="yt-player" data-id="MxBRpWcXeOA"></div> |
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 class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 col-lg-12 text-center"> | |
| <div id="video-carousel" class="carousel slide" data-ride="carousel"> | |
| <!-- Indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#video-carousel" data-slide-to="0" class="active"></li> | |
| <li data-target="#video-carousel" data-slide-to="1"></li> | |
| <li data-target="#video-carousel" data-slide-to="2"></li> | |
| <li data-target="#video-carousel" data-slide-to="3"></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
| // jade: compressed | |
| ul.audio-players | |
| li | |
| .audio-player.js-audio-player | |
| button.audio-player__control.js-control | |
| .audio-player__control-icon | |
| h4.audio-player__title Audio Clip One | |
| audio(preload='auto') | |
| source(src='http://pd.npr.org/anon.npr-mp3/npr/codeswitch/2016/08/20160803_codeswitch_11b.mp3') |
alasomlira
/ html5-audio-player-only-play-button.markdown
Created
December 9, 2019 18:17
html5 audio player only play button
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 class="container"> | |
| <h1>Pure CSS Animated Gradient Background</h1> | |
| <h3><a href="https://codepen.io/P1N2O/full/pyBNzX" target="_blank">Full Screen <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" | |
| width="18" height="18" | |
| viewBox="0 0 172 172" | |
| style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#eeeeee"><path d="M143.19336,21.43001c-0.26705,0.00844 -0.53341,0.03181 -0.79785,0.06999h-34.89551c-2.58456,-0.03655 -4.98858,1.32136 -6.29153,3.55376c-1.30295,2.2324 -1.30295,4.99342 0,7.22582c1.30295,2.2324 3.70697,3.59031 6.29153,3.55376h18.53256l-66.59961,66.59961c-1.8722,1.79752 -2.62637,4.46674 -1.97164,6.97823c0.65473,2.51149 2.61604,4.4728 5.12753,5.12753c2.51149,0.65473 5.18071,-0.09944 6.97823, |