baitulquran/index.html at main · Alzan72/baitulquran · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Baitul Qur'an</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <!-- Css bootstarp -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

    <!-- Css lokal -->
    <link rel="stylesheet" href="style-html.css">

    <!-- JS bootstarp -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

    <!-- AOS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <!-- css animated -->
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />


</head>
<body>
    <!-- scroll spy -->


      <!-- navbar -->
    <section id="menu" class="sticky-top">
      <nav class="navbar navbar-expand-lg animate__animated animate__bounce  ">
          <div class="container-fluid ">
            <a class="navbar-brand text-white" href="index.html">
              <img src="gambar/logo2.png" alt="Logo" width="50px" height="50px" class="d-inline-block">Imtaq Shigar Baitul Qur'an</a>
            <button class="navbar-toggler bg-warning" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse  justify-content-end" id="navbarNav">
              <ul class=" nav nav-pills ">
                <li class="nav-item">
                  <a class="nav-link text-warning" aria-current="page" href="#jumbotron">Beranda</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="pendaftaran.html">Pendaftaran</a>
                </li>


                <li class="nav-item">
                  <a class="nav-link text-white" href="kontak.html">Kontak</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>

  </section>
  <!-- Akhir navbar -->

     <!-- Jumbotron -->
     <section id="jumbotron">
        <div class="p-5 text-white">
            <div class="container-fluid header-1 " data-aos="fade-right">
              <h1 class="display-5 fw-bold">Ahlan Wa Sahlan</h1>
              <p class="col-md-8 fs-3">Di Imtaq Shigar Baitul Qur'an Wonogiri</p>
              <p class="col-md-8 fs-4">Lembaga pendidikan tahfidz setingkat SMP</p>
              <a href="#profil" class="btn btn-success btn-lg">Tentang kami</a>
            </div>
          </div>
    </section>

    <!-- Akhir jumbotron -->


    <!-- Profil -->

    <section id="profil">
        <div class="container">
            <div class="row"><h1 class="text-center pb-2 ">Tentang Kami</h1></div>
            <div class="row">
                <div class="col-md-5 text-center" data-aos="fade-right"><img src="gambar/logo2.png" width="350px" height="auto" alt=""></div>
                <div class="col-md-7" data-aos="fade-left"><div class="row" > <h2>Imtaq Shigor Baitul Qur'an</h2></div>
            <div class="row"><p class="fs-5">Imtaq Shigor Baitul Qur'an adalah lembaga pendidikan Islam setingkat SMP, yang memadukan  antara pendidikan tahfidzul Quran dan dirosah Islamiyah sesuai dengan manhaj Al-Qur'an dan As-Sunnah.</p>
                <span class="fs-2">Visi</span>
                <p class="fs-5">Menjadi lembaga pendidikan tahfidzul quran yang mampu mencetak generasi muda yang ber akhlak mulia,mandiri,bermanfaat dan berprestasi.</p>
                    <span class="fs-2">Misi</span>
                    <p class="fs-5">1.Mempelajari dan menjaga Al Qur’an yang merupakan satu diantara dua peninggalan Rasulullah SAW yang akan terus abadi hingga akhir zaman <br>
                      2.Mempersiapkan generasi Qur’ani (hafidz 30 juz) yang memiliki pemahaman yang benar terhadap Al Qur’an dan Sunah serta mampu mengimplementasikannya secara kaffah. <br>
                      3.Menyelenggarakan program pendidikan tinggi yang Islami, professional yang berbasis pesantren guna mencetak kader-kader ulama terbaik.</p>
            </div>
        </div>
            </div>
        </div>
    </section>
    <!-- Akhir profil -->

    <!-- Keunggulan -->

    <section id="keunggulan">
        <div class="container-fluid bg-hijau ">
            <div class="row "><h1 class="text-center py-3">Keunggulan</h1></div>
            <div class="row fs-5 justify-content-center pb-5">
                <div class="col-10 " data-aos="fade-down">
                  <p>
                    1.Hafal Alquran 30 juz <br>
2. Menghafal Matan Matan ilmiah (Tuhfatul Athfal jazariyah dan baiquniyah) <br>
3.Mendapatkan sanad Matan matan ilmiah (Tuhfatul Athfal dan jazariyah) bagi yang memenuhi syarat <br>
4.Program Itqon (Pengambilan sanad al-quran bagi yang memenuhi syarat) <br>
5.Dibimbing oleh musyrif Al Quran yang bersanad lulusan dalam dan luar negeri <br>
6.Bahasa Arab aktif dan pasif <br>
7.Kajian kitab kuning <br>
                  </p>
                </div>
            </div>
        </div>
    </section>


    <!-- keunggulan -->

    <!-- Program -->


    <section id="program">
        <div class="container-fluid">
            <div class="row"><h1 class="text-center pb-3">Ekstrakurikuler</h1></div>
            <div class="row justify-content-center">
                <div class="col-sm-4 fs-4" data-aos="flip-left">
                    <ul>
                      <li>Tilawah (MTQ) </li>
                      <li>Beladiri</li>
                      <li>Sapala</li>

                    </ul>
            </div>
            <div class="col-sm-2 fs-4"data-aos="flip-left" >
              <ul>
                <li>Berenang</li>
                <li>Berkuda</li>
                <li>Panahan</li>
              </ul>
            </div>
        </div>
    </section>
    <!-- Akhir program -->


    <!-- Kontak -->
    <section id="kontak">
      <div class="container-fluid py-5 bg-hijau"data-aos="fade-up">
        <div class="row"><center><h1>Alamat</h1></center></div>
        <div class="row justify-content-center">
          <div class="col-md-6 text-center"><p class="fs-5 ">Jl. Cempaka V,Pokoh Rt.01/IV, Kel.Wonoboyo, Kec.Wonogiri, Kab.Wonogiri ,Jawa Tengah, 57615</p>
            <a href="https://goo.gl/maps/3UhHXtwfsjmZTjvu8" target="_blank" class="btn btn-success px-3">Lihat di peta</a>
          </div>
        </div>
      </div>
    </section>

    <footer>
      <div class="row bg-success py-3">
          <div class="col text-center">Made With <a href="https://www.instagram.com/ghuroba_72/" class="text-white">@Azzam</a></div>
      </div>
    </footer>


    <script>
      AOS.init({
          once: true,
          duration:900
      });
    </script>
</body>
</html>