index.html

---
layout: home
---

<section class="text-tertiary-700 md:mt-32">
  <div class="container flex flex-col px-5 py-8 mx-auto md:items-center">
    <div class="flex flex-col w-full mb-8 text-left lg:text-center">
      <h2
        class="mb-4 bg-primary-100 text-primary-800 px-4 py-2 rounded-lg md:w-84 md:mx-auto text-xs font-semibold tracking-widest uppercase title-font"
      >
        Learn Machine Learning
      </h2>
      <h1
        class="font-heading mx-auto mb-6 text-6xl text-center font-semibold leading-none tracking-tighter text-black lg:max-w-2xl title-font"
      >
        Winterschool for Toxinologists
      </h1>
      <p
        class="mx-auto text-lg font-regular leading-relaxed text-tertiary-600 md:max-w-xl"
      >
        Learn how to develop machine learning models, how to apply them to
        toxicological data, and how to interpret the results.
      </p>
      <a
        href="https://collab.dvb.bayern/display/TUMrostlabform/Winterschool+Registration"
        class="flex text-center w-full mt-6 md:mx-auto md:justify-center md:w-48 items-center px-6 py-2 font-semibold text-white transition duration-500 ease-in-out transform bg-primary-500 rounded-lg hover:bg-primary-700 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2"
      >
        Registration
        <i class="ml-2 text-lg ph-caret-double-right-bold"></i>
      </a>
    </div>
  </div>
</section>

<section class="bg-white py-20 lg:py-[120px]">
  <div class="container mx-auto">
    <div class="-mx-4 flex flex-wrap">
      <div class="w-full px-4">
        <div class="flex flex-wrap items-center justify-center">
          <a
            href="https://cs.cit.tum.de/bio"
            class="mx-4 flex w-[150px] items-center justify-center py-5 2xl:w-[180px]"
          >
            <img
              src="assets/img/logos/logo_l_large_line.svg"
              alt="image"
              class="h-10 w-full"
            />
          </a>
          <a
            href="https://www.wsi.med.uni-muenchen.de/forschung/molek_toxikol/jimenez-soto/index.html"
            class="mx-4 flex w-[150px] items-center justify-center py-5 2xl:w-[180px]"
          >
            <img
              src="assets/img/logos/exo.png"
              alt="image"
              class="h-10 h-full"
            />
          </a>
          <a
            href="https://www.tum.de/"
            class="mx-4 flex w-[150px] items-center justify-center py-5 2xl:w-[180px]"
          >
            <img
              src="assets/img/logos/tum.svg"
              alt="image"
              class="h-10 w-full"
            />
          </a>
          <a
            href="https://www.lmu.de/en/index.html"
            class="mx-4 flex w-[150px] items-center justify-center py-5 2xl:w-[180px]"
          >
            <img
              src="assets/img/logos/lmu.svg"
              alt="image"
              class="h-10 w-full"
            />
          </a>
          <a
            href="javascript:void(0)"
            class="mx-4 flex w-[150px] items-center justify-center py-5 2xl:w-[180px]"
          >
            <img
              src="assets/img/logos/support_de.png"
              alt="image"
              class="h-10 h-full"
            />
          </a>
          <a
            href="javascript:void(0)"
            class="mx-4 flex w-[150px] items-center justify-center py-5 2xl:w-[180px]"
          >
            <img
              src="assets/img/logos/support_eu.png"
              alt="image"
              class="h-10 h-full"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <h1
      class="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20"
    >
      Winterschool Details
    </h1>
    <div
      class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6"
    >
      <div class="p-4 md:w-1/4 flex">
        <div
          class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-500 text-white mb-4 flex-shrink-0"
        >
          <i class="fa-solid fa-clock fa-2xl"></i>
        </div>
        <div class="flex-grow pl-6">
          <h2 class="text-gray-900 text-lg title-font font-medium mb-2">
            When?
          </h2>
          <p class="leading-relaxed text-base">
            Mo 09.12.2024 01:00pm -<br />
            Do 12.12.2024 04:00pm
          </p>
          <a
            class="mt-3 text-indigo-500 inline-flex items-center"
            href="assets/calendar.ics"
            >Add to your calendar
            <svg
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              class="w-4 h-4 ml-2"
              viewBox="0 0 24 24"
            >
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="p-4 md:w-1/4 flex">
        <div
          class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-500 text-white mb-4 flex-shrink-0"
        >
          <i class="fa-sharp fa-solid fa-location-dot fa-2xl"></i>
        </div>
        <div class="flex-grow pl-6">
          <h2 class="text-gray-900 text-lg title-font font-medium mb-2">
            Where?
          </h2>
          <p class="leading-relaxed text-base">
            TUM Campus Garching<br />
            Boltzmannstraße 3<br />
            85748 Garching <br />
          </p>
          <a
            class="mt-3 text-indigo-500 inline-flex items-center"
            href="https://www.tum.de/en/about-tum/contact-directions#c76638"
            >Get to the venue
            <svg
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              class="w-4 h-4 ml-2"
              viewBox="0 0 24 24"
            >
              <path d="M5 12h14M12 5l7 7-7 7"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="p-4 md:w-1/4 flex">
        <div
          class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-primary-500 text-white mb-4 flex-shrink-0"
        >
          <i class="fa-solid fa-euro-sign fa-2xl"></i>
        </div>
        <div class="flex-grow pl-6">
          <h2 class="text-gray-900 text-lg title-font font-medium mb-2">
            How much?
          </h2>
          <p class="leading-relaxed text-base">
            No fees for the school*
          </p>
          <p class="leading-relaxed text-xs">
            *you will only have to pay for your own supplies, accommodation and food.
          </p>
        </div>
      </div>
    </div>
    </div>
  </div>
</section>

<section class="">
  <!-- This example requires Tailwind CSS v2.0+ -->
  <div class="py-12 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="lg:text-center">
        <h2
          class="font-heading mb-4 bg-yellow-100 text-yellow-800 px-4 py-2 rounded-lg md:w-64 md:mx-auto text-xs font-semibold tracking-widest text-black uppercase title-font"
        >
          Who are we?
        </h2>
        <p
          class="font-heading mt-2 text-3xl leading-8 font-semibold tracking-tight text-gray-900 sm:text-4xl"
        >
          We know machine learning, we know biology.
        </p>
        <p class="mt-4 max-w-2xl text-lg text-gray-500 lg:mx-auto">
          Our research careers evolve around creating data for machine learning
          and employing that data predictively. We will teach you how to do the
          same.
        </p>
      </div>

      <div class="flex flex-wrap">
        {% for person in site.persons %}
        <div class="p-4 lg:w-1/2">
          <div
            class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left"
          >
            <img
              alt="team"
              class="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4"
              src="assets/img/persons/{{ person.img }}"
            />
            <div class="flex-grow sm:pl-8">
              <h2 class="title-font font-medium text-lg text-gray-900">
                {{ person.name }}
              </h2>
              <h3 class="text-gray-500 mb-3">{{ person.title }}</h3>
              <p class="mb-4 text-justify">{{ person.desc }}</p>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<section class="text-gray-600 body-font overflow-hidden">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-col text-center w-full mb-20">
      <div>
        <h2
          class="font-heading mb-4 bg-primary-100 text-primary-800 px-4 py-2 rounded-lg md:w-36 md:mx-auto text-xs font-semibold tracking-widest uppercase title-font"
        >
          What will you learn?
        </h2>
      </div>
      <h1
        class="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900"
      >
        Curriculum
      </h1>
      <p class="lg:w-2/3 mx-auto leading-relaxed text-base text-gray-500"></p>
    </div>
    <div class="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
      {% for item in site.program %}
      <div class="p-2 sm:w-1/2 w-full">
        <div class="bg-gray-100 rounded flex p-4 h-full items-center">
          <svg
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="3"
            class="text-red-500 w-6 h-6 flex-shrink-0 mr-4"
            viewBox="0 0 24 24"
          >
            <path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
            <path d="M22 4L12 14.01l-3-3"></path>
          </svg>
          <span class="title-font font-medium"
            ><a href="{{ item.url | relative_url }}">{{ item.title }}</a></span
          >
        </div>
      </div>
      {% endfor %}
    </div>
    <button
      class="flex mx-auto mt-16 text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 rounded text-lg"
      onclick="window.location.href='/program';"
    >
      Learn More
    </button>
  </div>
</section>

<section
  class="px-4 py-12 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl lg:px-8"
>
  <div class="max-w-screen-xl mx-auto p-8">
    <div class="lg:text-center">
      <h2
        class="font-heading mb-4 bg-yellow-100 text-yellow-800 px-4 py-2 rounded-lg md:w-36 md:mx-auto text-xs font-semibold tracking-widest uppercase title-font"
      >
        FAQs
      </h2>

      <h3 class="text-3xl font-extrabold leading-9 text-gray-900 mb-12">
        Frequently Asked Questions
      </h3>
    </div>
    <div class="flex flex-wrap -mx-4 justify-center">
      {% for question in site.questions %}
      <div class="sm:w-full md:w-full lg:w-1/2 xl:w-1/3 px-4 mb-4">
        <h3 class="text-lg font-semibold leading-6 text-gray-900">
          {{ question.title }}
        </h3>
        <p class="mt-2 leading-6 text-gray-500 text-justify block">
          {{ question.content }}
        </p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="text-gray-800 body-font relative">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-col text-center w-full mb-12">
      <h2
        class="font-heading mb-4 bg-primary-100 text-yellow-800 px-4 py-2 rounded-lg md:w-36 md:mx-auto text-xs font-semibold tracking-widest uppercase title-font"
      >
        Contact
      </h2>

      <h3 class="text-3xl font-extrabold leading-9 text-gray-900 mb-12">
        Contact Us
      </h3>
      <p class="lg:w-2/3 mx-auto leading-relaxed text-base">
        If you have any questions, please do not hesitate to reach out to us.
      </p>
    </div>
    <div class="lg:w-1/2 md:w-2/3 mx-auto">
      <form
        form
        name="contact"
        method="POST"
        data-netlify="true"
        netlify-honeypot="bot-field"
      >
        <div class="flex flex-wrap -m-2">
          <input
            type="hidden"
            name="subject"
            value="Registration for Winterschool"
          />
          <p class="hidden">
            <label>
              Don't fill this out if you're human: <input name="bot-field" />
            </label>
          </p>
          <div class="p-2 w-1/2">
            <div class="relative">
              <label for="name" class="leading-7 text-sm text-gray-600"
                >Name</label
              >
              <input
                type="text"
                id="name"
                name="name"
                class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              />
            </div>
          </div>
          <div class="p-2 w-1/2">
            <div class="relative">
              <label for="email" class="leading-7 text-sm text-gray-600"
                >Email</label
              >
              <input
                type="email"
                id="email"
                name="email"
                class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              />
            </div>
          </div>
          <div class="p-2 w-full">
            <div class="relative">
              <label for="message" class="leading-7 text-sm text-gray-600"
                >Message</label
              >
              <textarea
                id="message"
                name="message"
                class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
              ></textarea>
            </div>
          </div>
          <div class="p-2 w-full">
            <div data-netlify-recaptcha="true"></div>
            <button
              type="submit"
              class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg"
            >
              <p>Send</p>
              <i class="ml-2 pt-1.5 fa-solid fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="bg-gray-100">
  <div
    class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
  >
    <h2
      class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
    >
      <span class="block">Excited?</span>
      <span class="block text-primary-600">Sign up</span>
    </h2>
    <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
      <div class="inline-flex rounded-md shadow">
        <a
          href="https://collab.dvb.bayern/display/TUMrostlabform/Winterschool+Registration"
          class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700"
        >
          Registration 
        </a>
      </div>
    </div>
  </div>
</section>