App design

Developer
Salman Raza
Size
8,269 Kb
Views
12,144
  1. App design Previews
  2. App design HTML Codes
  3. App design CSS Codes
  4. App design JS Codes

How do I make an app design?

What is a app design? How do you make a app design? This script and codes were developed by Salman Raza on 02 November 2022, Wednesday.

App design Previews
IQ Test

App design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>App design</title> <link rel="stylesheet" href="css/style.css">
</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='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='http://kenwheeler.github.io/slick/slick/slick.js'></script> <script src="js/index.js"></script>
</body>
</html>

App design - Script Codes CSS Codes

@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;}

App design - Script Codes JS Codes

$('.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 });
App design - Script Codes
App design - Script Codes
Home Page Home
Developer Salman Raza
Username salmanraza
Uploaded November 02, 2022
Rating 3
Size 8,269 Kb
Views 12,144
Do you need developer help for App design?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Salman Raza (salmanraza) Script Codes
Name
Circle-background-animation
Short Premium Event Card View
Event Card
Testimonial carousel
A Pen by Salman Raza
Event card View
Dynamic Add li using jQuery
Radio Button Animation Pure CSS
Product showcase
Event short details Card view
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!