denis-rossati · denis-rossati · Feb 12, 2021 · Feb 12, 2021 · Feb 12, 2021 · Feb 12, 2021
diff --git a/bloco_3/dia_3/Prática_1/index.html b/bloco_3/dia_3/Prática_1/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Exercício de Fixação: box model</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="caixa width-and-height" style="background: #036b52">A</div>
+  <div class="caixa width-and-height padding" style="background: #41197f;">B</div>
+  <div class="caixa width-and-height padding margin" style="background: #444955">C</div>
+  <div class="caixa width-and-height padding margin border" style="background: #3898EC">D</div>
+</body>
+</html>
diff --git a/bloco_3/dia_3/Prática_1/style.css b/bloco_3/dia_3/Prática_1/style.css
@@ -0,0 +1,27 @@
+.caixa {
+    color: white;
+    display: inline-block;
+    line-height: 50px;
+    text-align: center;
+    vertical-align: top;
+}
+
+  .width-and-height {
+    height: 50px;
+    width: 50px;
+  }
+
+  .padding {
+  /* insira aqui um padding de 20px na classe abaixo para aplicá-lo aos itens B, C e D */
+            padding: 20px;
+        }
+
+  .margin {
+  /* insira aqui uma margem de 30px na classe abaixo para aplicá-la aos itens C e D */         
+           margin: 30px; 
+}
+
+  .border {
+  /* insira aqui uma borda com valor '5px solid black' para aplicá-la ao item D */
+           border: 5px solid black; 
+  }
diff --git a/bloco_3/dia_3/Prática_2/index.html b/bloco_3/dia_3/Prática_2/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8">
+    <title>Posicionamento de elementos</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1>Exercícios de fixação 3.3</h1>
+    <img src="https://bit.ly/39HLUyi" alt="jumpMario" class="super-mario" />
+    <img src="https://bit.ly/3arGfMc" alt="gomba" class="goomba" />
+    <p class="word">
+      Goomba, do something!
+    </p>
+    <img src="https://bit.ly/3tmxgED" alt="baloon" class="baloon" />
+    <img src="https://bit.ly/2MV2bY0" alt="bowser" class="bowser" />
+
+    <!-- Exercícios:
+    1- Posicione o Mário acima do Goomba.
+    2- Posicione a tag p para que fique dentro do balão de fala.
+    3- Posicione o balão para que se torne uma fala de Bowser.
+    4- Posicione os elementos para que tenham alguma distância entre si.
+  -->
+  </body>
+</html>
diff --git a/bloco_3/dia_3/Prática_2/style.css b/bloco_3/dia_3/Prática_2/style.css
@@ -0,0 +1,33 @@
+.super-mario{
+    width: 100px;
+    position:absolute;
+    left: 90px;
+}
+.goomba{
+    width: 100px;
+    position:absolute;
+    top: 220px;
+    left: 120px;
+}
+.baloon{
+    position:absolute;
+    width: 100px;
+    left: 280px;
+    top: 140px;
+    z-index: 1;
+}
+.bowser{
+    width: 100px;
+position: absolute;
+    left: 380px;
+    top: 170px;
+}
+.word{
+    position: absolute;
+    width:50px;
+    top: 143px;
+    left: 303px;
+    font-size: 10px;
+    text-align: center;
+    z-index: 2;
+}
diff --git a/bloco_3/dia_3/Prática_3/index.html b/bloco_3/dia_3/Prática_3/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8">
+    <title>Agrupando Seletores</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>Lista dos Melhores Sites que já vi</h1>
+    <p>Top 3 dos melhores sites que existem na web</p>
+    <ol>
+        <li><a href="https://www.youtube.com/" target="_blank">youtube</a></li>
+        <li><a href="http://www.staggeringbeauty.com/" target="_blank">minhoca</a></li>
+        <li><a href="https://theuselessweb.site/ducksarethebest.com/" target="_blank">ducks</a></li>
+    </ol>
+    <!-- EXERCÍCIOS
+
+      1. Adicione uma lista ordenada dos 3 melhores sites que você conhece.
+      2. Crie um arquivo no mesmo diretório e nomeie-o de 'style.css'.
+      3. Nesse arquivo .css, adicione os estilos para que:
+        3.1 O texto das tags 'h1' e 'p' estejam centralizados.
+        3.2 A cor de fundo da sua lista mude quando o cursor estiver sobre o item.
+        3.3 A fonte do item mude quando ele for clicado.
+
+    -->
+    <p>Principais motivos para eu gostar deles</p>
+
+    <!-- EXERCÍCIOS
+
+      1. Adicione uma lista não ordenada com, pelo menos, 3 características que você gosta.
+      2. No 'style.css', adicione a propriedade 'list-style: none' para ambas as listas.
+
+    -->
+    <ul>
+        <li>São divertidos</li>
+        <li>IMPORTANTES PARA A HUMANIDADE</li>
+        <li>Informativos</li>
+    </ul>
+</body>
+</html>
diff --git a/bloco_3/dia_3/Prática_3/style.css b/bloco_3/dia_3/Prática_3/style.css
@@ -0,0 +1,19 @@
+h1, p {
+    text-align: center;
+}
+
+a{
+    text-decoration: none;
+    color: inherit;
+}
+
+li:hover {
+    background-color: black;
+    color:white;
+}
+li:active{
+    font-family: monospace;
+}
+ul, ol{
+    list-style: none;
+}
diff --git a/bloco_3/dia_3/Prática_4/index.html b/bloco_3/dia_3/Prática_4/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+    <title>#GoTrybe</title>
+  </head>
+  <body>
+    <h1 ><em class="header">Combinações e Classes Descendentes</em></h1>
+    <br />
+    <h3 class="header">Top 5 frases memoráveis:</h3>
+    <ol>
+      <li class="primo"><em>Com grandes poderes vêm grandes responsabilidades.</em> - Tio Ben (Homem Aranha)</li>
+      <li class="par"><em>Houston, temos um problema.</em> - Jack Swigert</li>
+      <li class="primo"><em>Sempre parece impossível até que esteja feito.</em> - Nelson Mandela</li>
+      <li class="par"><em>Parte da jornada é o fim.</em> - Tony Stark (Homem de Ferro)</li>
+      <li class="primo"><em>Às vezes, o melhor que podemos fazer é começar novamente.</em> - Steve Rogers (Capitão América)</li>
+    </ol>
+    <h3 class="header">As maiores linguagens de programação:</h3>
+    <ul>
+      <li class="tflanguages">Python</li>
+      <li class="tflanguages java">Java</li>
+      <li class="tflanguages java" >JavaScript</li>
+      <li class="tflanguages">C#</li>
+      <li class="tflanguages">C / C++</li>
+    </ul>
+    <h3 class="header">Maiores aliados de uma pessoa desenvolvedora:</h3>
+    <ul>
+      <li class="allys ally1">
+        <a href="https://pt.stackoverflow.com/">StackOverflow</a>
+      </li>
+      <li class="allys ally2">
+        <a href="https://www.w3schools.com/">W3Schools</a>
+      </li>
+      <li class="allys ally3">
+        <a href="https://developer.mozilla.org/pt-BR/">MDN Web Docs</a>
+      </li>
+      <li class="allys ally4">
+        <a href="https://devdocs.io/">DevDocs</a>
+      </li>
+      <li class="allys ally5">
+        <a href="https://app.betrybe.com/">Trybe</a>
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/bloco_3/dia_3/Prática_4/style.css b/bloco_3/dia_3/Prática_4/style.css
@@ -0,0 +1,80 @@
+/*
+
+1 - Faça com que todos os itens de Listas Ordenadas tenham uma cor de fundo amarela. Se a numeração do item for PAR, faça a cor de fonte ser verde. Se o número for considerado primo, utilize a propriedade text-transform para deixar o texto maiúsculo. (Dica: combinar classes pode ser útil aqui).
+
+2 - Faça todas as tags Header (h1, h2...) possuírem cor de fonte vermelha e, se alguma delas estiver em itálico, aumente seu tamanho para 40px e acrescente uma borda de 1px preta e sólida.
+
+3 - Faça todas as li's terem 20px de tamanho de fonte e, para todo texto em itálico dentro de alguma li, utilize a propriedade font-weight para deixá-lo negrito.
+
+4 - Na listagem de linguagens de programação, faça com que as 3 primeiras da lista possuam cor de fonte azul e, se alguma possuir "java*" no texto, utilize uma cor de fundo rosa.
+
+5 - (Bônus) Para cada link na lista de aliados da pessoa desenvolvedora, faça com que ao passar o mouse sobre cada um, o texto fique em negrito e assuma a cor de fonte "temática do site"
+  Dica 1: Utilize o seletor :hover para controlar o passar do mouse.
+  Dica 2: Sugestão de cores padrão. StackOverflow (laranja), W3Schools (verde), MDN (preta), DevDocs (amarela), Trybe (verde).
+
+*/
+ol li {
+    background-color:yellow;
+}
+
+ol li.par{
+    color: green;
+}
+
+ol li.primo{
+    text-transform: uppercase;
+}
+
+.header{
+    color:red;
+}
+
+em.header{
+    font-size: 40px;
+    border: 1px black solid;
+
+}
+
+li{
+    font-size: 20px;
+}
+
+li em{
+    font-weight: 700;
+}
+
+.tflanguages{
+    color: blue;
+}
+
+.java{
+    background-color: pink;
+    padding: 1px;
+    margin-right: 420px;
+    padding-left: 3px;
+}
+
+.allys:hover{
+    font-weight: 700;
+
+}
+
+.ally1:hover{
+    text-decoration: none;
+    color:orange;
+}
+.ally2:hover{
+    color:green;
+}
+.ally3:hover{
+    color:black;
+}
+.ally4:hover{
+    color:yellow;
+}
+.ally5:hover{
+    color: green;
+}
+a:hover {
+    color: inherit;
+}
diff --git a/bloco_3/dia_4/Exercicio_1/READEME.md b/bloco_3/dia_4/Exercicio_1/READEME.md
@@ -0,0 +1 @@
+exercicios referentes ao dia 4 do bloco tres da trybe. Os conteudos apresentados foram: HTML Semantico e alguns estilos extras de css.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		exercicios referentes ao dia 4 do bloco tres da trybe. Os conteudos apresentados foram: HTML Semantico e alguns estilos extras de css.