static-uptti/index.html
2022-11-10 14:52:46 +07:00

1180 lines
71 KiB
HTML

<!doctype html>
<html class="no-js" lang="id">
<!-- By WebDev team UPT Teknologi Informasi dan Komunikasi - Universitas Jember -->
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>UPT Teknologi Informasi dan Komunikasi - Universitas Jember</title>
<meta name="description" content="UPT Teknologi Informasi dan Komunikasi - Universitas Jember"/>
<meta name="keywords" content="unej, uptti, upttik, upt tik, upt ti, tik, teknologi informasi, sister, sfs, sft,sfl, sfs unej, jember, universitas jember"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/preloader.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/meanmenu.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/swiper-bundle.css">
<link rel="stylesheet" href="assets/css/backToTop.css">
<link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
<link rel="stylesheet" href="assets/css/fontAwesome5Pro.css">
<link rel="stylesheet" href="assets/css/elegantFont.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body oncontextmenu="return false;">
<!--[if lte IE 9]>
<!-- pre loader area start -->
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div class="loading-content">
<img class="loading-logo-text" src="assets/img/logo/logo-text-2.png" alt="">
<div class="loading-stroke">
<img class="loading-logo-icon" src="assets/img/logo/logo-icon.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- pre loader area END -->
<!-- back to top start -->
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<!-- back to top end -->
<!-- header area start -->
<header>
<div id="header-sticky" class="header__area header__transparent header__padding">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xxl-3 col-xl-3 col-lg-4 col-md-2 col-sm-4 col-6">
<div class="header__left d-flex">
<div class="logo">
<a href="index.html">
<img src="assets/img/logo/logo.png" alt="logo" width="200px" height="61px">
</a>
</div>
<div class="header__category d-none d-lg-block">
<nav>
<ul>
<li>
<a href="course-grid.html" class="cat-menu d-flex align-items-center">
<div class="cat-dot-icon d-inline-block">
<svg viewBox="0 0 276.2 276.2">
<g>
<g>
<path class="cat-dot" d="M33.1,2.5C15.3,2.5,0.9,17,0.9,34.8s14.5,32.3,32.3,32.3s32.3-14.5,32.3-32.3S51,2.5,33.1,2.5z"/>
<path class="cat-dot" d="M137.7,2.5c-17.8,0-32.3,14.5-32.3,32.3s14.5,32.3,32.3,32.3c17.8,0,32.3-14.5,32.3-32.3S155.5,2.5,137.7,2.5 z"/>
<path class="cat-dot" d="M243.9,67.1c17.8,0,32.3-14.5,32.3-32.3S261.7,2.5,243.9,2.5S211.6,17,211.6,34.8S226.1,67.1,243.9,67.1z"/>
<path class="cat-dot" d="M32.3,170.5c17.8,0,32.3-14.5,32.3-32.3c0-17.8-14.5-32.3-32.3-32.3S0,120.4,0,138.2S14.5,170.5,32.3,170.5z"/>
<path class="cat-dot" d="M136.8,170.5c17.8,0,32.3-14.5,32.3-32.3c0-17.8-14.5-32.3-32.3-32.3c-17.8,0-32.3,14.5-32.3,32.3 C104.5,156.1,119,170.5,136.8,170.5z"/>
<path class="cat-dot" d="M243,170.5c17.8,0,32.3-14.5,32.3-32.3c0-17.8-14.5-32.3-32.3-32.3s-32.3,14.5-32.3,32.3 C210.7,156.1,225.2,170.5,243,170.5z"/>
<path class="cat-dot" d="M33,209.1c-17.8,0-32.3,14.5-32.3,32.3c0,17.8,14.5,32.3,32.3,32.3s32.3-14.5,32.3-32.3S50.8,209.1,33,209.1z "/>
<path class="cat-dot" d="M137.6,209.1c-17.8,0-32.3,14.5-32.3,32.3c0,17.8,14.5,32.3,32.3,32.3c17.8,0,32.3-14.5,32.3-32.3 S155.4,209.1,137.6,209.1z"/>
<path class="cat-dot" d="M243.8,209.1c-17.8,0-32.3,14.5-32.3,32.3c0,17.8,14.5,32.3,32.3,32.3c17.8,0,32.3-14.5,32.3-32.3 S261.6,209.1,243.8,209.1z"/>
</g>
</g>
</svg>
</div>
<span>Akses Cepat Layanan</span>
</a>
<ul class="cat-submenu">
<li><a href="#">VPN</a></li>
<li><a href="#">Uhost</a></li>
<li><a href="#">Eduroam</a></li>
<li><a href="#">Wiki</a></li>
<li><a href="#">Web Staff</a></li>
<li><a href="#">Office 365</a></li>
<li><a href="#">Email Institusi</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-xxl-9 col-xl-9 col-lg-8 col-md-10 col-sm-8 col-6">
<div class="header__right d-flex justify-content-end align-items-center">
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li>
<a href="index.html">Beranda</a>
</li>
<li class="has-dropdown">
<a href="#">Profil</a>
<ul class="submenu">
<li><a href="#">Tentang UPT TIK</a></li>
<li><a href="#">Struktur Organisasi</a></li>
<li><a href="#">Visi dan Misi</a></li>
<li><a href="#">Rencana Strategis</a></li>
<li><a href="#">SDM</a></li>
</ul>
</li>
<li>
<a href="#">Fasilitas</a>
</li>
<li class="has-dropdown">
<a href="#">Layanan</a>
<ul class="submenu">
<li><a href="#">Aplikasi dan Perangkat Lunak</a></li>
<li><a href="#">Basis Data</a></li>
<li><a href="#">Infrastruktur Jaringan dan Perangkat Keras</a></li>
<li><a href="#">High Performance Computing</a></li>
<li><a href="#">Kerjasama</a></li>
<li><a href="#">Internet of Things</a></li>
<li><a href="#">Artificial Intelligence dan Machine Learning</a></li>
<li><a href="#">Administrasi</a></li>
</ul>
</li>
<li>
<a href="#">Kerjasama</a>
</li>
<li class="has-dropdown">
<a href="#">Aplikasi</a>
<ul class="submenu">
<li><a href="#">SISTER for Student (SFS)</a></li>
<li><a href="#">SISTER for Lecture (SFL)</a></li>
<li><a href="#">SISTER for Tendik (SFT)</a></li>
<li><a href="#">SISTER for Parent (SFP)</a></li>
<li><a href="#">Kawanda</a></li>
<li><a href="#">Tracer Study</a></li>
</ul>
</li>
<li><a href="#">Galeri</a></li>
</ul>
</nav>
</div>
<div class="header__btn ml-20 d-none d-sm-block">
<a href="https://uhost.unej.ac.id" target="_blank" class="e-btn">UHost</a>
</div>
<div class="sidebar__menu d-xl-none">
<div class="sidebar-toggle-btn ml-30" id="sidebar-toggle">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- header area end -->
<!-- cart mini area start -->
<div class="cartmini__area">
<div class="cartmini__wrapper">
<div class="cartmini__title">
<h4>Shopping cart</h4>
</div>
<div class="cartmini__close">
<button type="button" class="cartmini__close-btn"><i class="fal fa-times"></i></button>
</div>
<div class="cartmini__widget">
<div class="cartmini__inner">
<ul>
<li>
<div class="cartmini__thumb">
<a href="#">
<img src="assets/img/course/sm/cart-1.jpg" alt="">
</a>
</div>
<div class="cartmini__content">
<h5><a href="#">Strategy law and organization Foundation </a></h5>
<div class="product-quantity mt-10 mb-10">
<span class="cart-minus">-</span>
<input class="cart-input" type="text" value="1"/>
<span class="cart-plus">+</span>
</div>
<div class="product__sm-price-wrapper">
<span class="product__sm-price">$46.00</span>
</div>
</div>
<a href="#" class="cartmini__del"><i class="fal fa-times"></i></a>
</li>
<li>
<div class="cartmini__thumb">
<a href="#">
<img src="assets/img/course/sm/cart-2.jpg" alt="">
</a>
</div>
<div class="cartmini__content">
<h5><a href="#">Fundamentals of music theory Learn new</a></h5>
<div class="product-quantity mt-10 mb-10">
<span class="cart-minus">-</span>
<input class="cart-input" type="text" value="1"/>
<span class="cart-plus">+</span>
</div>
<div class="product__sm-price-wrapper">
<span class="product__sm-price">$32.00</span>
</div>
</div>
<a href="#" class="cartmini__del"><i class="fal fa-times"></i></a>
</li>
<li>
<div class="cartmini__thumb">
<a href="#">
<img src="assets/img/course/sm/cart-3.jpg" alt="">
</a>
</div>
<div class="cartmini__content">
<h5><a href="#">Strategy law and organization Foundation </a></h5>
<div class="product-quantity mt-10 mb-10">
<span class="cart-minus">-</span>
<input class="cart-input" type="text" value="1"/>
<span class="cart-plus">+</span>
</div>
<div class="product__sm-price-wrapper">
<span class="product__sm-price">$62.00</span>
</div>
</div>
<a href="#" class="cartmini__del"><i class="fal fa-times"></i></a>
</li>
</ul>
</div>
<div class="cartmini__checkout">
<div class="cartmini__checkout-title mb-30">
<h4>Subtotal:</h4>
<span>$113.00</span>
</div>
<div class="cartmini__checkout-btn">
<a href="cart.html" class="e-btn e-btn-border mb-10 w-100"> <span></span> view cart</a>
<a href="checkout.html" class="e-btn w-100"> <span></span> checkout</a>
</div>
</div>
</div>
</div>
</div>
<div class="body-overlay"></div>
<!-- cart mini area end -->
<!-- sidebar area start -->
<div class="sidebar__area">
<div class="sidebar__wrapper">
<div class="sidebar__close">
<button class="sidebar__close-btn" id="sidebar__close-btn">
<span><i class="fal fa-times"></i></span>
<span>close</span>
</button>
</div>
<div class="sidebar__content">
<div class="logo mb-40">
<a href="index.html">
<img src="assets/img/logo/logo.png" alt="logo">
</a>
</div>
<div class="mobile-menu fix"></div>
<div class="sidebar__search p-relative mt-40 ">
<form action="#">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fad fa-search"></i></button>
</form>
</div>
<div class="sidebar__cart mt-30">
<a href="#">
<div class="header__cart-icon">
<svg viewBox="0 0 24 24">
<circle class="st0" cx="9" cy="21" r="1"/>
<circle class="st0" cx="20" cy="21" r="1"/>
<path class="st0" d="M1,1h4l2.7,13.4c0.2,1,1,1.6,2,1.6h9.7c1,0,1.8-0.7,2-1.6L23,6H6"/>
</svg>
</div>
<span class="cart-item">2</span>
</a>
</div>
</div>
</div>
</div>
<!-- sidebar area end -->
<div class="body-overlay"></div>
<!-- sidebar area end -->
<main>
<!-- hero area start -->
<section class="hero__area hero__height d-flex align-items-center grey-bg-2 p-relative">
<div class="hero__shape">
<img class="hero-1-circle" src="assets/img/shape/hero/hero-1-circle.png" alt="">
<img class="hero-1-circle-2" src="assets/img/shape/hero/hero-1-circle-2.png" alt="">
<img class="hero-1-dot-2" src="assets/img/shape/hero/hero-1-dot-2.png" alt="">
</div>
<div class="container">
<div class="hero__content-wrapper mt-90">
<div class="row align-items-center">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="hero__content p-relative z-index-1">
<h3 class="hero__title">
<span>Pembaruan Aplikasi</span>
<span class="yellow-shape">SISTER <img src="assets/img/shape/yellow-bg.png" alt="yellow-shape"> </span>
for Tendik Universitas Jember.</h3>
<p>dengan teknologi Facial Recognition & Location-based Authentication.</p>
<a href="course-grid.html" class="e-btn">pelajari selengkapnya</a>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="hero__thumb d-flex p-relative">
<div class="hero__thumb-shape">
<img class="hero-1-dot" src="assets/img/shape/hero/hero-1-dot.png" alt="">
<img class="hero-1-circle-3" src="assets/img/shape/hero/hero-1-circle-3.png" alt="">
<img class="hero-1-circle-4" src="assets/img/shape/hero/hero-1-circle-4.png" alt="">
</div>
<div class="hero__thumb-big mr-30">
<img src="assets/img/hero/hero-1.jpg" alt="">
<div class="hero__quote hero__quote-animation">
<span>All New</span>
<h4>“SISTER for Tendik Universitas Jember</h4>
</div>
</div>
<div class="hero__thumb-sm mt-50 d-none d-lg-block">
<img src="assets/img/hero/hero-sm-1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- hero area end -->
<!-- category area start -->
<section class="category__area pt-120 pb-70">
<div class="container">
<div class="row align-items-end">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-8">
<div class="section__title-wrapper mb-45">
<h2 class="section__title">Aplikasi Mobile<br>Universitas <span class="yellow-bg">Jember <img src="assets/img/shape/yellow-bg-2.png" alt=""> </span>
</h2>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-4">
<div class="category__more mb-50 float-md-end fix">
<a href="course-grid.html" class="link-btn">
Lihat lainnya
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div class="category__item mb-30 transition-3 d-flex align-items-center">
<div class="category__icon mr-30">
<svg viewBox="0 0 512 512">
<g>
<path class="st0" d="M178.7,492H120c-55.2,0-100-44.8-100-100V120C20,64.8,64.8,20,120,20h58.7C123.7,20,81,64.8,81,120v272 C81,447.2,123.7,492,178.7,492z M355.5,204.8l18.9-85.5c4.8-24.1,16.7-46.3,34.1-63.7l35.4-35.4c-15.1-1.4-30.7,3.7-42.3,15.3 l-61.1,61.1c-17.4,17.4-29.3,39.6-34.1,63.7L295,217l56.7-11.3C352.9,205.4,354.2,205.1,355.5,204.8L355.5,204.8z"/>
<path class="st1" d="M299,512H120C53.8,512,0,458.2,0,392V120C0,53.8,53.8,0,120,0h183c11,0,20,9,20,20s-9,20-20,20H120 c-44.1,0-80,35.9-80,80v272c0,44.1,35.9,80,80,80h179c44.1,0,80-35.9,80-80V272c0-11,9-20,20-20s20,9,20,20v120 C419,458.2,365.2,512,299,512z M298.9,236.6l56.7-11.3c28.1-5.6,53.7-19.3,73.9-39.6l61.1-61.1c28.5-28.5,28.5-74.8,0-103.2 c-28.5-28.5-74.8-28.5-103.2,0l-61.1,61.1c-20.3,20.3-33.9,45.8-39.6,73.9l-11.3,56.7c-1.3,6.6,0.7,13.3,5.5,18.1 c3.8,3.8,8.9,5.9,14.1,5.9C296.3,237,297.6,236.9,298.9,236.6L298.9,236.6z M462.4,49.7c6.2,6.2,9.7,14.5,9.7,23.3 s-3.4,17.1-9.7,23.3l-61.1,61.1c-14.7,14.7-33.2,24.6-53.5,28.6l-27.3,5.4l5.4-27.3c4.1-20.3,14-38.8,28.6-53.5l61.1-61.1 c6.2-6.2,14.5-9.7,23.3-9.7S456.1,43.4,462.4,49.7L462.4,49.7z"/>
<path class="st2" d="M319,352H101c-11,0-20-9-20-20s9-20,20-20h218c11,0,20,9,20,20S330.1,352,319,352z M211,387 c-13.8,0-25,11.2-25,25s11.2,25,25,25s25-11.2,25-25S224.8,387,211,387z"/>
</g>
</svg>
</div>
<div class="category__content">
<h4 class="category__title"><a href="#">SISTER for Students</a></h4>
<p>Aplikasi untuk Mahasiswa</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div class="category__item mb-30 transition-3 d-flex align-items-center">
<div class="category__icon mr-30">
<svg viewBox="0 0 512 512">
<g>
<path class="st0" d="M111.3,491.6C60.1,487.1,20,444.2,20,392V223.7c0-31.2,14.6-60.6,39.4-79.5l136-103.7 c35.8-27.3,85.5-27.3,121.3,0l9.2,7c-24.6-2.4-49.8,4.2-70.5,20L93.6,190.8C85,197.4,80,207.5,80,218.3V419 C80,447.6,92,473.4,111.3,491.6L111.3,491.6z"/>
<path class="st1" d="M392,512H120C53.8,512,0,458.1,0,392V223.7c0-37.2,17.7-72.9,47.2-95.4l136-103.7 c42.8-32.7,102.7-32.7,145.5,0L372,57.5V32c0-11,9-20,20-20s20,9,20,20v65.9c0,7.6-4.3,14.5-11.1,17.9c-6.8,3.4-15,2.6-21-2 l-75.4-57.4c-28.6-21.8-68.5-21.8-97,0l-136,103.7c-19.7,15-31.5,38.8-31.5,63.6V392c0,44.1,35.9,80,80,80h272 c44.1,0,80-35.9,80-80V223.7c0-25.1-11.6-49-31.1-63.8c-8.8-6.7-10.5-19.2-3.8-28s19.3-10.5,28-3.8c29.3,22.4,46.9,58.1,46.9,95.6 V392C512,458.1,458.2,512,392,512z"/>
<path class="st2" d="M241,256c0,13.8-11.2,25-25,25s-25-11.2-25-25s11.2-25,25-25S241,242.2,241,256z M296,231 c-13.8,0-25,11.2-25,25c0,13.8,11.2,25,25,25s25-11.2,25-25C321,242.2,309.8,231,296,231z M216,311c-13.8,0-25,11.2-25,25 s11.2,25,25,25s25-11.2,25-25S229.8,311,216,311z M296,311c-13.8,0-25,11.2-25,25s11.2,25,25,25s25-11.2,25-25S309.8,311,296,311z"/>
</g>
</svg>
</div>
<div class="category__content">
<h4 class="category__title"><a href="#">SISTER for Lecture</a></h4>
<p>Aplikasi untuk Dosen</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div class="category__item mb-30 transition-3 d-flex align-items-center">
<div class="category__icon mr-30">
<svg viewBox="0 0 512 512">
<g>
<path class="st0" d="M81,392V120c0-55.2,44.8-100,100-100h-61C64.8,20,20,64.8,20,120v272c0,55.2,44.8,100,100,100h61 C125.8,492,81,447.2,81,392z"/>
<path class="st1" d="M392,512H120C53.8,512,0,458.2,0,392V120C0,53.8,53.8,0,120,0h208c11,0,20,9,20,20s-9,20-20,20H120 c-44.1,0-80,35.9-80,80v272c0,44.1,35.9,80,80,80h272c44.1,0,80-35.9,80-80V207c0-11,9-20,20-20s20,9,20,20v185 C512,458.2,458.2,512,392,512z M385.3,236.8l112.1-134c0,0,0-0.1,0.1-0.1c22.1-26.7,18.4-66.3-8.3-88.4s-66.3-18.4-88.4,8.3 l-0.1,0.1L290.5,158.4c-7,8.6-5.7,21.2,2.9,28.1c8.6,7,21.2,5.7,28.1-2.9L431.7,48.2c8-9.6,22.4-10.9,32-2.9c9.7,8,11,22.4,3,32 l-112,133.9c-7.1,8.5-6,21.1,2.5,28.2c3.7,3.1,8.3,4.7,12.8,4.7C375.7,244,381.4,241.6,385.3,236.8L385.3,236.8z"/>
<path class="st2" d="M169.5,433c-20.6,0-40.5-11.2-50.7-28.5c-8.7-14.8-9-31.6-0.9-46.3c10-18.1,15.8-34.9,21.3-51.1 c9.4-27.7,18.4-53.8,45.3-76.2c19.6-16.3,44.3-23.9,69.5-21.5c25.3,2.4,48.2,14.6,64.3,34.4c14,17.1,21.7,38.8,21.7,61.1 c0,39.4-23.7,74.5-66.7,99C242.2,421.6,201.4,433,169.5,433L169.5,433z M244.9,249c-12.7,0-24.9,4.4-34.9,12.7 c-18.3,15.2-24.5,33.3-33,58.4c-5.8,17-12.4,36.4-24.2,57.6c-0.6,1.1-1.7,3.1,0.4,6.6c2.6,4.4,9,8.8,16.3,8.8 C213.8,393.1,300,362,300,305c0-13.3-4.4-25.6-12.6-35.7c-9.4-11.4-22.6-18.5-37.2-19.9C248.4,249.1,246.6,249,244.9,249L244.9,249 z"/>
</g>
</svg>
</div>
<div class="category__content">
<h4 class="category__title"><a href="#">SISTER for Tendik</a></h4>
<p>Aplikasi untuk Tendik</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div class="category__item mb-30 transition-3 d-flex align-items-center">
<div class="category__icon mr-30">
<svg viewBox="0 0 512 512">
<g>
<path class="st0" d="M106.1,341.9V120c0-55.2,44.8-100,100-100h-61c-55.2,0-100,44.8-100,100v221.9c0,55.2,44.8,100,100,100h61 C150.8,441.8,106.1,397.1,106.1,341.9z"/>
<path class="st1" d="M442.8,512c-10.5,0-20.9-3.9-29.2-11.3l-49.9-43.9c-8.3-7.3-9.1-19.9-1.8-28.2c7.3-8.3,19.9-9.1,28.2-1.8 l49.9,43.9c0.1,0,0.1,0.1,0.2,0.1c0.5,0.4,1.9,1.7,4.3,0.7c2.4-1.1,2.4-3,2.4-3.7V120c0-44.1-35.9-80-80-80H145 c-44.1,0-80,35.9-80,80v221.9c0,44.1,35.9,80,80,80h154c11,0,20,9,20,20s-9,20-20,20H145c-66.1,0-120-53.8-120-120V120 C25.1,53.8,78.9,0,145,0h222c66.1,0,120,53.8,120,120v348c0,17.6-10,33-26.1,40.2C455,510.7,448.8,512,442.8,512L442.8,512z M350.7,264c-9.3-5.9-21.7-3.2-27.6,6.1c-0.2,0.4-25.1,38.7-67.1,38.7s-67.9-38.3-68.1-38.7c-5.9-9.3-18.3-12.1-27.6-6.1 c-9.3,5.9-12.1,18.3-6.1,27.6c1.5,2.3,38.2,57.2,101.8,57.2s99.3-54.9,100.8-57.2C362.8,282.3,360,270,350.7,264z"/>
<path class="st2" d="M334,211.9c-11,0-20-9-20-20v-55c0-11,9-20,20-20s20,9,20,20v55C354,203,345,211.9,334,211.9z M199,191.9v-55 c0-11-9-20-20-20s-20,9-20,20v55c0,11,9,20,20,20S199,203,199,191.9z"/>
</g>
</svg>
</div>
<div class="category__content">
<h4 class="category__title"><a href="#">SISTER for Parents</a></h4>
<p>Aplikasi untuk Orang Tua</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div class="category__item mb-30 transition-3 d-flex align-items-center">
<div class="category__icon mr-30">
<svg viewBox="0 0 512 512">
<g>
<path class="st0" d="M81.5,276c0-92.5,58.2-171.5,140-202.2c-9.2-7.6-21.6-11.2-34.4-8.2C91.4,87.7,20,173.5,20,276 c0,119.6,96.3,216,216,216c10.4,0,20.7-0.8,30.7-2.2C161.7,475,81.5,385.2,81.5,276z"/>
<path class="st1" d="M236,512c-63.2,0-122.5-24.5-167-69S0,339.2,0,276c0-53.6,18.5-106.2,52.1-147.9c33.1-41.1,79.4-70.2,130.5-82 c17.9-4.1,36.3,0,50.7,11.5s22.7,28.6,22.7,47V236c0,11,9,20,20,20h131.4c18.4,0,35.6,8.3,47,22.7c11.4,14.4,15.6,32.9,11.5,50.7 c-11.8,51.1-41,97.4-82,130.5C342.1,493.5,289.6,512,236,512L236,512z M196.1,84.6c-1.5,0-3,0.2-4.5,0.5 C102.3,105.7,40,184.2,40,276c0,52.5,20.3,101.8,57.3,138.7c36.9,37,86.2,57.3,138.7,57.3c91.8,0,170.3-62.3,190.9-151.6 c1.4-5.9,0-12-3.8-16.8s-9.6-7.6-15.7-7.6H276c-33.1,0-60-26.9-60-60V104.6c0-6.1-2.8-11.9-7.6-15.7 C204.8,86,200.5,84.6,196.1,84.6L196.1,84.6z M187.1,65.6L187.1,65.6L187.1,65.6z"/>
<path class="st2" d="M450.6,216h-93.2c-33.9,0-61.4-27.6-61.4-61.4V61.4c0-19.7,9.1-37.7,24.9-49.4c15.9-11.7,35.9-15,54.9-9.2 c31.3,9.7,60.1,27,83.2,50.2c23.2,23.2,40.5,51.9,50.2,83.2c5.9,18.9,2.5,38.9-9.3,54.8C488.3,206.9,470.3,216,450.6,216L450.6,216 z M357.4,40c-4.5,0-9,1.4-12.8,4.2c-5.5,4.1-8.7,10.3-8.7,17.2v93.2c0,11.8,9.6,21.4,21.4,21.4h93.2c6.9,0,13.1-3.2,17.2-8.7 c4.1-5.6,5.3-12.6,3.2-19.3c-7.8-25.1-21.7-48.2-40.3-66.8C412.1,62.7,389,48.8,363.9,41C361.8,40.4,359.6,40,357.4,40z"/>
</g>
</svg>
</div>
<div class="category__content">
<h4 class="category__title"><a href="#">Kawanda</a></h4>
<p>Aplikasi Penyimpanan Online</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div class="category__item mb-30 transition-3 d-flex align-items-center">
<div class="category__icon mr-30">
<svg viewBox="0 0 512 512">
<g>
<path class="st4" d="M438,512c-40.8,0-74-33.2-74-74V74c0-40.8,33.2-74,74-74s74,33.2,74,74v364C512,478.8,478.8,512,438,512z M438,40c-18.7,0-34,15.3-34,34v364c0,18.7,15.3,34,34,34s34-15.3,34-34V74C472,55.3,456.7,40,438,40z M74,512 c-40.8,0-74-33.2-74-74v-82c0-40.8,33.2-74,74-74s74,33.2,74,74v82C148,478.8,114.8,512,74,512z M74,322c-18.7,0-34,15.3-34,34v82 c0,18.7,15.3,34,34,34s34-15.3,34-34v-82C108,337.3,92.7,322,74,322z M256,512c-40.8,0-74-33.2-74-74V213c0-40.8,33.2-74,74-74 s74,33.2,74,74v225C330,478.8,296.8,512,256,512z M256,179c-18.7,0-34,15.3-34,34v225c0,18.7,15.3,34,34,34s34-15.3,34-34V213 C290,194.3,274.7,179,256,179z"/>
<path class="st5" d="M139,162.3c0-31.2-27.8-56.7-61.9-56.7c-14.5,0-25.1-7-25.1-16.7c0-9.2,7.4-16.7,16.5-16.7 c9.2,0,21.1,1,40.2,8.4c10.3,4,21.9-1.1,25.9-11.4s-1.1-21.9-11.4-25.9c-9.9-3.9-18.6-6.4-26.2-8.1V20C97,9,88,0,77,0S57,9,57,20 v13.5C31.3,38.9,12,61.7,12,89c0,32.3,28,56.7,65.1,56.7c11.9,0,21.9,7.6,21.9,16.7c0,8.9-8.3,16.7-17.7,16.7 c-7.3,0-25.8-2.7-43.9-9.9c-10.3-4.1-21.9,0.9-26,11.2s0.9,21.9,11.2,26c11.6,4.6,23.7,7.9,34.4,10V228c0,11,9,20,20,20s20-9,20-20 v-11.2c9.1-2.6,17.6-7.4,24.6-14.2C132.8,191.9,139,177.6,139,162.3L139,162.3z"/>
</g>
</svg>
</div>
<div class="category__content">
<h4 class="category__title"><a href="#">Tracer Study</a></h4>
<p>Aplikasi untuk Alumni</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- category area end -->
<!-- banner area start -->
<section class="banner__area pb-110">
<div class="container">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="banner__item p-relative mb-40" data-background="assets/img/banner/banner-bg-1.jpg">
<div class="banner__content">
<span>Free</span>
<h3 class="banner__title">
<a href="#">Germany Foundation <br> Document</a>
</h3>
<a href="course-grid.html" class="e-btn e-btn-2">View Courses</a>
</div>
<div class="banner__thumb d-none d-sm-block d-md-none d-lg-block">
<img src="assets/img/banner/banner-img-1.png" alt="">
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="banner__item p-relative mb-40" data-background="assets/img/banner/banner-bg-2.jpg">
<div class="banner__content">
<span class="orange">new</span>
<h3 class="banner__title">
<a href="#">Online Courses <br>From Eduka University</a>
</h3>
<a href="course-grid.html" class="e-btn e-btn-2">Find Out More</a>
</div>
<div class="banner__thumb banner__thumb-2 d-none d-sm-block d-md-none d-lg-block">
<img src="assets/img/banner/banner-img-2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- banner area end -->
<!-- course area start -->
<section class="course__area pt-115 pb-120 grey-bg">
<div class="container">
<div class="row align-items-end">
<div class="col-xxl-5 col-xl-6 col-lg-6">
<div class="section__title-wrapper mb-60">
<h2 class="section__title">Peningkatan Mutu SDM<br>dengan <span class="yellow-bg yellow-bg-big">Sertifikasi<img src="assets/img/shape/yellow-bg.png" alt=""></span> Keahlian</h2>
<p>Sertifikasi keahlian ditujukan untuk SDM UPT Teknologi Informasi dan Komunikasi dalam peningkatan pelayanan.</p>
</div>
</div>
<div class="col-xxl-7 col-xl-6 col-lg-6">
<div class="course__menu d-flex justify-content-lg-end mb-60">
<div class="masonary-menu filter-button-group">
<button class="active" data-filter="*">
Semua
<span class="tag">new</span>
</button>
<button data-filter=".cat1">Teknisi Jaringan</button>
<button data-filter=".cat2">Programmer Web</button>
<button data-filter=".cat3">Programmer Datrabase</button>
<button data-filter=".cat4">NOC</button>
</div>
</div>
</div>
</div>
<div class="row grid">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 grid-item cat1 cat2 cat4">
<div class="course__item white-bg mb-30 fix">
<div class="course__thumb w-img p-relative fix">
<a href="#">
<img src="assets/img/course/course-1.jpg" alt="">
</a>
<div class="course__tag">
<a href="#">NOC</a>
</div>
</div>
<div class="course__content">
<div class="course__meta d-flex align-items-center justify-content-between">
<div class="course__lesson">
<span><i class="far fa-book-alt"></i>Cisco</span>
</div>
<div class="course__rating">
<span><i class="icon_star"></i>10 personil</span>
</div>
</div>
<h3 class="course__title"><a href="#">Cisco Certified Network Associate.</a></h3>
<div class="course__teacher d-flex align-items-center">
<div class="course__teacher-thumb mr-15">
<img src="assets/img/course/teacher/teacher-1.jpg" alt="">
</div>
<h6><a href="#">Inixindo</a></h6>
</div>
</div>
<div class="course__more d-flex justify-content-between align-items-center">
<div class="course__status">
<span>CCNA</span>
</div>
<div class="course__btn">
<a href="#" class="link-btn">
Lihat Detail
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 grid-item cat2 cat3 cat4">
<div class="course__item white-bg mb-30 fix">
<div class="course__thumb w-img p-relative fix">
<a href="#">
<img src="assets/img/course/course-2.jpg" alt="">
</a>
<div class="course__tag">
<a href="#" class="sky-blue">Mechanical</a>
</div>
</div>
<div class="course__content">
<div class="course__meta d-flex align-items-center justify-content-between">
<div class="course__lesson">
<span><i class="far fa-book-alt"></i>72 Lesson</span>
</div>
<div class="course__rating">
<span><i class="icon_star"></i>4.5 (44)</span>
</div>
</div>
<h3 class="course__title"><a href="#">Fundamentals of music theory Learn new</a></h3>
<div class="course__teacher d-flex align-items-center">
<div class="course__teacher-thumb mr-15">
<img src="assets/img/course/teacher/teacher-2.jpg" alt="">
</div>
<h6><a href="#">Barry Tone</a></h6>
</div>
</div>
<div class="course__more d-flex justify-content-between align-items-center">
<div class="course__status d-flex align-items-center">
<span class="sky-blue">$32.00</span>
<span class="old-price">$68.00</span>
</div>
<div class="course__btn">
<a href="#" class="link-btn">
Know Details
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 grid-item cat3 cat4 cat3">
<div class="course__item white-bg mb-30 fix">
<div class="course__thumb w-img p-relative fix">
<a href="#">
<img src="assets/img/course/course-3.jpg" alt="">
</a>
<div class="course__tag">
<a href="#" class="green">Development</a>
</div>
</div>
<div class="course__content">
<div class="course__meta d-flex align-items-center justify-content-between">
<div class="course__lesson">
<span><i class="far fa-book-alt"></i>14 Lesson</span>
</div>
<div class="course__rating">
<span><i class="icon_star"></i>3.5 (55)</span>
</div>
</div>
<h3 class="course__title"><a href="#">Strategy law and organization Foundation</a></h3>
<div class="course__teacher d-flex align-items-center">
<div class="course__teacher-thumb mr-15">
<img src="assets/img/course/teacher/teacher-3.jpg" alt="">
</div>
<h6><a href="#">Elon Gated</a></h6>
</div>
</div>
<div class="course__more d-flex justify-content-between align-items-center">
<div class="course__status d-flex align-items-center">
<span class="green">$46.00</span>
<span class="old-price">$68.00</span>
</div>
<div class="course__btn">
<a href="#" class="link-btn">
Know Details
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 grid-item cat4 cat1 cat3">
<div class="course__item white-bg mb-30 fix">
<div class="course__thumb w-img p-relative fix">
<a href="#">
<img src="assets/img/course/course-4.jpg" alt="">
</a>
<div class="course__tag">
<a href="#" class="blue">Marketing</a>
</div>
</div>
<div class="course__content">
<div class="course__meta d-flex align-items-center justify-content-between">
<div class="course__lesson">
<span><i class="far fa-book-alt"></i>22 Lesson</span>
</div>
<div class="course__rating">
<span><i class="icon_star"></i>4.5 (42)</span>
</div>
</div>
<h3 class="course__title"><a href="#">The business Intelligence analyst Course 2022</a></h3>
<div class="course__teacher d-flex align-items-center">
<div class="course__teacher-thumb mr-15">
<img src="assets/img/course/teacher/teacher-4.jpg" alt="">
</div>
<h6><a href="#">Eleanor Fant</a></h6>
</div>
</div>
<div class="course__more d-flex justify-content-between align-items-center">
<div class="course__status d-flex align-items-center">
<span class="blue">$62.00</span>
<span class="old-price">$97.00</span>
</div>
<div class="course__btn">
<a href="#" class="link-btn">
Know Details
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 grid-item cat1 cat2 cat4">
<div class="course__item white-bg mb-30 fix">
<div class="course__thumb w-img p-relative fix">
<a href="#">
<img src="assets/img/course/course-5.jpg" alt="">
</a>
<div class="course__tag">
<a href="#" class="orange">Audio & Music</a>
</div>
</div>
<div class="course__content">
<div class="course__meta d-flex align-items-center justify-content-between">
<div class="course__lesson">
<span><i class="far fa-book-alt"></i>18 Lesson</span>
</div>
<div class="course__rating">
<span><i class="icon_star"></i>4.5 (37)</span>
</div>
</div>
<h3 class="course__title"><a href="#">Build your media and Public presence</a></h3>
<div class="course__teacher d-flex align-items-center">
<div class="course__teacher-thumb mr-15">
<img src="assets/img/course/teacher/teacher-5.jpg" alt="">
</div>
<h6><a href="#">Pelican Steve</a></h6>
</div>
</div>
<div class="course__more d-flex justify-content-between align-items-center">
<div class="course__status d-flex align-items-center">
<span class="orange">$62.00</span>
<span class="old-price">$97.00</span>
</div>
<div class="course__btn">
<a href="#" class="link-btn">
Know Details
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 grid-item cat2 cat3">
<div class="course__item white-bg mb-30 fix">
<div class="course__thumb w-img p-relative fix">
<a href="#">
<img src="assets/img/course/course-6.jpg" alt="">
</a>
<div class="course__tag">
<a href="#" class="pink">UX Design</a>
</div>
</div>
<div class="course__content">
<div class="course__meta d-flex align-items-center justify-content-between">
<div class="course__lesson">
<span><i class="far fa-book-alt"></i>13 Lesson</span>
</div>
<div class="course__rating">
<span><i class="icon_star"></i>4.5 (72)</span>
</div>
</div>
<h3 class="course__title"><a href="#">Creative writing through Storytelling</a></h3>
<div class="course__teacher d-flex align-items-center">
<div class="course__teacher-thumb mr-15">
<img src="assets/img/course/teacher/teacher-6.jpg" alt="">
</div>
<h6><a href="#">Shahnewaz Sakil</a></h6>
</div>
</div>
<div class="course__more d-flex justify-content-between align-items-center">
<div class="course__status d-flex align-items-center">
<span class="pink">$46.00</span>
<span class="old-price">$72.00</span>
</div>
<div class="course__btn">
<a href="#" class="link-btn">
Know Details
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- course area end -->
<!-- events area start -->
<section class="events__area pt-115 pb-120 p-relative">
<div class="events__shape">
<img class="events-1-shape" src="assets/img/events/events-shape.png" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-xxl-4 offset-xxl-4">
<div class="section__title-wrapper mb-60 text-center">
<h2 class="section__title">Current <span class="yellow-bg yellow-bg-big">Events<img src="assets/img/shape/yellow-bg.png" alt=""></span></h2>
<p>We found 13 events available for you.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xxl-10 offset-xxl-1 col-xl-10 offset-xl-1 col-lg-10 offset-lg-1">
<div class="events__item mb-10 hover__active">
<div class="events__item-inner d-sm-flex align-items-center justify-content-between white-bg">
<div class="events__content">
<div class="events__meta">
<span>Jun 14, 2022</span>
<span>12:00 am - 2:30 pm</span>
<span>New York</span>
</div>
<h3 class="events__title"><a href="#">Digital transformation conference</a></h3>
</div>
<div class="events__more">
<a href="#" class="link-btn">
View More
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-10 offset-xxl-1 col-xl-10 offset-xl-1 col-lg-10 offset-lg-1">
<div class="events__item mb-10 hover__active active">
<div class="events__item-inner d-sm-flex align-items-center justify-content-between white-bg">
<div class="events__content">
<div class="events__meta">
<span>April 10, 2022</span>
<span>9:00 am - 5:00 pm</span>
<span>Mindahan</span>
</div>
<h3 class="events__title"><a href="#">World education day conference</a></h3>
</div>
<div class="events__more">
<a href="#" class="link-btn">
View More
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-10 offset-xxl-1 col-xl-10 offset-xl-1 col-lg-10 offset-lg-1">
<div class="events__item mb-10 hover__active">
<div class="events__item-inner d-sm-flex align-items-center justify-content-between white-bg">
<div class="events__content">
<div class="events__meta">
<span>July 16, 2022</span>
<span>10:30 am - 1:30 pm</span>
<span>Weedpatch</span>
</div>
<h3 class="events__title"><a href="#">Foundations of global health</a></h3>
</div>
<div class="events__more">
<a href="#" class="link-btn">
View More
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-xxl-10 offset-xxl-1 col-xl-10 offset-xl-1 col-lg-10 offset-lg-1">
<div class="events__item mb-10 hover__active">
<div class="events__item-inner d-sm-flex align-items-center justify-content-between white-bg">
<div class="events__content">
<div class="events__meta">
<span>March 24, 2022</span>
<span>10:30 am - 12:00 pm</span>
<span>Lnland</span>
</div>
<h3 class="events__title"><a href="#">Business creativity workshops</a></h3>
</div>
<div class="events__more">
<a href="#" class="link-btn">
View More
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- events area end -->
<!-- pricing area start -->
<section class="price__area pt-60 pb-130">
<div class="container">
<div class="row">
<div class="col-xxl-4 offset-xxl-4">
<div class="section__title-wrapper mb-60 text-center">
<h2 class="section__title">Simple <br> All Inclusive <span class="yellow-bg yellow-bg-big">Pricing<img src="assets/img/shape/yellow-bg.png" alt=""></span></h2>
<p>No contracts. No surprise fees.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xxl-12">
<div class="price__tab-btn text-center mb-50">
<nav>
<div class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
<button class="nav-link" id="nav-monthly-tab" data-bs-toggle="tab" data-bs-target="#nav-monthly" type="button" role="tab" aria-controls="nav-monthly" aria-selected="true">monthly plan</button>
<button class="nav-link active" id="nav-annually-tab" data-bs-toggle="tab" data-bs-target="#nav-annually" type="button" role="tab" aria-controls="nav-annually" aria-selected="false">Annual Plan</button>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-xxl-10 offset-xxl-1 col-xl-10 offset-xl-1 col-lg-10 offset-lg-1">
<div class="price__tab-content">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade" id="nav-monthly" role="tabpanel" aria-labelledby="nav-monthly-tab">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="price__item grey-bg mb-30 p-relative">
<div class="price__head">
<h3>Gold</h3>
<p>Perfect for small marketing teams</p>
</div>
<div class="price__tag mb-25">
<h4>$59<span>.99 / annually</span></h4>
</div>
<div class="price__features mb-40">
<ul>
<li><i class="far fa-check"></i>Course Discussions</li>
<li><i class="far fa-check"></i>Content Library</li>
<li><i class="far fa-check"></i>1-hour Mentorship</li>
</ul>
</div>
<a href="contact.html" class="e-btn e-btn-4">Get Started</a>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="price__item grey-bg mb-30 p-relative">
<div class="price__offer">
<span>Best Value</span>
</div>
<div class="price__head">
<h3>Diamond</h3>
<p>Perfect for small marketing teams</p>
</div>
<div class="price__tag mb-25">
<h4>$99<span>.99 / annually</span></h4>
</div>
<div class="price__features mb-40">
<ul>
<li><i class="far fa-check"></i>Course Discussions</li>
<li><i class="far fa-check"></i>Content Library</li>
<li><i class="far fa-check"></i>1-hour Mentorship</li>
<li><i class="far fa-check"></i>Online Course</li>
</ul>
</div>
<a href="contact.html" class="e-btn e-btn-border">Get Started</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="nav-annually" role="tabpanel" aria-labelledby="nav-annually-tab">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="price__item grey-bg mb-30 p-relative">
<div class="price__head">
<h3>Gold</h3>
<p>Perfect for small marketing teams</p>
</div>
<div class="price__tag mb-25">
<h4>$59<span>.99 / annually</span></h4>
</div>
<div class="price__features mb-40">
<ul>
<li><i class="far fa-check"></i>Course Discussions</li>
<li><i class="far fa-check"></i>Content Library</li>
<li><i class="far fa-check"></i>1-hour Mentorship</li>
</ul>
</div>
<a href="contact.html" class="e-btn e-btn-4">Get Started</a>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="price__item grey-bg mb-30 p-relative">
<div class="price__offer">
<span>Best Value</span>
</div>
<div class="price__head">
<h3>Diamond</h3>
<p>Perfect for small marketing teams</p>
</div>
<div class="price__tag mb-25">
<h4>$99<span>.99 / annually</span></h4>
</div>
<div class="price__features mb-40">
<ul>
<li><i class="far fa-check"></i>Course Discussions</li>
<li><i class="far fa-check"></i>Content Library</li>
<li><i class="far fa-check"></i>1-hour Mentorship</li>
<li><i class="far fa-check"></i>Online Course</li>
</ul>
</div>
<a href="contact.html" class="e-btn e-btn-border">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- pricing area end -->
<!-- cta area start -->
<section class="cta__area mb--120">
<div class="container">
<div class="cta__inner blue-bg fix">
<div class="cta__shape">
<img src="assets/img/cta/cta-shape.png" alt="">
</div>
<div class="row align-items-center">
<div class="col-xxl-7 col-xl-7 col-lg-8 col-md-8">
<div class="cta__content">
<h3 class="cta__title">Ikuti survei kepuasan pelayanan kami</h3>
</div>
</div>
<div class="col-xxl-5 col-xl-5 col-lg-4 col-md-4">
<div class="cta__more d-md-flex justify-content-end p-relative z-index-1">
<a href="contact.html" class="e-btn e-btn-white">Mulai</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- cta area end -->
</main>
<!-- footer area start -->
<footer>
<div class="footer__area footer-bg">
<div class="footer__top pt-190 pb-40">
<div class="container">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6">
<div class="footer__widget mb-50">
<div class="footer__widget-head mb-22">
<div class="footer__logo">
<a href="index.html">
<img src="assets/img/logo/logo.png" alt="" width="167px" height="50px">
</a>
</div>
</div>
<div class="footer__widget-body">
<p>Great lesson ideas and lesson plans for ESL teachers! Educators can customize lesson plans to best.</p>
<div class="footer__social">
<ul>
<li><a href="#"><i class="social_facebook"></i></a></li>
<li><a href="#" class="tw"><i class="social_twitter"></i></a></li>
<li><a href="#" class="pin"><i class="social_instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xxl-2 offset-xxl-1 col-xl-2 offset-xl-1 col-lg-3 offset-lg-0 col-md-2 offset-md-1 col-sm-5 offset-sm-1">
<div class="footer__widget mb-50">
<div class="footer__widget-head mb-22">
<h3 class="footer__widget-title">Company</h3>
</div>
<div class="footer__widget-body">
<div class="footer__link">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Instructor</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Become a Teacher</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xxl-2 col-xl-2 col-lg-2 offset-lg-0 col-md-3 offset-md-1 col-sm-6">
<div class="footer__widget mb-50">
<div class="footer__widget-head mb-22">
<h3 class="footer__widget-title">Platform</h3>
</div>
<div class="footer__widget-body">
<div class="footer__link">
<ul>
<li><a href="#">Browse Library</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">News & Blogs</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-5 col-sm-6">
<div class="footer__widget footer__pl-70 mb-50">
<div class="footer__widget-head mb-22">
<h3 class="footer__widget-title">Subscribe</h3>
</div>
<div class="footer__widget-body">
<div class="footer__subscribe">
<form action="#">
<div class="footer__subscribe-input mb-15">
<input type="email" placeholder="Your email address">
<button type="submit">
<i class="far fa-arrow-right"></i>
<i class="far fa-arrow-right"></i>
</button>
</div>
</form>
<p>Get the latest news and updates right at your inbox.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="container">
<div class="row">
<div class="col-xxl-12">
<div class="footer__copyright text-center">
<p>© 2022 UPT Teknologi Informasi dan Komunikasi - <a href="https://unej.ac.id/" target="_blank">Universitas Jember</a>. All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- footer area end -->
<!-- JS here -->
<script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.meanmenu.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/parallax.min.js"></script>
<script src="assets/js/backToTop.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>