2-DR1-TP2.11

mattolivr · mattolivr · commit 40647155769b · 2025-12-06T17:05:02.000-03:00
diff --git a/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.11/assets/mountain.jpg b/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.11/assets/mountain.jpg
diff --git a/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.11/index.html b/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.11/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DR1 - TP 2.11</title>
+  <link rel="stylesheet" href="./style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+  <img src="assets/mountain.jpg" alt="Montanha" title="Montanha">
+  <p><strong>Lorem ipsum</strong> dolor, sit amet consectetur adipisicing elit. Quidem porro architecto doloremque minima vitae aspernatur vel magnam quaerat eaque minus quisquam fugiat sequi debitis voluptatem consequuntur incidunt, eligendi commodi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id veniam magni assumenda ullam sequi! Consectetur exercitationem, quas recusandae assumenda veritatis minus accusantium harum et incidunt mollitia obcaecati est illo. Laboriosam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, corporis itaque unde molestiae, veniam repudiandae quod impedit possimus eum quae numquam qui sunt vel voluptas id nobis repellat illum ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolorem eos iste cumque inventore quasi aut fugiat quae veniam praesentium architecto vitae aliquid ipsa assumenda, quisquam sint recusandae repellendus tenetur? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sapiente accusamus, dicta dolor temporibus at consequatur illo nihil id iusto odit eveniet necessitatibus totam sequi est nostrum, fugiat dignissimos perferendis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde fugiat consequuntur soluta odio consequatur distinctio hic eum omnis suscipit, quae voluptatibus? Dolorum exercitationem assumenda voluptates labore ad distinctio dicta repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt asperiores delectus culpa voluptates libero? Sed eaque tenetur voluptatem fugit sunt possimus tempora molestias incidunt dignissimos, quod iure dolor enim libero.</p>
+</body>
+</html>
diff --git a/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.11/style.css b/2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP2.11/style.css
@@ -0,0 +1,39 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  padding: 8px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+img {
+  width: 100%;
+  border-radius: 8px;
+}
+
+p {
+  line-height: 1.5;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+  padding-left: 2px;
+  padding-right: 6px;
+}
+
+@media screen and (min-width: 556px) {
+  img {
+    width: 330px;
+    height: fit-content;
+  }
+
+  body {
+    flex-direction: row;
+
+    padding: 24px;
+  }
+}
