"movile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/srikantshetty/pen/rORKqr?depth=everything&order=popularity&page=95&q=mobile&show_forks=false" /> <style class="cp-pen-styles">.trailer-wrapper { background: #fff; overflow: hidden; position: relative; display: block; margin: 40px auto; font-family: "roboto-regular", arial; box-shadow: 0px 0px 30px 10px rgba(202, 91, 49, 0.5); } .trailer-wrapper.mobile { width: 360px; min-width: 360px; } .trailer-wrapper.tablet { width: 100%; max-width: 540px; min-width: 540px; } .trailer-wrapper.web { width: 100%; max-width: 900px; min-width: 720px; } .trailer-wrapper .tr-header { height: 100px; background: #F44336; position: absolute; z-index: 4; top: 0; left: 0; right: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .trailer-wrapper .tr-header .you-icon { display: block; margin-top: 14px; height: 23px; width: 26px; float: left; margin-left: 10px; background: rgba(0, 0, 0, 0.2); border-radius: 4px; text-align: center; padding-top: 2px; } .trailer-wrapper .tr-header .you-icon img { width: 20px; height: 20px; display: inline-block; } .trailer-wrapper .tr-header .title { font-size: 16px; color: #fff; float: left; margin-top: 18px; margin-left: 10px; } .trailer-wrapper .tr-header .tune { display: block; float: right; margin-top: 15px; margin-right: 20px; opacity: 0.4; } .trailer-wrapper .tr-header .tune img { width: 24x; height: 24px; } .trailer-wrapper .tr-header .tabs { width: 100%; display: block; float: left; margin-top: 20px; clear: both; } .trailer-wrapper .tr-header .tabs span { width: 50%; display: inline-block; float: left; text-align: center; padding-bottom: 15px; color: #222; opacity: 0.4; transition: 0.3s ease; cursor: pointer; } .trailer-wrapper .tr-header .tabs span:hover { color: #fff; opacity: 1; } .trailer-wrapper .tr-header .tabs span.active { color: #fff; border-bottom: 4px solid #fff; opacity: 1; } .trailer-wrapper .tr-coming-soon { display: block; clear: both; width: 100%; margin-top: 99px; } .trailer-wrapper .tr-coming-soon .music-cards { width: 178px; height: 180px; display: inline-block; position: relative; float: left; padding: 1px; } .trailer-wrapper .tr-coming-soon .music-cards img { width: 100%; opacity: 1; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn { display: inline-block; width: 40px; height: 40px; position: absolute; bottom: 17px; right: 10px; z-index: 2; border-radius: 50%; box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3); cursor: pointer; transform: scale(1, 1); transition: 0.5s ease; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn img { width: 20px; padding: 11px; opacity: 0.4; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn:hover { transform: scale(1.1, 1.1); } .trailer-wrapper .tr-coming-soon .music-cards .play-btn:hover img { opacity: 0.6; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn.color1 { background: #F6A197; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn.color2 { background: #FDA052; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn.color3 { background: #F6B2C7; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn.color4 { background: #476471; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn.color5 { background: #61BF93; } .trailer-wrapper .tr-coming-soon .music-cards .play-btn.color6 { background: #E26263; } .trailer-wrapper .tr-coming-soon .music-cards .disc { position: absolute; bottom: 0px; height: 35px; left: 0; right: 0; color: #fff; font-size: 12px; text-align: left; margin: 1px; } .trailer-wrapper .tr-coming-soon .music-cards .disc .music-title { margin: 10px; } .trailer-wrapper .tr-coming-soon .music-cards .disc.color1 { background: #F6A197; } .trailer-wrapper .tr-coming-soon .music-cards .disc.color2 { background: #FDA052; } .trailer-wrapper .tr-coming-soon .music-cards .disc.color3 { background: #F6B2C7; } .trailer-wrapper .tr-coming-soon .music-cards .disc.color4 { background: #476471; } .trailer-wrapper .tr-coming-soon .music-cards .disc.color5 { background: #61BF93; } .trailer-wrapper .tr-coming-soon .music-cards .disc.color6 { background: #E26263; } </style></head><body> <html> <head></head> <body style="background:#fff4c6"> <div class="trailer-wrapper mobile"> <div class="tr-header"> <span class="you-icon"> <img src="http://www.clipartbest.com/cliparts/dc7/jEk/dc7jEkRMi.png" alt="" /> </span> <span class="title">Music</span> <span class="tune"> <img src="https://cdn0.iconfinder.com/data/icons/pixon-1/24/filter_list_order_sequence_sort_sorting_outline-512.png" alt="" /> </span> <div class="tabs"> <span class="pop active">Popular</span> <span class="playlist">Playlist</span> </div> </div> <div class="tr-coming-soon"> <div class="music-cards"> <img src="http://static.idolator.com/uploads/2013/04/23/michael-buble-to-be-loved-album-cover-art.jpg" alt="" /> <div class="play-btn color2"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color2"> <div class="music-title">To be loved</div> </div> </div> <div class="music-cards"> <img src="https://s3.amazonaws.com/NRNArt/ODESZA--In-Return-album-cover.jpg" alt="" /> <div class="play-btn color6"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color6"> <div class="music-title">In Rain</div> </div> </div> <div class="music-cards"> <img src="http://static.idolator.com/uploads/2012/08/15/carlyraejepsen-album-cover-kiss.jpg" alt="" /> <div class="play-btn color3"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color3"> <div class="music-title">Call me Maybe</div> </div> </div> <div class="music-cards"> <img src="https://h.fastcompany.net/multisite_files/codesign/imagecache/slideshow_large/slideshow/2013/01/1671590-slide-453052152-1.jpg" alt="" /> <div class="play-btn color1"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color1"> <div class="music-title">Do you feel it </div> </div> </div> <div class="music-cards"> <img src="http://static.idolator.com/uploads/david-archuleta-begin-album-cover-e1339653853757.jpg" alt="" /> <div class="play-btn color5"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color5"> <div class="music-title">Begin </div> </div> </div> <div class="music-cards"> <img src="https://usatsneakhype.files.wordpress.com/2015/04/emceez-ansari-4.jpg?w=1000" alt="" /> <div class="play-btn color4"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color4"> <div class="music-title">Wiz Khalifa</div> </div> </div> </div> </div> <div class="trailer-wrapper tablet"> <div class="tr-header"> <span class="you-icon"> <img src="http://www.clipartbest.com/cliparts/dc7/jEk/dc7jEkRMi.png" alt="" /> </span> <span class="title">Music</span> <span class="tune"> <img src="https://cdn0.iconfinder.com/data/icons/pixon-1/24/filter_list_order_sequence_sort_sorting_outline-512.png" alt="" /> </span> <div class="tabs"> <span class="pop active">Popular</span> <span class="playlist">Playlist</span> </div> </div> <div class="tr-coming-soon"> <div class="music-cards"> <img src="http://static.idolator.com/uploads/2013/04/23/michael-buble-to-be-loved-album-cover-art.jpg" alt="" /> <div class="play-btn color2"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color2"> <div class="music-title">To be loved</div> </div> </div> <div class="music-cards"> <img src="https://s3.amazonaws.com/NRNArt/ODESZA--In-Return-album-cover.jpg" alt="" /> <div class="play-btn color6"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color6"> <div class="music-title">In Rain</div> </div> </div> <div class="music-cards"> <img src="http://static.idolator.com/uploads/2012/08/15/carlyraejepsen-album-cover-kiss.jpg" alt="" /> <div class="play-btn color3"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color3"> <div class="music-title">Call me Maybe</div> </div> </div> <div class="music-cards"> <img src="https://h.fastcompany.net/multisite_files/codesign/imagecache/slideshow_large/slideshow/2013/01/1671590-slide-453052152-1.jpg" alt="" /> <div class="play-btn color1"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color1"> <div class="music-title">Do you feel it </div> </div> </div> <div class="music-cards"> <img src="http://static.idolator.com/uploads/david-archuleta-begin-album-cover-e1339653853757.jpg" alt="" /> <div class="play-btn color5"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color5"> <div class="music-title">Begin </div> </div> </div> <div class="music-cards"> <img src="https://usatsneakhype.files.wordpress.com/2015/04/emceez-ansari-4.jpg?w=1000" alt="" /> <div class="play-btn color4"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color4"> <div class="music-title">Wiz Khalifa</div> </div> </div> </div> </div> <div class="trailer-wrapper web"> <div class="tr-header"> <span class="you-icon"> <img src="http://www.clipartbest.com/cliparts/dc7/jEk/dc7jEkRMi.png" alt="" /> </span> <span class="title">Music</span> <span class="tune"> <img src="https://cdn0.iconfinder.com/data/icons/pixon-1/24/filter_list_order_sequence_sort_sorting_outline-512.png" alt="" /> </span> <div class="tabs"> <span class="pop active">Popular</span> <span class="playlist">Playlist</span> </div> </div> <div class="tr-coming-soon"> <div class="music-cards"> <img src="http://static.idolator.com/uploads/2013/04/23/michael-buble-to-be-loved-album-cover-art.jpg" alt="" /> <div class="play-btn color2"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color2"> <div class="music-title">To be loved</div> </div> </div> <div class="music-cards"> <img src="https://s3.amazonaws.com/NRNArt/ODESZA--In-Return-album-cover.jpg" alt="" /> <div class="play-btn color6"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color6"> <div class="music-title">In Rain</div> </div> </div> <div class="music-cards"> <img src="http://static.idolator.com/uploads/2012/08/15/carlyraejepsen-album-cover-kiss.jpg" alt="" /> <div class="play-btn color3"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color3"> <div class="music-title">Call me Maybe</div> </div> </div> <div class="music-cards"> <img src="https://h.fastcompany.net/multisite_files/codesign/imagecache/slideshow_large/slideshow/2013/01/1671590-slide-453052152-1.jpg" alt="" /> <div class="play-btn color1"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color1"> <div class="music-title">Do you feel it </div> </div> </div> <div class="music-cards"> <img src="http://static.idolator.com/uploads/david-archuleta-begin-album-cover-e1339653853757.jpg" alt="" /> <div class="play-btn color5"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color5"> <div class="music-title">Begin </div> </div> </div> <div class="music-cards"> <img src="https://usatsneakhype.files.wordpress.com/2015/04/emceez-ansari-4.jpg?w=1000" alt="" /> <div class="play-btn color4"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-play-128.png" alt="" /> </div> <div class="disc color4"> <div class="music-title">Wiz Khalifa</div> </div> </div> </div> </div> </body> </html> </body></html>

Related: See More

Now UI Dashboard React

Questions / Comments: