add #3

maykbrito · Jan 24, 2023 · b6b1c0e · b6b1c0e
1 parent 4d2e95c
commit b6b1c0e
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 0 deletions.
diff --git a/03/index.html b/03/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+
+    <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>Botões e Cursores</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://unpkg.com/phosphor-icons"></script>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Teste os botões</h1>
+      <p>
+        Interaja com os botões e observe a mudança de aparência e de cursores
+      </p>
+
+      <div class="buttons">
+        <button class="primary" onclick="loading(event)">
+          interaja comigo</button>
+        <button class="secondary">interaja comigo</button>
+        <button class="tertiary movable">
+          <i class="ph-list"></i>
+          interaja comigo</button>
+      </div>
+    </div>
+
+    <script>
+      function loading(event) {
+        const button = event.currentTarget
+        button.classList.add('loading')
+        const text = button.textContent
+        button.innerHTML = `
+        <i class="ph-circle-notch"></i>
+        ${text}
+        `
+      }
+    </script>
+  </body>
+</html>
diff --git a/03/style.css b/03/style.css
@@ -0,0 +1,111 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #130f1e;
+
+  display: grid;
+  place-content: center;
+  height: 100vh;
+  gap: 16px;
+}
+
+#app {
+  max-width: 360px;
+  padding-inline: 40px;
+}
+
+h1 {
+  font-family: "Inter";
+  color: white;
+  font-size: 32px;
+}
+
+p {
+  margin-top: 8px;
+  color: white;
+  font-family: "Roboto";
+  opacity: 0.67;
+}
+
+.buttons {
+  margin-top: 100px;
+  display: grid;
+  gap: 32px;
+}
+
+.primary {
+  --bg-default: #8257e5;
+  --bg-hover: #9674e5;
+}
+
+.secondary {
+  --bg-default: #3c3748;
+  --bg-hover: #6a617f;
+}
+
+.tertiary {
+  --bg-default: transparent;
+  --bg-hover: transparent;
+}
+
+button {
+  background-color: var(--bg-default);
+  font-family: "Inter";
+  border: 0;
+  color: white;
+  padding: 12px 24px;
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 24px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+button:hover {
+  background-color: var(--bg-hover);
+}
+
+button:focus {
+  outline: 2px solid #d9cdf7;
+}
+
+button:disabled {
+  background-color: var(--bg-default);
+  opacity: 0.56;
+  cursor: not-allowed;
+}
+
+.loading {
+  cursor: progress;
+}
+
+.loading i {
+  font-size: 16px;
+  animation: spin 700ms infinite linear;
+}
+
+.movable {
+  cursor: move;
+}
+
+.movable i {
+  font-size: 18px;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}