Skip to content

Instantly share code, notes, and snippets.

@anamorph
Last active August 29, 2015 14:16
Show Gist options
  • Save anamorph/65e5500ef69c54b03789 to your computer and use it in GitHub Desktop.
Save anamorph/65e5500ef69c54b03789 to your computer and use it in GitHub Desktop.
localPrayer
<html>
<head>
</head>
<body>
<table>
<tr>
<td class="location" rowspan="2">City</td>
<td class="prayerName">Fajr
<div class='prayerNameAr'>فجر</div>
</td>
<td class="prayerName">Shuruk
<div class='prayerNameAr'>شُرُوق</div>
</td>
<td class="prayerName">Dhuhr
<div class='prayerNameAr'>ظهر</div>
</td>
<td class="prayerName">Asr
<div class='prayerNameAr'>عصر</div>
</td>
<td class="prayerName">Maghrib
<div class='prayerNameAr'>مغرب</div>
</td>
<td class="prayerName">Isha
<div class='prayerNameAr'>عشاء</div>
</td>
</tr>
<tr>
<td class="prayerTime">5:09 am</td>
<td class="prayerTime">6:34 am</td>
<td class="prayerTime">12:12 pm</td>
<td class="prayerTime">3:06 pm</td>
<td class="prayerTime">5:51 pm</td>
<td class="prayerTime">7:15 pm</td>
</tr>
</table>
</body>
</html>
html {
top: 60px;
left: 8px;
color: #000;
font-family: Helvetica Neue;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 510px;
}
tr {
padding: 8px;
}
td {
font-weight: 100;
overflow: hidden;
text-shadow: 0 0 1px rgba(#000, 0.5);
background: rgba(#000, 0.2);
width: auto;
}
.location {
text-overflow: ".";
font-size: 30px;
font-weight: 100;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
width: 60px;
}
.wrapper {
padding: 4px 6px 4px 6px;
position: relative;
}
.prayerName {
font-size: 18px;
}
.prayerNameAr {
font-size: 16px;
color: green;
margin-top: -12px;
margin-left: 30px;
text-direction: rtl;
text-shadow: 0 0 1px rgba(#fff, 0.5);
}
.prayerTime {
font-size: 16px;
text-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment