FelipeAssis27 · FelipeAssis27 · Feb 26, 2021
diff --git a/fundamentos_web/bloco_2/2.1/README.md b/fundamentos_web/bloco_2/2.1/README.md
@@ -0,0 +1 @@
+Ferramentas a serem dominadas
diff --git a/fundamentos_web/bloco_2/2.1/trybe_skills.txt b/fundamentos_web/bloco_2/2.1/trybe_skills.txt
@@ -0,0 +1,6 @@
+O que eu vou aprender na Trybe:
+-Unix
+-Bash
+-Git
+-HTML
+-CSS
diff --git a/fundamentos_web/bloco_3/dia_1 b/fundamentos_web/bloco_3/dia_1
diff --git a/fundamentos_web/bloco_3/dia_3/.vscode/settings.json b/fundamentos_web/bloco_3/dia_3/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/fundamentos_web/bloco_3/dia_3/ag_pseudo1.html b/fundamentos_web/bloco_3/dia_3/ag_pseudo1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8">
+    <title>Agrupando Seletores</title>
+    <link rel="stylesheet" href="style2.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>https://www.betrybe.com/</li>
+        <li>https://www.w3schools.com/</li>
+        <li>https://css-tricks.com/</li>
+    </ol>
+    <!-- EXERCÍCIOS
+ Adicione uma lista ordenada dos 3 melhores sites que você conhece.
+ Crie um arquivo no mesmo diretório e nomeie-o de 'style.css'.
+ Nesse arquivo .css, adicione os estilos para que:
+1 O texto das tags 'h1' e 'p' estejam centralizados.
+2 A cor de fundo da sua lista mude quando o cursor estiver sobre o item.
+3 A fonte do item mude quando ele for clicado.
+
+    -->
+    <p>Principais motivos para eu gostar deles</p>
+    <ul>
+        <li>Sites objetivos e práticos</li>
+        <li>Conteúdo sempre atual e gratuito</li>
+        <li>Centenas de exemplos e bibliotecas para consulta</li>
+    </ul>
+    <!-- EXERCÍCIOS
+ Adicione uma lista não ordenada com, pelo menos, 3 características que você gosta.
+ No 'style.css', adicione a propriedade 'list-style: none' para ambas as listas.
+
+    -->
+  </body>
+</html>
diff --git a/fundamentos_web/bloco_3/dia_3/ag_pseudo2.html b/fundamentos_web/bloco_3/dia_3/ag_pseudo2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+  <meta charset="UTF-8">
+  <title>Pseudoclasses</title>
+  <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <h1>Paleta de Cores</h1>
+    <p>Vamos criar uma paleta de cores com as divs abaixo:</p>
+    <div id="container">
+
+        <div>
+            <h3 class="odd">Cor primária</h3>
+        </div>
+        <div>
+            <h3>Cor Secundária</h3>
+        </div>
+        <div>
+            <h3 class="odd">Cor Complementar</h3>
+        </div>
+        <div>
+            <h3>Cor Escura</h3>
+        </div>
+        <div>
+            <h3 class="odd">Cor Clara</h3>
+        </div>
+
+    </div>
+
+
+    <!-- EXERCÍCIOS
+ Estilize as divs para que, ao passar o cursor por cima das mesmas, elas
+      ganhem uma borda.
+ Faça cada div ter uma cor própria.
+ Estilize cada uma das tags <h3>.
+ Faça a terceira div ser maior que as demais.
+ Deixe as tags ímpares <h3> com o texto em itálico.
+
+    -->
+  </body>
+</html>
diff --git a/fundamentos_web/bloco_3/dia_3/index.html b/fundamentos_web/bloco_3/dia_3/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/fundamentos_web/bloco_3/dia_3/index3.html b/fundamentos_web/bloco_3/dia_3/index3.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style_index3.css">
+    <title>#GoTrybe</title>
+  </head>
+  <body>
+    <h1><em>Combinações e Classes Descendentes</em></h1>
+    <br />
+    <h3>Top 5 frases memoráveis:</h3>
+    <ol>
+      <li><em>Com grandes poderes vêm grandes responsabilidades.</em> - Tio Ben (Homem Aranha)</li>
+      <li class="nprimos"><em>Houston, temos um problema.</em> - Jack Swigert</li>
+      <li class="nprimos"><em>Sempre parece impossível até que esteja feito.</em> - Nelson Mandela</li>
+      <li><em>Parte da jornada é o fim.</em> - Tony Stark (Homem de Ferro)</li>
+      <li class="nprimos"><em>Às vezes, o melhor que podemos fazer é começar novamente.</em> - Steve Rogers (Capitão América)</li>
+    </ol>
+    <h3>As maiores linguagens de programação:</h3>
+    <ul>
+      <li id="python">Python</li>
+      <li class="java">Java</li>
+      <li class="java">JavaScript</li>
+      <li>C#</li>
+      <li>C / C++</li>
+    </ul>
+    <h3>Maiores aliados de uma pessoa desenvolvedora:</h3>
+    <ul>
+      <li>
+        <a href="https://pt.stackoverflow.com/" hover>StackOverflow</a>
+      </li>
+      <li>
+        <a href="https://www.w3schools.com/">W3Schools</a>
+      </li>
+      <li>
+        <a href="https://developer.mozilla.org/pt-BR/">MDN Web Docs</a>
+      </li>
+      <li>
+        <a href="https://devdocs.io/">DevDocs</a>
+      </li>
+      <li>
+        <a href="https://app.betrybe.com/">Trybe</a>
+      </li>
+    </ul>
+  </body>
+</html>
diff --git a/fundamentos_web/bloco_3/dia_3/posicionamento_elementos.html b/fundamentos_web/bloco_3/dia_3/posicionamento_elementos.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_position.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:
+- Posicione o Mário acima do Goomba.
+- Posicione a tag p para que fique dentro do balão de fala.
+- Posicione o balão para que se torne uma fala de Bowser.
+- Posicione os elementos para que tenham alguma distância entre si.
+  -->
+  </body>
+</html>
diff --git a/fundamentos_web/bloco_3/dia_3/style.css b/fundamentos_web/bloco_3/dia_3/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 {
+      padding: 20px;
+  /* insira aqui um padding de 20px na classe abaixo para aplicá-lo aos itens B, C e D */
+  }
+
+  .margin {
+      margin: 30px ;
+  /* insira aqui uma margem de 30px na classe abaixo para aplicá-la aos itens C e D */
+  }
+
+  .border {
+      border: 5px solid black;
+  /* insira aqui uma borda com valor '5px solid black' para aplicá-la ao item D */
+  }
diff --git a/fundamentos_web/bloco_3/dia_3/style2.css b/fundamentos_web/bloco_3/dia_3/style2.css
@@ -0,0 +1,16 @@
+h1, p {
+    text-align: center;
+}
+ol {
+    background-color: cornsilk;
+    color: darkgray;
+}
+li:hover {
+    background-color: darksalmon;
+} 
+li:active {
+    color: dodgerblue;
+}
+ol, ul {
+    list-style: none;
+}
diff --git a/fundamentos_web/bloco_3/dia_3/style3.css b/fundamentos_web/bloco_3/dia_3/style3.css
@@ -0,0 +1,51 @@
+h1 {
+    font-family: 'Lucida Sans';
+    font-size: 50px;
+    text-align: center;
+    color: gray;
+}
+div:nth-child(1) {
+    background-color: rgb(86, 170, 47);
+    width: 100%;
+    display: inline-block;
+    z-index: 2;
+}
+div:nth-child(2) {
+    background-color: rgb(2, 201, 85);
+    width: 100%;
+    display: inline-block;
+    z-index: 3;
+}
+div:nth-child(3) {
+    background-color: rgb(92, 177, 123);
+    width: 100%;
+    height:160px;
+    display: inline-block;
+    z-index: 0;
+}
+div:nth-child(4) {
+    background-color: rgb(8, 39, 2);
+    width: 100%;
+    display: inline-block;
+    z-index: 4;
+}
+div:nth-child(5) {
+    background-color: rgb(209, 241, 183);
+    width: 100%;
+    display: inline-block;
+    z-index: 5;
+}
+div:hover {
+    border-style: ridge;
+}
+h3 {
+    font-family: Impact;
+    font-style: normal;
+    font-size: 35px;
+    font-weight:bold;
+    margin-left: 10px;
+    color: rgb(97, 95, 95);
+}
+h3.odd {
+    font-style: italic;
+}
diff --git a/fundamentos_web/bloco_3/dia_3/style_index3.css b/fundamentos_web/bloco_3/dia_3/style_index3.css
@@ -0,0 +1,36 @@
+ol {
+    background-color: rgb(212, 196, 104);
+}
+ol li:nth-child(2n) {
+    color:teal;
+}
+ol li.nprimos {
+    text-transform: uppercase;
+}
+h1, h3 {
+    color: tomato;
+}
+h1 {
+    text-align: center;
+    font-size: 40px;
+    border-style: solid;
+    border-color: black;
+    border-width: 1px; 
+}
+li {
+    font-size: 20px;
+}
+em {
+    font-weight: bold;
+}
+#python {
+    color: rgb(76, 76, 207);
+}
+ul li.java {
+    color: rgb(76, 76, 207);
+    background-color:fuchsia;
+}
+ul li a:hover {
+    color: darksalmon;
+    font-weight: bolder;
+}
diff --git a/fundamentos_web/bloco_3/dia_3/style_position.css b/fundamentos_web/bloco_3/dia_3/style_position.css
@@ -0,0 +1,42 @@
+h1 {
+    text-align: center;
+}
+.super-mario {
+    width: 300px;
+    position: absolute;
+    z-index:2;
+    margin-top: 100px;
+    left: 200px;
+
+}
+.goomba {
+    width: 300px;
+    position: absolute;
+    z-index: 1;
+    left: 400px;
+    margin-top: 450px;
+    margin-left: 250px;
+}
+.word {
+    width: 150px;
+    position:absolute;
+    z-index: 5;
+    float: right;
+    right: 560px;
+    margin-top: 225px;
+
+}
+.bowser {
+    width: 300px;
+    position: absolute;
+    right: 200px;
+    z-index: 4;
+    margin-top: 200px;
+
+}
+.baloon {
+    position: absolute;
+    z-index: 3;
+    margin-top: 170px;
+    right: 520px;
+}