Merge pull request Laboratoria#21 from suelenescorcio/feat/responsivo…

…-style-2 finalização responsivo
GabrielaMedrado · Mar 9, 2022 · 3d2cfff · 3d2cfff
2 parents ab6a2e3 + 376ef4f
commit 3d2cfff
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 41 deletions.
diff --git a/src/cards.html b/src/cards.html
@@ -41,8 +41,8 @@
         <input type="image" src="imagens/backInitial.png" alt="btnback" class="imgback">
       </div>
     </nav>
-    <section class="result">
-    </section>
+    <ul class="result">
+    </ul>
   </header>
   <script src="main.js" type="module"></script>
   <script src="buttons.js" type="module"></script>

diff --git a/src/graficos.js b/src/graficos.js
@@ -88,32 +88,3 @@ printStatusAverage.innerHTML =
 
 
 
-
-// google.charts.load('current', {packages: ['corechart']});
-// google.charts.setOnLoadCallback(drawChartStatus);
-
-// function drawChartStatus () {
-//   let dataStatus = new google.visualization.DataTable;
-//   dataStatus.addColumn('string', 'Element');
-//   dataStatus.addColumn('number', 'percentege');
-//   dataStatus.addRows(statusFilter(element));
-//   let options = {
-//     heigth: 200,
-//     colors: ['#011C40', '#3CA6A6', '#014011', '#012623', '#022601'],
-//     'backgroundColor':{
-//       'fill': 'white',
-//       'opacity': 20,
-//     },
-//     legend: {
-//       textStyle: {
-//         color:'#022601',
-//         fontSize: 14,
-//       }
-//     }
-
-//   };
-//   let chart = new google.visualization.PieChart(document.getElementById('grafic'));
-
-// }
-// drawChartStatus(dataStatus.options)
-
diff --git a/src/imagens/hbo (2).png b/src/imagens/hbo (2).png
diff --git a/src/imagens/net.png b/src/imagens/net.png
diff --git a/src/main.js b/src/main.js
@@ -7,7 +7,7 @@ function allCards(data) {
     .map(
       (dado) => `
 
-        <div class="cards">
+        <li class="cards">
           <img class= "img-card" src="${dado.image}" alt="cards"></img>
           <h1 class="card-name">${dado.name}</h1>
           <ul class="info-list">
@@ -16,7 +16,7 @@ function allCards(data) {
             <li>Espécie: ${dado.species}</li>
             <li>Origem: ${dado.origin.name}</li>
           </ul>
-        </div>
+        </li>
       `
     )
     .join(" ")

diff --git a/src/style2.css b/src/style2.css
@@ -74,12 +74,12 @@ body {
   list-style-type: none;
   padding-left: 0px;
   width: 13vw;
-  height: 13vh;
 }
 
 .logoLink {
   display: flex;
-  height: 50%;
+  justify-content: space-evenly;
+  align-items: center;
 }
 @media (max-width: 480px) {
   .box {
@@ -98,19 +98,30 @@ body {
   }
   .cards {
     display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    padding: 15%;
+    align-items: center;
+    padding: 30px;
+    width: 60%;
     margin: 3%;
   }
   .img-card {
-    display: flex;
+    width: -webkit-fill-available;
   }
   .card-name {
-    display: flex;
+    width: unset;
   }
   .info-list {
-    display: flexbox;
+    width: unset;
+  }
+  .logoLink {
+    flex-direction: column;
+  }
+  .linkHBO{
+    position: relative;
+    top: 150px;
+  }
+  .linkNetflix{
+    position: relative;
+    top: 50px;
   }
 }
 @media (max-width: 915px) {