Leading Page - por curso

by Nikkoin

HTML

<!DOCTYPE html>
<html lang="pt-BR">

  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="https://i.postimg.cc/8P2rwWhK/famlogo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administração FAM</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/freeps2/a7rarpress@main/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="codigo/style.css">
  </head>

  <body>
    <div id="top-header"></div>
    <div id="sticky-header" class="header">
      <div class="header-container">
        <div class="title-container">
          <h1 class="header-titulo">Administração</h1>
          <h2 class="header-subtitulo">Bacharelado</h2>
        </div>
        <a href="https://vestibularfam.com.br" class="inscreva-btn">Inscreva-se</a>
      </div>
    </div>

    <main>
      <section>
        <div class="containerinfo">
          <div class="caixainfo">
            <div class="texto-cima">8</div>
            <div class="texto-baixo">Semestres</div>
          </div>
          <div class="caixainfo">
            <div class="texto-cima">Noturno</div>
            <div class="texto-baixo">Presencial</div>
          </div>
          <div class="caixainfo">
            <div class="texto-cima">Reconhecido</div>
            <div class="texto-baixo">MEC</div>
          </div>
          <div class="caixainfo">
            <div class="texto-cima"><a class="piquininha">R$ </a>
              <div id="produtofinalcursos"></div>*
            </div>
            <div class="texto-baixo">Mensais</div>
          </div>
        </div>
      </section>

      <section>
        <div class="motivosfam">
          <div class="grid-container">
            <div class="grid-item">
              <img src="https://i.postimg.cc/DZVvHfgT/noun-text-2132279.png" alt="Ícone 1" class="icon">
              <div...

CSS

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css');

:root {
  /* Cores */
  --azul-principal: #1b3556;
  --azul-claro: #45b7e5;
  --amarelo: #f9e20f;
  --neutral-light: #f2f3f8;
  --bg-branco: white; 
  --bg-scroll: rgba(0, 0, 0, 0.253);
  --texto-preto: #242527;

 

  /* Tipografia */
  --primary-font: 'Source Sans 3', sans-serif;
  --h1-title-font-size: 26px;
  --caixatexto: uppercase;

  /* Medidas */
  --container-width: 960px;
  --margin-20: 20px;
  --margin-10: 10px;
  --margin-5: 5px;
  --border-50: 50px;
  --border-10: 10px;
  --border-5: 5px;

  /* Transições */
  --transition-speed: 0.3s;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: white;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.253);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--primary-font);
  background-color: var(--bg-branco);
}

.header-titulo {
  color: white;
}

.header-subtitulo {
  color: var(--azul-claro);
  font-weight: 400;
  text-transform: var(--caixatexto);
  font-size: medium;
}

#top-header {
  width: 100%;
  height: 400px;
  background: url(https://i.postimg.cc/Q8g4LqQ5/headway-5-Qg-Iuu-Bx-Kw-M-unsplash.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

}

#sticky-header {
  background: var(--azul-principal);
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  transition: all 0.3s;
  z-index: 10;

}

h2 {
  color: var(--texto-preto);
  font-size: 30px;
}

h3 {
  color: var(--texto-preto);
  font-size: 22px;

}

p {
  color: var(--texto-preto);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-width);
  margin: auto;
  height: 100%;
 ...

JavaScript

/* Referencias
https://codepen.io/a7rarpress/pen/MWPgaMq
https://jsfiddle.net/4vm1sht5/3/
*/

function mostrarDescricao(elemento) {
  let descricao = elemento.nextElementSibling;

  if (descricao.style.display === 'block') {
    descricao.style.display = 'none';
    return;
  }

  let todasDescricoes = document.querySelectorAll('.descricao');
  for (let i = 0; i < todasDescricoes.length; i++) {
    todasDescricoes[i].style.display = 'none';
  }

  descricao.style.display = 'block';
}

let posicaoAnterior = 0;  // Armazena a posição anterior da rolagem

function expandirRecolher() {
  let lista = document.getElementById('lista');
  let btn = document.getElementById('btnExpandir');

  if (lista.style.height === 'auto') {
    lista.style.height = '200px';
    btn.innerHTML = 'Veja mais';

    // Esconde todas as descrições ao recolher
    let todasDescricoes = document.querySelectorAll('.descricao');
    for (let i = 0; i < todasDescricoes.length; i++) {
      todasDescricoes[i].style.display = 'none';
    }

    // Move a rolagem de volta para a posição anterior
    window.scrollTo(0, posicaoAnterior);

  } else {
    // Armazena a posição atual da rolagem
    posicaoAnterior = window.scrollY;

    lista.style.height = 'auto';
    btn.innerHTML = 'Recolher';
  }
}




var swiper = new Swiper(".slide-content", {
  slidesPerView: 3,
  spaceBetween: 20,
  loop: true,
  centerSlide: 'true',
  fade: 'true',
  grabCursor: 'true',
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    520: {
      slidesPerView: 2,
    },
    950: {
      slidesPerView: 3,
    },
  },
});


window.onscroll = function () { scrollFunction() };

function scrollFunction() {
  var header = document.getElementById("sticky-header");
  var topHeader = document.getElementById("top-header");

  // Definir...