From 9549bd0a54c5a6c6889da8bfd7de9926b5725b18 Mon Sep 17 00:00:00 2001 From: Celina de Souza Marinho Date: Wed, 8 Dec 2021 19:52:27 -0300 Subject: [PATCH] entregando exercicio 1 --- .../exercicio-01/index.html | 82 +++++++++++++++++++ .../exercicio-01/script.js | 37 +++++++++ .../exercicio-01/style.css | 54 ++++++++++++ .../exercicio-02/script.js | 4 + .../exercicio-03/script.js | 1 + .../exercicio-04/script.js | 5 ++ 6 files changed, 183 insertions(+) create mode 100644 exercicios-para-casa/exercicios-celina-marinho/exercicio-01/index.html create mode 100644 exercicios-para-casa/exercicios-celina-marinho/exercicio-01/script.js create mode 100644 exercicios-para-casa/exercicios-celina-marinho/exercicio-01/style.css create mode 100644 exercicios-para-casa/exercicios-celina-marinho/exercicio-02/script.js create mode 100644 exercicios-para-casa/exercicios-celina-marinho/exercicio-03/script.js create mode 100644 exercicios-para-casa/exercicios-celina-marinho/exercicio-04/script.js diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/index.html b/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/index.html new file mode 100644 index 0000000..0ce67e5 --- /dev/null +++ b/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/index.html @@ -0,0 +1,82 @@ + + + + + + + Um pouco sobre mim + + + + + +
+ +
+ +
+
+

Um pouco sobre mim

+

Sou Celina Marinho, muito prazer! Pernambucana de sorriso fácil, filha de Esmeraldina e Valdir, recifense de nascença e olindense de coração. Amor intenso pelas duas cidades, preciso de uma para amar a outra. Cidades-irmãs, que preenchem todo o meu coração e minha alma pernambucana.

+

Gosto de pedalar em dias ensolarados e tenho 3 animaizinhos que são a companhia e os amores da minha vida: a cadelinha Pérola, e os gatos Stella e Rudá. Amo praia, mato, trilha, cachoeira e fazer arranjos florais. Uma habilidade que gostaria de aprender (além de programar, claro!) é costurar, para fazer minhas roupinhas de carnaval.

+ Mulher negra sorridente com miçangas no cabelo + +

Instagram:

+

cel_marinho

+ +
+
+ + + + \ No newline at end of file diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/script.js b/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/script.js new file mode 100644 index 0000000..057abf4 --- /dev/null +++ b/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/script.js @@ -0,0 +1,37 @@ +/*1. Use o DOM para realizar alterações na sua página: +- ETAPA1: Crie um documento HTML que contenha um `título` e um `artigo`, e dentro desse artigo deve haver pelo menos: `um parágrafo`, `uma imagem` e `um link `. (O tema do artigo fica sob escolha da aluna); +- ETAPA2: (OPCIONAL) Dê um estilo para o seu HTML;*/ + +//ETAPA3: Crie uma variável para armazenar cada um dos seus elementos HTML no javascript; + +const artigo = document.getElementsByTagName('article'); +//console.log(artigo); + +const titulo = document.querySelector('h1'); + +const paragrafo = document.getElementsByTagName('p'); +//console.log(paragrafo); + +const imagem = document.getElementById('minha-imagem'); + +const link = document.querySelector('a'); +//console.log(link) + +//ETAPA4: Adicione uma `classe` para o seu elemento de parágrafo usando o DOM; +for (let el of paragrafo) { + el.classList.add('meu-paragrafo') +} + + +//ETAPA5: Crie ou modifique o `estilo` da sua imagem usando o DOM; +imagem.style.border = "20px outset rgb(175, 169, 77)"; + +//ETAPA6: Modifique o valor do atributo `href` do seu link utilizando o DOM; +console.log(link.getAttribute('href')) +link.setAttribute('href', 'https://www.linkedin.com/in/celina-marinho/'); + +//ETAPA7: Crie um novo elemento HTML utilizando o DOM e o adicione ao seu HTML. +document.createElement("footer"); +footer.innerText = "Feito por Celina Marinho, aluna Reprograma"; + + diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/style.css b/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/style.css new file mode 100644 index 0000000..a7bc2c6 --- /dev/null +++ b/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/style.css @@ -0,0 +1,54 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: 'Nunito Sans', sans-serif; + font-size: 16px; +} + +main{ + width: 100%; + padding: 3rem 4rem; +} + +.container-texto { + display: block; + width: 90%; + padding: 2rem 2rem; + margin: 0 auto; + justify-content: center; + text-align: center; + font-size: 25px; + +} + +.meu-paragrafo { + padding: 20px; + +} + +.meu-paragrafo:hover { + cursor: pointer; + color: rgb(71, 23, 71) +} + +#minha-imagem { + width:400px; + height: auto; + border-radius: 80%; + margin-bottom: 30px; +} + +.container-texto a{ + display: flex; + align-items: center; + justify-content: center; + color:black; +} + + +.paragrafo-link { + justify-content: space-between; + padding-right: 10px; +} + diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-02/script.js b/exercicios-para-casa/exercicios-celina-marinho/exercicio-02/script.js new file mode 100644 index 0000000..23571e3 --- /dev/null +++ b/exercicios-para-casa/exercicios-celina-marinho/exercicio-02/script.js @@ -0,0 +1,4 @@ +/*#### 2. Utilizando o mesmo HTML do exercício 1, diga(`mostrando com o console.log() ou console.dir()`): +- Quem é o elemento `pai/mãe` do seu artigo? +- Quem são os elementos `filhes` do seu artigo? +- Qual elemento é o `próximo irmão` do elemento parágrafo?*/ \ No newline at end of file diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-03/script.js b/exercicios-para-casa/exercicios-celina-marinho/exercicio-03/script.js new file mode 100644 index 0000000..f69358d --- /dev/null +++ b/exercicios-para-casa/exercicios-celina-marinho/exercicio-03/script.js @@ -0,0 +1 @@ +/*#### 3. Utilizando o mesmo HTML do exercício 1, faça uma `função de evento` que aumente o tamanho da minha imagem quando eu passar o mouse por cima dela e que quando eu retirar o meu mouse de cima da imagem ela retorne ao tamanho original;*/ \ No newline at end of file diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-04/script.js b/exercicios-para-casa/exercicios-celina-marinho/exercicio-04/script.js new file mode 100644 index 0000000..1bfeabe --- /dev/null +++ b/exercicios-para-casa/exercicios-celina-marinho/exercicio-04/script.js @@ -0,0 +1,5 @@ +/*#### 4. Formulário: +- ETAPA1: Crie um documento HTML com um pequeno formulário de login, contendo um `título` + os campos de input com etiquetas de `nome` e `senha` + um botão com o texto `entrar`. +- ETAPA2: Use o DOM com o javascript para selecionar os campos de input e o botão; +- ETAPA3: Crie um novo elemento HTML usando o DOM, dê um valor para ele com o texto: `Sem permissão `, e adicione ele ao seu HTML; +- ETAPA4: Adicione um evento para que após a usuária clique no botão com o texto `entrar`, o novo elemento tenha o seu texto de `Sem permissão` substituído por: `Olá + o nome da pessoa`;*/