diff --git a/bloco_5/dia_1/exercicio1.html b/bloco_5/dia_1/exercicio1.html
new file mode 100644
index 0000000..cafd565
--- /dev/null
+++ b/bloco_5/dia_1/exercicio1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h2 id="page-title">Título</h2>
+    <p id="paragraph">Dê uma cor para este parágrafo!</p>
+    <h4 id="subtitle">Subtítulo</h4>
+    <p id="second-paragraph">Segundo parágrafo!</p>
+
+    <script> 
+      var paragraph = document.getElementById("paragraph");
+      paragraph.style.color = "red";
+
+      // 1 Recupere o elemento que contém o título da página e faça algo com ele, como alterá-lo para o nome do seu filme favorito.
+      document.getElementById('page-title').innerText = 'O resgate do soldado Ryan.';
+      // 2 Agora recupere o segundo parágrafo e use sua criatividade para alterá-lo.
+      document.getElementById('second-paragraph').style.backgroundColor = "yellow";
+      // 3 Por fim, recupere o subtítulo e altere-o também.
+      document.getElementById('subtitle').style.textAlign = "end";
+
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/bloco_5/dia_1/exercicio2.html b/bloco_5/dia_1/exercicio2.html
new file mode 100644
index 0000000..d3fc547
--- /dev/null
+++ b/bloco_5/dia_1/exercicio2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<style>
+    .paragrafos{
+        color: yellow;
+        font-size: 2em;
+    }
+</style>
+<html>
+  <body>
+    <h2 id="page-title">Título</h2>
+    <p id="paragraph" class="paragrafos">Dê uma cor para este parágrafo!</p>
+    <h4 id="subtitle">Subtítulo</h4>
+    <p id="second-paragraph" class="paragrafos">Segundo parágrafo!</p>
+
+    <script>
+      var paragraph = document.getElementById("paragraph");
+      paragraph.style.color = "red";
+
+    // 1 Adicione ao seu HTML uma classe com alguns estilos para os seus dois parágrafos.
+
+    // 2 Recupere os seus parágrafos via código JavaScript, usando a função getElementsByClassName;
+      
+    // 3 Altere algum estilo do primeiro deles.
+        document.getElementsByClassName('paragrafos')[0].style.color = "blue";
+    // 4 Recupere o subtítulo pela tag.
+    document.writeln(document.getElementsByTagName('h4').innerText);
+
+
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/bloco_5/dia_1/exercicio3.html b/bloco_5/dia_1/exercicio3.html
new file mode 100644
index 0000000..9ef5aca
--- /dev/null
+++ b/bloco_5/dia_1/exercicio3.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<body>
+<!-- creating the squares and columns divs -->
+<div id="stack">
+	<div class="column_left"> 
+		<div>
+        	<div>	
+			</div>
+    	</div>
+    	<div>
+        	<div></div>
+    	</div>
+ 	</div>
+ 	<div class="column_right">
+    	<div>
+        	<div>	
+			</div>
+    	</div>
+    	<div>
+        	<div>
+			</div>
+    	</div>
+  	</div>
+</div>
+<style>
+
+
+
+#stack{
+	height:20rem;
+	width:20rem;
+	display:flex;
+	flex-direction:row;
+	justify-content:space-evenly;
+	align-items:center;
+	border: solid black 4px;
+}
+
+.column_left, .column_right{
+	
+    height:18rem;
+	width:8rem;
+    margin:auto;
+	display:flex;
+	flex-direction:column;
+    justify-content:space-evenly;
+    border: solid black 4px;
+    }
+.column_left>div, .column_right>div{
+	height:5rem;
+	width:5rem ;
+	display:flex;
+	align-items:center;
+    justify-content:center;
+    margin:auto;
+    border: solid black 4px;
+}  
+
+div>div>div>div{
+    height:2.5rem;
+	width:2.5rem; 
+    border: solid black 4px;
+}
+
+
+
+</style>
+<script>
+
+// Styling the big red square by getElementBy 
+var stack=document.getElementById("stack")
+stack.style.backgroundColor="red"
+
+// Styling the columns by getElementsByClassName
+function style_column(column_position, color){
+    var column=document.getElementsByClassName("column_"+column_position)[0]
+	column.style.backgroundColor=""+color
+}
+
+// Styling the violet and purple square by querySelectorAll 
+function style_big_squares(which_column_class_name, color){
+    document.querySelectorAll(which_column_class_name+"> div").forEach((e)=>{
+	e.style.backgroundColor=""+color
+})}
+
+// Using functions
+style_column("left","blue")
+style_column("right","green")
+
+style_big_squares(".column_left", "violet")
+style_big_squares(".column_right", "purple")
+// stying pink squares inside the violet and purple squares
+
+// Styling all mini divis
+document.querySelectorAll("div>div>div>div").forEach((mini)=>{
+	mini.style.backgroundColor="orange"
+})
+// Styling only mini divs on the top
+document.querySelectorAll("#stack>div").forEach((e)=>{
+    var mini_top=document.querySelector("."+e.className+">div>div")
+	mini_top.style.backgroundColor="pink"
+
+})
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
