2-DR1-TP2.13

mattolivr · mattolivr · commit 96c577357fe5 · 2025-12-06T18:08:56.000-03:00
diff --git a/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.13/index.html b/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.13/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DR2 - TP 2.13</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <button><span>Botão 1</span> <span>[1]</span></button>
+    <button><span>Botão 2</span> <span>[2]</span></button>
+    <button><span>Botão 3</span> <span>[3]</span></button>
+  </div>
+</body>
+</html>
diff --git a/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.13/style.css b/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.13/style.css
@@ -0,0 +1,72 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+
+  background-color: steelblue;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+
+  height: 100%;
+
+  button {
+    font-size: 1.3rem;
+
+    background-color: rgb(214, 54, 86);
+    border: none;
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+
+    & > span:last-child {
+      display: none;
+    }
+
+    &:hover {
+      background-color: rgb(180, 45, 72);
+    }
+  }
+}
+
+@media screen and (min-width: 924px) {
+  .container {
+    flex-direction: row;
+    gap: 42px;
+  }
+}
+
+@media screen and (pointer: none) {
+  .container button {
+    background-color: lightgreen;
+
+    > span:last-child {
+      display: inline;
+    }
+  }
+}
+
+@media screen and (pointer: coarse) {
+  .container button {
+    background-color: rgb(255, 221, 26);
+    color: black;
+
+    padding: 28px 56px;
+  }
+}
+
+@media screen and (pointer: fine) {
+  .container button {
+    padding: 16px 32px;
+  }
+}
