Merge pull request #433 from danilolmc/update-style-and-classes

jonnathan-ls · web-flow · commit 287b634d150f · 2024-06-01T11:50:47.000-03:00
Styles and classes
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html
@@ -6,7 +6,7 @@
 
 <body>
 
-  <h2>Notification is on the right</h2>
+  <h2>A notificação está à direita</h2>
 
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
@@ -32,14 +32,14 @@ <h2>Notification is on the right</h2>
       setTimeout(() => notification.remove(), 1500);
     }
 
-    // test it
+    // teste-a
     let i = 1;
     setInterval(() => {
       showNotification({
         top: 10,
         right: 10,
-        html: 'Hello ' + i++,
-        className: "welcome"
+        html: 'Olá ' + i++,
+        className: "bem-vindo"
       });
     }, 2000);
   </script>
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html
@@ -6,7 +6,7 @@
 
 <body>
 
-  <h2>Notification is on the right</h2>
+  <h2>A notificação está è direita</h2>
 
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum
@@ -16,17 +16,17 @@ <h2>Notification is on the right</h2>
 
   <script>
     function showNotification({top = 0, right = 0, className, html}) {
-      /* your code */
+      /* seu código*/
     }
 
-    // test it
+    // teste-a
     let i = 1;
     setInterval(() => {
       showNotification({
         top: 10,
         right: 10,
-        html: 'Hello ' + i++,
-        className: "welcome"
+        html: 'Olá ' + i++,
+        className: "bem-vindo"
       });
     }, 2000);
   </script>
diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md
@@ -2,23 +2,22 @@ importance: 5
 
 ---
 
-# Create a notification
+# Crie uma notificação
 
-Write a function `showNotification(options)` that creates a notification: `<div class="notification">` with the given content. The notification should automatically disappear after 1.5 seconds.
+Escreva uma função `showNotification(options)` que cria uma notificação: `<div class="notification">` com o conteúdo especificado. A notificação deve desaparecer automaticamente depois de 1.5 segundos.
 
-The options are:
+As opções são:
 
 ```js
-// shows an element with the text "Hello" near the right-top of the window
+// mostra um elemento com o texto "Olá" próximo ao canto superior direito da janela
 showNotification({
-  top: 10, // 10px from the top of the window (by default 0px)
-  right: 10, // 10px from the right edge of the window (by default 0px)
-  html: "Hello!", // the HTML of notification
-  className: "welcome" // an additional class for the div (optional)
+  top: 10, // 10px a partir do topo da janela (por padrão 0px)
+  right: 10, // 10px a partir da borda a direita da janela (por padrão 0px)
+  html: "Olá!", // o HTML da notificação
+  className: "bem-vindo" // uma classe adicional para a div (opcional)
 });
 ```
 
 [demo src="solution"]
 
-
-Use CSS positioning to show the element at given top/right coordinates. The source document has the necessary styles.
+Utilize posicionamento com CSS para mostrar o elemento nas coordenadas superiores/direitas especificadas. O documento fonte possui os estilos necessários.
diff --git a/2-ui/1-document/08-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md
