Upload 57 files

.gitattributes

@@ -39,3 +39,9 @@ docs/public/flower3.jpg filter=lfs diff=lfs merge=lfs -text
 docs/public/flower4.jpg filter=lfs diff=lfs merge=lfs -text
 docs/public/flower5.jpg filter=lfs diff=lfs merge=lfs -text
 docs/public/x5.png filter=lfs diff=lfs merge=lfs -text
+public/flower1.jpg filter=lfs diff=lfs merge=lfs -text
+public/flower2.jpg filter=lfs diff=lfs merge=lfs -text
+public/flower3.jpg filter=lfs diff=lfs merge=lfs -text
+public/flower4.jpg filter=lfs diff=lfs merge=lfs -text
+public/flower5.jpg filter=lfs diff=lfs merge=lfs -text
+public/x5.png filter=lfs diff=lfs merge=lfs -text

scripts/barChart.js

@@ -0,0 +1,30 @@
+new Chart(document.getElementById('BarChart'), {
+  type: 'bar',
+  data: {
+    labels: ['q', 'w', 'e', 'r', 't', 'y'],
+    datasets: [
+      {
+        label: 'Dataset 1',
+        data: [520, 760, 240, 433, 156, 380],
+        backgroundColor: '#64bbf3',
+      },
+      {
+        label: 'Dataset 2',
+        data: [450, 810, 370, 400, 215, 300],
+        backgroundColor: '#ee6c71',
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      title: {
+        display: true,
+        text: 'Chart.js Bar Chart',
+      },
+    },
+  },
+})

scripts/beforeAfter.js

@@ -0,0 +1,14 @@
+const container = document.querySelector('.compare-images')
+const handle = document.querySelector('.slider-handle')
+const beforeImg = document.querySelector('.before-img')
+
+container.addEventListener('mousemove', (e) => {
+  const rect = container.getBoundingClientRect()
+  const offsetX = e.clientX - rect.left
+
+  const clampedX = Math.max(0, Math.min(offsetX, rect.width))
+
+  handle.style.left = `${clampedX}px`
+
+  beforeImg.style.clipPath = `inset(0 0 0 ${clampedX}px)`
+})

scripts/codeCopy.js

@@ -0,0 +1,30 @@
+document.querySelectorAll('.bibTeX-section').forEach((section) => {
+  const button = section.querySelector('.copy-button')
+  if (!button) return
+
+  const codeElement = section.querySelector('.bibTeX')
+  const activeСontent = button.querySelector('.active-content')
+  const inactiveСontent = button.querySelector('.inactive-content')
+
+  const code = codeElement ? codeElement.innerText : ''
+
+  button.addEventListener('click', () => {
+    navigator.clipboard.writeText(code).catch((err) => {
+      console.error('Ошибка копирования:', err)
+    })
+
+    button.classList.add('copy-button--inactive')
+    button.classList.remove('copy-button--active')
+
+    if (activeСontent) activeСontent.style.display = 'none'
+    if (inactiveСontent) inactiveСontent.style.display = 'block'
+
+    setTimeout(() => {
+      button.classList.remove('copy-button--inactive')
+      button.classList.add('copy-button--active')
+
+      if (activeСontent) activeСontent.style.display = 'block'
+      if (inactiveСontent) inactiveСontent.style.display = 'none'
+    }, 3000)
+  })
+})

scripts/dropdown.js

@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const dropdowns = document.querySelectorAll('[data-dropdown]')
+  const selectedValue = document.getElementById('selectedValue')
+
+  dropdowns.forEach((dropdown) => {
+    const button = dropdown.querySelector('.dropdown__button')
+
+    const items = dropdown.querySelectorAll('.dropdown__item')
+
+    button.addEventListener('click', function (e) {
+      dropdown.classList.toggle('open')
+    })
+
+    items.forEach((item) => {
+      item.addEventListener('click', function () {
+        const value = this.textContent
+        selectedValue.textContent = value
+        dropdown.classList.remove('open')
+      })
+    })
+  })
+})

scripts/lightbox.js

@@ -0,0 +1,30 @@
+function setupLightbox(thumbnailId, lightboxId, lightboxImgId, closeBtnId) {
+  const thumbnail = document.getElementById(thumbnailId)
+  const lightbox = document.getElementById(lightboxId)
+  const lightboxImg = document.getElementById(lightboxImgId)
+  const closeBtn = document.getElementById(closeBtnId)
+
+  if (thumbnail && lightbox && lightboxImg && closeBtn) {
+    thumbnail.addEventListener('click', () => {
+      lightbox.style.display = 'block'
+      lightboxImg.src = thumbnail.src
+    })
+
+    closeBtn.addEventListener('click', () => {
+      lightbox.style.display = 'none'
+    })
+
+    lightbox.addEventListener('click', (e) => {
+      if (e.target === lightbox) {
+        lightbox.style.display = 'none'
+      }
+    })
+  } else {
+    console.warn(`Элементы лайтбокса "${lightboxId}" не найдены.`)
+  }
+}
+
+setupLightbox('openLightbox1', 'lightbox1', 'lightbox-img1', 'closeLightbox1')
+setupLightbox('openLightbox2', 'lightbox2', 'lightbox-img2', 'closeLightbox2')
+setupLightbox('openLightbox3', 'lightbox3', 'lightbox-img3', 'closeLightbox3')
+setupLightbox('openLightbox4', 'lightbox4', 'lightbox-img4', 'closeLightbox4')

scripts/lineChart.js

@@ -0,0 +1,30 @@
+new Chart(document.getElementById('LineChart'), {
+  type: 'line',
+  data: {
+    labels: ['qq', 'w', 'e', 'r', 't', 'y'],
+    datasets: [
+      {
+        label: 'Dataset 1',
+        data: [520, 760, 240, 433, 156, 380],
+        backgroundColor: '#64bbf3',
+      },
+      {
+        label: 'Dataset 2',
+        data: [450, 810, 370, 400, 215, 300],
+        backgroundColor: '#ee6c71',
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+      },
+      title: {
+        display: true,
+        text: 'Chart.js Line Chart',
+      },
+    },
+  },
+})

scripts/pieChart.js

@@ -0,0 +1,29 @@
+new Chart(document.getElementById('PieChart'), {
+  type: 'pie',
+  data: {
+    labels: ['1', '2', '3'],
+    datasets: [
+      {
+        label: 'Dataset 1',
+        data: [50, 15, 35],
+        backgroundColor: ['#64bbf3', '#ee6c71', '#fecc4e'],
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top',
+        labels: {
+          boxWidth: 15,
+          padding: 15,
+        },
+      },
+      title: {
+        display: true,
+        text: 'Chart.js Pie Chart',
+      },
+    },
+  },
+})

scripts/sidebar.js

@@ -0,0 +1,72 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const sections = document.querySelectorAll('section[id]')
+  const navItems = document.querySelectorAll('.sidebar .nav-item')
+  const sidebar = document.querySelector('.sidebar')
+  const footer = document.getElementById('footer')
+
+  document.querySelectorAll('.sidebar a[href^="#"]').forEach((link) => {
+    const target = link.getAttribute('href')
+    const parentItem = link.closest('.nav-item')
+    if (parentItem && target) {
+      parentItem.setAttribute('data-target', target)
+    }
+  })
+
+  function updateActiveLink() {
+    let currentSectionId = null
+
+    sections.forEach((section) => {
+      const rect = section.getBoundingClientRect()
+      if (rect.top <= 100 && rect.bottom >= 50) {
+        currentSectionId = section.id
+      }
+    })
+
+    navItems.forEach((item) => item.classList.remove('active'))
+
+    if (!currentSectionId) return
+
+    const activeItem = document.querySelector(
+      `.sidebar .nav-item[data-target="#${currentSectionId}"]`
+    )
+    if (activeItem) {
+      activeItem.classList.add('active')
+    }
+  }
+
+  function adjustSidebarPosition() {
+    if (!sidebar || !footer) return
+
+    const footerRect = footer.getBoundingClientRect()
+    const sidebarHeight = sidebar.offsetHeight
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+
+    const footerTop = scrollTop + footerRect.top
+
+    const bodyContainer = document.querySelector('.body-container')
+    const bodyBottom = bodyContainer
+      ? bodyContainer.offsetTop + bodyContainer.offsetHeight
+      : footerTop
+
+    const initialSidebarTop = window.innerHeight * 0.2
+    const sidebarBottomOnPage = scrollTop + initialSidebarTop + sidebarHeight
+
+    if (sidebarBottomOnPage >= footerTop - 20) {
+      sidebar.style.position = 'absolute'
+      sidebar.style.top = `${bodyBottom - sidebarHeight - 20}px`
+    } else {
+      sidebar.style.position = 'fixed'
+      sidebar.style.top = `${20}%`
+    }
+  }
+
+  window.addEventListener('scroll', () => {
+    updateActiveLink()
+    adjustSidebarPosition()
+  })
+
+  window.addEventListener('resize', adjustSidebarPosition)
+
+  updateActiveLink()
+  adjustSidebarPosition()
+})

scripts/swiper.js

@@ -0,0 +1,35 @@
+var swiper = new Swiper('.mySwiper', {
+  loop: true,
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+})
+
+const swiperLightbox = document.getElementById('swiper-lightbox')
+const swiperLightboxImg = document.getElementById('swiper-lightbox-img')
+const swiperCloseBtn = document.getElementById('swiper-lightbox__close')
+
+if (swiperLightbox && swiperLightboxImg && swiperCloseBtn) {
+  document.querySelectorAll('.swiper-slide img').forEach((slideImage) => {
+    slideImage.addEventListener('click', () => {
+      const imgSrc = slideImage.src
+      if (imgSrc) {
+        swiperLightbox.style.display = 'flex'
+        swiperLightboxImg.src = imgSrc
+      }
+    })
+  })
+
+  swiperCloseBtn.addEventListener('click', () => {
+    swiperLightbox.style.display = 'none'
+  })
+
+  swiperLightbox.addEventListener('click', (e) => {
+    if (swiperLightbox.style.display === 'flex') {
+      swiperLightbox.style.display = 'none'
+    }
+  })
+} else {
+  console.warn('Элементы лайтбокса в слайдере не найдены.')
+}

scripts/swiperCharts.js

@@ -0,0 +1,142 @@
+const charts = {}
+
+function initBarChart() {
+  if (charts.barChart) return
+  charts.barChart = new Chart(document.getElementById('BarChart-slider'), {
+    type: 'bar',
+    data: {
+      labels: ['q', 'w', 'e', 'r', 't', 'y'],
+      datasets: [
+        {
+          label: 'Dataset 1',
+          data: [520, 760, 240, 433, 156, 380],
+          backgroundColor: '#64bbf3',
+        },
+        {
+          label: 'Dataset 2',
+          data: [450, 810, 370, 400, 215, 300],
+          backgroundColor: '#ee6c71',
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          position: 'top',
+        },
+        title: {
+          display: true,
+          text: 'Chart.js Bar Chart',
+        },
+      },
+    },
+  })
+}
+
+function initLineChart() {
+  if (charts.lineChart) return
+  charts.lineChart = new Chart(document.getElementById('LineChart-slider'), {
+    type: 'line',
+    data: {
+      labels: ['qq', 'w', 'e', 'r', 't', 'y'],
+      datasets: [
+        {
+          label: 'Dataset 1',
+          data: [520, 760, 240, 433, 156, 380],
+          backgroundColor: '#64bbf3',
+        },
+        {
+          label: 'Dataset 2',
+          data: [450, 810, 370, 400, 215, 300],
+          backgroundColor: '#ee6c71',
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        title: {
+          display: true,
+          text: 'Chart.js Line Chart',
+        },
+      },
+    },
+  })
+}
+
+function initPieChart() {
+  if (charts.pieChart) return
+  charts.pieChart = new Chart(document.getElementById('PieChart-slider'), {
+    type: 'pie',
+    data: {
+      labels: ['1', '2', '3'],
+      datasets: [
+        {
+          label: 'Dataset 1',
+          data: [50, 15, 35],
+          backgroundColor: ['#64bbf3', '#ee6c71', '#fecc4e'],
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          labels: {
+            boxWidth: 15,
+            padding: 15,
+          },
+        },
+        title: {
+          display: true,
+          text: 'Chart.js Pie Chart',
+        },
+      },
+    },
+  })
+}
+
+initBarChart()
+
+var swiperOnButton = new Swiper('.my-swiper-on-button', {
+  loop: false,
+})
+
+function onSlideChange() {
+  const activeIndex = swiperOnButton.realIndex
+
+  ;['barChart', 'lineChart', 'pieChart'].forEach((key) => {
+    if (charts[key]) {
+      charts[key].destroy()
+      charts[key] = null
+    }
+  })
+
+  if (activeIndex === 0) initBarChart()
+  if (activeIndex === 1) initLineChart()
+  if (activeIndex === 2) initPieChart()
+}
+
+swiperOnButton.on('slideChange', onSlideChange)
+
+document.querySelectorAll('[data-slide-to]').forEach((button) => {
+  button.addEventListener('click', () => {
+    console.log(
+      'click',
+      charts,
+      button.getAttribute('data-slide-to'),
+      parseInt(button.getAttribute('data-slide-to'))
+    )
+    document.querySelectorAll('.swiper-button').forEach((btn) => {
+      btn.classList.remove('active')
+    })
+    button.classList.add('active')
+    const index = parseInt(button.getAttribute('data-slide-to'))
+    swiperOnButton.slideTo(index)
+
+    setTimeout(() => {
+      onSlideChange()
+    }, 10)
+  })
+})

styles/beforeAfter.css

@@ -0,0 +1,60 @@
+.compare-container {
+  max-width: 800px;
+  margin: 40px auto;
+  position: relative;
+  cursor: crosshair;
+}
+
+.compare-images {
+  position: relative;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+
+  border-radius: 10px;
+  aspect-ratio: 16 / 9;
+}
+
+.compare-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: clip-path 0.1s ease-out;
+}
+
+.before-img {
+  clip-path: inset(0 0 0 50%);
+  z-index: 1;
+}
+
+.after-img {
+  z-index: 0;
+}
+
+.slider-handle {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  background-color: #2ebead;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0.7;
+  transition: left 0.1s ease-out;
+}
+
+.slider-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -11px;
+  transform: translateY(-50%);
+  width: 25px;
+  height: 25px;
+  background-color: #2ebead;
+  border-radius: 50%;
+}

styles/bibTex.css

@@ -0,0 +1,65 @@
+.bibTeX-section__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  justify-items: center;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.bibTeX__container {
+  border-radius: 15px;
+  padding: 20px;
+  background-color: #f4f4f4;
+}
+
+.bibTeX {
+  margin: 0;
+  padding: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  color: #333;
+}
+
+.copy-button {
+  padding: 10px;
+  text-align: center;
+  width: 180px;
+  margin-left: auto;
+  margin-right: auto;
+  color: white;
+  font-size: 18px;
+
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.copy-button > p,
+.copy-button > img {
+  text-align: center;
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.copy-button--active {
+  background-color: #64bbf3;
+}
+.copy-button--inactive {
+  background-color: #53d98a;
+}
+
+.copy-button--active:hover {
+  background-color: #56a1d3;
+}
+
+.copy-button .inactive-content {
+  display: none;
+  pointer-events: none;
+}

styles/charts.css

@@ -0,0 +1,30 @@
+.diagrams-section__container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.myChart {
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 15px;
+  border: 1px solid rgb(245, 245, 245);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
+}
+
+.myChart:hover {
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.caption {
+  margin: 0 auto 40px auto;
+  font-size: 12px;
+}
+
+@media (max-width: 670px) {
+  .diagrams-section__container {
+    width: 90vw;
+  }
+}

styles/codeSection.css

@@ -0,0 +1,31 @@
+.code-section__container {
+  position: relative;
+
+  border-radius: 5px;
+  padding: 50px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
+}
+
+.code__container {
+  padding: 20px;
+  background-color: #f4f4f4;
+}
+
+.code {
+  margin: 0;
+  padding: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  color: #333;
+}
+
+@media (max-width: 600px) {
+  .code-section__container {
+    padding: 20px;
+  }
+}

styles/columnsSection.css

@@ -0,0 +1,28 @@
+.columns-section__container {
+  border: 1px solid rgb(245, 245, 245);
+  border-radius: 15px;
+  padding: 50px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
+}
+
+.column {
+  padding: 0 10px;
+  height: 100%;
+  border: none;
+}
+
+.row {
+  margin-bottom: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 600px) {
+  .columns-section__container {
+    padding: 20px;
+  }
+}

styles/dropdown.css

@@ -0,0 +1,81 @@
+.dropdown-section__container {
+  border: 1px solid rgb(245, 245, 245);
+  border-radius: 15px;
+  padding: 50px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
+}
+.dropdown__row {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.dropdown {
+  width: 100%;
+  position: relative;
+  flex: 1 1 30%;
+  min-width: 200px;
+  transition: flex 5.3s ease;
+}
+
+.dropdown__button {
+  width: 100%;
+  padding: 10px 15px;
+  background-color: #0b6efd;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  text-align: left;
+  transition: background-color 0.2s ease;
+}
+.dropdown__button:hover {
+  background-color: #0353c4;
+}
+
+.dropdown__content {
+  display: none;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: white;
+  z-index: 1000;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 4px;
+  animation: fadeIn 0.5s ease forwards;
+}
+
+.dropdown.open .dropdown__content {
+  display: block;
+}
+
+.dropdown__item {
+  white-space: normal;
+  word-wrap: break-word;
+  text-align: left;
+  padding: 10px 16px;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 600px) {
+  .dropdown-section__container {
+    padding: 20px;
+  }
+}

styles/footer.css

@@ -0,0 +1,113 @@
+footer {
+  width: 100%;
+  background-color: #171c27;
+  color: white;
+  padding: 20px 20px 10px 20px;
+}
+
+.footer-section {
+  max-width: 1400px;
+  margin: 45px auto 0 auto;
+}
+
+.footer__information {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  justify-self: center;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.airi-logo-section {
+  max-width: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+
+  color: #8c9090;
+}
+.airi-logo-section > img {
+  width: 160px;
+}
+.airi-logo-section > p {
+  margin-top: 14px;
+  font-size: 12px;
+}
+
+.footer__mails {
+  display: flex;
+  flex-direction: column;
+}
+
+.copyrighted {
+  width: 100%;
+  text-align: center;
+  margin: 3vh auto 1vh auto;
+  color: #8c9090;
+}
+
+.gray {
+  color: #8c9090;
+}
+
+.mail {
+  font-size: 16px;
+  color: #fff;
+  transition: color 0.5s ease;
+}
+
+.mail:hover {
+  color: #2ebead;
+}
+
+.mail__description {
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #8c9090;
+}
+
+.media-logo {
+  margin: 5px 5px 5px 0;
+  fill: white;
+  transition: all 0.3s ease;
+}
+
+.media-logo:hover {
+  fill: #2fbead;
+}
+
+@media (max-width: 900px) {
+  .footer__information {
+    flex-direction: column;
+    justify-content: center;
+  }
+  .airi-logo {
+    margin-bottom: 50px;
+  }
+  .footer__information {
+    width: 100%;
+    padding: 0 5vw;
+  }
+
+  .footer__mails {
+    flex-direction: column;
+    width: 100%;
+    margin: 0;
+  }
+
+  .copyrighted {
+    width: 100%;
+    margin: 5vh 0 1vh 0;
+  }
+
+  .footer__social-media {
+    width: 100%;
+    padding: 0 5vw;
+    margin-bottom: 50px;
+  }
+  .mail__contanct {
+    margin: 20px 0 0 0;
+  }
+}

styles/header.css

@@ -0,0 +1,104 @@
+header {
+  padding: 5vh 10vw 0 10vw;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  background: linear-gradient(
+    180deg,
+    rgb(254, 243, 227) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+}
+.header__container {
+  max-width: 800px;
+  font-family: 'Inter', sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.header__container > h1 {
+  text-align: center;
+}
+
+.header__link-container {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px 15px;
+  line-height: 1.6;
+  margin-top: 50px;
+  width: 80%;
+}
+
+a {
+  font-size: 14px;
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: none;
+}
+
+.linkContainer__authors {
+  margin-bottom: 2vh;
+}
+.header__button-container {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: row;
+}
+.header__button {
+  display: flex;
+  align-items: center;
+  padding: 25px 20px 25px 20px;
+  font-size: 16px;
+  width: 10em;
+  height: 40px;
+  margin: 2.5px;
+  border-radius: 30px;
+  background-color: #2ebead;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
+}
+
+.header__button:hover {
+  transform: scale(1.05);
+  background-color: #29ac9d;
+}
+
+.header__button-logo {
+  position: absolute;
+  margin: 0;
+}
+.header__button-text {
+  font-size: 14px;
+  margin: 0 auto 0 auto;
+  text-align: center;
+}
+.header__participants-container {
+  margin-bottom: 40px;
+}
+.header__participants-logo {
+  width: 170px;
+  height: 120px;
+}
+
+@media (max-width: 600px) {
+  .header__participants-logo {
+    width: 150px;
+  }
+  .header__button-container {
+    flex-direction: column;
+  }
+  .header__link-container {
+    width: 90%;
+  }
+  .header__button {
+    width: 18em;
+    margin-bottom: 10px;
+  }
+}

styles/lightbox.css

@@ -0,0 +1,77 @@
+.lighbox-container {
+  display: flex;
+  width: 100%;
+
+  flex-direction: column;
+}
+
+.lighbox-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.thumbnail {
+  cursor: pointer;
+  width: 250px;
+  height: auto;
+  border-radius: 8px;
+  transition: transform 0.2s ease;
+}
+
+.thumbnail:hover {
+  transform: scale(1.05);
+}
+
+.lightbox {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+}
+
+.lightbox-content {
+  margin: 5% auto;
+  display: block;
+  max-width: 90%;
+  max-height: 80vh;
+  animation: zoom 0.3s;
+}
+
+.close-btn {
+  position: absolute;
+  top: 20px;
+  right: 35px;
+  color: white;
+  font-size: 40px;
+  font-weight: bold;
+  cursor: pointer;
+  z-index: 10000;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: #bbb;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+@keyframes zoom {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@media (max-width: 600px) {
+  .lighbox-container {
+    padding: 20px;
+  }
+}

styles/main.css

@@ -0,0 +1,84 @@
+body {
+  min-height: 100vh;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+main {
+  flex: 1;
+}
+
+section {
+  max-width: 800px;
+  margin-bottom: 100px;
+}
+
+.body-container {
+  font-family: 'Montserrat', sans-serif;
+}
+
+p,
+h1,
+h2,
+h3,
+ul,
+li {
+  max-width: 660px;
+  text-align: left;
+}
+
+h1 {
+  width: 100%;
+  margin: 0;
+  font-weight: 700;
+  font-size: 38px;
+}
+
+p {
+  margin-bottom: 30px;
+  font-weight: 400;
+  text-align: left;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+h2 {
+  width: 100%;
+  margin: 0;
+  margin-bottom: 40px;
+  font-weight: 600;
+  font-size: 32px;
+}
+
+h3 {
+  font-size: 26px;
+  font-weight: 500;
+}
+li {
+  margin-bottom: 15px;
+  line-height: 1.6;
+}
+@media (max-width: 800px) {
+  .body-container {
+    width: 90vw;
+  }
+}
+@media (max-width: 600px) {
+  section {
+    margin-bottom: 45px;
+  }
+  h1 {
+    font-size: 30px;
+  }
+  h2 {
+    font-size: 24px;
+    margin-bottom: 25px;
+  }
+  p {
+    font-size: 16px;
+    margin-bottom: 20px;
+  }
+}

styles/numberSection.css

@@ -0,0 +1,27 @@
+.numbers-section__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  justify-items: center;
+}
+
+.numbers__container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.number__card {
+  margin-right: 10px;
+}
+
+.number__card > h1 {
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+.number__card > p {
+  text-align: center;
+  margin-bottom: 0;
+}