2-DR1-TP1.01

mattolivr · mattolivr · commit 7f2fcbba145e · 2025-10-27T20:59:54.000-03:00
diff --git a/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP1.01/index.html b/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP1.01/index.html
@@ -3,9 +3,22 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <link rel="stylesheet" href="./style.css">
+  <title>DR1-TP1.01</title>
 </head>
 <body>
-  teste2
+  <main>
+    <ul class="horizontal">
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+    </ul>
+    <ul class="vertical">
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+      <li>Item 4</li>
+    </ul>
+  </main>
 </body>
 </html>
diff --git a/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP1.01/style.css b/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP1.01/style.css
@@ -0,0 +1,34 @@
+body {
+  background-color: #333333;
+  color: #ffffff;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+main {
+  border: 1px solid #494949;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+
+  &.horizontal {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 16px;
+  }
+
+  &.vertical {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 16px;
+  }
+}
+
+li {
+  background-color: #3a3a3a;
+  padding: 12px 16px;
+  border-radius: 6px;
+}
