Pos-Graduação FAM

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>Marketing e Negócios 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-por-curso/cursospos_style.css">
  </head>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q9MCLKTGL1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'G-Q9MCLKTGL1');

  </script>

  <body>

    <div id="navDots">
      <a href="javascript:void(0);" onclick="topFunction()" class="nav-dot-top" title="Voltar ao topo">•</a>
      <a href="#secao1" class="nav-dot" title="Informações básicas">•</a>
      <a href="#secao2" class="nav-dot" title="Tópicos">•</a>
      <a href="#secao3" class="nav-dot" title="Mercado de trabalho">•</a>
      <a href="#secao4" class="nav-dot" title="Sobre">•</a>
      <a href="#secao5" class="nav-dot" title="Vídeo">•</a>
      <a href="#secao6" class="nav-dot" title="Matriz Escolar">•</a>
      <a href="#secao7" class="nav-dot" title="Nossos Docentes">•</a>
      <a href="#secao8" class="nav-dot" title="Mais sobre a FAM">•</a>
    </div>



    <div class="button-background" id="buttonBackground">
      <div style="width: 960px;">
        <div class="header-container">
          <div class="title-container">
            <h1 class="header-titulo">Marketing e Negócios</h1>
            <h2 class="header-subtitulo">Pós-graduação</h2>
          </div>
          <a href="https://fam.inscricao.crmeducacional.com/login/25"...

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');


html {
  scroll-behavior: smooth;
}

:root {
  /* Cores */
  --roxo: #5d378d;
  --azul-claro: #e53888;
  --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;
}

/* Personaliza a barra de rolagem inteira */
::-webkit-scrollbar {
  width: 12px;
}

/* Personaliza o fundo da barra de rolagem */
::-webkit-scrollbar-track {
  background: white;

}

/* Personaliza a barra de rolagem em si */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.219);
  border: 2px solid white;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);

}

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

.header-titulo {
  color: white;
  margin-bottom: 0;
  margin-top: -10px;
}

.header-subtitulo {
  color: var(--amarelo);
  font-weight: 400;
  text-transform: var(--caixatexto);
  font-size: medium;
  margin: 0;
  margin-top: -8px;
}

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

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

}

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

.box {
  position: relative;
  overflow-x: hidden;
  padding: 0 auto;
  width: auto;
  z-index: 2;
  background: linear-gradient(to bottom, white 50%, var(--roxo) 50%);
}

.box-inverso {
  position: relative;
 ...

JavaScript

const url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vREDH7BTr9H2Um4BgNp45XYW1ybvS1qBIWACK2eElc7pmra17fwwcVBp3Um-GD6_wOF_N_FquXS1Rx9/pub?output=csv';

Papa.parse(url, {
  download: true,
  header: true,
  complete: function (results) {
    var data = results.data;

    // Container para Cursos
    var contentDivCursos = document.createElement('div');
    contentDivCursos.className = 'containercursos';

    // Container para Valor Total
    var contentDivValorTotal = document.createElement('div');
    contentDivValorTotal.className = 'containercursos';

    // Filtrando e processando dados para o curso especificado
    data.filter(row => row['Cursos'] === 'Pós Marketing').forEach(row => {
      // Processando para Cursos
      var cardDivCursos = document.createElement('div');
      cardDivCursos.className = 'cursos';
      cardDivCursos.innerHTML = `<p>${row['Valor']}</p>`;
      contentDivCursos.appendChild(cardDivCursos);

      // Processando para Valor Total
      var cardDivValorTotal = document.createElement('div');
      cardDivValorTotal.className = 'cursos';
      cardDivValorTotal.innerHTML = `<p>${row['Valor Total']}</p>`;
      contentDivValorTotal.appendChild(cardDivValorTotal);
    });

    // Adicionando a produtofinalcursos
    var locaisCursos = document.getElementsByClassName('produtofinalcursos');
    for (var i = 0; i < locaisCursos.length; i++) {
      locaisCursos[i].appendChild(contentDivCursos.cloneNode(true));
    }

    // Adicionando a produtofinalcursostotal
    var locaisValorTotal = document.getElementsByClassName('produtofinalcursostotal');
    for (var j = 0; j < locaisValorTotal.length; j++) {
      locaisValorTotal[j].appendChild(contentDivValorTotal.cloneNode(true));
    }
  }
});




const url3 = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQFQpAPuz3qeeeaVPGRhbC76PJCmu__UDYg99qUuZMnYw6PrdOkZ3jtLCOf9SlcMh3ft7liKV5b0tk4/pub?output=csv';

Papa.parse(url3, {
  download: true,
  header: true,
  complete: function...