Test

1234567891011

 
html
 

 
 
 
<div class="is-boxArab">
  <div class="is-teksArab">
  	بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ ١ اَلْحَمْدُ لِلّٰهِ رَبِّ الْعٰلَمِيْنَۙ ٢ الرَّحْمٰنِ الرَّحِيْمِۙ ٣ مٰلِكِ يَوْمِ الدِّيْنِۗ ٤ اِيَّاكَ نَعْبُدُ وَاِيَّاكَ نَسْتَعِيْنُۗ ٥ اِهْدِنَا الصِّرَاطَ الْمُسْتَقِيْمَۙ ٦ صِرَاطَ الَّذِيْنَ اَنْعَمْتَ عَلَيْهِمْ ۙ غَيْرِ الْمَغْضُوْبِ عَلَيْهِمْ وَلَا الضَّاۤلِّيْنَࣖ ٧
  </div>
  <div class="is-teksLatin">
    Bismillâhir-raḫmânir-raḫîm. Al-ḫamdu lillâhi rabbil-‘âlamîn, ar-raḫmânir-raḫîm, mâliki yaumid-dîn. Iyyâka na‘budu wa iyyâka nasta‘în. ihdinash-shirâthal-mustaqîm, shirâthalladzîna an‘amta ‘alaihim ghairil-maghdlûbi ‘alaihim wa ladl-dlâllîn.
  </div>
  <div class="is-artiArab">
    “Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang. Segala puji bagi Allah Tuhan semesta alam, Yang Maha Pengasih lagi Maha Penyayang, Pemilik hari Pembalasan. Hanya kepada Engkaulah kami menyembah dan hanya kepada Engkaulah kami memohon pertolongan. Bimbinglah kami ke jalan yang lurus, (yaitu) jalan orang-orang yang telah Engkau beri nikmat, bukan (jalan) mereka yang dimurkai dan bukan (pula jalan) orang-orang yang sesat.”
  </div>
</div>

12345678

 
css
 

 
 
 

/* Example CSS Code */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333333;
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960

 
css
 

 
 
 
/* Font Arabic Uthmani Normal */
@font-face {
  font-family: UthmanicHafs_V22;
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/imansani93/imansani.com@main/font/Arabic/UthmanicHafs_V22.ttf") format("truetype");
}
/* Font Arabic Uthmani Tebal */
@font-face {
  font-family: UthmanicHafs1B Ver13;
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/imansani93/imansani.com@main/font/Arabic/UthmanicHafs1B%20Ver13.ttf") format("truetype");
}

/* Kode CSS Font Arabic by imansani.com*/
.is-boxArab {
  background-color: #ffffff;
  border: 1px solid #eceff1;
  border-radius: 8px;
  padding: 10px;
  margin: 1.5em 0;
  box-shadow: 0 10px 8px -8px rgba(0,0,0,.05)
}
.is-teksArab {
  font-family: 'UthmanicHafs_V22',serif;
  font-size: 34px;
  font-weight: 400;
  text-align: right;
  direction: rtl;
  line-height: 1.8;
}
.is-teksLatin {
  margin-top: 15px;
  font-style: italic;
  line-height: 1.6;
}
.is-artiArab {
  position: relative;
  background-color: #f9f9fb;
  font-weight: 400;
  border: 1px solid #eceff1;
  border-radius: 4px;
  padding: 20px 10px 10px;
  margin: 2.5em 0 0;
  line-height: 1.6;
}
.is-artiArab:before {
  content: "Artinya";
  position: absolute;
  font-weight: bold;
  border-radius: 50px;
  background-color: #f9f9fb;
  border: 1px solid #eceff1;
  padding: 0 15px 1px;
  top: -17px;
  left: 15px;
}

Go to Download Page