<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>
