Ama

ama.markdown

Ama

A Pen by Satish on CodePen.

License.

index.html

<!--overflow hidden of whole page -->
<div class="page__wrapper">

  <header>
    <nav id="ama-nav" class="navbar navbar-expand-md fixed-top navbar-light bg-white py-0">
      <div class="container">
        <a class="navbar-brand my-auto" href="#">
          <img src="https://anshumemorial.in/test/m/assets/img/ama/ama-blue-128x128.png" alt="AMA Logo">
        </a>

        <div class="dropdown d-none">
          <i class="fa fa-user fa-2x text-indigo" type="button" id="quick--links" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          </i>
          <div class="dropdown-menu aria-labelledby=" quick--links">
            <a class="dropdown-item" href="#">Addmission</a>
            <a class="dropdown-item" href="#">Results</a>
            <a class="dropdown-item" href="#">Updates</a>
          </div>
        </div>

        <button class=" ml-3 hamburger flat-box hamburger--arrowalt navbar-toggler" type="button" aria-controls="menuContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>

        <div class="menuContent collapse navbar-collapse collapse navbar-collapse " id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="javascript:void(0)" onclick="gotolink('./')">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)" onclick="gotolink('./about-us.html')">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)" onclick="gotolink('./contact-us.html')">Contact Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)" onclick="gotolink('./admission.html')">Admission</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)" onclick="gotolink('./')">Sitemap</a>
            </li>
            <!--
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							About
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="javascript:void(0)" onclick="gotolink('./about-school.html')">About School</a>
							<a class="dropdown-item" href="#">About Director</a>
							<a class="dropdown-item" href="#">About Principal</a>
						</div>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Admission
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="#">Admission Process</a>
							<a class="dropdown-item" href="#">Registration</a>
							<a class="dropdown-item" href="#">Admission</a>
						</div>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Login Section
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="#">Student Login</a>
							<a class="dropdown-item" href="#">Teacher Login</a>
							<a class="dropdown-item" href="#">Staff Login</a>
							<a class="dropdown-item" href="#">Admin Login</a>
						</div>
					</li>
					-->
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0)" onclick="gotolink('./')">Sitemap</a>
            </li>

          </ul>
          <!--<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
				</form>
				-->
        </div>
      </div>
    </nav>

    <section class="header-bx d-none">
      <div class="row">
        <div style="overflow:hidden;" class="header col-md-10 p-4 offset-md-1">
          <div class="header__content d-md-flex justify-content-center">
            <div class="d-none d-md-block justify-content-center">
              <img class="header__side-img" src="assets/img/ama/ama-old-128x128.png" alt="Anshu Memorial Academy Logo">
            </div>
            <div>
              <h1 class="h1 school-name text-indigo text-center mb-0">Anshu Memorial Academy</h1>
              <p class="text-center m-0 text-purple">English Medium School, Based on CBSE Pattern.</p>
              <hr class="m-0 mx-auto">
              <p class="text-center m-0 ">
                <a href="tel:9128289100"><i class="fa fa-mobile"></i> 9128289100</a>,
                <a href="https://api.whatsapp.com/send?phone=919973757920"><i class="fa fa-whatsapp"></i> 9973757920</a>,
                <a class="d-inline-block" href="mailto:anshumemorial@gmail.com"><i class="fa fa-envelope"></i> anshumemorial@gmail.com</a>
              </p>
              <hr class="m-0 mx-auto">
              <p class="h5 school-add text-center "><a href="https://maps.app.goo.gl/25zkJr8u8qVxau1G9"><i class="fa fa-map-marker"></i> Bhatha Dasi, Rajapakar, Vaishali, Bihar-844124</a></p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </header>

  <section class="hero d-flex justify-content-center flex-column">
    <h1>Anshu Memorial Academy</h1>
    <a class="mx-auto px-4 py-2 mt-2" href="#">Register</a>
  </section>

  <section class="slide__menu-wrapper py-2 bg-light">
    <div class="d-flex justify-content-between px-2">
      <p class="text-primary mb-2">Important Links</p>
      <p class="header__time mb-2 text-indigo" class=" text-primary"></p>
    </div>
    <div class="slide__menu p-2 bg-dark text-center">
      <a href="#" class="slide__menu-item">Events</a>
      <a href="#" class="slide__menu-item">Registration</a>
      <a href="#" class="slide__menu-item">Addmission</a>
      <a href="#" class="slide__menu-item">Result</a>
      <a href="#" class="slide__menu-item">login</a>
      <a href="#" class="slide__menu-item">News</a>
      <a href="#" class="slide__menu-item">Notice</a>
    </div>
  </section>

  <main>
    <section class="slider__1-wrapper bg-primary">
      <div class="slider__1">
        <div class="slider__1-slide">
          <div class="slider__1-layer">

            <h1 class="sl__1">Welcome in</h1>
            <h3 class="sl__2">Anshu Memorial Academy</h3>
            <p class="sl__3">Bhatha Chowk, Bhatha Dasi, Rajapakar, Vaishali, Bihar</p>

          </div>
        </div>

        <div class="slider__1-slide">
          <div class="slider__1-layer">
            <h3 class="sl__1">An English Medium School</h3>
            <p class="sl__3">We understand current education phenomena.</p>
          </div>
        </div>

        <div class="slider__1-slide">
          <div class="slider__1-layer">
            <h1 class="sl__1">Based on</h1>
            <h3 class="sl__2">CBSE New Pattern</h3>
            <p class="sl__3">We understand your children needs.</p>
          </div>
        </div>

        <div class="slider__1-slide">
          <div class="slider__1-layer">
            <h1 class="sl__1">From Std. Play</h1>
            <h1 class="sl__2">To Standard 8th</h1>
            <p class="sl__3">Bhatha Chowk, Bhatha Dasi, Rajapakar, Vaishali, Bihar</p>
          </div>
        </div>
      </div>
      <div class="slider__1-progress">
        <div class="slider__1-progressbar"></div>
      </div>
    </section>

    <section class="dir-msg bg-white">
      <div class="container  text-justify">
        <h1>Director Message:</h1>
        <div class="dir-img-bx float-right ml-3">
          <img src="assets/img/manish.jpg">
        </div>
        Anshu Memorial Academy is a co-educational institution which nurtures academic and cultural development of children. The haven of education instills in its students the ideals of courage, truth, perseverance, fortitude and virtuosity. Our priorities in education are not only academic excellence, but also the formation of youth in discipline, hard work and moral values. These priorities are meant to prepare the youth for life by promoting intellectual excellence, uprightness of character, emotional maturity, and scientific temper, spirit of healthy competition, co-operation and sportsmanship through co-curricular activities, moral sensitivity, tolerance and national integration. Our aim is to shape your ward into a successful, responsible and benign personality. A secular environment fosters in our children a sense of unity and integrity and encourages them to take pride in their cultural heritage.
        We
        <!--rank among Bihar’s top most--> are one of English medium schools in Rajapkar. The ranking combines the school’s academic reputation with data on its students, faculty, financial resources and alumni satisfaction.
        Anshu Memorial Academy welcomes all those who seek the promise of new beginning and challenges and the powers of infinite opportunities. We believe in deeds, not words, offering a quality education that is both affordable and accessible. Opportunity and experience are the true essence of a Anshu Memorial education.
        <br><br>
        Manish Kr. Sharma (Director of AMA).
      </div>
    </section>

    <section class="bg-white py-2">
      <div class="container text-justify">
        <div class="row ama__features ">
          <div class="col-md-6 col-lg-3 ">
            <h1>Div 1 </h1>
            <p>
              What is Lorem Ipsum?
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </p>

          </div>
          <div class="col-md-6 col-lg-3">
            <h1>Div 2 </h1>
            <p>
              What is Lorem Ipsum?
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </p>

          </div>
          <div class="col-md-6 col-lg-3">
            <h1>Div 3 </h1>
            <p>
              What is Lorem Ipsum?
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </p>
          </div>
          <div class="col-md-6 col-lg-3">
            <h1>Div 4 </h1>
            <p>
              What is Lorem Ipsum?
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="footer-contact pt-5">
      <div class="container">
        <h2 class="text-center rounded py-2 mb-5 bg-indigo text-light">Contact Us</h2>
      </div>
      <div class="container d-none">
        <div class="card">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3593.6503934157327!2d85.35990715211484!3d25.74907256391992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39ed65dea0882835%3A0xf138a62b245e3bcb!2sAnshu+Memorial+Academy!5e0!3m2!1sen!2sin!4v1539857272951" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
      </div>

      <div class="container py-5">
        <div class="card">
          <div class="card-body">
            <form class="" action="./backend.php" method="get">
              <h3 class="card-title"></h3>
              <div class="form-group">
                <input name="name" id="name" class="form-control" type="text" placeholder="Full Name">
              </div>
              <div class="form-group">
                <input name="name" id="name" class="form-control" type="tel" placeholder="Mobile Number">
              </div>
              <div class="form-group">
                <input name="name" id="name" class="form-control" type="email" placeholder="Email">
              </div>
              <div class="form-group">
                <input name="name" id="name" class="form-control" type="text" placeholder="Subject">
              </div>
              <div class="form-group" placeholder="You message to be here.">
                <textarea class="form-control" placeholder="Your Message"></textarea>
              </div>
              <div>
                <input class="btn btn-success py-2 px-4" type="submit" value="Send Message">
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

  </main>
</div>
<!--/overflow hidden of whole page -->

<!-- footer -->
<footer class="bg-dark footer">
  <!-- footer social icons section -->
  <section class="footer__social py-1 bg-primary">
    <div class="footer__social_icon container text-light d-flex justify-content-center align-items-center">
      <ul class="d-none d-md-flex">
        <li>Follow us on : </li>
      </ul>
      <ul>
        <li class="fb wow fadeInLeftBig" data-wow-delay=".3s"><a href="https://fb.com/skwebsofficial/"><i class="fa fa-facebook"></i></a></li>
        <li class="tw wow fadeInLeftBig" data-wow-delay="0"><a href="https://twitter.com/SatishKmrSharma/"><i class="fa fa-twitter"></i></a></li>
        <li class="ig wow fadeInRightBig" data-wow-delay="0"><a href="https://instagram.com/satishkmrsharma/"><i class="fa fa-instagram"></i></a></li>
        <li class="yt wow fadeInRightBig" data-wow-delay="0.3s"><a href="https://www.youtube.com/channel/UC-Y-AzTd9CCYbbUqAthmHVg"><i class="fa fa-youtube"></i></a></li>
      </ul>
    </div>
  </section>
  <!-- /footer social icons section -->

  <!-- footer links section --
	<section class="footer__links container py-4" >
		<a class="wow fadeInRightBig" data-wow-delay=".3s" data-wow-offset="0" href="mailto:skwebservices@gmail.com" >Email</a>
		<a class="wow fadeInRightBig" data-wow-delay=".6s" data-wow-offset="0" href="https://facebook.com/satishkumarsharma05">Facebook</a>
		<a class="wow fadeInRightBig" data-wow-delay=".9s" data-wow-offset="0" href="https://m.me/sks555sks" >Messenger</a>
	</section>
	<!-- /footer links section -->

  <!-- copyright section -->
  <section class="copyright my-auto py-4 text-center ">
    &copy<script>
      document.write(new Date().getFullYear())
    </script> <a class="text-lightgrey" href="./"><strong>Anshu Memorial Academy</strong>. </a><span class="d-none d-md-inline"> All Right Reserved. </span>
    <hr class="bg-indigo w-50 w-md-25 mx-auto">
    <span class="d-block d-md-inline"> Designed &amp; Developed by <a href="https://skwebs.github.io">SKWebs</a></span>
  </section>
  <!-- /copyright section -->

  <!-- developer credit section -->
  <section class="dev__credit">
  </section>
  <!-- /developer credit section -->
</footer>
<!-- /footer -->

<!--**********************************************************************************************-->

<!-- fixed elements -->
<div class="preloader">
  <img class="preloader__img " src="./assets/img/ama/ama-old-512x512.png" alt="Anshu Memorial Academy Logo">
  <div class="rounder"></div>
</div>
<div class="sidebar-overlay"></div>
<section class="sidebar  bg-light">
  <!-- sidebar-header show only on mobile -->
  <div class="sidebar-header p-2">
    <div class="sidebar-header-img pr-2">
      <img src="./assets/img/ama/ama-white-128x128.png" alt="ama logo">
    </div>
    <div class="pl-2">
      <p>Satish Kumar Sharma</p>
      <p><a href="tel:+91-9973757920">9973757920</a></p>
      <p><a href="mailto:skwebserv@gmail.com">skwebserv@gmail.com</a></p>
    </div>
  </div>
  <div class="sidebar-menu">
    <ul class="navbar"></ul>
    <div class="sidebar-social d-flex justify-content-center">
      <a class="sb-fb" href="https://facebook.com/AnshuMemorialAcademy"><i class="fa fa-facebook"></i></a>
      <a class="sb-tw" href="https://mobile.twitter.com/AnshuMemorial"><i class="fa fa-twitter"></i></a>
      <a class="sb-insta" href="https://www.instagram.com/anshumemorial/"><i class="fa fa-instagram"></i></a>
      <a class="sb-yt" href="https://www.youtube.com/channel/UC-Y-AzTd9CCYbbUqAthmHVg"><i class="fa fa-youtube"></i></a>
    </div>
  </div>
</section>

script.js

function elem(e) {
  return document.querySelector(e);
}
$(document).ready(() => {
  function e(e) {
    return e.toString().padStart(2, "0");
  }
  $(".slide__menu-wrapper").sticky({ topSpacing: 65, zIndex: 2 }),
    setInterval(function () {
      var a = new Date(),
        n = e(a.getHours()),
        t = e(a.getMinutes()),
        r = e(a.getSeconds()),
        d = a.getDay(),
        i = e(a.getDate()),
        s = a.getMonth(),
        o = e(a.getFullYear());
      document.querySelector(".header__time").innerHTML =
        n +
        ":" +
        t +
        ":" +
        r +
        " [" +
        ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d] +
        "] " +
        [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec"
        ][s] +
        " " +
        i +
        ", " +
        o;
    }, 1e3),
    $(".sidebar-menu .navbar").append($(".menuContent .navbar-nav").clone()),
    $(".preloader")
      .delay(500)
      .fadeOut(600, function () {
        $(".preloader").remove();
      });
  var a = $(window).outerHeight(),
    n =
      $("header").outerHeight() +
      $("nav").outerHeight() +
      $("footer").outerHeight();
  n < a ? $("main").css("min-height", a - n) : $("main").css("min-height", "");
}),
  $(document).ready(function () {
    var e = $(".navbar").outerHeight();
    $("#ama-nav").sticky({ topSpacing: 0 }),
      $(".hamburger").css({ top: (e - $(".hamburger").outerHeight()) / 2 });
    $("header").outerHeight(), (e = $(".navbar").outerHeight());
    $(document).on("show.bs.dropdown", ".dropdown", function () {
      $(this).find(".dropdown-menu").first().stop(!0, !0).slideDown(),
        $(this).find(".dropdown-toggle").delay(300).addClass("active");
    }),
      $(document).on("hide.bs.dropdown", ".dropdown", function () {
        $(this).find(".dropdown-menu").first().stop(!0, !0).slideUp(),
          $(this).find(".dropdown-toggle").delay(300).removeClass("active");
      });
  });
var touchSurface = elem("body"),
  sidebar = elem(".sidebar"),
  sidebarWidth = sidebar.offsetWidth,
  startX = "",
  change = "",
  sidebarOpened = !1,
  minTouchLeft = 30,
  navbarToggler = elem(".navbar-toggler"),
  sidebarOverlay = elem(".sidebar-overlay"),
  hamburgerBtn = elem(".hamburger"),
  content = elem(".content");
const __SETTING = {
  dTrans: "transform 500ms ",
  oTrans: "all 1s ease-in 500ms",
  navExpandClass: "md",
  dIndex: 1033
};
var winWide = $(window).outerWidth(),
  bp_md = 768,
  bp_lg = 992,
  bp_xl = 1200;
if (winWide < bp_md) {
  function handleStart(e) {
    sidebarOpened ||
      ((startX = e.changedTouches[0].clientX) < minTouchLeft &&
        ((sidebarOverlay.style.opacity = 0),
        (sidebarOverlay.style.display = "block"),
        (sidebar.style.transition = "none"),
        (sidebarOverlay.style.transition = "none")));
  }
  function handleMove(e) {
    sidebarOpened ||
      (startX < minTouchLeft &&
        (change = e.changedTouches[0].clientX - startX) - sidebarWidth < 0 &&
        ((sidebar.style.transform =
          "translateX(" + (change - sidebarWidth) + "px)"),
        (sidebarOverlay.style.opacity = change / sidebarWidth)));
  }
  function handleEnd(e) {
    sidebarOpened ||
      (startX < minTouchLeft &&
        (change < sidebarWidth / 3 ? sidebarClose() : sidebarOpen()));
  }
  function sidebarHandlerStart(e) {
    (sidebarOverlay.style.display = "block"),
      (sidebar.style.transition = "none"),
      (sidebarOverlay.style.transition = "none"),
      sidebarOpened && (startX = e.changedTouches[0].clientX);
  }
  function sidebarHandlerMove(e) {
    sidebarOpened &&
      (change = e.changedTouches[0].clientX - startX) < 0 &&
      ((sidebar.style.transform = "translateX(" + change + "px)"),
      (sidebarOverlay.style.opacity = (sidebarWidth + change) / sidebarWidth));
  }
  function sidebarHandlerEnd(e) {
    sidebarOpened &&
      change < 0 &&
      (change < 0 - sidebarWidth / 3 ? sidebarClose() : sidebarOpen());
  }
  function handleCancel(e) {}
  function sidebarOpen() {
    (sidebarOverlay.style.display = "block"),
      (sidebar.style.transform = "translateX(0px)"),
      (sidebar.style.transition = __SETTING.dTrans),
      (sidebarOverlay.style.transition = __SETTING.oTrans),
      (sidebarOpened = !0),
      hamburgerBtn.classList.add("is-active");
  }
  function sidebarClose() {
    (sidebarOverlay.style.display = "none"),
      (sidebar.style.transform = "translateX(-" + sidebarWidth + "px)"),
      (sidebar.style.transition = __SETTING.dTrans),
      (sidebarOverlay.style.transition = __SETTING.oTrans),
      (sidebarOpened = !1),
      hamburgerBtn.classList.remove("is-active");
  }
  function sidebarToggle() {
    sidebarOpened ? sidebarClose() : sidebarOpen();
  }
  document.addEventListener("DOMContentLoaded", () => {
    touchSurface.addEventListener("touchstart", handleStart, !1),
      touchSurface.addEventListener("touchend", handleEnd, !1),
      touchSurface.addEventListener("touchmove", handleMove, !1),
      sidebar.addEventListener("touchstart", sidebarHandlerStart, !1),
      sidebar.addEventListener("touchmove", sidebarHandlerMove, !1),
      sidebar.addEventListener("touchend", sidebarHandlerEnd, !1);
  }),
    sidebarOverlay.addEventListener("click", () => {
      sidebarClose();
    }),
    navbarToggler.addEventListener("click", () => {
      sidebarToggle();
    });
}
function is_touch_enabled() {
  return (
    "ontouchstart" in window ||
    navigator.maxTouchPoints > 0 ||
    navigator.msMaxTouchPoints > 0
  );
}
$(document).ready(() => {
  var e,
    t,
    s,
    n,
    o = 4;
  (pauseBtn = $(".slider-progress .fa-pause")),
    (playBtn = $(".slider-progress .fa-play"));
  var i = $(".slider__1");
  function a() {
    (t = !1), pauseBtn.show(), playBtn.hide();
  }
  function r() {
    (t = !0), pauseBtn.hide(), playBtn.show();
  }
  function c() {
    e.css({ width: "0%" }),
      clearTimeout(s),
      (n = 0),
      (t = !1),
      (s = setInterval(l, 10));
  }
  function l() {
    !1 === t
      ? ((n += 1 / o),
        e.css({ width: n + "%" }),
        n >= 100 && (i.slick("slickNext"), c()),
        a())
      : r();
  }
  i.on("beforeChange", function () {
    c();
  }),
    i.slick({
      draggable: !0,
      speed: 500,
      adaptiveHeight: !1,
      dots: !0,
      mobileFirst: !0,
      pauseOnDotsHover: !0,
      cssEase: "cubic-bezier(0.1, 0.9, 1.0, 0.01)",
      initialSlide: 1,
      arrows: !1
    }),
    (e = $(".slider__1-progressbar")),
    is_touch_enabled()
      ? (i.on("touchstart", () => {
          r();
        }),
        i.on("touchend", () => {
          a();
        }))
      : i.on({
          mouseenter: function () {
            r();
          },
          mouseleave: function () {
            a();
          }
        }),
    pauseBtn.click(() => {
      r();
    }),
    playBtn.click(() => {
      a();
    }),
    c(),
    $(".slide__menu").slick({
      slidesToShow: 2,
      autoplay: !0,
      centerMode: !0,
      focusOnSelect: !0,
      prevArrow:
        '<button type="button" class="slick-prev"><i class="fa fa-chevron-left" ></i></button>',
      nextArrow:
        '<button type="button" class="slick-next"><i class="fa fa-chevron-right" ></i></button>',
      responsive: [
        {
          breakpoint: 568,
          settings: { slidesToShow: 3, autoplay: !0, centerPadding: "10px" }
        },
        {
          breakpoint: 1024,
          settings: { slidesToShow: 5, autoplay: !0, centerPadding: "20px" }
        }
      ]
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.3.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>

style.scss

@charset 'UTF-8';
:root {
  --sbIndex: 1032;
}
.slide__menu-wrapper {
  box-shadow: 0 2px 10px 2px hsla(0, 0%, 0%, 0.25);
}
.header-bx {
  background: linear-gradient(
      hsla(210, 17%, 98%, 0.95),
      hsla(210, 17%, 98%, 0.95)
    ),
    url(../img/ama/ama-old-512x512.png) center/contain no-repeat;
  olor: var(--purple);
}
@media (min-width: 768px) {
  header {
    background: 0 0;
  }
}
.header hr {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    #000,
    rgba(0, 0, 0, 0)
  ) !important;
  height: 2px;
  width: 60%;
}
.header__bg-img {
  overflow: hidden;
  height: 100%;
  opacity: 0.95;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.header__side-img {
  height: 150px;
}
.sidebar-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: hsla(0, 0%, 0%, 0.5);
  z-index: calc(var(--sbIndex) - 1);
  display: none;
}
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--sbIndex);
  width: 300px;
  height: 100vh;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.35);
  transform: translateX(-100%);
}
.sidebar-header {
  height: 100px;
  width: 100%;
}
.sidebar-header div {
  float: left;
}
.sidebar-header div:nth-child(2) * {
  margin: 0;
  vertical-align: middle;
  color: #fff;
}
.sidebar-header-img {
  display: inline-block;
  border-right: 3px solid #fff;
  height: 100%;
}
.sidebar-header img {
  height: 100%;
}
.sidebar-menu .navbar {
  padding: 0 0 !important;
}
.sidebar-menu .navbar-nav li.nav-item {
  width: 300px;
  padding: 5px 15px 5px 0;
}
.sidebar-menu .navbar-nav li a {
  padding: 8px 0;
  width: 100%;
  padding: 12px 30px;
}
.sidebar-menu .dropdown-menu {
  border: unset;
  border-radius: unset;
  padding: 0;
  margin: 0;
}
.sidebar-menu .dropdown-toggle::after {
  position: absolute;
  right: 20px;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f078";
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  vertical-align: 0;
  transform: translateY(3px);
  transition: all 0.3s ease-in-out;
}
.sidebar-menu .active.dropdown-toggle::after {
  transform: rotateZ(180deg) translateY(-3px);
}
.sidebar-menu .dropdown-menu {
  background: var(--primary);
  color: #fff;
}
.sidebar-menu .dropdown-menu .dropdown-item {
  color: #fff;
}
.sidebar-menu .dropdown-menu a + a {
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      hsla(0, 100%, 0%, 0),
      hsla(0, 100%, 0%, 0.5),
      hsla(0, 100%, 0%, 0)
    )
    100 5%;
}
.sidebar-social a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #fff;
  font-size: 1.25rem;
  border-radius: 50%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  z-index: 1;
  margin: 0 5px;
  box-shadow: 2px 2px 5px 2px hsla(0, 0%, 0%, 0.15);
}
.sidebar-social a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s;
  transform: scale(0);
  z-index: -1;
}
.sidebar-social a:hover {
  color: #fff;
}
.sidebar-social a:hover:before {
  transform: scale(1);
}
.sidebar-social .sb-fb:before {
  background: #3b5998;
}
.sidebar-social .sb-tw:before {
  background: #00acee;
}
.sidebar-social .sb-insta:before {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.sidebar-social .sb-yt:before {
  background: #fe0000;
}
:root {
  --hamburger-color: #0275d8;
}
.hamburger {
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::after,
.hamburger.is-active .hamburger-inner::before {
  background-color: var(--hamburger-color);
}
.hamburger-box {
  width: 24px;
  height: 12px;
  display: inline-block;
  position: relative;
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: 0;
}
.hamburger-inner,
.hamburger-inner::after,
.hamburger-inner::before {
  width: 24px;
  height: 2px;
  background-color: var(--hamburger-color);
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::after,
.hamburger-inner::before {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -8px;
}
.hamburger-inner::after {
  bottom: -8px;
}
.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease,
    transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease,
    transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(-6px, -5.5px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease,
    transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-6px, 5.5px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease,
    transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.navbar-brand img {
  height: 55px;
}
#ama-nav {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  bakground: #01579b !important;
  z-index: 1030 !important;
}
.footer__social_icon {
  flex-direction: row !important;
  color: grey;
}
.footer__social_icon ul {
  margin: 0 5px;
  padding: 0;
  display: flex;
}
.footer__social_icon ul li {
  list-style: none;
  margin: 0 5px;
}
.footer__social_icon ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.25rem;
  color: #fff;
  transition: all 0.5s;
}
.footer__social_icon ul li a .fa {
  transition: 0.5s;
}
footer__social_icon ul li a:hover {
  border: 1px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}
.footer__social_icon ul li a:hover .fa {
  color: #fff;
  transform: scale(0.85);
}
.footer__links a {
  margin: 5px 10px;
  display: inline-block;
  color: #ccc !important;
  text-decoration: none;
  transition: 0.5s;
}
.footer__links a:hover {
  color: #fff !important;
  font-weight: 700;
  transform: translateX(3px);
}
.copyright {
  background: rgba(0, 0, 0, 0.35);
  ackground: #212429;
  color: grey;
}
body {
  font-family: panton_bold;
}
.page__wrapper {
  overflow: hidden;
}
.preloader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  filter: grayscale(100%);
  justify-content: center;
  align-items: center;
  filter: grayscale(100%);
}
.preloader__img {
  box-shadow: 0 0 5px 5px #eee;
  max-width: 128px;
  opacity: 0.05;
  z-index: 2;
}
.preloader .rounder {
  position: fixed;
  background: 0 0;
  width: 150px;
  height: 150px;
  border: 5px dotted #fef;
  border-bottom-color: #fff;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.slick-loading .slick-list {
  background: #fff url(../../assets/vendor/slick/1.8.1/ajax-loader.gif) center
    center no-repeat;
}
@font-face {
  font-family: slick;
  font-weight: 400;
  font-style: normal;
  src: url(../assets/vendor/slick/1.8.1/fonts/slick.eot);
  src: url(../assets/vendor/slick/1.8.1/fonts/slick.eot?#iefix)
      format("embedded-opentype"),
    url(../assets/vendor/slick/1.8.1/fonts/slick.woff) format("woff"),
    url(../assets/vendor/slick/1.8.1/fonts/slick.ttf) format("truetype"),
    url(../assets/vendor/slick/1.8.1/fonts/slick.svg#slick) format("svg");
}
.slider__1-wrapper {
  position: relative;
}
.slider__1 {
  width: 100%;
  position: relative;
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.5), hsla(0, 0%, 0%, 0.5)),
    url(../../assets/img/web/nat-landscape2.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.slider__1 .slider__1-slide {
  z-index: 2;
}
.slider__1-layer {
  width: 100%;
  height: 300px;
  color: #fff;
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 25px;
  background: 0 0;
  text-align: center;
}
.slider__1 .slider__1-layer * {
  z-index: 6;
}
.slider__1-progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4.5px;
  background: rgba(0, 0, 0, 0.25);
}
.slider__1-progressbar {
  width: 50%;
  height: 4.5px;
  background: linear-gradient(
    to right,
    hsla(0, 0%, 100%, 0.25),
    hsla(0, 0%, 100%, 0.5)
  );
}
.slider__1 .slick-dots {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  list-style-type: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.slider__1 .slick-dots li {
  margin: 0 2px;
  position: relative;
  width: 30px;
  height: 3px;
  cursor: pointer;
}
.slider__1 .slick-dots button {
  display: block;
  width: 25px;
  height: 2px;
  padding: 0;
  border: none;
  background-color: transparent;
  transition: all 0.3s;
  text-indent: -9999px;
  cursor: pointer;
  color: transparent;
  outline: 0;
  background: 0 0;
}
.slick-dots li button:focus,
.slick-dots li button:hover {
  outline: 0;
}
.slick-dots li button:focus:before,
.slick-dots li button:hover:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  text-align: center;
  opacity: 0.25;
  color: #000;
  background: #fff;
  box-shadow: 0 0 15px 2px #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #000;
  background: #fff;
}
.slider__1 h1,
.slider__1 h3,
.slider__1 p {
  animation: fadeOut 0.5s both;
}
.slider__1 .slick-active .sl__1 {
  animation: fadeInLeft 1.5s both 0.5s;
}
.slider__1 .slick-active .sl__2 {
  animation: fadeInRight 1.5s both 1s;
}
.slider__1 .slick-active .sl__3 {
  animation: fadeInUp 1.5s both 2s;
}
.slide__menu {
  padding: 0 26px !important;
}
.slide__menu * {
  box-sizing: border-box;
}
a.slide__menu-item {
  color: #fff;
  padding: 5px 10px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  background: #003d7e;
  background: rgba(0, 0, 0, 0);
}
a.slide__menu-item:hover {
  outline: 0;
}
.slide__menu .slick-next,
.slide__menu .slick-prev {
  background: #ddd;
  border: none;
  border-radius: none;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  opacity: 0.25;
  background: 0 0;
  z-index: 400;
  padding: 0 5px;
}
.slide__menu .slick-prev {
  left: 0;
}
.slide__menu .slick-next {
  right: 0;
}
.slide__menu .slick-next:hover,
.slide__menu .slick-prev:hover {
  outline: 0;
  opacity: 0.5;
}
.dir-msg {
  position: relative;
  padding-bottom: 90px;
  padding-top: 80px;
  z-index: 1;
  font-size: 1.25rem;
}
.dir-img-bx {
  width: 180px;
  height: 225px;
  overflow: hidden;
  border-radius: 5px !important;
  border: 5px solid;
  border-color: #d3d3d3;
}
.dir-img-bx img {
  width: 100%;
}
.dir-msg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 0 800px 550px;
  transform: scaleX(1.5);
  z-index: -1;
  background: linear-gradient(to right bottom, #fff, #9ebfde);
}
.footer-contact {
  position: relative;
}
.footer-contact:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to right bottom, #ebebff, #e6e6fa);
}
.hero {
  position: relative;
  width: 100%;
  height: 500px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), hsla(0, 0%, 0%, 0)),
    url(assets/img/students.jpg);
  background-size: cover;
  background-position: top;
}
.hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 0 800px 550px;
  transform: scaleX(1.5);
  z-index: -1;
  background: linear-gradient(to right bottom, #fff, #9ebfde);
}
.hero * {
  text-align: center;
  color: #fff;
}
.hero a {
  text-decoration: none;
  background: 0 0;
  border: 2px solid #fff;
  border-radius: 30px;
  transition: all 0.3s;
}
.hero a:hover {
  background: #fff;
  box-shadow: inset 6px 8px 5px -5px hsla(0, 0%, 0%, 0.25),
    inset -6px -8px 5px -5px hsla(0, 0%, 0%, 0.25);
}
body,
html {
  width: 100%;
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
.nav-item a {
  color: #000;
}
.sidebar .nav-item.active a {
  background-color: rgba(13, 110, 253, 0.1);
  border-radius: 0 35px 35px 0;
}
.nav-item.active a {
  color: var(--primary);
}
.cta {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(assets/img/web/laptop1.jpg) fixed center 100% / cover;
}
.ama__features div {
  width: 100%;
  padding: 25px;
}
.bg-black-op05 {
  background: rgba(0, 0, 0, 0.75);
}
.bg-white-op05 {
  background: hsla(0, 0%, 100%, 0.75);
}
@media (min-width: 768) {
  .w-md-25 {
    width: 25% !important;
  }
}
@media (max-width: 768px) {
  .school-name {
    font-size: 1.95rem;
  }
  .school-add {
    font-size: 1rem;
  }
}
.text-indigo {
  color: var(--indigo);
}
.text-purple {
  color: var(--purple);
}
.text-orange {
  color: var(--orange);
}
.text-teal {
  color: var(--teal);
}
.text-pink {
  color: var(--pink);
}
.bg-indigo {
  background-color: var(--indigo);
}
.bg-purple {
  background-color: var(--purple);
}
.bg-orange {
  background-color: var(--orange);
}
.bg-teal {
  background-color: var(--teal);
}
.bg-pink {
  background-color: var(--pink);
}
.purple-grad {
  background: linear-gradient(to right bottom, #fff, #9ebfde);
}
.form-control:focus,
.form-control:hover {
  -webkit-appearance: none;
  box-shadow: none;
  color: var(--indigo);
  background-color: #fff;
  border-color: var(--indigo);
  outline: 0;
}
.sidebar-header {
  border-bottom: 1px solid #ededed;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />