teaching.html

---
layout: default
title: Teaching
---

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <links>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
      <link
        href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap"
        rel="stylesheet"
      />
      <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
        crossorigin="anonymous"
      />
      <link rel="stylesheet" href="assets/js/slick/slick-theme.css" />
      <link rel="stylesheet" href="assets/js/slick/slick.css" />
      <link
        href="https://fonts.googleapis.com/css2?family=Heebo:wght@900&display=swap"
        rel="stylesheet"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
        integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
        crossorigin="anonymous"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
        integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw=="
        crossorigin="anonymous"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      />
      <link
        rel="stylesheet"
        href="https://use.fontawesome.com/releases/v6.1.1/css/all.css"
      />
      <link
        href="https://fonts.googleapis.com/css2?family=Gelasio:wght@700&display=swap"
        rel="stylesheet"
      />
    </links>
  </head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FQRDTXMLDY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-FQRDTXMLDY');
</script>
  <style>
    .text-align h1 {
      color: white;
      font-family: "Heebo", sans-serif;
      bottom: 0;
      right: 0;
      position: absolute;
      margin-right: 40px;
    }
    @media (max-width: 900px) {
      .text-align h1 {
        color: white;
        font-size: 20px;
        font-family: "Heebo", sans-serif;
        bottom: 0;
        right: 0;
        position: absolute;
        margin-right: 20px;
      }
    }

    .testimonials__list-item .fa {
      display: inline-block;
      position: absolute;
      top: 0.33rem;
      right: 0.33rem;
      width: 42px;
      height: 42px;
      margin: 0 1rem 0 0;
      z-index: 220;
      border-radius: 50%;
      background-color: #4a90e2;
      color: #fff;
      font-size: 1rem;
      line-height: 42px;
      text-align: center;
      overflow: visible;
    }

    .testimonials__list-item p {
      margin: 0 0 1.33333rem;
      padding: 0 0 2rem;
      border-bottom: 1px solid #caccd6;
      font-size: 22px;
    }
    .owl-carousel .owl-item .testimonials__list-item img {
      display: inline-block;
      width: 32px;
      border: 1px;
    }

    .owl-carousel {
      display: none;
      width: 100%;
      position: relative;
      z-index: 1;
    }
    .testimonials__list.owl-carousel .owl-stage-outer {
      overflow: visible;
      position: relative;
    }
    .owl-item {
      padding-right: 2rem;
      overflow: visible;
      position: relative;
      min-height: 1px;
      float: left;
      user-select: none;
    }
    .testimonials__list-item {
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -spec-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      -spec-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -spec-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column;
      position: relative;
      padding: 2rem 1rem 2rem;
      border: 1px solid #caccd6;
      background-color: #fff;
      justify-content: center;
      text-align: center;
      width: 700px;
      height: 300px;
    }

    .item {
      position: relative;
    }

    .owl-prev {
      position: absolute;
      top: 50%;
      left: 45%;
      width: 40px;

      color: #eee;
    }
    .owl-next {
      position: absolute;
      top: 50%;
      left: 55%;
      width: 40px;

      color: #eee;
    }
    .owl-nav .fa {
      position: absolute;

      width: 42px;
      height: 42px;

      border-radius: 50%;
      background-color: #4a90e2;
      color: #fff;

      line-height: 42px;
    }

    .btn-outline-success {
      background-color: rgb(0, 191, 111);
      color: white;
    }
    .text-align {
      box-shadow: 0 1px 6px rgb(255, 255, 255, 0.3),
        0 1px 4px rgba(255, 255, 255, 0.2);
      background-color: rgb(0, 191, 111);
      position: absolute;
      bottom: 0;
      right: 0;

      height: 100px;
    }
    @media (max-width: 800px) {
      .text-align {
        width: 300px;
      }
      .testimonials__list-item {
        width: 300px;
      }
      .testimonials__list-item p {
        font-size: 14px;
      }
    }
    @media only screen and (min-width: 800px) and (max-width: 1000px) {
      .text-align {
        width: 500px;
      }
    }
    @media (min-width: 1000px) {
      .text-align {
        width: 700px;
      }
    }
    .owl-carousel {
      display: flex !important;
      flex-direction: row;
      justify-content: center;
    }
    
    .firstPart {
      background-blend-mode: overlay;
      background-color: rgb(66, 66, 66);
      padding-top: 500px;
      padding-bottom: 300px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    .capacityText {
      opacity: 0;
      margin-left: -400px;
    }
    @media (max-width:500px) {
      .capacityText h2 {
      font-size: 25px;
      padding-left: 0px;

    }
    }
    @media (max-width:400px) {
      .capacityText h2 {
      font-size: 20px;
      padding-left: 0px;
      margin-left: -70px;

    }
    }
    @media(max-width:1117px){
      .first-part h4{
      font-size: 25px;
    }
    .capacityText h2 {
      font-size: 75px;
      padding-left: 200px;

    }  
    .fa-solid{
      font-size: 35px;
    }
    
    .first-text {
      padding: 150px;
    }
    }
    @media (max-width:450px) {
      .first-part h4{
      font-size: 10px;
    }.second-part p{
      font-size: 10px;
    }
    .workshops h4,
    .workshops p,
    .workshops a {
      display: inline-block;
      color: white;
      padding: 5px;
      font-size: 10px;
      font-family: "Gelasio", serif;
    }
    .capacityText h2 {
      font-size: 40px;
      padding-left: 100px;

    }
    .fa-solid{
      font-size: 20px;
    }
    .first-text {
      padding: 30px;
      padding-top: 100px;
    }
    
    .col-12{
      padding:15px;
    }
    }
    @media (min-width:450px) {
      .first-part h4{
      font-size: 14px;
    }.second-part p{
      font-size: 14px;
    }
    .workshops h4,
    .workshops p,
    .workshops a {
      display: inline-block;
      color: white;
      padding: 5px;
      font-size: 14px;
      font-family: "Gelasio", serif;
    }
    .capacityText h2 {
      font-size: 40px;
      padding-left: 100px;

    }
    .fa-solid{
      font-size: 20px;
    }
    .first-text {
      padding: 30px;
      padding-top: 100px;
    }
    
    .col-12{
      padding:15px;
    }
    }
    @media (min-width:628px) {
      .first-part h4{
      font-size: 18px;
    }
    .second-part p{
      font-size: 18px;
    }
    .workshops h4,
    .workshops p,
    .workshops a {
      display: inline-block;
      color: white;
      padding: 5px;
      font-size: 14px;
      font-family: "Gelasio", serif;
    }
    .fa-solid{
      font-size: 20px;
    }
    .first-text {
      padding: 30px;
      padding-top: 100px;
    }
    .col-12{
      padding:30px;
    }
    }
    @media (min-width: 815px){
      .first-part h4{
      font-size: 18px;
    }
    .second-part p{
      font-size: 18px;
    }
      .workshops h4,
    .workshops p,
    .workshops a {
      display: inline-block;
      color: white;
      padding: 5px;
      font-size: 18px;
      font-family: "Gelasio", serif;
    }
    .capacityText h2 {
      font-size: 40px;
      padding-left: 100px;

    }
    .fa-solid{
      font-size: 20px;
    }
    .first-text {
      padding: 30px;
      padding-top: 100px;
    }
    .col-12{
      padding:35px;
    }
    }
    @media (min-width:924px) {
    .capacityText h2 {
      font-size: 40px;
      padding-left: 100px;

    }
    .first-part h4{
      font-size: 25px;
    }
    .second-part p{
      font-size: 25px;
    }
    .fa-solid{
      font-size: 20px;
    }
    .workshops h4,
    .workshops p,
    .workshops a {
      display: inline-block;
      color: white;
      padding: 20px;
      font-size: 20px;
      font-family: "Gelasio", serif;
    }
    
    .first-text {
      padding: 30px;
      padding-top: 100px;
    }
    .col-12{
      padding:50px
    }
    }
    @media (min-width:1117px) {
      .col-12{
        padding:75px;
      }
      .capacityText h2 {
      font-size: 75px;
      padding-left: 200px;

    }  
    .fa-solid{
      font-size: 35px;
    }
    .first-part h4{
      font-size: 35px;
    }
    .first-text {
      padding: 150px;
    }
    .workshops h4,
    .workshops p,
    .workshops a {
      display: inline-block;
      color: white;
      padding: 20px;
      font-family: "Gelasio", serif;
    }
    }
    .capacityText h2 {
      font-family: "Gelasio", serif;
      color: white;
    }
.workshops{
  margin-left: -400px;
  max-width: 100%;
  opacity: 0;
}
    .first-text {

      font-family: "Gelasio", serif;
      letter-spacing: 1.5px;
    }
    .first-text p {
      font-size: 20px;
    }
    .fa-solid {
      color: rgb(0, 191, 111);
     
    }
    .fa-solid:hover{
      cursor: pointer;
    }
    .col-12 {
      background-color: rgb(49, 48, 48);
      color: white;
      border-radius: 15px;
      box-shadow: 0 1px 6px rgb(255, 255, 255, 0.1),
        0 1px 4px rgba(255, 255, 255, 0.5);
      display: inline-block;
      
    }
    
   
    .main .container-fluid {
      padding: 50px;
    }
    .first-part, .second-part{
      display: inline-block;
      width: 49%;
    }
    .text{
      border-left: solid rgb(0, 191, 111);
    }
    
    
  </style>

  <body id="Capacity">
    <div class="main">
      {% assign my_array = "" | split: ',' %}

      <section class="firstPart" style="background-image:url('/assets/img/workshops/dhakaworkshop.jpg')">
    <div class="capacityText">
        <h2>Capacity</h2>
        <h2>Strengthening</h2>
    </div>
</section>     
      <section class="textAbout">
        <div class="first-text">
          <p>
            Our team provides workshops and courses to enhance the knowledge of
            individuals regarding Infectious diseases
          </p>
        </div>
      </section>

      <section class="workshopsandcourses">
        <div class="container-fluid">
          <div class="row" id="workshops_courses">
            <div class="col-12 gy-5">
              <div class="workshops" id="grid1">
                <div class="first-part">
                  <a href="{{site.url}}/workshops">
                  <i
                    class="fa-solid fa-circle-arrow-right"
                  ></i></a>
                  <a href="{{site.url}}/workshops">
                    <h4 >Our workshops</h4>
                  </a>
                </div>
                <div class="second-part">
                  <p class="text" >
                    Get involved with our workshops both online and offline!
                  </p>
                </div>
              </div>
            </div>
            
            <div class="col-12 gy-5">
              <div class="workshops" id="grid1">
                <div class="first-part">
                  <a href="{{site.url}}/courses">
                  <i
                    class="fa-solid fa-circle-arrow-right"
                  ></i></a>
                  <a href="{{site.url}}/courses">
                    <h4 >Our courses</h4>
                  </a>
                </div>
                <div class="second-part">
                  <p class="text" >
                    Along with the Royal Veterinary College, we provide teaching for the faculty for MSc courses and beyond               
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="opinions" style="margin-top: 100px">
        <div class="container">
          <h4 class="text-aligns" style="text-align: center">
            Opinions from people who have taken the courses at LSHTM
          </h4>
        </div>

        <div class="owl-carousel" style="margin-top: 100px">
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “Thank you very much for this! I'm happy and grateful for this
                opportunity to expand my data skill-set. Would love to learn more
                about the topics presented. All the best and stay safe!! ”
              </p>
            </div>
          </div>
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “We are so thankful to be given a chance to learn and showcase
                what we have learned in the Infectious Disease. 'OMICS course ”
              </p>
            </div>
          </div>
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “Great course! It was very informative and the demonstrators
                were all very knowledgeable and patient. Thank you very much for
                this opportunity! ”
              </p>
            </div>
          </div>
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “I am having fun learning all the new stuff! Thank you LSHTM!
                Twas a great experience. ”
              </p>
            </div>
          </div>
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “The overall course was great. It was a superb class because it
                uses a engaging platform where participants can learn and
                perform their gained knowledge. ”
              </p>
            </div>
          </div>
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “The Value for money was exceptional. It was a very interactive
                and engaging course. ”
              </p>
            </div>
          </div>
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “It (the course) was great and covers all the topics we would
                want to know. ”
              </p>
            </div>
          </div>
          <div class="item">
            <div class="testimonials__list-item">
              <i class="fa fa-quote-left" aria-hidden="true"></i>
              <p>
                “The course was crafted amazingly. The course was informative
                and interactive. ”
              </p>
            </div>
          </div>
        </div>

        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
          integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
          crossorigin="anonymous"
        ></script>
        <!-- Owl Carousel -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
        
        <script>
          $(".owl-carousel").owlCarousel({
            loop: true,
            margin: 10,
            autoWidth: true,
            items: 20,
            nav: true,
            center: true,
            items: 1,
            stagePadding: 250,
            responsive: {
              0: {
                items: 1,
              },
              600: {
                items: 1,
              },
              1000: {
                items: 1,
              },
            },
            navText: [
              "<i class='fa fa-chevron-left'></i>",
              "<i class='fa fa-chevron-right'></i>",
            ],
          });

          $(document).ready(function() {

	    $('.capacityText').each( function(i){

	        $(this).animate({'opacity':'1','margin-left':'0px'},1000);

	    });

	});
  $(document).ready(function() {

	    $(window).scroll( function(){

	        $('.workshops').each( function(i){

	             

	            var bottom_of_element = $(this).offset().top + $(this).outerHeight();

	            var bottom_of_window = $(window).scrollTop() + $(window).height();

	             

	            if( bottom_of_window > bottom_of_element ){

	                $(this).animate({'margin-left':'0px','opacity':'1'},1000);

	            }

	             

	        });

	    });

	});
        </script>
      </section>
    </div>
  </body>
</html>