reprograma · CelinaMarinho · Dec 8, 2021
diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/index.html b/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Um pouco sobre mim</title>
+    <style>
+
+
+        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;
+            color: black;
+
+        }
+
+        .meu-paragrafo:hover {
+            cursor: pointer;
+            background-color: rgb(175, 169, 77)
+        }
+
+        #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;
+        }
+
+        footer{
+            width: 100%;
+            color:rgb(63, 37, 6);
+            font-size: 16px;
+            font-weight: bolder;
+        }
+    </style>
+</head>
+
+
+<body>
+    <header></header>
+
+    <section></section>
+
+    <main>
+        <article class="container-texto">
+            <h1>Um pouco sobre mim</h1>
+            <p>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.</p>
+            <p>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. </p>
+            <img src="../../../assets/WhatsApp Inova.jpeg" alt="Mulher negra sorridente com miçangas no cabelo" id="minha-imagem">
+            <a class="rede-link" href="https://www.instagram.com/cel_marinho/" target="_blank">
+                <p class="paragrafo-link">Instagram:</p>
+                <p class="paragrafo-link">cel_marinho</p>
+            </a>
+        </article>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-01/script.js 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 <a>`. (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
@@ -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
@@ -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?*/
diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-03/script.js b/exercicios-para-casa/exercicios-celina-marinho/exercicio-03/script.js
diff --git a/exercicios-para-casa/exercicios-celina-marinho/exercicio-04/script.js 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`;*/