Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
initial commit
cursos.html | 123 ++++++++++++++++++++++++++++++++++++++++++++ estilo.css | 135 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 45 ++++++++++++++++ mesa.html | 71 +++++++++++++++++++++++++ palestrantes.html | 74 ++++++++++++++++++++++++++ patrocinio.html | 59 +++++++++++++++++++++ principal.html | 33 +++++++++++
diff --git a/cursos.html b/cursos.html new file mode 100644 index 0000000000000000000000000000000000000000..f40935b86c69073f040e82f45aa186dd4361a245 --- /dev/null +++ b/cursos.html @@ -0,0 +1,123 @@ +<!doctype html> +<html> + <head> + <title>Mini-cursos - SASPI</title> + <link rel="stylesheet" type="text/css" href="estilo.css"> + </head> + <body> + <main> + <div class="container"> + <div class="mb-30"> + <header> + <h1 class="logo">SASPI</h1> + </header> + </div> + + <div> + <h2 class="text-center"> + Mini-cursos + </h2> + </div> + + <div class="flex flex-row bloco"> + <img src="img/java.jpg" alt="Java"> + + <div class="flex flex-column mr-10"> + <h2>Java (manhã)</h2> + <p> + Java é uma das linguagens de programação mais populares do mundo. + Ela é usada para desenvolver aplicativos para desktop, web e + dispositivos móveis. Java é conhecida por sua portabilidade e + segurança. + + Além disso, Java é uma linguagem orientada a objetos, o que + significa que ela permite a criação de programas modulares e + reutilizáveis. Isso torna o desenvolvimento de software mais + agradável e eficiente. + </p> + </div> + </div> + + <div class="flex flex-row mt-20 bloco"> + <img src="img/javascript.png" alt="Javascript"> + + <div class="flex flex-column mr-10"> + <h2>Javascript (tarde)</h2> + <p> + Javascript é uma linguagem de programação de alto nível que é + usada para criar páginas web interativas. Ela é conhecida por sua + simplicidade e flexibilidade. + + Uma das principais características do Javascript é a sua + capacidade de manipular o conteúdo de uma página web em tempo + real. Isso permite a criação de páginas dinâmicas e interativas + que respondem às ações do usuário. + </p> + </div> + </div> + + <div class="flex flex-row mt-20 bloco"> + <img src="img/c.png" alt="Bill Gates"> + + <div class="flex flex-column mr-10"> + <h2>C (noite)</h2> + <p> + C é uma linguagem de programação de baixo nível que é usada para + desenvolver sistemas operacionais, drivers de dispositivos e + aplicativos de alto desempenho. Ela é conhecida por sua eficiência + e controle sobre o hardware. + + Uma das principais características do C é a sua capacidade de + acessar diretamente a memória do computador. Isso permite a + criação de programas rápidos e eficientes que podem ser + otimizados para um hardware específico. + </p> + </div> + </div> + + <div class="flex flex-column"> + <h2>Horários</h2> + <table style="width: 100%;"> + <thead> + <tr> + <th></th> + <th>09:00</th> + <th>14:00</th> + <th>19:00</th> + </tr> + </thead> + <tbody> + <tr> + <td>Manhã</td> + <td>Java</td> + <td></td> + <td></td> + </tr> + + <tr> + <td>Tarde</td> + <td></td> + <td>Javascript</td> + <td></td> + </tr> + + <tr> + <td>Noite</td> + <td></td> + <td></td> + <td>C</td> + </tr> + </tbody> + </table> + </div> + + <div class="voltar"> + <a href="principal.html">Voltar</a> + </div> + + <footer class="text-center"> + <p>© 2024</p> + </footer> + </main> + </body> +</html> diff --git a/estilo.css b/estilo.css new file mode 100644 index 0000000000000000000000000000000000000000..6808e47f9eba53c9a57f8288e7064e02c33a683c --- /dev/null +++ b/estilo.css @@ -0,0 +1,135 @@ +body { + font-family: Arial, sans-serif; + color: white; + background-color: #01204E; +} + +.container { + margin: 0 auto; + padding: 0 20px; + width: 70%; + max-width: 800px; +} + +#entrar { + padding: 10px 20px; + background-color: #40A578; + font-weight: bold; + color: white; + font-size: 26px; + text-decoration: none; +} + +.mb-30 { + margin-bottom: 30px; +} + +.logo { + font-size: 50px; + text-align: center; + color: #40A578; +} + +nav { + display: flex; + flex-direction: column; +} + +nav a { + font-size: 20px; + color: white; + text-decoration: none; + margin-bottom: 10px; +} + +nav a:hover { + color: #40A578; +} + +.bloco { + border-radius: 10px; + background-color: #40A578; + padding: 20px; +} + +.bloco img { + width: 200px; + margin-right: 20px; +} + +.voltar { + margin-top: 20px; +} + +.voltar a { + font-size: 20px; + color: #40A578; + text-decoration: none; +} + +.flex-column { + flex-direction: column; +} + +.flex-row { + flex-direction: row; +} + +.flex { + display: flex; +} + +.items-center { + align-items: center; +} + +.text-center { + text-align: center; +} + +.mt-20 { + margin-top: 20px; +} + +.m-0 { + margin: 0; +} + +.justify-between { + justify-content: space-between; +} + +.patrocinios { + margin-top: 50px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.patrocinios img { + height: 100px; +} + +table { + border-collapse: collapse; + width: 100%; + margin-top: 20px; +} + +th { + border: 1px solid #ddd; + padding: 8px; +} + +tr:nth-child(even) { + background-color: #395f99; + color: white; +} + +th { + padding-top: 12px; + padding-bottom: 12px; + text-align: left; + background-color: #40A578; + color: white; +} diff --git a/img/c.png b/img/c.png new file mode 100644 index 0000000000000000000000000000000000000000..dc7dbd7ba43b533f4ea3b90b70e8339c4431a134 Binary files /dev/null and b/img/c.png differ diff --git a/img/ford.png b/img/ford.png new file mode 100644 index 0000000000000000000000000000000000000000..91c5e6a174e72a25962ac60849b6e0a781a92def Binary files /dev/null and b/img/ford.png differ diff --git a/img/intel.png b/img/intel.png new file mode 100644 index 0000000000000000000000000000000000000000..f033416cda39dac39504647384ac3f56c5c27ad5 Binary files /dev/null and b/img/intel.png differ diff --git a/img/java.jpg b/img/java.jpg new file mode 100644 index 0000000000000000000000000000000000000000..87f356b14679b23f605d5ff2f0ae4f3847023ae3 Binary files /dev/null and b/img/java.jpg differ diff --git a/img/javascript.png b/img/javascript.png new file mode 100644 index 0000000000000000000000000000000000000000..5214c80358370d4a24e7ba9fbc5dcf67fa21fe1e Binary files /dev/null and b/img/javascript.png differ diff --git a/img/manoel.jpg b/img/manoel.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7533636ebc84300bfd83a93f57c64510fcac6ef1 Binary files /dev/null and b/img/manoel.jpg differ diff --git a/img/mcdonalds.png b/img/mcdonalds.png new file mode 100644 index 0000000000000000000000000000000000000000..161317bfd9aff1a2a3fb7e424e0c2279ff128a21 Binary files /dev/null and b/img/mcdonalds.png differ diff --git a/img/nike.png b/img/nike.png new file mode 100644 index 0000000000000000000000000000000000000000..91cc118da7be58a32d9fa3197ac7f15ebaeb1d93 Binary files /dev/null and b/img/nike.png differ diff --git a/img/steve.jpg b/img/steve.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6d48e7775e8750cf0ad144698fc4a91ea4ccda3f Binary files /dev/null and b/img/steve.jpg differ diff --git a/img/tiazinha.webp b/img/tiazinha.webp new file mode 100644 index 0000000000000000000000000000000000000000..1069b3a011080bd3774c6270d42eb0bf9cbb7933 Binary files /dev/null and b/img/tiazinha.webp differ diff --git a/img/vans.jpg b/img/vans.jpg new file mode 100644 index 0000000000000000000000000000000000000000..106de20a96e3cddd5b4b26e0457b76118cdcbd29 Binary files /dev/null and b/img/vans.jpg differ diff --git a/img/vans.png b/img/vans.png new file mode 100644 index 0000000000000000000000000000000000000000..ebf4fbc5f36e066ac27a72dc1d83108354539289 Binary files /dev/null and b/img/vans.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000000000000000000000000000000000000..02df892ef665b412352d99aa6e95f946630d953a --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ +<!doctype html> +<html> + <head> + <title>SASPI</title> + <link rel="stylesheet" type="text/css" href="estilo.css"> + </head> + <body> + <main> + <div class="container"> + <div class="mb-30"> + <header> + <h1 class="logo">SASPI</h1> + </header> + + <h2 class="text-center"> + 11 a 14 de Novembro + </h2> + </div> + + <center class="mt-10"> + <a id="entrar" href="principal.html"> + Entrar + </a> + </center> + + <div class="patrocinios items-center"> + <div> + <h3> + Patrocínio: + </h3> + </div> + + <div class="flex flex-row"> + <img src="img/intel.png" alt="logo1"> + <img src="img/mcdonalds.png" alt="logo2"> + <img src="img/ford.png" alt="logo3"> + </div> + </div> + + <footer class="text-center"> + <p>© 2024</p> + </footer> + </main> + </body> +</html> diff --git a/mesa.html b/mesa.html new file mode 100644 index 0000000000000000000000000000000000000000..af95de6f27d1a3e813fb9d282cedcf5ad284534e --- /dev/null +++ b/mesa.html @@ -0,0 +1,71 @@ +<!doctype html> +<html> + <head> + <title>Mesa Redonda - SASPI</title> + <link rel="stylesheet" type="text/css" href="estilo.css"> + </head> + <body> + <main> + <div class="container"> + <div class="mb-30"> + <header> + <h1 class="logo">SASPI</h1> + </header> + </div> + + <div> + <h2 class="text-center"> + Mesa Redonda + </h2> + </div> + + <div class="flex flex-row bloco"> + <img src="img/steve.jpg" alt="Steve Jobs"> + + <div class="flex flex-column mr-10"> + <h2>Steve Jobs</h2> + <p> + Steve Jobs foi um dos fundadores da Apple, uma das maiores + empresas de tecnologia do mundo. Ele é conhecido por ter + revolucionado a indústria de tecnologia com o lançamento do + iPhone e do iPad. + </p> + </div> + </div> + + <div class="flex flex-row mt-20 bloco"> + <img src="img/manoel.jpg" alt="Manoel Gomes"> + + <div class="flex flex-column mr-10"> + <h2>Manoel Gomes (Caneta Azul)</h2> + <p> + Manoel Gomes é um cantor e compositor brasileiro que ficou + famoso com a música "Caneta Azul". Ele é conhecido por sua + simplicidade e carisma. + </p> + </div> + </div> + + <div class="flex flex-row mt-20 bloco"> + <img src="img/tiazinha.webp" alt="Tiazinha"> + + <div class="flex flex-column mr-10"> + <h2>Tiazinha</h2> + <p> + Tiazinha é uma personagem interpretada pela atriz Suzana Alves + que ficou famosa nos anos 90. Ela é conhecida por sua sensualidade + e por ter sido assistente de palco do programa "H". + </p> + </div> + </div> + + <div class="voltar"> + <a href="principal.html">Voltar</a> + </div> + + <footer class="text-center"> + <p>© 2024</p> + </footer> + </main> + </body> +</html> diff --git a/palestrantes.html b/palestrantes.html new file mode 100644 index 0000000000000000000000000000000000000000..f95d01cec624fec28448ef2ccb6c231297825b8d --- /dev/null +++ b/palestrantes.html @@ -0,0 +1,74 @@ +<!doctype html> +<html> + <head> + <title>Palestrantes - SASPI</title> + <link rel="stylesheet" type="text/css" href="estilo.css"> + </head> + <body> + <main> + <div class="container"> + <div class="mb-30"> + <header> + <h1 class="logo">SASPI</h1> + </header> + </div> + + <div> + <h2 class="text-center"> + Palestrantes + </h2> + </div> + + <div class="flex flex-row bloco"> + <img src="img/steve.jpg" alt="Bill Gates"> + + <div class="flex flex-column mr-10"> + <h2>Steve Jobs</h2> + <h3 class="m-0">11/11</h3> + <p> + Steve Jobs foi um dos fundadores da Apple, uma das maiores + empresas de tecnologia do mundo. Ele é conhecido por ter + revolucionado a indústria de tecnologia com o lançamento do + iPhone e do iPad. + </p> + </div> + </div> + + <div class="flex flex-row mt-20 bloco"> + <img src="img/manoel.jpg" alt="Bill Gates"> + + <div class="flex flex-column mr-10"> + <h2>Manoel Gomes (Caneta Azul)</h2> + <h3 class="m-0">12/11</h3> + <p> + Manoel Gomes é um cantor e compositor brasileiro que ficou + famoso com a música "Caneta Azul". Ele é conhecido por sua + simplicidade e carisma. + </p> + </div> + </div> + + <div class="flex flex-row mt-20 bloco"> + <img src="img/tiazinha.webp" alt="Bill Gates"> + + <div class="flex flex-column mr-10"> + <h2>Tiazinha</h2> + <h3 class="m-0">14/11</h3> + <p> + Tiazinha é uma personagem interpretada pela atriz Suzana Alves + que ficou famosa nos anos 90. Ela é conhecida por sua sensualidade + e por ter sido assistente de palco do programa "H". + </p> + </div> + </div> + + <div class="voltar"> + <a href="principal.html">Voltar</a> + </div> + + <footer class="text-center"> + <p>© 2024</p> + </footer> + </main> + </body> +</html> diff --git a/patrocinio.html b/patrocinio.html new file mode 100644 index 0000000000000000000000000000000000000000..66409366c3cd48c7ffb91356b0b5738496afc02f --- /dev/null +++ b/patrocinio.html @@ -0,0 +1,59 @@ +<!doctype html> +<html> + <head> + <title>Patrocínio - SASPI</title> + <link rel="stylesheet" type="text/css" href="estilo.css"> + </head> + <body> + <main> + <div class="container"> + <div class="mb-30"> + <header> + <h1 class="logo">SASPI</h1> + </header> + </div> + + <div> + <h2 class="text-center"> + Patrocínio + </h2> + </div> + + <div class="flex flex-row justify-between items-center"> + <div class="flex flex-column bloco items-center"> + <img src="img/intel.png" alt="Intel"> + + <h2>Intel</h2> + </div> + + <div class="flex flex-column bloco items-center"> + <img src="img/ford.png" alt="Ford"> + + <h2>Ford</h2> + </div> + </div> + + <div class="flex flex-row justify-between mt-20"> + <div class="flex flex-column bloco items-center"> + <img src="img/vans.png" alt="Vans"> + + <h2>Vans</h2> + </div> + + <div class="flex flex-column bloco items-center"> + <img src="img/mcdonalds.png" alt="McDonalds"> + + <h2>McDonalds</h2> + </div> + </div> + + <div class="voltar"> + <a href="principal.html">Voltar</a> + </div> + + <footer class="text-center"> + <p>© 2024</p> + </footer> + </main> + </body> +</html> diff --git a/principal.html b/principal.html new file mode 100644 index 0000000000000000000000000000000000000000..1a526349869c3ed791bd07ef2f6d8bf454427c35 --- /dev/null +++ b/principal.html @@ -0,0 +1,33 @@ +<!doctype html> +<html> + <head> + <title>SASPI</title> + <link rel="stylesheet" type="text/css" href="estilo.css"> + </head> + <body> + <main> + <div class="container"> + <div class="mb-30"> + <header> + <h1 class="logo">SASPI</h1> + </header> + </div> + + <nav> + <a href="principal.html">Principal</a> + <a href="palestrantes.html">Palestrantes</a> + <a href="cursos.html">Mini-cursos</a> + <a href="mesa.html">Mesa-redonda</a> + <a href="patrocinio.html">Patrocínio</a> + </nav> + + <div class="voltar"> + <a href="index.html">Voltar</a> + </div> + + <footer class="text-center"> + <p>© 2024</p> + </footer> + </main> + </body> +</html>