| Titletag | Descriptiontag | language |
|---|---|---|
| Homepage - Official Website ITB Ahmad Dahlan | Indonesian |
| Alexarank |
|---|
| 447950 |
| Ip adress | 103.247.8.48 | Nameserver | ns1.rumahweb.com ns3.rumahweb.net ns2.rumahweb.com ns4.rumahweb.net |
Status code | 200 |
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Homepage - Official Website ITB Ahmad Dahlan</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<!-- Swiper CSS (di <head>) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
<!-- favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/svg+xml">
<!--- css --->
<style>
html{
scroll-behavior: smooth;
}
#btnTop {
position: fixed;
bottom: 90px;
right: 20px;
background:rgb(248, 247, 247);
border-radius:50%;
border: none;
cursor: pointer;
z-index: 9999;
width: 50px;
height: 50px;
padding: 0;
display: none;
}
#btnTop svg {
width: 50px;
height: 50px;
}
.progress-bg {
fill: none;
stroke: #eee;
stroke-width: 3;
}
.progress {
fill: none;
stroke: #c40000;
stroke-width: 3;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.3s linear;
}
.wa-floating {
position: fixed;
width: 50px;
height: 50px;
bottom: 20px; /* di bawah btnTop */
right: 20px;
background-color: #25d366;
border-radius: 50%;
text-align: center;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
cursor: pointer;
}
.wa-floating img {
width: 30px;
height: 30px;
}
.wa-bubble {
position: fixed;
bottom: 30px; /* geser di atas WA icon */
right: 85px;
background-color: #25d366;
color: white;
padding: 10px 15px;
border-radius: 20px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
z-index: 9996;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
white-space: nowrap;
display: none; /* awalnya sembunyi */
}
.wa-floating:hover + .wa-bubble {
display: block;
}
/* Slider */
.slider {
height: 87vh;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Slider Items */
.slider .list .item {
position: absolute;
inset: 0 0 0 0;
opacity: 0;
transform: scale(1.05);
}
.slider .list .item.active {
opacity: 1;
z-index: 10;
transform: scale(1);
}
/* Images */
.slider .list .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Gradient Overlay */
.slider .list .item::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
z-index: 1;
}
/* Content */
.slider .list .item .content {
position: absolute;
left: 10%;
top: 35%;
z-index: 2;
max-width: 600px;
color: #fff;
animation: fadeInUp 1s ease-out;
font-family: 'Poppins', sans-serif;
/* Font modern */
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
/* Efek bayangan elegan */
}
.slider .list .item .content h2 {
font-size: 50px;
font-weight: 700;
background: linear-gradient(to right,rgb(255, 255, 255),rgb(246, 246, 245));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.slider .list .item .content h2 span {
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}
.slider .list .item .content p {
font-size: 18px;
line-height: 1.8;
font-style: italic;
opacity: 0.9;
}
@keyframes showContent {
to {
transform: translateY(0);
filter: blur(0);
opacity: 1;
}
}
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(2) {
transform: translateY(30px);
filter: blur(20px);
opacity: 0;
animation: showContent .5s .7s ease-in-out 1 forwards;
}
.slider .list .item.active h2 {
animation-delay: 1s;
}
.slider .list .item.active p:nth-child(2) {
animation-duration: 1.3s;
}
/* Navigation Arrows */
.arrows {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
z-index: 10;
padding: 0 20px;
}
.arrows button {
background: rgba(255, 255, 255, 0.6);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 24px;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
}
.arrows button:hover {
background: #ffd700;
color: #fff;
}
/* Thumbnails */
.thumbnail {
position: absolute;
bottom: 20px;
display: flex;
justify-content: center;
gap: 10px;
width: 100%;
padding: 0 20px;
z-index: 10;
}
.thumbnail .item {
width: 80px;
height: 80px;
border: 3px solid transparent;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.thumbnail .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnail .item.active {
border-color:rgba(255, 19, 19, 0.72);
transform: scale(1.1);
}
/* Media Queries */
@media (max-width: 768px) {
.slider .list .item .content {
left: 5%;
top: 15%;
max-width: 90%;
}
.slider .list .item .content h2 {
font-size: 15px;
}
.slider .list .item.active .content h2 {
font-size: 15px;
}
.slider .list .item .content p {
font-size: 16px;
}
.arrows button {
width: 40px;
height: 40px;
font-size: 20px;
}
.thumbnail .item {
width: 60px;
height: 60px;
}
}
@media (max-width: 480px) {
.slider .list .item .content {
top: 20%;
}
.slider .list .item .content h2 {
font-size: 28px;
}
.slider .list .item .content p {
font-size: 14px;
}
.arrows button {
width: 35px;
height: 35px;
font-size: 18px;
}
.thumbnail .item {
width: 50px;
height: 50px;
}
}
@media (max-width: 480px) {
/* Ukuran font untuk slide pertama di tampilan hp */
.slider .list .item:nth-child(1) .content h2 {
font-size: 30px !important; /* lebih kecil dari 28px sebelumnya */
}
.slider .list .item:nth-child(1) .content p {
font-size: 20px !important; /* lebih kecil dari 14px sebelumnya */
}
.slider .list .item:nth-child(2) .content h2 {
font-size: 30px !important; /* lebih kecil dari 28px sebelumnya */
}
.slider .list .item:nth-child(2) .content p {
font-size: 15px !important; /* lebih kecil dari 14px sebelumnya */
}
.slider .list .item:nth-child(3) .content h2 {
font-size: 30px !important; /* lebih kecil dari 28px sebelumnya */
}
.slider .list .item:nth-child(3) .content p {
font-size: 20px !important; /* lebih kecil dari 14px sebelumnya */
}
.slider .list .item:nth-child(4) .content h2 {
font-size: 30px !important; /* lebih kecil dari 28px sebelumnya */
}
.slider .list .item:nth-child(4) .content p {
font-size: 20px !important; /* lebih kecil dari 14px sebelumnya */
}
.slider .list .item:nth-child(5) .content h2 {
font-size: 30px !important; /* lebih kecil dari 28px sebelumnya */
}
.slider .list .item:nth-child(5) .content p {
font-size: 20px !important; /* lebih kecil dari 14px sebelumnya */
}
}
/* slide bar end */
.pmb-section {
background:rgb(255, 255, 255) url('img/worldmap-1.png') no-repeat center;
background-size: cover;
color:rgb(163, 2, 2);
padding: 80px 20px;
text-align: left;
position: relative;
}
.pmb-section .container {
max-width: 800px;
margin: 0 auto;
/* height: 40vh; <-- Hapus ini karena bikin konten pendek di layar kecil */
padding: 20px;
}
.pmb-section .year {
font-size: 20px;
display: block;
margin-bottom: 10px;
opacity: 0.9;
}
.pmb-section h2 {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
}
.pmb-section p {
font-size: 18px;
line-height: 1.7;
margin-bottom: 10px;
text-align: Justify;
}
.pmb-section p a {
color: #7A1717;
text-decoration: underline;
}
.pmb-section p strong {
color: #7A1717;
}
.logo-wrap {
margin-bottom: 40px;
}
.logo-wrap img {
width: 120px;
max-width: 100%;
}
/* Animasi */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 1;
transform: scale(1);
}
}
.carousel-item img {
width: 100%;
height: auto;
object-fit: cover;
}
/* Tambahan: responsive iframe */
.ratio iframe {
width: 100%;
height: 100%;
}
/* Responsiveness tambahan */
@media (max-width: 768px) {
.pmb-section h2 {
font-size: 28px;
}
.pmb-section p {
font-size: 16px;
}
.pmb-section .year {
font-size: 16px;
}
.fw-bold.text-dark.mb-3 {
font-size: 20px;
}
}
/* Tombol arrow Bootstrap dengan background bulat */
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 50%;
padding: 10px;
width: 40px; /* tambah lebar */
height: 40px; /* tambah tinggi */
background-size: 30px 30px; /* sesuaikan ukuran ikon agar proporsional */
}
.carousel-control-prev {
left: -60px; /* geser ke kiri luar card */
}
.carousel-control-next {
right: -60px; /* geser ke kanan luar card */
}
/* Sesuaikan ukuran dan posisi tombol di layar kecil */
@media (max-width: 576px) {
.carousel-control-prev,
.carousel-control-next {
top: 90%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
.carousel-control-prev {
left: 20px;
}
.carousel-control-next {
right: 20px;
}
}
.carousel-item {
padding: 30px;
}
.carousel-item .row {
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
padding: 30px;
}
.accordion-item {
border: 2px solid rgb(186, 9, 9) !important; /* Tambahkan !important agar override */
border-radius: 8px;
overflow: hidden; /* Agar border tetap rapi meskipun ada rounding */
box-shadow: none !important; /* Hindari efek bayangan default */
}
/* Warna marun dan font tebal untuk semua accordion-button */
.accordion-button {
font-weight: 700;
color: #800000 !important; /* merah marun */
background-color: #fff !important;
border: 1px solid !important;
border-radius: 5px;
box-shadow: none !important;
}
/* Saat accordion terbuka, tetap merah marun dan tanpa warna biru */
.accordion-button:not(.collapsed) {
color: #800000 !important;
background-color: #fff !important;
box-shadow: none !important;
border-color:rgb(0, 0, 0) !important;
}
/* Hilangkan panah default Bootstrap */
.accordion-button::after {
background-image: none !important;
transform: none !important;
}
/* Hilangkan efek fokus biru */
.accordion-button:focus {
box-shadow: none !important;
border-color:rgb(0, 0, 0) !important;
}
/* Data Count Section */
#data-count {
padding: 50px 0;
}
#data-count .counter {
padding: 20px;
background: #f8f9fa;
border-radius: 16px;
margin-bottom: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
#data-count .counter h1 {
font-size: 40px;
margin: 10px 0;
font-weight: bold;
}
#data-count .counter h5 {
font-size: 18px;
margin-top: 5px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#data-count .counter {
padding: 15px;
}
#data-count .counter h1 {
font-size: 32px;
}
#data-count .counter h5 {
font-size: 16px;
}
}
@media (max-width: 576px) {
#data-count .counter {
padding: 12px;
}
#data-count .counter h1 {
font-size: 28px;
}
#data-count .counter h5 {
font-size: 14px;
}
}
.text-warning {
color:rgb(162, 7, 7);
}
.section-title {
font-size: 32px;
font-weight: 700;
color: #1b1f6b; /* Warna biru tua seperti pada gambar */
text-align: center;
position: relative;
display: inline-block;
}
.underline::after {
content: "";
display: block;
width: 100px; /* Panjang garis */
height: 5px; /* Tebal garis */
margin: 10px auto 0;
background: linear-gradient(to right, #f44336, #ff9800); /* Merah ke oranye */
border-radius: 10px;
}
</style>
</head>
<body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #f4f4f4;
}
.navbar {
background-color: #fff;
padding: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-brand img {
height: 55px;
}
.navbar-toggler {
border: none;
}
/* Navbar Links */
.navbar-nav {
gap: 16px;
}
.navbar-nav .nav-link {
color: #7A1717;
font-weight: 400;
font-size: 15px;
transition: color 0.3s ease;
}
/* Active dan Hover style untuk navbar link */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
color: #E60000; /* Merah yang mencolok */
font-weight: 600;
}
/* Tombol Daftar */
.btn-daftar {
background-color: #7A1717;
color: #fff;
font-weight: 500;
border-radius: 8px;
padding: 6px 16px;
transition: background-color 0.3s ease;
align-items: center;
}
.btn-daftar:hover {
background-color: #A02020;
color: #fff;
}
/* Dropdown item active */
.dropdown-item.active,
.dropdown-item:hover {
background-color: #f8f9fa;
font-weight: 600;
color: #E60000;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container px-0"> <!-- px-4 buat ngasih sedikit ruang kiri-kanan -->
<!-- Logo -->
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="img/logo-1.png" alt="Logo" height="50" class="d-inline-block align-text-top">
</a>
<!-- Toggle buat mobile -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu navigasi -->
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav align-items-lg-center"> <!-- ms-auto buat dorong ke kanan -->
<li class="nav-item" style="margin-top:7px;">
<a class="nav-link active text-danger" href="index.php">Beranda</a>
</li>
<li class="nav-item dropdown" style="margin-top:7px;">
<a class="nav-link dropdown-toggle text-dark" href="#" role="button" data-bs-toggle="dropdown">
Tentang ITB AD
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item " href="tentang-kami.php">Tentang Kami</a></li>
<li><a class="dropdown-item " href="tim-kami.php">Tim Kami</a></li>
<li><a class="dropdown-item " href="mitra-kami.php">Mitra Kami</a></li>
<li><a class="dropdown-item " href="lulusan-kami.php">Lulusan Kami</a></li>
</ul>
</li>
<li class="nav-item dropdown"style="margin-top:7px;">
<a class="nav-link dropdown-toggle text-dark" href="#" role="button" data-bs-toggle="dropdown">
Program Akademik
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item " href="FEB.php">Fakultas Ekonomi dan Bisnis</a></li>
<li><a class="dropdown-item " href="FTD.php">Fakultas Teknik dan Desain</a></li>
<li><a class="dropdown-item" href="https://pascasarjana.itb-ad.ac.id">Sekolah Pasca Sarjana</a></li>
</ul>
</li>
<li class="nav-item dropdown"style="margin-top:7px;">
<a class="nav-link dropdown-toggle text-dark" href="#" role="button" data-bs-toggle="dropdown">
Kehidupan Kampus
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item " href="kehidupan-kampus.php">Kehidupan Kampus</a></li>
<li><a class="dropdown-item " href="kehidupan-sekitar-kampus.php">Kehidupan Sekitar Kampus</a></li>
<li><a class="dropdown-item " href="fasilitas.php">Fasilitas Kampus</a></li>
<li><a class="dropdown-item " href="all-berita.php">Berita</a></li>
</ul>
</li>
<li class="nav-item" style="margin-top:7px;">
<a class="nav-link text-dark" href="kontak-kami.php">Kontak</a>
</li>
<!-- Tombol Pendaftaran -->
<li class="nav-item ms-lg-3">
<a href="https://admission.itb-ad.ac.id" class="btn btn-daftar">Pendaftaran</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
<div class="slider">
<!-- list Items -->
<div class="list">
<div class="item active">
<img src="img/1.jpg">
<div class="content">
<h2 style="font-family:'Montserrat'; font-size:50px;" >
<span>Official Website</span><br>
Institut Teknologi dan Bisnis
Ahmad Dahlan
</h2>
<p>
"Kampus Cerdas, kawah candradimuka membangun jiwa-jiwa socio technopreneur"
</p>
</div>
</div>
<div class="item">
<img src="img/banner.jpg">
<div class="content">
<h2 style="font-family:'Montserrat'; font-size:50px;" >Tahukah Kamu ?</h2>
<p>ITB Ahmad Dahlan hadir mengusung spirit menjadi Socio-Technopreneur University.
Ini artinya, kampus ini diharapkan menjadi kawahcandradimuka
dalam melahirkan entrepreneur sejati (saudagar).</p>
</div>
</div>
<div class="item">
<img src="img/banner1.jpg">
<div class="content">
<h2 style="font-family:'Montserrat'; font-size:50px;" >Institut Teknologi dan Bisnis Ahmad Dahlan</h2>
<p>
Memiliki 2 Fakultas, 8 Program Studi, dan 1 Sekolah Pasca Sarjana. Semuanya telah
terakreditasi B (Sangat Baik).
</p>
</div>
</div>
<div class="item">
<img src="img/12.jpg">
<div class="content">
<h2 style="font-family:'Montserrat'; font-size:50px;" >Kampus Kami</h2>
<p>
ITB Ahmad Dahlan memiliki 2 Gedung Kampus. Kampus Pusat berada di Cirendeu, Ciputat Timur.
Sedangkan Kampus B berada di Karawaci.
</p>
</div>
</div>
<div class="item">
<img src="img/wisuda.jpg">
<div class="content">
<h2 style="font-family:'Montserrat'; font-size:50px;">Mari Bergabung Bersama Kami ! </h2>
<p>
Daftarkan diri kalian untuk menjadi Mahasiswa di ITB Ahmad Dahlan.
Bersama ITB-AD guncangkan dunia bisnis dan teknologi.
</p>
</div>
</div>
</div>
<!-- button arrows -->
<div class="arrows">
<button id="prev">
< </button>
<button id="next">></button>
</div>
<!-- thumbnail -->
<div class="thumbnail">
<div class="item active">
<img src="img/1.jpg">
</div>
<div class="item">
<img src="img/banner.jpg">
</div>
<div class="item">
<img src="img/banner1.jpg">
</div>
<div class="item">
<img src="img/12.jpg">
</div>
<div class="item">
<img src="img/wisuda.jpg">
</div>
</div>
</div>
<section class="py-5 bg-white">
<div class="container" style="margin-top:20px;">
<div class="row align-items-center">
<!-- Video -->
<div class="col-md-6 mb-5 mb-md-0" data-aos="fade-right" data-aos-duration="1500">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/h4AEHNzBri4"
title="Company Profile ITB Ahmad Dahlan"
allowfullscreen>
</iframe>
</div>
</div>
<!-- Text Content -->
<div class="col-md-6" style="text-align:justify;" data-aos="fade-left" data-aos-duration="1500">
<span class="badge bg-danger mb-3">Filosofi ITB-AD</span>
<h2 class="fw-bolder fs-4 text-dark mb-3">
Kampus Cerdas, kawah candradimuka membangun jiwa-jiwa socio technopreneur
</h2>
<p class="text-muted mb-4">
Institut Teknologi dan Bisnis Ahmad Dahlan (ITB-AD) merupakan perguruan tinggi swasta
yang berlokasi di Tangerang Selatan, Banten. Didirikan pada 1 Januari 1968 dengan
nama Akademi Bank Muhammadiyah (ABM), institusi ini bertujuan untuk meningkatkan
literasi keuangan umat Islam di Indonesia. Tokoh-tokoh nasional seperti
Mr. Sjafruddin Prawiranegara, Prof. Dr. M. Arsjad Anwar, MBA,
dan Drs. Sofyan Tandjung berperan penting dalam pendiriannya.
</p>
<a href="tujuan-kami.php" class="btn btn-danger rounded-pill px-4">
Read More
</a>
</div>
</div>
</div>
</section>
<section class="pmb-section">
<div class="container" data-aos="zoom-in" data-aos-duration="1500">
<span class="year">2025</span>
<h2>Penerimaan Mahasiswa Baru</h2>
<p>Pendaftaran Mahasiswa Baru Institut Teknologi dan Bisnis Ahmad Dahlan Jakarta
tahun ajaran 2025/2026 telah dibuka, anda dapat mengunjungi counter pendaftaran yang
ada di Kampus kami atau dapat mengakses <a href="https:/admission.itb-ad.ac.id">Pendaftaran Online</a>
untuk keterangan lebih lanjut. Anda juga dapat menghubungi <a href="https://wa.me/+6285891195646">
<strong>Call Center </strong></a>
kami untuk informasi lebih lanjut.</p>
</div>
</section>
<!--- Fasilitas --->
<section class="py-5 bg-light">
<div class="container">
<div class="text-center" data-aos="fade-down" data-aos-duration="1500">
<h2 class="section-title underline">Fasilitas Kami</h2>
</div>
<div id="fasilitasCarousel" class="carousel slide" style="text-align:justify;" data-bs-ride="carousel" data-aos="fade-up" data-aos-duration="1500">
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="row align-items-center">
<div class="col-md-6">
<span class="badge rounded-pill bg-light text-dark px-3 py-2 mb-3" style="background-color: #f0d9e7; color: #7A1697;">
OUR FACILITIES
</span>
<h2 class="fw-bold text-dark">Ruang Kelas Digital</h2>
<p class="fw-semibold" style="color:rgb(156, 9, 9);">"Serunya Belajar Bareng di Ruang Kelas Kolaboratif"</p>
<p class="text-muted">
Di ITB Ahmad Dahlan, kamu nggak cuma sekadar duduk dengerin dosen ngomong. Ruang kelas di sini dirancang
interaktif buat diskusi seru, tukar ide, dan kerja bareng tim. Suasana belajarnya hidup,
dinamis, dan jauh dari kata membosankan!
</p>
</div>
<div class="col-md-6">
<img src="img/kelas.jpg" class="d-block w-100 rounded shadow" alt="Kelas 1">
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-6">
<span class="badge rounded-pill bg-light text-dark px-3 py-2 mb-3" style="background-color: #f0d9e7; color: #7A1697;">
OUR FACILITIES
</span>
<h2 class="fw-bold text-dark">Laboratorium Komputer</h2>
<p class="fw-semibold" style="color:rgb(156, 9, 9);">"Tempat Eksplorasi Teknologi Terkini"</p>
<p class="text-muted">
Lab komputer kami dilengkapi dengan perangkat terbaru dan koneksi cepat untuk mendukung aktivitas coding, desain grafis, dan pembelajaran digital lainnya.
</p>
</div>
<div class="col-md-6">
<img src="img/labkom.jpg" class="d-block w-100 rounded shadow" alt="Kelas 2">
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-6">
<span class="badge rounded-pill bg-light text-dark px-3 py-2 mb-3" style="background-color: #f0d9e7; color: #7A1697;">
OUR FACILITIES
</span>
<h2 class="fw-bold text-dark">Ruang Podcast</h2>
<p class="fw-semibold" style="color: rgb(156, 9, 9);">"Kembangkan Ide dan Kolaborasi"</p>
<p class="text-muted">
Disediakan untuk mahasiswa melakukan diskusi kelompok, mengerjakan proyek bersama, dan berkumpul dalam suasana santai namun produktif.
</p>
</div>
<div class="col-md-6">
<img src="img/podcast.jpg" class="d-block w-100 rounded shadow" alt="Kelas 3">
</div>
</div>
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#fasilitasCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#fasilitasCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!--- Faq --->
<section id="faq" class="py-5 bg-white" >
<div class="container">
<div class="text-center mb-4" data-aos="fade-down" data-aos-duration="1500">
<h2 class="section-title underline">Faq</h2>
</div>
<div class="row" data-aos="fade-up" data-aos-duration="1500">
<!-- Kolom Kiri -->
<div class="col-md-6">
<div class="accordion" id="faqLeft">
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
Bagaimana cara mendapatkan informasi pendaftaran?
</button>
</h2>
<div id="collapse1" class="accordion-collapse collapse show" data-bs-parent="#faqLeft">
<div class="accordion-body">
Informasi pendaftaran lengkap dapat kamu akses melalui halaman resmi ITB Ahmad Dahlan atau dengan menghubungi admin via WhatsApp.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
Bagaimana prosedur mendaftar di ITB Ahmad Dahlan?
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#faqLeft">
<div class="accordion-body">
Kamu bisa mendaftar secara online melalui website resmi, atau datang langsung ke kampus untuk bantuan pendaftaran offline.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
Apa itu ITB Ahmad Dahlan?
</button>
</h2>
<div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#faqLeft">
<div class="accordion-body">
ITB Ahmad Dahlan adalah institusi pendidikan tinggi yang mengedepankan inovasi, kolaborasi, dan pengembangan potensi mahasiswa secara menyeluruh.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4">
Kenapa harus memilih ITB Ahmad Dahlan?
</button>
</h2>
<div id="collapse4" class="accordion-collapse collapse" data-bs-parent="#faqLeft">
<div class="accordion-body">
Karena ITB Ahmad Dahlan memiliki pendekatan pembelajaran aktif, dosen berpengalaman, serta fasilitas kampus yang modern dan lengkap.
</div>
</div>
</div>
</div>
</div>
<!-- Kolom Kanan -->
<div class="col-md-6">
<div class="accordion" id="faqRight">
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5">
Kurikulum seperti apa yang diterapkan di ITB Ahmad Dahlan?
</button>
</h2>
<div id="collapse5" class="accordion-collapse collapse" data-bs-parent="#faqRight">
<div class="accordion-body">
Kurikulum kami dirancang adaptif terhadap kebutuhan industri, teknologi, dan pengembangan karakter mahasiswa.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq6">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6">
Apa maksud dari slogan "Jadi Versi Terbaik Diri"?
</button>
</h2>
<div id="collapse6" class="accordion-collapse collapse" data-bs-parent="#faqRight">
<div class="accordion-body">
Artinya kamu akan dibekali tidak hanya secara akademis, tapi juga secara karakter, kepemimpinan, dan kreativitas.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq7">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse7">
Apa saja fasilitas di ITB Ahmad Dahlan?
</button>
</h2>
<div id="collapse7" class="accordion-collapse collapse" data-bs-parent="#faqRight">
<div class="accordion-body">
Fasilitas kami meliputi ruang kelas kolaboratif, laboratorium modern, ruang podcast, perpustakaan, dan coworking space.
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="faq8">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse8">
Apakah ada kelas malam/karyawan di ITB Ahmad Dahlan?
</button>
</h2>
<div id="collapse8" class="accordion-collapse collapse" data-bs-parent="#faqRight">
<div class="accordion-body">
Ya, tersedia kelas khusus untuk karyawan dengan jadwal yang fleksibel dan disesuaikan kebutuhan mahasiswa pekerja.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tombol Lihat Lebih Banyak
<div class="text-center mt-4">
<a href="#" class="btn btn-warning text-dark fw-semibold px-4 py-2">
Lihat Lebih Banyak →
</a>
</div>-->
</div>
</section>
<!--- Beasiswa --->
<section class="py-1 bg-light">
<div class="container">
<div class="text-center " data-aos="fade-down" data-aos-duration="1500">
<div class="text-center mt-4">
<h2 class="section-title underline">Program Beasiswa</h2>
</div>
<p class="text-muted mb-5">Beasiswa unggulan untuk generasi berprestasi menuju pendidikan terbaik dan pribadi unggul.</p>
</div>
<div class="swiper mySwiper" data-aos="fade-right" data-aos-duration="1500">
<div class="swiper-wrapper">
<!-- CARD 1 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-2.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 2 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-3.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 3 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-4.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 4 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-6.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 5 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-7.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 6 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-8.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 7 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-10.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 9 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-11.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
<!-- CARD 10 -->
<div class="swiper-slide" style="max-width:300px;">
<div class="card h-80 shadow-sm border-0" style="border-radius: 15px;">
<img src="img/flyer-12.jpg" class="card-img-top img-fluid" style="height: 400px; border-radius: 15px 15px 0 0;" alt="Gambar A4">
<!-- <div class="card-body">
<h5 class="card-title fw-bold">Akses Market Insight</h5>
<p class="card-text text-muted" style="font-size: 14px;">Berkolaborasi dengan platform riset global untuk wawasan industri.</p>
<a href="#" class="text-decoration-none text-primary fw-semibold small">Learn More →</a>
</div> -->
</div>
</div>
</div>
</div>
<br>
<div class="text-center mb-4 " data-aos="fade-left" data-aos-duration="1500">
<p class="text-muted mb-5">Untuk informasi lebih lanjut mengenai beasiswa diatas dapat menghubungi nomor berikut
<a href="https://wa.me/+6285891195646">085891195646</a></p>
</div>
</div>
</section>
<!---- Data Count -->
<section id="data-count">
<div class="container">
<div class="text-center " data-aos="fade-down" data-aos-duration="1500">
<div class="text-center" style="margin-bottom:30px;">
<h2 class="section-title underline">ITB AD Dalam Angka</h2>
</div>
</div>
<div class="row text-center">
<div class="col-6 col-md-3 ">
<div class="counter">
<h3><i class="bi bi-people-fill fs-2 text-danger"></i></h3>
<h1><span data-count="1500">0</span>+</h1>
<h5 class="text-black">Mahasiswa</h5>
</div>
</div>
<div class="col-6 col-md-3 ">
<div class="counter">
<h3><i class="bi bi-person-badge-fill fs-2 text-danger"></i></h3>
<h1><span data-count="200">0</span>+</h1>
<h5 class="text-black">Dosen</h5>
</div>
</div>
<div class="col-6 col-md-3 ">
<div class="counter">
<h3><i class="bi bi-mortarboard-fill fs-2 text-danger"></i></h3>
<h1><span data-count="9">0</span></h1>
<h5 class="text-black">Program Studi</h5>
</div>
</div>
<div class="col-6 col-md-3 ">
<div class="counter">
<h3><i class="bi bi-people-fill fs-2 text-danger"></i></h3>
<h1><span data-count="15000">0</span>+</h1>
<h5 class="text-black">Alumni</h5>
</div>
</div>
</div>
</div>
</section>
<div class="text-center mt-5" data-aos="fade-down" data-aos-duration="1500">
<h2 class="section-title underline">BERITA TERBARU</h2>
</div>
<div class="container my-5" data-aos="fade-up" data-aos-duration="1500">
<div class="row g-4">
<!-- Berita Utama -->
<div class="col-lg-8">
<div class="card h-100 shadow border-0">
<img src="admin/news-control/img/1755687031_1.jpg" class="card-img-top" alt="News Image" style="height: 320px; object-fit: cover; border-bottom:3px solid rgb(178, 14, 11);">
<div class="card-body">
<p class="text-muted mb-1">18 Aug 2025</p>
<h4 class="card-title">
<a href="detail_berita.php?id=46" class="text-decoration-none text-danger fw-bold">
ITB Ahmad Dahlan Jakarta Raih Penghargaan “Best University Support” dari FKKSS Tangerang Selatan </a>
</h4>
<p class="card-text">Tangerang Selatan, 18 Agustus 2025 — ITB Ahmad Dahlan Jakarta kembali menorehkan prestasi membanggakan dengan meraih Award kategori Best University ...</p>
</div>
</div>
</div>
<!-- Berita Kecil -->
<div class="col-lg-4 d-flex flex-column gap-3">
<div class="card shadow-sm border-0 d-flex flex-row" style="height: 100px;">
<img src="admin/news-control/img/1755660198_Selamat 17 Agustus 2025.jpg" class="img-fluid rounded-start" alt="Thumb" style="width: 100px; object-fit: cover;">
<div class="card-body p-2 d-flex flex-column justify-content-center">
<h6 class="card-title mb-1" style="font-size: 14px;">
<a href="detail_berita.php?id=45" class="text-decoration-none text-dark">
HUT Republik Indonesia ke 80 </a>
</h6>
<p class="card-text text-muted" style="font-size: 12px;">17 Aug 2025</p>
</div>
</div>
<div class="card shadow-sm border-0 d-flex flex-row" style="height: 100px;">
<img src="admin/news-control/img/1755164645_WhatsApp Image 2025-08-14 at 14.36.09.jpeg" class="img-fluid rounded-start" alt="Thumb" style="width: 100px; object-fit: cover;">
<div class="card-body p-2 d-flex flex-column justify-content-center">
<h6 class="card-title mb-1" style="font-size: 14px;">
<a href="detail_berita.php?id=43" class="text-decoration-none text-dark">
ITB Ahmad Dahlan Gelar Seleksi Beasiswa KIP Kuliah 2025 </a>
</h6>
<p class="card-text text-muted" style="font-size: 12px;">14 Aug 2025</p>
</div>
</div>
<div class="card shadow-sm border-0 d-flex flex-row" style="height: 100px;">
<img src="admin/news-control/img/1755654982_ITB Ahmad Dahlan Jakarta resmi menjalin kerja sama melalui penandatanganan Nota Kesepahaman (Mo.webp" class="img-fluid rounded-start" alt="Thumb" style="width: 100px; object-fit: cover;">
<div class="card-body p-2 d-flex flex-column justify-content-center">
<h6 class="card-title mb-1" style="font-size: 14px;">
<a href="detail_berita.php?id=44" class="text-decoration-none text-dark">
ITB Ahmad Dahlan Jakarta Jalin Kerjasama Dengan Pemerintah Kabupaten Konawe, Sulawesi Tenggara </a>
</h6>
<p class="card-text text-muted" style="font-size: 12px;">14 Aug 2025</p>
</div>
</div>
<div class="card shadow-sm border-0 d-flex flex-row" style="height: 100px;">
<img src="admin/news-control/img/1754624692_WhatsApp Image 2025-08-07 at 16.53.32.jpeg" class="img-fluid rounded-start" alt="Thumb" style="width: 100px; object-fit: cover;">
<div class="card-body p-2 d-flex flex-column justify-content-center">
<h6 class="card-title mb-1" style="font-size: 14px;">
<a href="detail_berita.php?id=35" class="text-decoration-none text-dark">
ITB Ahmad Dahlan Jakarta Jalin Kolaborasi Pendidikan dengan 33 SMA Kota Tangerang Selatan </a>
</h6>
<p class="card-text text-muted" style="font-size: 12px;">07 Aug 2025</p>
</div>
</div>
</div>
</div>
</div>
<!-- Tombol lihat semua artikel -->
<div class="text-center mb-4 ">
<a href="all-berita.php" class="btn btn-danger px-4 py-2 fw-semibold rounded-pill">
See All Articles →
</a>
</div>
<button onclick="scrollToTop()" id="btnTop">
<svg viewBox="0 0 36 36">
<g transform="rotate(-90 18 18)">
<path class="progress-bg" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"/>
<path class="progress" id="progress-path" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"/>
</g>
<text x="18" y="22" text-anchor="middle" font-size="13px" font-weight="700" fill="#c40000" font-family="Poppins">↑</text>
</svg>
</button>
<a href="https://wa.me/+6285891195646" class="wa-floating" target="_blank">
<img src="https://img.icons8.com/color/48/000000/whatsapp.png" alt="WhatsApp">
</a>
<div class="wa-bubble">Ada pertanyaan? Silakan hubungi kami</div>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
font-family: 'Poppins', sans-serif;
position: relative;
width: 100%;
height: auto;
padding-top: 50px;
background-color: #231f40;
}
.container-footer {
width: 90%;
max-width: 1320px;
margin: 0 auto;
padding: 0 12px;
}
.wrapper {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper .footer-col {
width: calc(20% - 20px);
margin: 0 15px;
}
.wrapper .footer-col:nth-child(1) {
width: calc(33% - 40px);
margin-right: 10px;
}
.wrapper .footer-col .logo-footer {
margin-bottom: 20px;
vertical-align: middle;
}
.wrapper .footer-col p {
margin-bottom: 20px;
font-size: 16px;
color: #fff;
font-style: italic;
}
.social {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.social .soc-icon a {
width: 38px;
height: 38px;
margin-right: 20px;
background-color: rgba(238, 238, 238, 0.5);
border-radius: 50%;
font-size: 18px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-out;
color: #eee;
}
.social .soc-icon:nth-child(1) a:hover {
background: linear-gradient(to bottom right, #6c4cc7 0%, #c52e8c 100%);
}
.social .soc-icon:nth-child(2) a:hover {
background-color: #ff0000;
}
.social .soc-icon:nth-child(3) a:hover {
background-color: #0d8af1;
}
.social .soc-icon:nth-child(4) a:hover {
background-color: #0073b2;
}
.wrapper .footer-col h6 {
color: #eee;
margin: 30px 0 20px;
font-size: 20px;
font-weight: 600;
}
.wrapper .footer-col .link .li a {
text-decoration: none;
color: #dedede;
font-size: 16px;
text-transform: capitalize;
line-height: 50px;
font-weight: 300;
transition: all 0.3s ease-out;
}
.wrapper .footer-col .link .li a:hover {
color: #ee3633;
}
.line-copyright {
padding: 20px 0;
border-top: 1px solid rgba(246, 243, 243, 0.8);
}
.line-copyright p {
color: #eee;
font-size: 15px;
font-weight: 500;
text-align: center;
}
@media (max-width: 1024px) {
.wrapper {
flex-direction: row;
justify-content: center;
gap: 20px;
}
.wrapper .footer-col {
width: calc(33% - 20px);
margin: 10px;
text-align: center;
}
.wrapper .footer-col:nth-child(1) {
width: 100%;
text-align: center;
}
}
@media (max-width: 768px) {
.wrapper {
flex-direction: column;
align-items: center;
text-align: center;
}
.wrapper .footer-col {
width: 100%;
margin: 15px 0;
}
.wrapper .footer-col h6 {
font-size: 18px;
}
.wrapper .footer-col p {
font-size: 14px;
}
.social {
justify-content: center;
}
.social .soc-icon a {
width: 35px;
height: 35px;
font-size: 16px;
margin-right: 15px;
}
}
@media (max-width: 480px) {
.wrapper .footer-col {
width: 100%;
text-align: center;
}
.wrapper .footer-col h6 {
font-size: 16px;
margin: 20px 0 15px;
}
.wrapper .footer-col p {
font-size: 13px;
}
.social .soc-icon a {
width: 30px;
height: 30px;
font-size: 14px;
margin-right: 10px;
}
.line-copyright p {
font-size: 13px;
}
}
</style>
</head>
<body>
<footer>
<div class="container-footer">
<div class="wrapper">
<div class="footer-col">
<a href="https:/itb-ad.ac.id">
<img src="./img/logo-2.png" alt=""
class="logo-footer" style="width: 180px; height:180px;">
</a>
<p >
"Kampus Cerdas, kawah candradimuka membangun jiwa-jiwa socio technopreneur"
</p>
<div class="social">
<div class="soc-icon" >
<a href=""><i class="bi bi-instagram"></i></a>
</div>
<div class="soc-icon" >
<a href=""><i class="bi bi-youtube"></i></a>
</div>
<div class="soc-icon" >
<a href=""><i class="bi bi-facebook"></i></a>
</div>
<div class="soc-icon" >
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="footer-col" >
<h6>Portal Kami</h6>
<div class="link">
<div class="li">
<a href="https://admission.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> Portal PMB</a>
</div>
<div class="li">
<a href="https://student.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> Portal Mahasiswa</a>
</div>
<div class="li">
<a href="https://lecturer.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> Portal Dosen</a>
</div>
<div class="li">
<a href="https://parents.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> Portal Orang Tua</a>
</div>
</div>
</div>
<div class="footer-col" style="margin-left:-30px;">
<h6>Layanan Kami</h6>
<div class="link">
<div class="li">
<a href="https://kemahasiswaan.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> Kemahasiswaan ITB AD</a>
</div>
<div class="li">
<a href="https://Perpustakaan.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> Perpustakaan ITB AD</a>
</div>
<div class="li">
<a href="https://psipp.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> PSIPP ITB AD</a>
</div>
<div class="li">
<a href="https://ched.itb-ad.ac.id/"><i class="fa-solid fa-angles-right"></i> CHED ITB AD</a>
</div>
</div>
</div>
<div class="footer-col" >
<h6>Kontak Kami </h6>
<div class="link">
<div class="li">
<a href="https://maps.app.goo.gl/yo3qvghkp9xc6CwP7"><i class="fa-solid fa-location-dot"></i>
Kampus Ciputat
</a>
</div>
<div class="li">
<a href="https://maps.app.goo.gl/6zehzz56nkXTjMnN7"><i class="fa-solid fa-location-dot"></i>
Kampus Karawaci
</a>
</div>
<div class="li">
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=info@itb-ad.ac.id" target="_blank"><i class="fa-solid fa-envelope"></i> info@itb-ad.ac.id</a>
</div>
<div class="li">
<a href=""><i class="fa-solid fa-phone"></i> (021) 7430930</a>
</div>
<div class="li">
<a href="https://wa.me/+6285891195646"><i class="fa-solid fa-phone"></i> 085891195646</a>
</div>
</div>
</div>
</div>
<div class="line-copyright">
<p>© 2024 ITB Ahmad Dahlan, All Right Reversed.</p>
</div>
</div>
</footer>
</body>
<!-- JS framework -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init({
offset: 30,
once: true
});
</script>
<!-- JS beasiswa -->
<script>
const swiper = new Swiper(".mySwiper", {
slidesPerView: 1.1,
spaceBetween: 16,
grabCursor: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
breakpoints: {
576: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
},
}
});
document.addEventListener('DOMContentLoaded', function () {
const counters = document.querySelectorAll('[data-count]');
const animateCounter = (element) => {
const target = +element.getAttribute('data-count');
let count = 0;
const increment = target / 200; // Mengatur kecepatan animasi
const updateCount = () => {
if (count < target) {
count += increment;
element.textContent = Math.ceil(count);
requestAnimationFrame(updateCount);
} else {
element.textContent = target;
}
};
// Tambahkan class untuk memulai animasi
element.classList.add('animate');
updateCount();
};
const handleIntersect = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const counters = entry.target.querySelectorAll('[data-count]');
counters.forEach(counter => {
if (!counter.classList.contains('counted')) {
animateCounter(counter);
counter.classList.add('counted');
}
});
}
});
};
const observer = new IntersectionObserver(handleIntersect, { threshold: 0.5 });
observer.observe(document.querySelector('#data-count'));
});
</script>
<!-- JS slider -->
<script>
let items = document.querySelectorAll('.slider .list .item');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let thumbnails = document.querySelectorAll('.thumbnail .item');
// config param
let countItem = items.length;
let itemActive = 0;
// event next click
next.onclick = function () {
itemActive = itemActive + 1;
if (itemActive >= countItem) {
itemActive = 0;
}
showSlider();
}
//event prev click
prev.onclick = function () {
itemActive = itemActive - 1;
if (itemActive < 0) {
itemActive = countItem - 1;
}
showSlider();
}
// auto run slider
let refreshInterval = setInterval(() => {
next.click();
}, 6000)
function showSlider() {
// remove item active old
let itemActiveOld = document.querySelector('.slider .list .item.active');
let thumbnailActiveOld = document.querySelector('.thumbnail .item.active');
itemActiveOld.classList.remove('active');
thumbnailActiveOld.classList.remove('active');
// active new item
items[itemActive].classList.add('active');
thumbnails[itemActive].classList.add('active');
// clear auto time run slider
clearInterval(refreshInterval);
refreshInterval = setInterval(() => {
next.click();
}, 5000)
}
// click thumbnail
thumbnails.forEach((thumbnail, index) => {
thumbnail.addEventListener('click', () => {
itemActive = index;
showSlider();
})
});
//Scroll navbar
const navBar = document.querySelector("nav");
window.addEventListener("scroll", () => {
console.log(window.scrollY);
const windowPosition = window.scrollY > 0;
navBar.classList.toggle("scrolling-active", windowPosition);
});
</script>
<!-- JS Fasilitas -->
<script>
var fasilitasCarousel = document.querySelector('#fasilitasCarousel');
var carousel = new bootstrap.Carousel(fasilitasCarousel, {
interval: 2000,
ride: 'carousel'
});
</script>
<!-- JS to top -->
<script>
window.onscroll = function() {
let btn = document.getElementById("btnTop");
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (scrollTop / height) * 100;
let progress = document.getElementById("progress-path");
if (scrollTop > 20) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
progress.style.strokeDashoffset = 100 - scrolled;
};
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
</script>
</body>
</html>
HTTP/1.1 200 OK Connection: Keep-Alive Keep-Alive: timeout=5, max=100 X-Powered-By: PHP/7.4.33 Content-Type: text/html; charset=UTF-8 Transfer-Encoding: chunked Content-Encoding: br Vary: Accept-Encoding Date: Sun, 24 Aug 2025 00:51:04 GMT Server: LiteSpeed