A Pen by One Tech Genius on CodePen.
Created
May 2, 2016 01:45
-
-
Save anonymous/3946a010c59c7f882790d9789c82afa0 to your computer and use it in GitHub Desktop.
VaaQwJ
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
| <title><h1>Super Sports World Wide</h1></title> | |
| <body><h1>SUPER STREAMING SPORTS</h1> | |
| <div class="wrapper"> | |
| <ul class="gallery"><li><a href= "https://s3.amazonaws.com/cardsports/FREE2/card_sports_TenSports+2.html" data-tooltip="TenSports 2"><img src="https://s3.amazonaws.com/movieicons/sports/Ten-Sports.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_TenSports.html" data-tooltip="TenSports"><img src="https://s3.amazonaws.com/movieicons/sports/Ten-Sports.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_starsport2.html" data-tooltip="StarSport2"><img src="https://s3.amazonaws.com/movieicons/sports/starsports2.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_foxsport5.html" data-tooltip="Fox Sport 5"><img src="https://s3.amazonaws.com/movieicons/sports/Fox-Sports-5-Eredivisie_o.jpg" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_foxsport4.html" data-tooltip="Fox Sport 4"><img src="https://s3.amazonaws.com/movieicons/sports/fox-sports-4-colour.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_foxsport3.html" data-tooltip="Fox Sports 3"><img src="https://s3.amazonaws.com/movieicons/sports/FoxSports_Logos_Fox+Sports+3.jpg" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_foxsport2.html" data-tooltip="Fox Sport 2"><img src="https://s3.amazonaws.com/movieicons/sports/foxsports2.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_foxsport1.html" data-tooltip="Fox Sport 1"><img src="https://s3.amazonaws.com/movieicons/sports/foxsports1.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sporttv3.html" data-tooltip="SportTV3"><img src="https://s3.amazonaws.com/movieicons/sports/sporttv3.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sporttv2.html" data-tooltip="SportTV2"><img src="https://s3.amazonaws.com/movieicons/sports/sporttv2.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sporttv1.html" data-tooltip="SportTV1"><img src="https://s3.amazonaws.com/movieicons/sports/sporttv1.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_sky1HD.html" data-tooltip="Sky 1 HD"><img src="https://s3.amazonaws.com/movieicons/sports/skysport1hdgerman.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_sky1.html" data-tooltip="Sky Sports HD"><img src="https://s3.amazonaws.com/movieicons/sports/skysport1hdgerman.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_TenCricket.html" data-tooltip="Ten Cricket"><img src="https://s3.amazonaws.com/movieicons/sports/Ten-Cricket.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_PTVSports.html" data-tooltip="PTV Sports"><img src="https://s3.amazonaws.com/movieicons/sports/PTV-SPORTS.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_ESPN.html" data-tooltip="ESPN"><img src="https://s3.amazonaws.com/movieicons/sports/ESPN-USA.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_ESPN1.html" data-tooltip="ESPN1"><img src="https://s3.amazonaws.com/movieicons/sports/ESPN-USA.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_BritishEuroSports2.html" data-tooltip="British Euro Sports"><img src="https://s3.amazonaws.com/movieicons/sports/beurosport2.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_BritishEuroSports.html" data-tooltip="British Euro Sports"><img src="https://s3.amazonaws.com/movieicons/sports/beurosport1.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_sports_BoxingNation.html" data-tooltip="Boxing Nation"><img src="https://s3.amazonaws.com/movieicons/sports/boxnation.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_arenaSp5.html" data-tooltip="Arena Sports 5"><img src="https://s3.amazonaws.com/movieicons/sports/Arena-Sport-5.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_arenaSp4.html" data-tooltip="Arena Sports 4"><img src="https://s3.amazonaws.com/movieicons/sports/Arenasport-4.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_arenaSp3.html" data-tooltip="Arena Sports 3"><img src="https://s3.amazonaws.com/movieicons/sports/arena+sport+3.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_arenaSp2.html" data-tooltip="Arena Sports 2"><img src="https://s3.amazonaws.com/movieicons/sports/arena+sports+2.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_arenaSp1.html" data-tooltip="Arena Sports 1"><img src="https://s3.amazonaws.com/movieicons/sports/arena+sport+1.jpg" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BBC2.html" data-tooltip="BBC2"><img src="https://s3.amazonaws.com/movieicons/sports/bbc2.jpg" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BBC1.html" data-tooltip="BBC1"><img src="https://s3.amazonaws.com/movieicons/sports/bbc1.jpg" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport.html" data-tooltip="BeinSport"><img src="https://s3.amazonaws.com/movieicons/sports/BeIN.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport10.html" data-tooltip="BeinSport10"><img src="https://s3.amazonaws.com/movieicons/sports/bs10hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport9.html" data-tooltip="BeinSport9"><img src="https://s3.amazonaws.com/movieicons/sports/bs9hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport8.html" data-tooltip="BeinSport8"><img src="https://s3.amazonaws.com/movieicons/sports/bs8hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport7.html" data-tooltip="BeinSport7"><img src="https://s3.amazonaws.com/movieicons/sports/bs7hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport6.html" data-tooltip="BeinSport6"><img src="https://s3.amazonaws.com/movieicons/sports/bs6hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport5.html" data-tooltip="BeinSport5"><img src="https://s3.amazonaws.com/movieicons/sports/bs5hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport4.html" data-tooltip="BeinSport4"><img src="https://s3.amazonaws.com/movieicons/sports/bs4hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport3.html" data-tooltip="BeinSport3"><img src="https://s3.amazonaws.com/movieicons/sports/bs3hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport2.html" data-tooltip="BeinSport2"><img src="https://s3.amazonaws.com/movieicons/sports/bs2hd.png" height="150px" width="250px" /></a></li> | |
| <li><a href="https://s3.amazonaws.com/cardsports/FREE2/card_BeinSport.html" data-tooltip="BeinSport1"><img src="https://s3.amazonaws.com/movieicons/sports/bs1hd.png" height="150px" width="250px" /></a></li><a href="https://dl.dropboxusercontent.com/u/537572325/SPORTS/SportsStreams.html" class="cd-top"><h1>Top</h1></a><br /> | |
| </ul> | |
| </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
| var offset = 300, | |
| //browser window scroll (in pixels) after which the "back to top" link opacity is reduced | |
| offset_opacity = 1200, | |
| //duration of the top scrolling animation (in ms) | |
| scroll_top_duration = 700; | |
| var mainFunction = | |
| { | |
| elements: { | |
| container : ".container", | |
| containerInner : ".container-inner", | |
| videoPlayerContainer: ".video-player-container", | |
| videoContainer : ".video-container", | |
| playerContainer : ".player-container", | |
| mediaVideo : "#media-video", | |
| playControl : ".play-control", | |
| playButton : ".play-button", | |
| pauseButton : ".pause-button", | |
| volumeControl : ".volume-control", | |
| volumeButton : ".volume-button", | |
| volumeButtonMute : ".volume-button-mute", | |
| progress : ".progress", | |
| progressOver : ".progress-over", | |
| progressHidden : ".progress-hidden", | |
| progressBackground : ".progress-background", | |
| indicator : ".indicator", | |
| fullScreenButton : ".fullscreen-button" | |
| }, | |
| isPlay : true, | |
| isVolume : true, | |
| isEnd : false, | |
| progressBarHeight : 100, | |
| init: function(){ | |
| mainFunction.defaultSettings(); | |
| mainFunction.clickSettings(); | |
| mainFunction.playControlVideo(); | |
| mainFunction.volumeControlVideo(); | |
| mainFunction.progressControlVideo(); | |
| mainFunction.mouseHideControl(); | |
| }, | |
| defaultSettings: function(){ | |
| $(mainFunction.elements.mediaVideo)[0].controls = false; | |
| $(window).on("resize", onResize); | |
| function onResize(){ | |
| $(mainFunction.elements.progress).width( $(mainFunction.elements.playerContainer).width() - 223 ); | |
| $(mainFunction.elements.progressBackground).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| $(mainFunction.elements.progressHidden).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| mainFunction.progressBarHeight = $(mainFunction.elements.playerContainer).width() - 223 - 40; | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / $(mainFunction.elements.mediaVideo)[0].duration) * $(mainFunction.elements.mediaVideo)[0].currentTime )); | |
| } | |
| onResize(); | |
| }, | |
| clickSettings: function(){ | |
| $(mainFunction.elements.playControl).on("click", mainFunction.playControlVideo); | |
| $(mainFunction.elements.volumeControl).on("click", mainFunction.volumeControlVideo); | |
| $(mainFunction.elements.mediaVideo).on("click", mainFunction.playControlVideo); | |
| $(mainFunction.elements.fullScreenButton).on("click", mainFunction.fullScreenControl); | |
| $("body").on("keyup", function(e){ if(e.which == 27) { mainFunction.exitFullScreen(); } }); | |
| }, | |
| fullScreenControl:function(){ | |
| if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) | |
| { | |
| if (document.documentElement.requestFullscreen) | |
| { | |
| document.documentElement.requestFullscreen(); | |
| mainFunction.onFullScreen(); | |
| } | |
| else if (document.documentElement.msRequestFullscreen) | |
| { | |
| document.documentElement.msRequestFullscreen(); | |
| mainFunction.onFullScreen(); | |
| } | |
| else if (document.documentElement.mozRequestFullScreen) | |
| { | |
| document.documentElement.mozRequestFullScreen(); | |
| mainFunction.onFullScreen(); | |
| } | |
| else if (document.documentElement.webkitRequestFullscreen) | |
| { | |
| document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); | |
| mainFunction.onFullScreen(); | |
| } | |
| } | |
| else | |
| { | |
| if (document.exitFullscreen) | |
| { | |
| document.exitFullscreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| else if(document.msExitFullscreen) | |
| { | |
| document.msExitFullscreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| else if (document.mozCancelFullScreen) | |
| { | |
| document.mozCancelFullScreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| else if (document.webkitExitFullscreen) | |
| { | |
| document.webkitExitFullscreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| } | |
| }, | |
| onFullScreen: function(){ | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / $(mainFunction.elements.mediaVideo)[0].duration) * $(mainFunction.elements.mediaVideo)[0].currentTime )); | |
| $(mainFunction.elements.container).css("display", "block"); | |
| $(mainFunction.elements.videoPlayerContainer).width("100%"); | |
| $(mainFunction.elements.videoPlayerContainer).height("100%"); | |
| $(mainFunction.elements.videoContainer).height("calc(100% - 40px)"); | |
| $(mainFunction.elements.progress).width( $(mainFunction.elements.playerContainer).width() - 223 ); | |
| $(mainFunction.elements.progressBackground).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| $(mainFunction.elements.progressHidden).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| mainFunction.progressBarHeight = $(mainFunction.elements.playerContainer).width() - 223 - 40; | |
| $(".container-inner").css("display", "none"); | |
| }, | |
| exitFullScreen: function(){ | |
| $(mainFunction.elements.container).css("display", "-webkit-box"); | |
| $(mainFunction.elements.container).css("display", "-moz-box"); | |
| $(mainFunction.elements.container).css("display", "-ms-flexbox"); | |
| $(mainFunction.elements.container).css("display", "-webkit-flex"); | |
| $(mainFunction.elements.container).css("display", "flex"); | |
| $(mainFunction.elements.videoPlayerContainer).width("648"); | |
| $(mainFunction.elements.videoPlayerContainer).height("350"); | |
| $(mainFunction.elements.videoContainer).height("310"); | |
| $(mainFunction.elements.progress).width( $(mainFunction.elements.playerContainer).width() - 223 ); | |
| $(mainFunction.elements.progressBackground).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| $(mainFunction.elements.progressHidden).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| mainFunction.progressBarHeight = $(mainFunction.elements.playerContainer).width() - 223 - 40; | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / $(mainFunction.elements.mediaVideo)[0].duration) * $(mainFunction.elements.mediaVideo)[0].currentTime )); | |
| $(".container-inner").css("display", "inherit"); | |
| }, | |
| mouseHideControl: function(){ | |
| var mouseHide = setTimeout(onMouseHide, 3000); | |
| $(mainFunction.elements.containerInner).on("mousemove", function(){ | |
| clearTimeout( mouseHide ); | |
| onMouseShow(); | |
| }); | |
| $(mainFunction.elements.containerInner).on("mousemoveend", function(){ | |
| clearTimeout( mouseHide ); | |
| mouseHide = setTimeout(onMouseHide, 3000); | |
| }); | |
| function onMouseHide(){ $("body").css("cursor", "none"); } | |
| function onMouseShow(){ $("body").css("cursor", "inherit"); } | |
| }, | |
| playControlVideo: function(){ | |
| if(mainFunction.isPlay) { $(mainFunction.elements.mediaVideo)[0].play(); } else { $(mainFunction.elements.mediaVideo)[0].pause(); } | |
| $(mainFunction.elements.playButton).css("display", ( (mainFunction.isPlay) ? "none" : "table-cell" ) ); | |
| $(mainFunction.elements.pauseButton).css("display", ( (!mainFunction.isPlay) ? "none" : "table-cell" ) ); | |
| mainFunction.isPlay = !mainFunction.isPlay; | |
| mainFunction.isEnd = false; | |
| }, | |
| volumeControlVideo: function(){ | |
| $(mainFunction.elements.mediaVideo)[0].muted = !mainFunction.isVolume; | |
| $(mainFunction.elements.volumeButtonMute).css("display", ( (mainFunction.isVolume) ? "none" : "table-cell" ) ); | |
| $(mainFunction.elements.volumeButton).css("display", ( (!mainFunction.isVolume) ? "none" : "table-cell" ) ); | |
| mainFunction.isVolume = !mainFunction.isVolume; | |
| }, | |
| progressControlVideo: function(){ | |
| var mouseX = 0; | |
| var isDown = false; | |
| var currentMinute = 0; | |
| var currentSecond = 0; | |
| var mediaPlayer = $(mainFunction.elements.mediaVideo)[0]; | |
| mediaPlayer.addEventListener("timeupdate", onProgressVideo, false); | |
| function onProgressVideo(){ | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / mediaPlayer.duration) * mediaPlayer.currentTime )); | |
| videoEndControl(); | |
| setIndicator(mediaPlayer.currentTime, mediaPlayer.duration); | |
| } | |
| function videoEndControl(){ | |
| if(mediaPlayer.currentTime >= mediaPlayer.duration) | |
| { | |
| mainFunction.isPlay = false; | |
| mainFunction.playControlVideo(); | |
| mainFunction.isEnd = true; | |
| } | |
| } | |
| function setIndicator(current, duration){ | |
| var durationMinute = Math.floor(duration / 60); | |
| var durationSecond = Math.floor(duration - durationMinute * 60); | |
| var durationLabel = durationMinute + ":" + durationSecond; | |
| currentSecond = Math.floor(current); | |
| currentMinute = Math.floor(currentSecond / 60); | |
| currentSecond = currentSecond - ( currentMinute * 60 ); | |
| currentSecond = ( String(currentSecond).length > 1 ) ? currentSecond : ( String("0") + currentSecond ); | |
| var currentLabel = currentMinute + ":" + currentSecond; | |
| var indicatorLabel = currentLabel + " / " + durationLabel; | |
| $(mainFunction.elements.indicator).text( indicatorLabel ); | |
| } | |
| $(mainFunction.elements.progressHidden).on("mousemove", onProgressHiddenMouseMove); | |
| function onProgressHiddenMouseMove(e){ | |
| var parentOffset = $(this).parent().offset(); | |
| mouseX = Math.floor( e.pageX - parentOffset.left - 20 ); | |
| if(isDown) { mediaPlayer.currentTime = (mediaPlayer.duration / mainFunction.progressBarHeight) * mouseX; } | |
| } | |
| $(mainFunction.elements.progressHidden).on("click", function(){ if(!isDown) { mediaPlayer.currentTime = (mediaPlayer.duration / mainFunction.progressBarHeight) * mouseX; } }); | |
| $(mainFunction.elements.progressHidden).on("mousedown", onProgressHiddenMouseDown); | |
| function onProgressHiddenMouseDown(){ | |
| isDown = true; | |
| mediaPlayer.currentTime = (mediaPlayer.duration / mainFunction.progressBarHeight) * mouseX; | |
| $(mainFunction.elements.mediaVideo)[0].pause(); | |
| } | |
| $(mainFunction.elements.progressHidden).on("mouseup", function(){ isDown = false; if(!mainFunction.isEnd) { mainFunction.isPlay = true; mainFunction.playControlVideo(); } }); | |
| $(mainFunction.elements.progressHidden).on("mouseout", function(){ isDown = false; if(!mainFunction.isEnd) { mainFunction.isPlay = true; mainFunction.playControlVideo(); } }); | |
| } | |
| }; | |
| $(document).on("ready", mainFunction.init); | |
| (function ($) { | |
| var timeout; | |
| $(document).on('mousemove', function (event) { | |
| if (timeout !== undefined) { | |
| window.clearTimeout(timeout); | |
| } | |
| timeout = window.setTimeout(function () { | |
| $(event.target).trigger('mousemoveend'); | |
| }, 100); | |
| }); | |
| }(jQuery)); | |
| var offset = 300, | |
| //browser window scroll (in pixels) after which the "back to top" link opacity is reduced | |
| offset_opacity = 1200, | |
| //duration of the top scrolling animation (in ms) | |
| scroll_top_duration = 700; | |
| //@ sourceURL=pen.js |
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
| AudioManager am = mContext.getSystemService(Context.AUDIO_SERVICE); | |
| ... | |
| // Start listening for button presses | |
| am.registerMediaButtonEventReceiver(RemoteControlReceiver); | |
| ... | |
| // Stop listening for button presses | |
| am.unregisterMediaButtonEventReceiver(RemoteControlReceiver); | |
| body { | |
| color: Yellow; | |
| } | |
| h1 { | |
| color: #ffff00; | |
| } | |
| p { | |
| color: rgb(255,255,0); | |
| } | |
| .cd-top.cd-is-visible { | |
| /* the button becomes visible */ | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .cd-top.cd-fade-out { | |
| /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ | |
| opacity: .5; | |
| } | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); | |
| body { | |
| background:url('https://dl.dropboxusercontent.com/u/537572325/IMAGES4HTML/sportbackground.png'); | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight:600; | |
| text-align:center; | |
| } | |
| .wrapper { | |
| margin: 0 auto; | |
| margin-top:2%; | |
| } | |
| ul.gallery { | |
| position: relative; | |
| z-index: 1; | |
| overflow: hidden; | |
| list-style: none; | |
| padding:5px; | |
| } | |
| ul.gallery li { | |
| border:5px solid #fff; | |
| position: relative; | |
| display:inline-block; | |
| width: 250px; | |
| height: 150px; | |
| margin: 0 30px 30px 0; | |
| background: #fff; | |
| -webkit-box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset; | |
| -moz-box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset; | |
| box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset;} | |
| ul.gallery li:before, | |
| ul.gallery li:after { | |
| content: ''; | |
| z-index: -1; | |
| position: absolute; | |
| left: 10px; | |
| bottom: 10px; | |
| width: 70%; | |
| height: 55%; | |
| -webkit-box-shadow: 0 15px 16px #6b6b6b; | |
| -moz-box-shadow: 0 15px 16px #6b6b6b; | |
| box-shadow: 0 15px 16px #6b6b6b; | |
| -webkit-transform: skew(-15deg) rotate(-6deg); | |
| -moz-transform: skew(-15deg) rotate(-6deg); | |
| -ms-transform: skew(-15deg) rotate(-6deg); | |
| -o-transform: skew(-15deg) rotate(-6deg); | |
| transform: skew(-15deg) rotate(-6deg); | |
| } | |
| ul.gallery li:after { | |
| left: auto; | |
| right: 11px; | |
| -webkit-transform: skew(15deg) rotate(6deg); | |
| -moz-transform: skew(15deg) rotate(6deg); | |
| -ms-transform: skew(15deg) rotate(6deg); | |
| -o-transform: skew(15deg) rotate(6deg); | |
| transform: skew(15deg) rotate(6deg); | |
| } | |
| a img { | |
| border:none; | |
| } | |
| a { | |
| position: relative; | |
| text-decoration: none; | |
| } | |
| a:after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 0%; | |
| top; | |
| left: 0; | |
| background: #111; | |
| padding: 5px 15px; | |
| color: white; | |
| font-family: 'Open Sans', sans-serif; | |
| text-shadow: 0px 0px 1px #000; | |
| white-space: nowrap; | |
| opacity: 0; | |
| -webkit-transition: all 0.4s ease; | |
| -moz-transition : all 0.4s ease; | |
| width:85; | |
| } | |
| a:before { | |
| content: ""; | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| -webkit-transition: all 0.4s ease; | |
| -moz-transition : all 0.4s ease; | |
| opacity: 0; | |
| left: 30%; | |
| bottom: 90%; | |
| } | |
| a:hover:after { | |
| bottom: 100%; | |
| } | |
| a:hover:before { | |
| bottom: 70%; | |
| } | |
| a:hover:after, a:hover:before { | |
| opacity: 1; | |
| } | |
| .cd-top.cd-is-visible { | |
| /* the button becomes visible */ | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| //browser window scroll (in pixels) after which the "back to top" link is shown | |
| var offset = 300, | |
| //browser window scroll (in pixels) after which the "back to top" link opacity is reduced | |
| offset_opacity = 1200, | |
| //duration of the top scrolling animation (in ms) | |
| scroll_top_duration = 700; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment