From f3dcbc24a85035c0e2b3770430251b3b5fe0c308 Mon Sep 17 00:00:00 2001
From: FelipeAssis27 <assisfelipe.gomes@gmail.com>
Date: Thu, 4 Mar 2021 13:28:41 -0300
Subject: [PATCH] subindo exercicios bloco 5 / dia 1

---
 fundamentos_web/bloco_5/dia1/admTmpTrybe.html | 37 +++++++++++
 fundamentos_web/bloco_5/dia1/exemplo1.html    | 26 ++++++++
 fundamentos_web/bloco_5/dia1/exemplo2.html    | 28 +++++++++
 .../bloco_5/dia1/funcoesManipDom.html         | 61 +++++++++++++++++++
 fundamentos_web/bloco_5/dia1/script.js        |  9 +++
 fundamentos_web/bloco_5/dia1/style.css        | 52 ++++++++++++++++
 6 files changed, 213 insertions(+)
 create mode 100644 fundamentos_web/bloco_5/dia1/admTmpTrybe.html
 create mode 100644 fundamentos_web/bloco_5/dia1/exemplo1.html
 create mode 100644 fundamentos_web/bloco_5/dia1/exemplo2.html
 create mode 100644 fundamentos_web/bloco_5/dia1/funcoesManipDom.html
 create mode 100644 fundamentos_web/bloco_5/dia1/script.js
 create mode 100644 fundamentos_web/bloco_5/dia1/style.css
diff --git a/fundamentos_web/bloco_5/dia1/admTmpTrybe.html b/fundamentos_web/bloco_5/dia1/admTmpTrybe.html
new file mode 100644
index 0000000..ab3eb5d
--- /dev/null
+++ b/fundamentos_web/bloco_5/dia1/admTmpTrybe.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Administrador do Tempo</title>
+  </head>
+  <body id="container">
+    <header id="header-container">
+      <h1>Administrador do Tempo da Trybe</h1>
+    </header>
+
+    <section class="emergency-tasks">
+      <div>
+        <h3>Urgente e Importante</h3>
+      </div>
+      <div>
+        <h3>Urgente e Não-Importante</h3>
+      </div>
+    </section>
+  
+    <section class="no-emergency-tasks">
+      <div>
+        <h3>Não-Urgente e Importante</h3>
+      </div>
+      <div>
+        <h3>Não-Urgente e Não-Importante</h3>
+      </div>
+    </section>
+
+    <footer id="footer-container">
+      <div>&copy; Trybe</div>
+    </footer>
+    <script src="script.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fundamentos_web/bloco_5/dia1/exemplo1.html b/fundamentos_web/bloco_5/dia1/exemplo1.html
new file mode 100644
index 0000000..e6b21cf
--- /dev/null
+++ b/fundamentos_web/bloco_5/dia1/exemplo1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h2 id="page-title">Título</h2>
+    <p class="azul" id="paragraph">Dê uma cor para este parágrafo!</p>
+    <h4 id="subtitle">Subtítulo</h4>
+    <p class="azul" id="second-paragraph">Segundo parágrafo!</p>
+
+    <script>
+      var paragraph = document.getElementById("paragraph");
+      paragraph.style.color = "red";
+      </script>
+      <script>
+      var azul = document.getElementsByClassName("azul")[1];
+      azul.style.color = "blue";
+    </script>
+
+    <script>
+      var pageTitle = document.getElementById("page-title").innerHTML = "À Espera de um Milagre";
+      var secondParagph = document.getElementById("second-paragraph").innerHTML = "Lorem ipsulum dolor lorem ypsylum dolot";
+      //var subtitle = document.getElementById("subtitle").innerText = "Subsessão";
+      var subtitle = document.getElementsByTagName("h4")[0].innerText = "Jimboletão";
+    </script>
+  </body>
+</html>
+
diff --git a/fundamentos_web/bloco_5/dia1/exemplo2.html b/fundamentos_web/bloco_5/dia1/exemplo2.html
new file mode 100644
index 0000000..b1f4060
--- /dev/null
+++ b/fundamentos_web/bloco_5/dia1/exemplo2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h2 class="verde" id="page-title">Título</h2>
+    <p id="paragraph">Dê uma cor para este parágrafo!</p>
+    <h4 class="verde" id="subtitle">Subtítulo</h4>
+    <p class="azul" id="second-paragraph">Segundo parágrafo!</p>
+
+    <script>
+      var paragraph = document.querySelector("#paragraph");
+      paragraph.style.color = "red";
+      </script>
+      <script>
+      var azul = document.querySelector(".azul");
+      azul.style.color = "blue";
+      var verde = document.querySelector(".verde");
+      verde.style.color = "green";
+    </script>
+
+    <script>
+      var pageTitle = document.getElementById("page-title").innerHTML = "À Espera de um Milagre";
+      var secondParagph = document.getElementById("second-paragraph").innerHTML = "Lorem ipsulum dolor lorem ypsylum dolot";
+      //var subtitle = document.getElementById("subtitle").innerText = "Subsessão";
+      var subtitle = document.getElementsByTagName("h4")[0].innerText = "Jimboletão";
+    </script>
+  </body>
+</html>
+
diff --git a/fundamentos_web/bloco_5/dia1/funcoesManipDom.html b/fundamentos_web/bloco_5/dia1/funcoesManipDom.html
new file mode 100644
index 0000000..c4f6872
--- /dev/null
+++ b/fundamentos_web/bloco_5/dia1/funcoesManipDom.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Exercício 5.1</title>
+
+    <style>
+      div {
+        border-color: black;
+        border-style: solid;
+      }
+      .title {
+        text-align: center;
+      }
+
+      .main-content {
+        background-color: yellow;
+      }
+
+      .main-content .center-content {
+        background-color: red;
+        width: 50%;
+        margin: 0 auto;
+      }
+
+      .main-content .center-content p {
+        font-style: italic;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 class="title">Exercício 5.1 - JavaEscripito </h1>
+    <div class="main-content">
+      <div class="center-content">
+        <p>Texto padrão do nosso site</p>
+        <p>-----</p>
+        <p>Trybe</p>
+      </div>
+    </div>
+    <script>
+    document.getElementsByTagName("p")[0].innerHTML = "Espero ser recompensado na medida de meu sacrifício, tendo ao menos condições dignas de trabalho e vida.";
+    
+    document.getElementsByClassName("main-content")[0].style.backgroundColor = "green";
+    
+    document.getElementsByClassName("center-content")[0].style.backgroundColor = "white";
+    
+    document.getElementsByTagName("h1")[0].innerHTML = "Exercício 5.1 - JavaScript";
+    document.getElementsByTagName("p")[0].style.textTransform = "upperCase";
+    document.getElementsByTagName("p")[1].style.textTransform = "upperCase";
+    document.getElementsByTagName("p")[2].style.textTransform = "upperCase";
+    
+    console.log(document.getElementsByTagName("p")[0]);
+    console.log(document.getElementsByTagName("p")[1]);
+    console.log(document.getElementsByTagName("p")[2]);
+
+
+    document.getElementsByTagName("p").console.log(innerText);
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/fundamentos_web/bloco_5/dia1/script.js b/fundamentos_web/bloco_5/dia1/script.js
new file mode 100644
index 0000000..209d93f
--- /dev/null
+++ b/fundamentos_web/bloco_5/dia1/script.js
@@ -0,0 +1,9 @@
+document.getElementById("container").style.backgroundColor = "lightgrey";
+document.getElementById("header-container").style.backgroundColor = "green";
+document.querySelector(".emergency-tasks").style.backgroundColor = "lightsalmon";
+document.querySelectorAll(".emergency-tasks h3")[0].style.backgroundColor = "violet";
+document.querySelectorAll(".emergency-tasks h3")[1].style.backgroundColor = "violet";
+document.querySelector(".no-emergency-tasks").style.backgroundColor = "yellow";
+document.querySelectorAll(".no-emergency-tasks h3")[0].style.backgroundColor = "black";
+document.querySelectorAll(".no-emergency-tasks h3")[1].style.backgroundColor = "black";
+document.querySelector("#footer-container").style.backgroundColor = "darkgreen";
\ No newline at end of file
diff --git a/fundamentos_web/bloco_5/dia1/style.css b/fundamentos_web/bloco_5/dia1/style.css
new file mode 100644
index 0000000..ec4f83a
--- /dev/null
+++ b/fundamentos_web/bloco_5/dia1/style.css
@@ -0,0 +1,52 @@
+* {
+  margin: 0;
+}
+
+#container {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  text-align: center;
+}
+
+#header-container {
+  color: white;
+  padding: 20px;
+}
+
+.emergency-tasks {
+  display: inline-block;
+  height: 400px;
+  margin: 56px 0;
+  width: 400px;
+}
+
+.emergency-tasks div {
+  height: 198px;
+}
+.emergency-tasks h3 {
+  color: white;
+  margin-top: 10px;
+  padding: 10px;
+}
+
+.no-emergency-tasks {
+  display: inline-block;
+  height: 400px;
+  width: 400px;
+}
+
+.no-emergency-tasks div {
+  height: 198px;
+}
+
+.no-emergency-tasks h3 {
+  color: white;
+  margin-top: 10px;
+  padding: 10px;
+}
+
+#footer-container {
+  color: white;
+  font-weight: 700;
+  padding: 15px;
+  text-align: center;
+}
\ No newline at end of file
