reprograma · isabella-brandao · Sep 9, 2021
diff --git a/exercicio-extra/mundo-gelado/css/style.css b/exercicio-extra/mundo-gelado/css/style.css
@@ -0,0 +1,119 @@
+*{
+    font-family:'Varela Round'; 
+
+
+}
+
+.container{
+    width: 100%;
+    height: 15vh;
+    background: linear-gradient(rgba(182, 220, 241, 0.5), rgba(210, 202, 238, 0.7));
+
+
+}
+
+.nav__link{
+    color: rgb(40, 15, 68);
+    text-decoration: none;
+}
+
+.nav__mobile{
+    width: 20px;
+    padding-top: 5px;
+    text-align: left;
+}
+
+.btn-primary__banner__btn__transition{
+color:rgb(82, 53, 170);
+box-sizing: border-box;
+background-color:#e4f1fd;
+text-decoration: none;
+border: solid;
+border-radius: 10px;
+font-size: 16px;
+}
+
+.banner__title{
+  width: 80%;
+  padding:4%;
+  color: rgb(110, 130, 238);
+
+}
+
+
+.banner__subtitle{
+    width: 80%;
+    padding:4%;
+    color: rgb(135, 149, 228);
+}
+
+
+.destination--siberia__img{
+    padding-top: 30%;
+    width: 80%;
+
+}
+
+
+.destination--groenlandia__img{
+    width: 80%;
+}
+
+.destination--antartida__img{
+    width: 80%;
+}
+
+/* max-width  */
+@media (max-width: 600px) {
+    .destination--siberia__img {
+        background: rgb(255, 153, 184);
+    }
+    span .maior600 {
+        display: inline-block;
+    }
+}
+
+/* min-width */
+@media (min-width: 400px) {
+    .destination--antartida__img{
+        background: #F90;
+    }
+    span .menor400 {
+        display: inline-block;
+    }
+}
+
+/* min-width & max-width */
+@media (min-width: 600px) and (max-width: 900px) {
+    .destination--siberia__img  {
+        background: rgb(121, 174, 228);
+    }
+    span .entre600-900 {
+        display: inline-block;
+    }
+}
+
+/* max width telas pequenas */
+@media (max-width: 480px) {
+    .destination--groenlandia {
+        background: rgb(209, 165, 209);
+    }
+}
+
+
+.conta.footer{
+    justify-content: end;
+    padding: 20px;
+    background-color: #a866ad;
+}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/exercicio-extra/mundo-gelado/index.html b/exercicio-extra/mundo-gelado/index.html
@@ -31,10 +31,10 @@
     </section>
 
     <main>
-      <section class="banner transition">
+      <section class="banner-transition">
         <h1 class="banner__title">Mundo gelado</h1>
         <h2 class="banner__subtitle">A agência de viagens que te leva aos lugares<br> mais congelantes do planeta.</h2>
-        <a href="#" class="btn btn--primary banner__btn transition">Quero saber mais</a>
+        <a href="#" class="btn btn-primary__banner__btn__transition">Quero saber mais</a>
       </section>
 
       <section class="about" id="sobre">
@@ -45,7 +45,7 @@ <h2 class="about__title">A agência Mundo gelado</h2>
       </section>
 
       <section id="destinos">
-        <div class="container">
+        <div class="container-2">
 
           <div class="destination destination--siberia">
             <img src="img/siberia-1.jpg" alt="Foto Siberia" class="destination--siberia__img">

diff --git a/isabella-brandao/index.html b/isabella-brandao/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aula de responsivide</title>
+    <link rel="stylesheet" href="style.css">
+</head> 
+<body>
+    <h1>Testando diferentes telas com brealpoints e media queries</h1>
+   <div class="div-1">
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio sunt quisquam quidem nostrum. Illum deserunt, cum odio in temporibus, debitis non tenetur eius odit magni minus, nulla sint. Aliquid?</p>
+   </div>
+
+
+    </p>
+   </div>
+   <div class="div-2">
+    <input placeholder="digite sua comida"type="text">
+    <input placeholder="digite sua banda favorita" type="text">
+    <input placeholder="digite sua pessoa favorita" type="text">
+   </div>
+
+
+   <div class="div-3">
+    <img src="./menina-globo.png" alt="">
+    <img src="./menina-globo.png" alt="">
+    <img src="./menina-globo.png" alt="">
+    <img src="./menina-globo.png" alt="">
+    <img src="./menina-globo.png" alt="">
+   </div>
+
+   <div class="div-4">
+    <a target="blank" href="https://twitter.com/home">Twitter</a>
+    <a target="blank" href="https://reprograma.com.br/">Reprograma</a>
+    <a target="blank" href="https://github.com/">Github</a>
+
+   </div>
+
+
+</body>
+</html>
diff --git a/isabella-brandao/menina-globo.png b/isabella-brandao/menina-globo.png
diff --git a/isabella-brandao/read.md b/isabella-brandao/read.md
@@ -0,0 +1,32 @@
+Medidas:para o css
+1.%
+PX
+ren
+vw e vh
+rem = vinculado ao elemento raiz -sucessor da rem = cria proporcionalidade de uma tela pra outra.
+como no exemplo: 
+MEDIDAS PARA USAR NO CSS:
+
+1. PIXEL (px)
+2. % (relativa)
+3. vw e vh
+    view port-janela
+    vw- se a janela divide largura da janela por 100 =
+4. rem
+5. em
+
+rem:
+
+*{
+  font-size: 20px;
+}
+
+div {
+  font-size: 10px;
+}
+
+p{
+  font-size: 1.2rem;
+}
+----- aqui serua 20px.1.2 rem = seguindo a raiz *
+em = elemento tipografico - segue sempre a div mãe
diff --git a/isabella-brandao/style.css b/isabella-brandao/style.css
@@ -0,0 +1,102 @@
+*{
+    font-size: 14px;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: blanchedalmond;
+    padding: 20px;
+}
+
+h1{
+    font-size: 2.2rem;
+    width: 100%;
+    text-align: center;
+}
+
+h1 + div{
+    width: 100%;
+}
+
+div>p{
+    font-size: 1.2rem;
+    text-align: justify;
+}
+
+input:first-child{
+    color: blueviolet;
+}
+
+.div-2{
+   display:flex;
+   flex-direction: column;
+}
+
+.div-2>input{
+    margin: 20px;
+}
+
+.div-2>input:focus{
+    background-color: white;
+}
+
+.div-3{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+.div-3>img{  
+    width: 90vw;
+    max-width:800px;
+    margin: 18px;
+}
+
+.div-3 + div{
+    display: flex;
+    flex-direction: column;
+    border: thistle 2px solid;
+}
+
+div>a{
+    text-decoration: none;
+    color: blueviolet;
+    font-size: 1.2rem;
+}
+
+
+div>a:hover{
+    font-weight: bolder;
+}
+
+div>a:hover{
+    font-weight: bolder;
+}
+
+@media(min-width:768px){
+    .div-3 + div{
+        flex-direction: row;
+        justify-content: center;
+        border: none;}
+
+        *{
+            font-size:16px;
+            background-color: coral;}
+
+}
+
+    @media(min-width:1280px){
+        *{
+            font-size: 18px;
+            background-color: lavender;}
+        }
+
+
+ .div-2>input{
+    max-width: 20vw;
+    }
+    .div-2{
+        flex-direction: row;
+        justify-content: center;
+    }
+
+
+
+
+