diff --git a/README.md b/README.md index 53b8fbf..c4e61e1 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,89 @@ -# checkpoint2 -Atividade referente ao segundo checkpoint da disciplina de Introdução a Informática +

Checkpoint II

+
Atividade referente ao segundo checkpoint da disciplina de Introdução a Informática
+ + + +--- + +

Objetivo

+ Avaliar os conhecimentos adquiridos ao longo das aulas e o trabalho em equipe dos alunos, além de fazer um uso mais extensivo do GitHub entre o grupo. + +

Atividade

+ +1. Serão constituídos grupos de 6 a 8 alunos e cada grupo receberá os seguintes temas para as pesquisas: + +- Paradigmas de programação +- Virtualização +- Redes de computadores +- Internet +- Segurança Informática +- Ética na computação + +2. Todos os grupos serão responsáveis por coletar notícias e relacionar com o que foi visto na sala de aula, com cada um dos tópicos acima. + +3. A apresentação será feita via GitHub pages, ou seja, criar uma página usando o próprio GitHub e colocar as notícias, uma ou mais imagens e textos nesta página. +O formato da página é livre, porém será disponibilizado um template para auxílio do trabalho. +4. A formatação da página NÃO será determinante para a nota. O importante é a compreensão da matéria, a relação com a notícia e o uso do GitHub. +5. Todos os integrantes do grupo devem estar como colaboradores e realizarem pelo menos um commit com uma alteração relevante (adição de um texto, correção de alguma característica da página ou inserção da imagem em cada um dos tópicos). +
+ Colaboradores + + ![tse](https://user-images.githubusercontent.com/16105546/163696298-6e4e66a9-9f36-40ef-9fec-dec58a1a693a.png) + + +
+ +--- + +

Integrantes

+ + + + + + + + +
+ + Foto do Gabriel Azevedo no GitHub
+ + Gabriel Azevedo + +
+
+ + Foto da Alicia no GitHub
+ + Alicia Oliveira + +

+
+ + Foto da Glaucia no GitHub
+ + Glaucia Ximenes + +

+
+ + Foto do Lucas Anselmo no GitHub
+ + Lucas Anselmo + +

+
+ + Foto do Douglas Júnior no Github
+ + Douglas Araujo + +

+
+ + Foto do Hugo no Github
+ + Hugo + +

+
diff --git a/assets/LooperBG.svg b/assets/LooperBG.svg new file mode 100644 index 0000000..e3a8004 --- /dev/null +++ b/assets/LooperBG.svg @@ -0,0 +1,349 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/aliena.png b/assets/aliena.png new file mode 100644 index 0000000..d12a248 Binary files /dev/null and b/assets/aliena.png differ diff --git a/assets/aliena2.png b/assets/aliena2.png new file mode 100644 index 0000000..d217757 Binary files /dev/null and b/assets/aliena2.png differ diff --git a/assets/bgParadgmas.png b/assets/bgParadgmas.png new file mode 100644 index 0000000..3a86d4c Binary files /dev/null and b/assets/bgParadgmas.png differ diff --git a/assets/conceitos.png b/assets/conceitos.png new file mode 100644 index 0000000..f8ec80f Binary files /dev/null and b/assets/conceitos.png differ diff --git a/assets/etica_comp.PNG b/assets/etica_comp.PNG new file mode 100644 index 0000000..cd2134a Binary files /dev/null and b/assets/etica_comp.PNG differ diff --git a/assets/internet.PNG b/assets/internet.PNG new file mode 100644 index 0000000..d9ab070 Binary files /dev/null and b/assets/internet.PNG differ diff --git a/assets/internet_coisas.png b/assets/internet_coisas.png new file mode 100644 index 0000000..6e489b7 Binary files /dev/null and b/assets/internet_coisas.png differ diff --git a/assets/paradigmas.PNG b/assets/paradigmas.PNG new file mode 100644 index 0000000..adfefb0 Binary files /dev/null and b/assets/paradigmas.PNG differ diff --git a/assets/redes.PNG b/assets/redes.PNG new file mode 100644 index 0000000..425b8af Binary files /dev/null and b/assets/redes.PNG differ diff --git a/assets/seg_informatica.PNG b/assets/seg_informatica.PNG new file mode 100644 index 0000000..aec6470 Binary files /dev/null and b/assets/seg_informatica.PNG differ diff --git a/assets/virtualizacao.PNG b/assets/virtualizacao.PNG new file mode 100644 index 0000000..e839c08 Binary files /dev/null and b/assets/virtualizacao.PNG differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..a777abb --- /dev/null +++ b/css/style.css @@ -0,0 +1,558 @@ +/*Importando fonte do Google Fonts*/ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700&display=swap"); + +/* Utilizando variáveis nas cores */ + +:root { + /* DarkMode */ + --primary: #fbfcfc; + --primary-opacity: #fbfcfca6; + --secundary: #e6e8eb; + + --color-text-primary: #0e0e0e; + --color-text-secundary: #223858; + --colorPink: #d24074; + --colorPurple: #223858; + --colorPurpleLight: #0f2f5e; + --gradiente-purple: linear-gradient(269.96deg, #10d7e2 0%, #9358f7 100%); + --gradient-pink: linear-gradient(270.06deg, #6518b4 0%, #d24074 101.62%); +} + +.dark-mode:root { + --primary: #181818; + --primary-opacity: rgb(24, 24, 24, 0.65); + --secundary: #212121; + + --color-text-primary: #c4c4c4; + --color-text-secundary: #00d2df; + --colorPink: #d24074; + --colorPurple: #6518b4; + --colorPurpleLight: #9358f7; + --gradiente-purple: linear-gradient(269.96deg, #10d7e2 0%, #9358f7 100%); + --gradient-pink: linear-gradient(270.06deg, #6518b4 0%, #d24074 101.62%); +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} +html { + /* a cada 1rem será considera 10px */ + font-size: 62.5%; + scroll-behavior: smooth; +} +/* Add a gray background color with some padding */ +body { + font-family: "Inter", sans-serif; + background: var(--primary); + background-color: var(--secundary); +} + +/* Barra de rolagem */ + +*::-webkit-scrollbar { + width: 9px; +} + +*::-webkit-scrollbar-track { + background: var(--primary); +} + +*::-webkit-scrollbar-thumb { + background-color: var(--colorPurple); + border: 1px solid var(--colorPurpleLight); +} + +/* Header/Blog Title */ +.header { + height: 10vh; + width: 100%; + padding: 0 5%; + + display: flex; + align-items: center; + justify-content: space-between; + + z-index: 999; + width: 100%; + position: fixed; + top: 0; + left: 0; + + background-color: var(--secundary); + + /* background: var(--primary-Opacity); + backdrop-filter: blur(50px); + -webkit-backdrop-filter: blur(50px); + border-bottom: var(--primary-Opacity); */ +} + +.header h2 { + color: var(--color-text-secundary); +} + +/* botão mode-light */ + +.label { + background-color: var(--secundary); + width: 51px; + height: 26px; + padding: 6px; + border-radius: 50px; + border: 1px solid var(--primary); + position: relative; + display: flex; + transition: background 0.2s linear; + justify-content: space-between; + align-items: center; +} + +.ball { + background-color: var(--primary); + height: 22px; + width: 22px; + border-radius: 50%; + position: absolute; + top: 1px; + left: 2px; + transition: transform 0.2s linear; +} + +.checkbox { + opacity: 0; + position: absolute; +} + +.checkbox:checked + .label .ball { + transform: translateX(24px); +} + +.fa-sun { + color: #ffc400; +} +.fa-moon { + color: #bdbdbd; +} + +.banner { + display: flex; + position: relative; + height: 90vh; + width: 100%; + color: var(--primary); + font-weight: 700; + margin-top: 10vh; + align-items: center; + + background-image: url(../assets/LooperBG.svg); + background-repeat: no-repeat; + background-position: 700px; + + background-size: 75%; +} + +.banner > span { + padding: 2% 5%; + + max-height: 100%; + opacity: 0.5; + max-width: 100%; + line-height: 80%; + font-size: 30rem; + overflow-wrap: break-word; + position: absolute; + z-index: -1; +} + +.apresentacao { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 5%; + height: 80%; + width: 100%; +} +.apresentacao h1 { + font-size: 10rem; + color: var(--color-text-secundary); +} + +.apresentacao h2 { + font-size: 5rem; + color: var(--color-text-primary); +} + +.apresentacao h3 { + font-size: 3rem; + color: var(--color-text-primary); +} + +main { + padding: 2% 5%; +} + +/* Create two unequal columns that floats next to each other */ +/* Left column */ +.leftcolumn { + float: left; + width: 75%; +} + +/* Right column */ +.rightcolumn { + float: left; + width: 25%; + padding-left: 20px; + gap: 50px; +} + +/* Fake image */ +.fakeimg { + background-color: var(--secundary); + width: 100%; + overflow: hidden; + position: relative; + height: 50px; + margin: 5px 0; +} + +.fakeimg img, +.bannerImg img { + width: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all 0.8s; + + display: flex; + align-items: center; + justify-content: center; +} + +.bannerImg { + background-color: var(--secundary); + width: 100%; + overflow: hidden; + + position: relative; + height: 190px; + display: flex; + align-items: center; + justify-content: center; + + border-radius: 10px 10px 0 0; +} + +.bannerImg img { + width: 100%; +} + +.fakeimg:hover img { + width: 110%; +} +.bannerImg:hover img { + width: 105%; +} + +/* Add a card effect for articles */ +.card { + background-color: var(--primary); + padding: 20px; + margin-top: 20px; + border-radius: 10px; + + display: flex; + flex-direction: column; +} + +.card h2 { + font-size: 2rem; + color: var(--color-text-primary); + padding: 1% 0; +} + +.card h5 { + font-size: 1.2rem; + color: var(--color-text-primary); + padding-bottom: 2%; + font-weight: 300; +} + +.card p { + font-size: 1.2rem; + color: var(--color-text-primary); +} + +.nomeAutor { + background: #6e2eaf; + padding: 1%; + border-radius: 0 0 10px 0; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-primary); + font-weight: 900; + height: 100%; +} + +.card .sobreGrupo { + padding-bottom: 3%; +} + +.card ol { + padding: 5%; + color: var(--color-text-primary); + font-size: 1.1rem; +} + +.card h3 { + font-size: 2rem; + color: var(--color-text-primary); + padding: 1% 0; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Footer */ +.footer { + padding: 20px; + text-align: center; + background: var(--primary); + margin-top: 20px; + color: var(--color-text-primary); +} + + +/* Modal Content */ +.modal-content { + background-color: var(--primary); + margin: 15% auto; + padding: 10px 50px; + border-radius: 10px; + text-align: center; + width: 95%; +} + +.modal-content p { + text-align: justify; + margin-top: 10px; + font-weight: 500; +} + +img { + margin-top: 5px; + width: 100%; + border-radius: 5px; +} + +.close { + color: var(--colorPink); + float: right; + font-size: 3rem; + font-weight: 900; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.modal-content h4 { + color: var(--color-text-primary); + margin-top: 20px; + text-align: start; + font-size: 1.4rem; +} + +.modal-content ul li { + color: var(--color-text-primary); + font-size: 1.2rem; + text-align: start; + margin-left: 50px; +} +.modal-content ol li { + color: var(--color-text-primary); + font-size: 1.2rem; + text-align: start; + margin-left: 50px; +} + + + + +/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ + +@media screen and (min-width: 800px) and (max-width: 1180px) { + .leftcolumn, + .rightcolumn { + width: 100%; + padding: 0; + } + + .header { + height: 6vh; + } + .banner { + background-size: 80%; + background-position: 300px; + } + + .banner > span { + max-height: 100vh; + opacity: 0.4; + max-width: 100%; + line-height: 80%; + font-size: 15rem; + overflow-wrap: break-word; + } + + .apresentacao h1 { + font-size: 5rem; + color: var(--color-text-secundary); + } + + .apresentacao h2 { + font-size: 3rem; + color: var(--color-text-primary); + } + + .bannerImg { + height: 12vh; + } + + .apresentacao h3 { + font-size: 2rem; + color: var(--color-text-primary); + } + + +} + +@media screen and (max-width: 800px) { + .leftcolumn, + .rightcolumn { + width: 100%; + padding: 0; + } + + .header { + height: 6vh; + } + .banner { + background-size: 280%; + background-position: 5px; + } + + .banner > span { + max-height: 100vh; + opacity: 0.4; + max-width: 100%; + line-height: 80%; + font-size: 15rem; + overflow-wrap: break-word; + } + + .apresentacao h1 { + font-size: 5rem; + color: var(--color-text-secundary); + } + + .apresentacao h2 { + font-size: 3rem; + color: var(--color-text-primary); + } + + .bannerImg { + height: 8vh; + } + + .apresentacao h3 { + font-size: 2rem; + color: var(--color-text-primary); + } + + + .modal-content { + background-color: var(--primary); + margin: 15% auto; + padding: 10px 20px; + border-radius: 10px; + text-align: center; + width: 95%; + } +} + +/* ESTILIZAÇÃO DO MODAL */ + +.div-btn { + height: 30px; + background: var(--gradient-pink); + width: 100%; + display: flex; + justify-content: space-between; + + border-radius: 0 0 10px 10px; +} + +.div-btn button { + background-color: #ca4875; + color: var(--color-text-primary); + font-weight: 600; + padding: 10px; + border: none; + display: flex; + align-items: center; + border-radius: 0 0 0 10px; + cursor: pointer; + transition: background 0.3s; +} +.div-btn button:hover { + background-color: #ca4875; + color: #00d2df; +} + +.modal { + display: none; /* Domyślnie schowany */ + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.8); + + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -o-transition: 0.5s; + -ms-transition: 0.5s; + transition: 0.5s; + + transition-timing-function: ease-in; +} + +#segp{ + height: max-content; + font-size:16px; +} + +.segh1{ + font-size: 24px; +} + +.photo{ + border-image-outset: 100px; + + +} \ No newline at end of file diff --git a/index.html b/index.html index c570e93..2bc64f5 100644 --- a/index.html +++ b/index.html @@ -1,130 +1,770 @@ - - - - - -
-

Checkpoint 2

-
- -
-
-
-

Paradigmas de Programação

-
Aula 13
-
Image
-

Referência da notícia + texto de como a notícia se relaciona com o que vimos em sala

+ + + + + + + +
+

< CTD />

+ +
+ +
-
-

Virtualização

-
Aula 14
-
Image
-

Referência da notícia + texto de como a notícia se relaciona com o que vimos em sala

+
+ + -
-
-

Sobre o Grupo

-
Image
-
    -
  • Membro 1
  • -
  • Membro 2
  • -
  • Membro 3
  • -
  • Membro 4
  • -
  • Membro 5
  • -
  • Membro 6
  • + +
    +
    + +
    +

    Paradigmas de Programação

    +
    Aula 14
    +
    + banner paradigmas da computação +
    + +
    + +
    Gabriel Azevedo Silva
    +
    + + +
    + + +
    +

    Virtualização

    +
    Aula 14
    +
    + banner virtualização +
    + +
    + +
    Glaucia
    +
    + + +
    + + +
    +

    Redes de computadores

    +
    Aula 16
    +
    + banner redes de computadores +
    + +
    + +
    Alícia de Oliveira
    +
    + + +
    + + +
    +

    Internet

    +
    Aula 17
    +
    + banner internet +
    +
    + +
    Hugo Leandro/div> +
    + + +
    + + +
    +

    Segurança da Informática

    +
    Aula 23
    +
    + banner segurança da informação +
    +
    + +
    Lucas Lopes
    +
    + + +
    + + +
    +

    Ética na computação

    +
    Aula 13
    +
    + banner ética na computação +
    +
    + +
    Nome do aluno
    +
    + + +
    +
    +
-
- - +
+ + + +
+

Digital House

+
- + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..9f4807b --- /dev/null +++ b/js/script.js @@ -0,0 +1,51 @@ +///////////////////// DARKTHEME +const html = document.querySelector("html"); +const checkbox = document.querySelector("#checkbox"); + +checkbox.addEventListener("change", () => { + html.classList.toggle("dark-mode"); +}); + +///////////////////// MODAL +let btn = document.getElementById("btn"); +let span = document.getElementsByClassName("close")[0]; + +// Função para aparecer o modal +function openModal(mn) { + let modal = document.getElementById(mn); + + if (typeof modal == "undefined" || modal === null) return; + + modal.style.display = "Block"; + //Ao clicar no botão, o body ficará sem a barra de rolagem: + document.body.style.overflow = "hidden"; + + + // Ao clicar fora do modal ele fica com display: none + window.addEventListener("click", function (e) { + if (e.target == modal) { + modal.style.display = "none"; + document.body.style.overflow = "auto"; + } + }); + + + // Quando clica em (x) o modal fica com display: none + span.addEventListener("click", function () { + modal.style.display = "none"; + document.body.style.overflow = "auto"; + + }); + + // Quando clicar a tecla 'esc' do teclado fecha o modal + window.addEventListener("keydown", function (e) { + if (e.keyCode == 27 && modal.style.display == "block") { + modal.style.display = "none"; + document.body.style.overflow = "auto"; + } + }); +} + +// Inspirações para o modal: +// https://codepen.io/chomikoo/pen/oWWapq +// https://www.youtube.com/watch?v=NXdjf6GJSKo&ab_channel=SatellaSoft diff --git a/template.css b/template.css deleted file mode 100644 index a095843..0000000 --- a/template.css +++ /dev/null @@ -1,64 +0,0 @@ -body { - font-family: Arial; - padding: 20px; - background: #f1f1f1; - } - - /* Header/Blog Title */ - .header { - padding: 30px; - font-size: 40px; - text-align: center; - background: white; - } - - /* Create two unequal columns that floats next to each other */ - /* Left column */ - .leftcolumn { - float: left; - width: 75%; - } - - /* Right column */ - .rightcolumn { - float: left; - width: 25%; - padding-left: 20px; - } - - /* Fake image */ - .fakeimg { - background-color: #aaa; - width: 100%; - padding: 20px; - } - - /* Add a card effect for articles */ - .card { - background-color: white; - padding: 20px; - margin-top: 20px; - } - - /* Clear floats after the columns */ - .row:after { - content: ""; - display: table; - clear: both; - } - - /* Footer */ - .footer { - padding: 20px; - text-align: center; - background: #ddd; - margin-top: 20px; - } - - /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ - @media screen and (max-width: 2160px) { - .leftcolumn, .rightcolumn { - width: 100%; - padding: 0; - } - } \ No newline at end of file