Prayer times layout

Developer
Adem Ilter
Size
5,245 Kb
Views
62,744
  1. Prayer times layout Previews
  2. Prayer times layout HTML Codes
  3. Prayer times layout CSS Codes
  4. Prayer times layout JS Codes

How do I make an prayer times layout?

What is a prayer times layout? How do you make a prayer times layout? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.

Prayer times layout Previews
IQ Test

Prayer times layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>prayer times layout</title> <meta name="viewport" content="width=320, user-scalable = no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700&subset=latin-ext' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-alarm" viewBox="0 0 1024 1024"> <title>alarm</title> <path class="path1" d="M280.747 152.747l-61.013-61.013c-102.187 77.867-169.6 198.187-176 334.933h85.333c6.613-113.067 64.853-212.053 151.68-273.92zM852.267 426.667h85.333c-6.4-136.747-73.813-257.067-176-334.933l-60.8 60.8c86.613 62.080 144.853 161.067 151.467 274.133zM768 448c0-131.2-91.093-240.64-213.333-269.653v-29.013c0-35.413-28.587-64-64-64s-64 28.587-64 64v29.013c-122.24 29.013-213.333 138.453-213.333 269.653v234.667l-85.333 85.333v42.667h725.333v-42.667l-85.333-85.333v-234.667zM490.667 938.667c5.973 0 11.733-0.64 17.28-1.707 27.733-5.76 50.56-24.96 61.44-50.347 4.267-10.24 6.613-21.333 6.613-33.28h-170.667c0 47.147 38.187 85.333 85.333 85.333z"></path> </symbol> </defs>
</svg>
<ul class="zaman" data-vakit="yatsi"> <li class="vakit vakit--imsak alarm-ok" data-vakit="imsak"> <div class="div"> <h4>İmsak</h4> <h1>00:23<span>:49</span></h1> <h2><time>05:41</time></h2> <svg class="icon icon-alarm"> <use xlink:href="#icon-alarm"></use> </svg> </div> </li> <li id="deneme" class="vakit vakit--gunes" data-vakit="gunes"> <div class="div"> <h4>Güneş</h4> <h1>00:23<span>:49</span></h1> <h2><time>07:11</time></h2> <svg class="icon icon-alarm"> <use xlink:href="#icon-alarm"></use> </svg> </div> </li> <li class="vakit vakit--ogle" data-vakit="ogle"> <div class="div"> <h4>Öğle</h4> <h1>00:23<span>:49</span></h1> <h2><time>12:25</time></h2> <svg class="icon icon-alarm"> <use xlink:href="#icon-alarm"></use> </svg> </div> </li> <li class="vakit vakit--ikindi alarm-ok" data-vakit="ikindi"> <div class="div"> <h4>İkindi</h4> <h1>00:23<span>:49</span></h1> <h2><time>15:02</time></h2> <svg class="icon icon-alarm"> <use xlink:href="#icon-alarm"></use> </svg> </div> </li> <li class="vakit vakit--aksam alarm-ok" data-vakit="aksam"> <div class="div"> <h4>Akşam</h4> <h1>00:23<span>:49</span></h1> <h2><time>17:28</time></h2> <svg class="icon icon-alarm"> <use xlink:href="#icon-alarm"></use> </svg> </div> </li> <li class="vakit vakit--yatsi" data-vakit="yatsi"> <div class="div"> <h4>Yatsı</h4> <h1>00:23<span>:49</span></h1> <h2><time>18:50</time></h2> <svg class="icon icon-alarm"> <use xlink:href="#icon-alarm"></use> </svg> </div> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Prayer times layout - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
*, *:before, *:after { box-sizing: inherit;
}
html { box-sizing: border-box; font-size: 10px; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.icon { display: inline-block; color: #fff; fill: currentColor; width: 24px; height: 24px; -webkit-transition: 0.23s; transition: 0.23s;
}
h1, h2, h3, h4, h5, h6 { line-height: 1; margin: 0; font-weight: 400;
}
h4 { font-size: 1.4rem; font-weight: 300; margin-bottom: .4rem; opacity: .7;
}
h1 { -webkit-transition: 0.23s; transition: 0.23s; visibility: hidden; opacity: 0; height: 0; font-size: 6rem; font-weight: 700; letter-spacing: .1rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
h1 span { font-size: 3rem; font-weight: 300; margin-left: .2rem;
}
h2 { font-size: 2rem; font-weight: normal; letter-spacing: .05rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); opacity: .8;
}
.div { position: relative; width: 100%; margin: 0 20px;
}
.icon-alarm { opacity: 0; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 18px; height: 18px;
}
.alarm-ok .icon-alarm { opacity: .7;
}
.zaman { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style: none;
}
.zaman[data-vakit="imsak"] .vakit--imsak { -webkit-box-flex: 8; -ms-flex: 8 0 auto; flex: 8 0 auto; background-color: #CADAF4; cursor: default;
}
.zaman[data-vakit="imsak"] .vakit--imsak h4 { font-size: 1.8rem; opacity: 1;
}
.zaman[data-vakit="imsak"] .vakit--imsak h1 { height: auto; visibility: visible; opacity: 1; margin-bottom: .5rem;
}
.zaman[data-vakit="imsak"] .vakit--imsak h2 { opacity: 1;
}
.zaman[data-vakit="imsak"] .vakit--gunes { -webkit-box-flex: 3; -ms-flex: 3 0 auto; flex: 3 0 auto; background-color: #b6c4dc;
}
.zaman[data-vakit="imsak"] .vakit--ogle { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #a2aec3;
}
.zaman[data-vakit="imsak"] .vakit--ikindi { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #8d99ab;
}
.zaman[data-vakit="imsak"] .vakit--aksam { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #798392;
}
.zaman[data-vakit="imsak"] .vakit--yatsi { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #656d7a;
}
.zaman[data-vakit="gunes"] .vakit--imsak { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #eec9ab;
}
.zaman[data-vakit="gunes"] .vakit--gunes { -webkit-box-flex: 8; -ms-flex: 8 0 auto; flex: 8 0 auto; background-color: #eabc96; cursor: default;
}
.zaman[data-vakit="gunes"] .vakit--gunes h4 { font-size: 1.8rem; opacity: 1;
}
.zaman[data-vakit="gunes"] .vakit--gunes h1 { height: auto; visibility: visible; opacity: 1; margin-bottom: .5rem;
}
.zaman[data-vakit="gunes"] .vakit--gunes h2 { opacity: 1;
}
.zaman[data-vakit="gunes"] .vakit--ogle { -webkit-box-flex: 3; -ms-flex: 3 0 auto; flex: 3 0 auto; background-color: #d3a987;
}
.zaman[data-vakit="gunes"] .vakit--ikindi { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #bb9678;
}
.zaman[data-vakit="gunes"] .vakit--aksam { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #a48469;
}
.zaman[data-vakit="gunes"] .vakit--yatsi { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #8c715a;
}
.zaman[data-vakit="ogle"] .vakit--imsak { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #a4decf;
}
.zaman[data-vakit="ogle"] .vakit--gunes { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #98dac9;
}
.zaman[data-vakit="ogle"] .vakit--ogle { -webkit-box-flex: 8; -ms-flex: 8 0 auto; flex: 8 0 auto; background-color: #8DD6C3; cursor: default;
}
.zaman[data-vakit="ogle"] .vakit--ogle h4 { font-size: 1.8rem; opacity: 1;
}
.zaman[data-vakit="ogle"] .vakit--ogle h1 { height: auto; visibility: visible; opacity: 1; margin-bottom: .5rem;
}
.zaman[data-vakit="ogle"] .vakit--ogle h2 { opacity: 1;
}
.zaman[data-vakit="ogle"] .vakit--ikindi { -webkit-box-flex: 3; -ms-flex: 3 0 auto; flex: 3 0 auto; background-color: #7fc1b0;
}
.zaman[data-vakit="ogle"] .vakit--aksam { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #71ab9c;
}
.zaman[data-vakit="ogle"] .vakit--yatsi { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #639689;
}
.zaman[data-vakit="ikindi"] .vakit--imsak { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #ebbeb4;
}
.zaman[data-vakit="ikindi"] .vakit--gunes { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #e6ac9f;
}
.zaman[data-vakit="ikindi"] .vakit--ogle { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #e09a8b;
}
.zaman[data-vakit="ikindi"] .vakit--ikindi { -webkit-box-flex: 8; -ms-flex: 8 0 auto; flex: 8 0 auto; background-color: #db8876; cursor: default;
}
.zaman[data-vakit="ikindi"] .vakit--ikindi h4 { font-size: 1.8rem; opacity: 1;
}
.zaman[data-vakit="ikindi"] .vakit--ikindi h1 { height: auto; visibility: visible; opacity: 1; margin-bottom: .5rem;
}
.zaman[data-vakit="ikindi"] .vakit--ikindi h2 { opacity: 1;
}
.zaman[data-vakit="ikindi"] .vakit--aksam { -webkit-box-flex: 3; -ms-flex: 3 0 auto; flex: 3 0 auto; background-color: #ba7464;
}
.zaman[data-vakit="ikindi"] .vakit--yatsi { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #995f53;
}
.zaman[data-vakit="aksam"] .vakit--imsak { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #acd7e9;
}
.zaman[data-vakit="aksam"] .vakit--gunes { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #9ed1e6;
}
.zaman[data-vakit="aksam"] .vakit--ogle { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #90cae2;
}
.zaman[data-vakit="aksam"] .vakit--ikindi { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #82c4df;
}
.zaman[data-vakit="aksam"] .vakit--aksam { -webkit-box-flex: 8; -ms-flex: 8 0 auto; flex: 8 0 auto; background-color: #74bddb; cursor: default;
}
.zaman[data-vakit="aksam"] .vakit--aksam h4 { font-size: 1.8rem; opacity: 1;
}
.zaman[data-vakit="aksam"] .vakit--aksam h1 { height: auto; visibility: visible; opacity: 1; margin-bottom: .5rem;
}
.zaman[data-vakit="aksam"] .vakit--aksam h2 { opacity: 1;
}
.zaman[data-vakit="aksam"] .vakit--yatsi { -webkit-box-flex: 3; -ms-flex: 3 0 auto; flex: 3 0 auto; background-color: #68aac5;
}
.zaman[data-vakit="yatsi"] .vakit--imsak { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #a1abbf;
}
.zaman[data-vakit="yatsi"] .vakit--gunes { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #8e9ab2;
}
.zaman[data-vakit="yatsi"] .vakit--ogle { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-color: #7b89a5;
}
.zaman[data-vakit="yatsi"] .vakit--ikindi { -webkit-box-flex: 2; -ms-flex: 2 0 auto; flex: 2 0 auto; background-color: #697998;
}
.zaman[data-vakit="yatsi"] .vakit--aksam { -webkit-box-flex: 3; -ms-flex: 3 0 auto; flex: 3 0 auto; background-color: #56688b;
}
.zaman[data-vakit="yatsi"] .vakit--yatsi { -webkit-box-flex: 8; -ms-flex: 8 0 auto; flex: 8 0 auto; background-color: #43577e; cursor: default;
}
.zaman[data-vakit="yatsi"] .vakit--yatsi h4 { font-size: 1.8rem; opacity: 1;
}
.zaman[data-vakit="yatsi"] .vakit--yatsi h1 { height: auto; visibility: visible; opacity: 1; margin-bottom: .5rem;
}
.zaman[data-vakit="yatsi"] .vakit--yatsi h2 { opacity: 1;
}
.vakit { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-transition: 0.23s; transition: 0.23s; color: #fff; background-color: #999;
}

Prayer times layout - Script Codes JS Codes

$(function() { FastClick.attach(document.body); $('body').on('touchmove', function (e) { if(!$(e.target).hasClass("scrollable")) { e.preventDefault(); } }); $('li').on('click', function(){ var vakit = $(this).data('vakit'); $('ul.zaman').attr('data-vakit', vakit); });
});
Prayer times layout - Script Codes
Prayer times layout - Script Codes
Home Page Home
Developer Adem Ilter
Username ademilter
Uploaded June 11, 2022
Rating 4.5
Size 5,245 Kb
Views 62,744
Do you need developer help for Prayer times layout?

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!

Adem Ilter (ademilter) Script Codes
Name
Timeline with css
CSShrome
A Pen by Adem ilter
404 No signal
Chrome logo effect
Navigation Knob
Countdown Clock
Pure CSS3 iPad Clock
Border box arrow
Fluid width step-navigation
Create amazing blog posts 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!