"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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 lang='en' 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/salmanraza/pen/EWKGZN?depth=everything&order=popularity&page=39&q=skype&show_forks=false" /> <style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700,800'); @import url('https://fonts.googleapis.com/css?family=Playball'); @import url('https://kenwheeler.github.io/slick/slick/slick.css'); * {margin: 0; padding: 0; box-sizing: border-box;} body {font-family: 'Open Sans', sans-serif; background-image: linear-gradient(to right, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%); padding: 10%; } a { text-decoration: none; display: block; } ul {list-style: none;} img {width: 100%;} .mgzn_tab, .mgzn_tab_icon, .yrs_issues ul li, .months_nm li, .main_hddn_cnt, .popup_for_pdf { -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } main {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } main:after {content: 'Salman Raza'; font-family: 'Playball', cursive; position: absolute; bottom: -90px; left: 50%; color: rgba(0, 0, 0, 0.02); font-size: 150px; line-height: 140px; white-space: nowrap; text-transform: lowercase; transform: translateX(-50%); pointer-events: none; z-index: -1; } .mobile_main_cnt {width: 290px; height: 585px; background-color: transparent; background-image: url(http://hereandnow.co.in/wp-content/uploads/2016/07/Apple-iPhone-6.png); background-repeat: no-repeat; background-position: center top 0; overflow: hidden; position: relative; z-index: 1; } .mbl_sb_cnt {width: 256px; height: 454px; background-color: #2a292f; position: absolute; left: 50%; transform: translate(-50%, 0%); overflow: hidden; z-index: 2; transition: all 0.8s ease-in; bottom: 67px; } .mbl_sb_cnt.close, .mbl_sb_cnt.close .open_btn.open {height: 42px; width: 42px; border-radius: 30px; bottom: 15px; background-color: #f1f1f1; } .open_btn {display: none;} .mbl_sb_cnt.close .open_btn.open {background-color: #f1f1f1; display: block; z-index: 10; cursor: pointer; transition: all 2s ease-in; box-shadow: 0 0 5px rgba(0, 0, 0, 1) inset; } .back_arrow {float: left; width: 35px; margin: 12px 0 0 7px;cursor: pointer;} .mbl_sb_cnt.close .top_strip, .mbl_sb_cnt.close header, .mbl_sb_cnt.close .slider-cnt, .mbl_sb_cnt.close .magazine_main_cont, .mbl_sb_cnt.close .main_hddn_cnt { display: none; } /* [ Top Strip ] */ .top_strip {width: 100%; height: 20px; line-height: 20px; background-color: #147260; position: relative; float: left;} .mbl-ntwrk {color: #fff; margin-left: 5px;float: left; } .mbl-ntwrk i {font-size: 12px;vertical-align: 1px;} .ntwrk {width: 5px; height: 5px; background-color: #fff; border-radius: 5px; float: left; margin: 8px 2px 0 0; } .mbl-ntwrk .ntwrk:last-of-type {margin-right: 6px;} .mbl_tm {width: 60px; text-align: center; position: relative; left: 15%; float: left; top: -2px; } .mbl_tm span {display: inline-block; color: #fff; font-size: 13px; position: relative; } .mbl_tm span.hours, .mbl_tm span.minuts { letter-spacing: -0.5px; } .mbl_tm span.hours {margin-right: 5px;} .mbl_tm span.hours:after {position: absolute; left: 17px; content: ':'; animation: blink 1s infinite; pointer-events: visible;} @-webkit-keyframes blink { 0% {opacity: 0;} 40% {opacity: 0;} 50% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } .mbl_tm span.am_pm {font-size: 10px;} .mbl_btry {float: right; width: 25px; height: 12px; background-color: #fff; margin:4px 9px 0 0; position: relative; border-radius: 2px; text-align: center; } .mbl_btry:after {position: absolute; content: ''; width: 2px; height: 70%; top: 2px; background-color: #fff; right: -2px; border-radius: 5px; } .percentage {font-size: 8px; font-weight: bold; line-height: 6px; float: left; margin: 3px 0 0 6px; } /* [ // Top Strip ] */ /* [ Header ] */ header {width: 100%; background-color: #147260; height: 40px; color: #fff; float: left; position: relative;box-shadow: 0 2px 3px rgba(0,0,0,0.4); } .app_hdr-logo {float: right; width: 60px; padding: 3px; height: 40px; } .hmbrgr_menu_cnt {width: 27px; height: 15px; position: relative; cursor: pointer; transition: all 0.5s ease; margin: 13px 0 0 10px; float: left; } .hmbrgr_menu_cnt:before, .hmbrgr_menu_cnt:after, .hmbrgr_menu_cnt .arrow {position: absolute; content: ''; width: 100%; height: 2px; background-color: #fff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .hmbrgr_menu_cnt:before { top: 0; } .hmbrgr_menu_cnt:after { bottom: 0; } .hmbrgr_menu_cnt .arrow {top: 50%; transform: translateY(-50%);} .hmbrgr_menu_cnt.open:before {top: 6px; transform: rotate(45deg); left: 0; } .hmbrgr_menu_cnt.open:after {bottom: 7px; transform: rotate(-45deg); right: 5px;} .hmbrgr_menu_cnt.open:before, .hmbrgr_menu_cnt.open:after {width: 80%;background-color: #f0754b;} .hmbrgr_menu_cnt.open .arrow { background-color: transparent; } /*.hmbrgr_menu_cnt.open { transform: rotate(270deg); }*/ .hmbrgr_menu_cnt.open {z-index: 3;} .hmbrgr_menu_bg {width: 190px; height: 435px; background-color: #2f2f31; position: absolute; top: 0; left: -190px; z-index: 2; transition: all 0.5s ease; } .hmbrgr_menu_bg:after {position: absolute; content: ''; background-color: rgba(0,0,0,0.85); right: 0px; width: 70px; height: 100%; top: 0; transition: all 0.5s ease; } .hmbrgr_menu_bg.open {left: 0;} .hmbrgr_menu_bg.open:after {right: -70px;} .hmbrgr_app_an {font-size: 14px; text-transform: uppercase; display: block; height: 40px; line-height: 40px; padding-left: 50px; letter-spacing: 2px; border-bottom: 1px solid #f0754b; } .hmbrgr_menus li {cursor: pointer; border-bottom: 1px solid #444446; padding: 10px 8px; float: left; width: 100%; position: relative; font-size: 12px; } .hmbrgr_menus li:before {width: 23px; content: ''; background-size: 100%; margin-right: 10px; height: 23px; vertical-align: middle; display: inline-block; -webkit-background-size: 100%; background-size: 100%; } .hmbrgr_menus li:first-child:before {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/about.png);} .hmbrgr_menus li:nth-child(2):before {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/subscription.png);} .hmbrgr_menus li:nth-child(3):before {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/download.png);} .hmbrgr_menus li:nth-child(4):before {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/share.png);} .hmbrgr_menus li:last-child:before {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/exit.png);} /* [ // Header ] */ /* [ Slider ] */ .slider-cnt, .slider, .slide {width: 100%; float: left; height: 150px; background-color: #fff; position: relative; } .slide:focus {outline: none;} .slide img {height: 100%;} .slider .slick-dots {position: absolute; bottom: 2px; left: 6px;} .slider .slick-dots li {list-style: outside none none; display: inline-block; cursor: pointer; width: 6px; height: 6px; border-radius: 100%; margin: 0px 3px 0px 0px; background-color: #a7a7a5; position: relative; } .slider .slick-dots li.slick-active {background-color: #2a8f7f;} .slick-dots button {display: none;} /* [ // Slider ] */ /* [ Magazine ] */ .magazine_main_cont {width: 100%; min-height: 245px; max-height: 245px; float: left; background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/first_screen_bg_img.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; padding: 30px 15px 20px 15px; overflow-y: scroll; overflow-x: hidden; } .magazine_main_cont::-webkit-scrollbar-track, .main_hddn_cnt_2::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } .magazine_main_cont::-webkit-scrollbar, .main_hddn_cnt_2::-webkit-scrollbar {width: 0px; background-color: #F5F5F5; } .magazine_main_cont::-webkit-scrollbar-thumb, .main_hddn_cnt_2::-webkit-scrollbar-thumb {background-color: #000000; border: 2px solid #555555; } .mgzn_tab {width: 100%; background-color: rgba(255,255,255,0.2); box-shadow: 0 0 5px rgba(0,0,0,0.5); border-radius: 5px; padding: 10px; position: relative; float: left; cursor: pointer; margin-bottom: 15px; } .mgzn_tab:hover, .mgzn_tab.active, .months_nm.downloaded_issues li.active {background-color: #f0754b;} .mgzn_tab:hover .mgzn_tab_icon {background-color: #2f2f31;} .mgzn_tab_icon {width: 65px; height: 65px; border-radius: 100%; background-color: red; float: left; padding:15px; background-color: rgba(0,0,0,0.5); } .mgzn_hdng {float: right; width: 65%; text-align: center; } .mgzn_hdng .urdu {display: block; width: 100px; margin: 0 auto; } .mgzn_hdng .eng {margin-top: -5px; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); } .yrs_issues {width: 100%; float: left; background-color: #fff; border-radius: 5px; position: relative; margin-bottom: 30px; padding: 10px 10px 3px; text-align: center; } .yrs_issues:after {position: absolute; content: ''; left: 50%; top: -10px; transform: translateX(-50%); border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; } .yrs_issues ul li {display: inline-block; background-color: #29907d; padding: 5px 15px; border-radius: 3px; margin:0 3px 8px 0; font-size: 12px; cursor:pointer; color: #fff; } .yrs_issues ul li:hover { background-color: #f0754b; } /* [ // Magazine ] */ /* [ Monthly magazine names ] */ .main_hddn_cnt {width: 100%; height: 456px; background-color: #ccc; z-index: 10; position: absolute; top: 20px; right: -256px; text-align: center; } .main_hddn_cnt_2 {width: 100%; background-color: red; height: 395px; overflow-y: scroll; overflow-x: hidden; float: left; background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/inner_bg_img.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; background-repeat: no-repeat; padding: 20px 15px; } .year_nm {display: inline-block; text-align: center; font-size: 15px; vertical-align: middle; margin-top: 10px; } .months_nm {width: 100%;text-align: left;} .months_nm li {width: 100%; height: 45px; line-height: 45px; float: left; margin-bottom: 10px; border-radius: 5px; background-color: #fff; color: #008375; cursor: pointer; padding: 0 10px; } .months_nm li .icons {width: 30px; height: 30px; float: left; vertical-align: middle; background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/download_grey.png); background-size: 100%; margin: 8px 10px 0 0; } .eng_hdng {float: left; font-size: 14px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);} .urdu_hdng img {height: 100%; width: auto;} .urdu_hdng img.img_1 { display: block; } .urdu_hdng img.img_2 { display: none; } .urdu_hdng {float: right; line-height: 0; margin: 11px 0 0 0; height: 27px;} .months_nm li:hover .urdu_hdng img.img_1, .months_nm li.downloaded .urdu_hdng img.img_1 { display: none; } .months_nm li:hover .urdu_hdng img.img_2, .months_nm li.downloaded .urdu_hdng img.img_2 { display: block; } .months_nm li:hover {color: #fff; background-color: #f0754b;} .months_nm li:hover .icons {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/download_white.png);} .months_nm li.downloaded{background-color: #147260; color: #fff;} .months_nm li.downloaded .icons {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/book_icon.png); background-size: 80%; background-repeat: no-repeat; background-position: center center; } .popup_for_pdf {position: absolute; top: 0; right: -256px; z-index: 1; background-color: rgba(0,0,0,0.9); width: 100%; height: 100%; cursor: pointer; } .ppup_sb_cnt {width: 100%; max-width: 220px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dnld_read_cont {width: 100%; background-color: #fff; padding: 15px 10px;position: relative;} .dnld_read_cont.online_reading {border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #ccc;z-index: 1;} .dnld_read_cont.online_reading:after {position: absolute; content: 'or'; border-radius: 100%; background-color: #29907d; color: #fff; bottom: -11px; left: 50%; transform: translateX(-50%); font-size: 12px; z-index: 1; width: 20px; height: 20px; line-height: 18px; } .dnld_read_cont.offline_reading {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-top: 20px;} .dnld_read_cont h3 {font-size: 11px; font-weight: 500; color: #29907d; } .dnld_read_cont button {border: 0; width: 70%; background-color: #29907d; padding: 10px; border-radius: 4px; margin: 10px 0 5px 0; text-transform: uppercase; font-size: 11px; color: #fff; cursor: pointer; } /* [ // Monthly magazine names ] */ .dwnldd_isus h5 {font-size: 15px;} .months_nm.downloaded_issues li {text-align: center; letter-spacing: 2px; font-weight: 700; font-size: 18px; } .downloaded_issues .yrs_issues {margin: 10px 0;} .downloaded_issues .yrs_issues ul li {display: inline-block; height: 35px; width: auto; line-height: 35px; padding: 6px 13px; float: none; } .downloaded_issues .yrs_issues ul li img { height: 100%;width: auto; } /* [ about khizr-e-rah ] */ .main_hddn_cnt_2.about_app_cont{padding: 0;} .ss_academy_cont {background-color: #29907d; height: auto; padding: 15px 15px 25px; position: relative; } .mail_icon {position: absolute; right: 10px; bottom: -15px; width: 35px; height: 35px; background-color: #f0754b; border-radius: 100%; background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/mail_icon.png); -webkit-background-size: 100%; background-size: 100%; cursor: pointer; } .abt_acdmy_txt {width: 100%; background-color: #fff; padding: 20px 10px 0; } /* [ about khizr-e-rah ] */ /*[ Share icons ] */ .share_apps_cont {width: 100%;margin-top: 20px; } .share_apps_cont ul li {width: 55px; height: 55px; line-height: 60px; border-radius: 4px; display: inline-block; margin: 0 5px 10px; text-align: center; color: #fff; cursor: pointer; } .share_apps_cont ul li i.fa { font-size: 30px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .share_apps_cont ul li.whatsapp {background-color: #0dc143;} .share_apps_cont ul li.mail { background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%); } .share_apps_cont ul li.fb { background-color: #3b5998; } .share_apps_cont ul li.fb i {font-size: 35px; vertical-align: -5px;} .share_apps_cont ul li.skype { background-color: #00aff0;} .share_apps_cont ul li.share_it {background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); } .share_apps_cont ul li.share_it i {background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/share_it.png); width: 100%; height: 100%; vertical-align: top; background-size: 100%; background-repeat: no-repeat; background-position: center center; background-size: 60%; } .share_apps_cont ul li.share_it i.fa-share-alt {color: rgba(0,0,0,0); text-shadow: none;} .share_apps_cont ul li.more {background-color: #fff;color: #545454;} .share_apps_cont ul li.more i {vertical-align: -5px;} /*[ // Share icons ] */ .tool_tip {position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background-color: #147260; padding: 5px 10px; font-size: 13px; text-transform: uppercase; color: #fff; letter-spacing: 1px; font-weight: 500; z-index: 5; border-radius: 3px; transition: all 0.8s ease-in; } @keyframes tooltip { 0% { bottom: 70px; } 50% { bottom: 90px; } 100% { bottom: 70px; } } .tool_tip:after {position: absolute; content: ''; left: 50%; transform: translateX(-50%); bottom: -8px; border-top: 8px solid #147260; border-left: 8px solid transparent; border-right: 8px solid transparent; } .tool_tip.click_me { bottom: 70px; animation: tooltip 1s ease infinite; animation-delay: 1s; } .app_icon {width: 37px; height: 37px; position: absolute; bottom: 214px; left: 98px; border-radius: 8px; background-color: #fff; background-image: url(http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/app_main_icon.png); -webkit-background-size: 100%; background-size: 100%; cursor: pointer; animation: zoom 0.8s ease alternate 5; animation-delay: 3s; } @keyframes zoom { 0% { transform: scale(0.8); } 50% { transform: scale(1.3); } 100% { transform: scale(0.8); } } @-webkit-keyframes zoom { 0% { transform: scale(0.8); } 50% { transform: scale(1.3); } 100% { transform: scale(0.8); } } .appNm {display: block; white-space: nowrap; font-size: 8px; position: relative; left: 50%; transform: translateX(-55%); bottom: -37px; font-weight: 500; color: #fff; } .right_0 {right: 0;} .animated {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite {-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes slideInDown { from {-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} } @keyframes slideInDown { from {-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown {-webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInUp { from {-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from {-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp {-webkit-animation-name: slideInUp; animation-name: slideInUp;}</style></head><body> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <main> <div class="mobile_main_cnt"> <div class="app_icon"> <span class="appNm">Khizr-e-Rah</span> </div> <style type="text/css"> </style> <!-- <span class="tool_tip">Click me</span> --> <div class="mbl_sb_cnt"> <div class="open_btn"></div> <!-- top strip --> <div class="top_strip"> <div class="mbl-ntwrk"> <span class="ntwrk"></span> <span class="ntwrk"></span> <span class="ntwrk"></span> <span class="ntwrk"></span> <span class="ntwrk"></span> <i class="fa fa-wifi" aria-hidden="true"></i> </div> <div class="mbl_tm"> <span class="hours">10</span> <span class="minuts">00</span> <span class="am_pm">am</span> </div> <div class="mbl_btry"> <span class="sb_cnt"> <span class="percentage">50%</span> </span> </div> </div> <!-- // top strip --> <!-- header --> <header> <div class="hmbrgr_menu_cnt"> <span class="arrow"></span> </div> <div class="app_hdr-logo"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/top_khizre_rah_logo.png"> </div> <div class="hmbrgr_menu_bg "> <h3 class="hmbrgr_app_an">Khizr-e-rah</h3> <ul class="hmbrgr_menus"> <li class="about_khizrerah">About Khizr-e-rah</li> <li class="app_subscription">Subscription</li> <li class="downloaded_issues_menu">Downloaded Issues</li> <li class="app_share">Share Application</li> <li class="exit_app">Exit</li> </ul> </div> </header> <!-- // header --> <!-- Slider --> <div class="slider-cnt"> <div class="slider"> <div class="slide"><img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/slider_1.png"></div> <div class="slide"><img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/slider_2.png"></div> <div class="slide"><img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/slider_3.png"></div> </div> </div> <!-- // Slider --> <!-- magazine --> <div class="magazine_main_cont"> <div class="mgzn_tab crnt_issues"> <span class="mgzn_tab_icon"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/book_icon.png"> </span> <div class="mgzn_hdng"> <span class="urdu"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/taza_shumara.png"> </span> <span class="eng">Current Issues</span> </div> </div> <div class="mgzn_tab archive_issues"> <span class="mgzn_tab_icon"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/book_icon.png"> </span> <div class="mgzn_hdng"> <span class="urdu"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/guzishta_shumara.png"> </span> <span class="eng">Archive</span> </div> </div> <div class="yrs_issues archive_issues_yrs" style="display: none;"> <ul> <li>2016</li> <li>2015</li> <li>2014</li> <li>2013</li> <li>2012</li> </ul> </div> </div> <!-- // magazine --> <!-- issues as per year --> <div class="main_hddn_cnt" id="monthly_books_cnt"> <header> <span class="back_arrow"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/back_btn.png"> </span> <h5 class="year_nm">2017</h5> <div class="app_hdr-logo"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/top_khizre_rah_logo.png"> </div> </header> <div class="main_hddn_cnt_2"> <ul class="months_nm"> <li> <span class="icons"></span> <p class="eng_hdng">January</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/janoury_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/janoury_white.png" alt=""> </span> </li> <li> <span class="icons"></span> <p class="eng_hdng">Fabruary</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/fab_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/fab_white.png" alt=""> </span> </li> <li class="downloaded"> <span class="icons"></span> <p class="eng_hdng">March</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/march_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/march_white.png" alt=""> </span> </li> <li> <span class="icons"></span> <p class="eng_hdng">April</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/april_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/april_white.png" alt=""> </span> </li> <li> <span class="icons"></span> <p class="eng_hdng">May</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/may_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/may_white.png" alt=""> </span> </li> <li class="downloaded"> <span class="icons"></span> <p class="eng_hdng">June</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/june_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/june_white.png" alt=""> </span> </li> <li> <span class="icons"></span> <p class="eng_hdng">July</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/july_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/july_white.png" alt=""> </span> </li> <li class="downloaded"> <span class="icons"></span> <p class="eng_hdng">August</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/aug_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/aug_white.png" alt=""> </span> </li> <li> <span class="icons"></span> <p class="eng_hdng">September</p> <span class="urdu_hdng"> <img class="img_1" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/sept_green.png" alt=""> <img class="img_2" src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/sept_white.png" alt=""> </span> </li> </ul> </div> <!-- [ popup ] --> <div class="popup_for_pdf"> <div class="ppup_sb_cnt"> <div class="dnld_read_cont online_reading animated"> <h3>Do you want to read it online?</h3> <button type="button"> <span class="icon"></span> Click here </button> </div> <div class="dnld_read_cont offline_reading animated"> <h3>You can download it for read offline</h3> <button type="button"> <span class="icon"></span> Click here </button> </div> </div> </div> <!-- [ // popup ] --> </div> <!-- // issues as per year --> <!-- [ Downloaded Issues ] --> <div class="main_hddn_cnt" id="downloaded_issues_ovrly"> <header class="dwnldd_isus"> <span class="back_arrow"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/back_btn.png"> </span> <h5 class="year_nm">Downloaded</h5> <div class="app_hdr-logo"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/top_khizre_rah_logo.png"> </div> </header> <div class="main_hddn_cnt_2"> <ul class="months_nm downloaded_issues"> <li class="downloaded">2016</li> <div class="yrs_issues" style="display: none;"> <ul> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/janoury_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/fab_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/march_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/april_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/june_white.png"> </li> </ul> </div> <li class="downloaded">2015</li> <div class="yrs_issues salman" style="display: none;"> <ul> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/janoury_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/fab_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/march_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/april_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/june_white.png"> </li> </ul> </div> <li class="downloaded">2014</li> <div class="yrs_issues salman" style="display: none;"> <ul> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/janoury_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/fab_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/march_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/april_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/june_white.png"> </li> </ul> </div> <li class="downloaded">2013</li> <div class="yrs_issues salman" style="display: none;"> <ul> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/janoury_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/fab_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/march_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/april_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/june_white.png"> </li> </ul> </div> <li class="downloaded">2012</li> <div class="yrs_issues salman" style="display: none;"> <ul> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/janoury_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/fab_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/march_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/april_white.png"> </li> <li> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/june_white.png"> </li> </ul> </div> </ul> </div> </div> <!-- [ // Downloaded Issues ] --> <!-- [ pdf file ] --> <div class="main_hddn_cnt" id="pdf_book_file"> <header> <span class="back_arrow"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/back_btn.png"> </span> <h5 class="year_nm">2017</h5> <div class="app_hdr-logo"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/top_khizre_rah_logo.png"> </div> </header> <div class="main_hddn_cnt_2"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/pdf_book.jpg"> </div> </div> <!-- [ // pdf file ] --> <!-- [ about app ] --> <div class="main_hddn_cnt" id="about_app"> <header> <span class="back_arrow"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/back_btn.png" alt=""> </span> <h5 class="year_nm">About Us</h5> <div class="app_hdr-logo"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/top_khizre_rah_logo.png" alt=""> </div> </header> <div class="main_hddn_cnt_2 about_app_cont"> <div class="ss_academy_cont"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/shah_safi_academy_logo.png" alt=""> <span class="mail_icon"></span> </div> <div class="abt_acdmy_txt"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/about_academy.png" alt=""> </div> </div> </div> <!-- [ // about app ] --> <!-- [ subscription app ] --> <div class="main_hddn_cnt" id="subscription_app"> <header> <span class="back_arrow"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/back_btn.png" alt=""> </span> <h5 class="year_nm">Subscription</h5> <div class="app_hdr-logo"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/top_khizre_rah_logo.png" alt=""> </div> </header> <div class="main_hddn_cnt_2 about_app_cont"> <div class="abt_acdmy_txt"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/subscription_txt.png" alt=""> </div> </div> </div> <!-- [ // subscription app ] --> <!-- [ share app ] --> <div class="main_hddn_cnt" id="share_apps"> <header> <span class="back_arrow"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/back_btn.png" alt=""> </span> <h5 class="year_nm">Share App</h5> <div class="app_hdr-logo"> <img src="http://demosoft.indicsoft.com//SalmanDemo/salman-others-imgs/top_khizre_rah_logo.png" alt=""> </div> </header> <div class="main_hddn_cnt_2"> <div class="share_apps_cont"> <ul> <li class="whatsapp"><i class="fa fa-whatsapp" aria-hidden="true"></i></li> <li class="mail"><i class="fa fa-envelope" aria-hidden="true"></i></li> <li class="fb"><i class="fa fa-facebook" aria-hidden="true"></i></li> <li class="share_it"><i class="fa fa-share-alt"></i></li> <li class="skype"><i class="fa fa-skype" aria-hidden="true"></i></li> <li class="more"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></i></li> </ul> </div> </div> </div> <!-- [ // share app ] --> </div> </div> </main> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//code.jquery.com/jquery-1.11.0.min.js'></script><script src='//kenwheeler.github.io/slick/slick/slick.js'></script> <script >$('.hmbrgr_menu_cnt').click (function(){ $(this).toggleClass('open'); }); $('.hmbrgr_menu_cnt').click (function(){ $('.hmbrgr_menu_bg').toggleClass('open'); }); $('.crnt_issues, .archive_issues_yrs ul li').click (function(){ $('#monthly_books_cnt').addClass('right_0'); }); // popup $('.months_nm li').click (function(){ $('.popup_for_pdf').addClass('right_0'); $('.online_reading').addClass('slideInDown'); $('.offline_reading').addClass('slideInUp'); }); $(".popup_for_pdf").off("click").on("click", function(e) { $(this).removeClass('right_0'); $('.online_reading').removeClass('slideInDown'); $('.offline_reading').removeClass('slideInUp'); e.stopImmediatePropagation(); }); $('.dnld_read_cont > button, .yrs_issues ul li.salman').click (function(){ $('#pdf_book_file').addClass('right_0'); }); $('.back_arrow').click (function(){ $('.main_hddn_cnt').removeClass('right_0'); }); // Archive $('.archive_issues').click (function(){ $(this).toggleClass('active'); $('.archive_issues_yrs').slideToggle(); }); $('.downloaded_issues_menu').click (function(){ $('#downloaded_issues_ovrly').toggleClass('right_0'); setTimeout(function(){ $('.hmbrgr_menu_bg').removeClass('open'); $('.hmbrgr_menu_cnt').removeClass('open'); }, 500); }); $('.about_khizrerah').click(function(){ $('#about_app').addClass('right_0'); setTimeout(function(){ $('.hmbrgr_menu_bg').removeClass('open'); $('.hmbrgr_menu_cnt').removeClass('open'); }, 500); }); $('.app_subscription').click(function(){ $('#subscription_app').addClass('right_0'); setTimeout(function(){ $('.hmbrgr_menu_bg').removeClass('open'); $('.hmbrgr_menu_cnt').removeClass('open'); }, 500); }); $('.app_share').click(function(){ $('#share_apps').addClass('right_0'); setTimeout(function(){ $('.hmbrgr_menu_bg').removeClass('open'); $('.hmbrgr_menu_cnt').removeClass('open'); }, 500); }); $('.exit_app').click(function(){ $('.mbl_sb_cnt').addClass('close'); setTimeout(function(){ $('.hmbrgr_menu_bg').removeClass('open'); $('.hmbrgr_menu_cnt').removeClass('open'); }, 500); }); $('.exit_app').click(function(){ setTimeout(function(){ $('.open_btn').addClass('open'); $('.tool_tip').addClass('click_me'); }, 1000); }); $('.open_btn, .app_icon').click(function(){ $(this).removeClass('open'); $('.mbl_sb_cnt').removeClass('close'); $('.tool_tip').removeClass('click_me'); }); // Accordian $(document).ready(function(){ $(".months_nm.downloaded_issues li").click(function(){ //slide up all the link lists $(".yrs_issues").slideUp(); if(!$(this).next().is(":visible")) { $(this).next().slideDown(); $(this).addClass('active'); } else { $(this).removeClass('active'); } }) }) $(".months_nm.downloaded_issues li > .yrs_issues ul li").off("click").on("click", function(e) { $(this).addClass('salman'); $('#pdf_book_file').addClass('right_0'); e.stopImmediatePropagation(); }); // Slider $('.slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000, dots: true, arrows: false }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: