denis-rossati · denis-rossati · Mar 19, 2021 · Mar 19, 2021 · Mar 19, 2021 · Mar 19, 2021
diff --git a/bloco_6/dia_5/Exercicios/Exercicio 3/exercise3.css b/bloco_6/dia_5/Exercicios/Exercicio 3/exercise3.css
@@ -0,0 +1,132 @@
+#container {
+  margin: 0 auto;
+  width: 100%;
+  background: #fff;
+}
+
+#header {
+  background: #ccc;
+  padding: 20px;
+}
+
+#header h1 {
+  margin: 0;
+}
+
+#navigation {
+  float: left;
+  width: 100%;
+  background: #333;
+}
+
+#navigation ul {
+  margin: 0;
+  padding: 0;
+}
+
+#navigation ul li {
+  list-style-type: none;
+  display: inline;
+}
+
+#navigation li a {
+  display: block;
+  float: left;
+  padding: 5px 10px;
+  color: #fff;
+  text-decoration: none;
+  border-right: 1px solid #fff;
+}
+
+#navigation li a:hover {
+  background: #383;
+}
+
+#content-container {
+  float: left;
+  width: 100%;
+  background: #FFF;
+}
+
+#content {
+  clear: left;
+  float: left;
+  width: 60%;
+  padding: 20px 0;
+  margin: 0 0 0 4%;
+  display: inline;
+}
+
+#content h2 {
+  margin: 0;
+}
+
+#aside {
+  float: right;
+  width: 33%;
+  padding: 20px 0;
+  margin: 0 3% 0 0;
+  display: inline;
+}
+
+#aside h3 {
+  margin: 0;
+}
+
+#footer {
+  clear: left;
+  background: #ccc;
+  text-align: right;
+  padding: 20px;
+  height: 1%;
+}
+
+@media print and (min-width: 1px) {
+  #header {
+    display: none;
+  }
+
+  #navigation {
+    display: none;
+  }
+
+  #footer {
+    display: none;
+  }
+
+  #content, #aside{
+    float: none;
+    width: fit-content;
+  }
+
+}
+
+@media screen and (min-width: 10px) and (max-width: 359px) {
+  #aside {
+    display: none;
+  }
+
+  body {
+    padding: 0 0 0 0;
+    margin: 0;
+  }
+
+  img {
+    max-width: 90vw;
+  }
+
+  #navigation li a{
+    float:none;
+  }
+
+  #navigation {
+    display: block;
+    margin: 90px 5vw 0 5vw;
+    width: 90vw;
+  }
+
+  #header {
+    position: fixed;
+    width: 100vw;
+  }
+}
diff --git a/bloco_6/dia_5/Exercicios/Exercicio 3/exercise3.html b/bloco_6/dia_5/Exercicios/Exercicio 3/exercise3.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Kitten Kare</title>
+  <link rel="stylesheet" href="exercise3.css" />
+</head>
+
+<body>
+
+  <div id="container">
+    <div id="header">
+      <h1>
+        Kitten Kare
+      </h1>
+    </div>
+    <div id="navigation">
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Services</a></li>
+      </ul>
+    </div>
+    <div id="content-container">
+      <div id="content">
+        <h2>
+          Welcome!
+        </h2>
+        <img src="http://placebear.com/400/400">
+        <p>The domestic cat[1][2] (Felis catus[2] or Felis silvestris catus[4], informally Felis domesticus[6][7]) is a
+          small, usually furry, domesticated, carnivorous mammal. It is often called the housecat when kept as an indoor
+          pet,[8] or simply the cat when there is no need to distinguish it from other felids and felines. Cats are
+          valued by humans for companionship and ability to hunt vermin and household pests. They are primarily
+          nocturnal.[9]
+        </p>
+        <p>Cats are similar in anatomy to the other felids, with strong, flexible bodies, quick reflexes, sharp
+          retractable claws, and teeth adapted to killing small prey. As crepuscular predators, cats use their acute
+          hearing and ability to see in near darkness to locate prey. Not only can cats hear sounds too faint for human
+          ears, they can also hear sounds higher in frequency than humans can perceive. This is because the usual prey
+          of cats (particularly rodents such as mice) make high frequency noises, so the hearing of the cat has evolved
+          to pinpoint these faint high-pitched sounds. Cats also have a much better sense of smell than humans.
+        </p>
+        <p>Despite being solitary hunters, cats are a social species, and cat communication includes the use of a
+          variety of vocalizations (meowing, purring, trilling, hissing, growling and grunting) as well as pheromones
+          and types of cat-specific body language.[10]
+        </p>
+      </div>
+      <div id="aside">
+        <h3>
+          Cat Body Types
+        </h3>
+        <ul>
+          <li>Oriental
+          <li>Foreign
+          <li>Semi-Foreign
+          <li>Semi-Cobby
+          <li>Cobby
+            </p>
+      </div>
+      <div id="footer">
+        Copyright © Kitten Kare, 2019
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>
diff --git a/bloco_6/dia_5/Exercicios/Exercício 1/exercise-part1.css b/bloco_6/dia_5/Exercicios/Exercício 1/exercise-part1.css
@@ -0,0 +1,102 @@
+@media screen and (max-width: 768px) {
+  body {
+    font-size: 20px;
+    margin: 0 5%;
+    text-align: center;
+  }
+  h1 {
+    font-size: 25px;
+    text-align: center;
+    border: 1px black solid;
+    padding : 5px;
+    margin: 5% 10%;
+  }
+  h2 {
+    opacity: 0.8;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  figure {
+    margin: 50px 0;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  body {
+    background-color: rgb(228, 234, 236);
+    margin: 0 50px;
+  }
+
+  h1, h2 {
+    font-size: xxx-large;
+text-align: center;
+  }
+
+  p, figcaption {
+    font-size: 35px;
+    line-height: 50px;
+  }
+  img {
+    width: 30vw;
+  }
+
+  figure {
+    text-align: center;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 30vw;
+      background: lightgray;
+      margin: 20px;
+      border-radius: 20px;
+      padding:20px;
+  }
+
+  div {
+    width: 90vw;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+@media screen and (min-width: 1694px) {
+  body {
+    background-color: rgb(250, 229, 248);
+    max-width: 80%;
+    margin: 0 auto;
+  }
+
+  h1, h2 {
+    font-size: xxx-large;
+    text-align: center;
+  }
+
+  p {
+    margin: 0 auto;
+    font-size: 45px;
+    line-height: 80px;
+  }
+
+  img {
+    width: 20vw;
+    border-radius: 20px;
+  }
+
+  figure  {
+    font-size: 25px;
+    width: fit-content;
+  }
+
+    div {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+  }
+}
+
diff --git a/bloco_6/dia_5/Exercicios/Exercício 1/exercise_1.html b/bloco_6/dia_5/Exercicios/Exercício 1/exercise_1.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">  
+  <title>Media Query Exercise 1</title>
+
+  <link rel="stylesheet" href="exercise-part1.css"/>
+</head>
+
+<body>
+
+  <h1>Media Query Demo</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, ipsum quae veritatis in nihil laudantium labore
+    beatae nulla laborum rem. Error, molestiae eaque quod placeat at. Labore architecto minus accusantium.</p>
+
+  <h2>Box Columns</h2>
+  <div>
+    <figure>
+      <img src="http://placekitten.com/452/450?image=12" alt="Placeholder kitteh">
+      <figcaption>Place Kittens are great</figcaption>
+    </figure>
+
+    <figure>
+      <img src="http://placekitten.com/452/450?image=5" alt="Placeholder kitteh">
+      <figcaption>Place Kittens are great</figcaption>
+    </figure>
+
+    <figure>
+      <img src="http://placekitten.com/452/450?image=1" alt="Placeholder kitteh">
+      <figcaption>Place Kittens are great</figcaption>
+    </figure>
+
+    <figure>
+      <img src="http://placekitten.com/452/450?image=9" alt="Placeholder kitteh">
+      <figcaption>Place Kittens are great</figcaption>
+    </figure>
+
+    <figure>
+      <img src="http://placekitten.com/452/450?image=6" alt="Placeholder kitteh">
+      <figcaption>Place Kittens are great</figcaption>
+    </figure>
+  </div
+
+</body>
+</html>