feat: centralização

JoaoRoccella · Dec 26, 2023 · 4e34303 · 4e34303
1 parent 26b0222
commit 4e34303
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -16,10 +16,14 @@
 
     <!-- Image Map Generated by http://www.image-map.net/ -->
     <map name="carro-map">
-        <area id="area-parabrisa" data-target="parabrisa" title="Pára-brisa"
+
+        <area data-target="parabrisa" title="Pára-brisa"
             coords="363,109,397,245,503,239,604,248,639,108,582,79,501,70,418,80" shape="poly">
-        <area id="area-retrovisor-dir" data-target="retrovisor-dir" title="Retrovisor" coords="889,442,26"
-            shape="circle">
+
+        <area data-target="espelho-retrovisor" title="Retrovisor" coords="889,442,26" shape="circle">
+
+        <area data-target="retrovisor-dir" title="Retrovisor direito" coords="718,402,29" shape="circle">
+
     </map>
 
     <div id="parabrisa" class="data oculto">
@@ -33,12 +37,18 @@ <h3>Pára-brisa</h3>
 
     <div id="retrovisor-dir" class="data oculto">
         <span class="close">✖</span>
-        <h3>Retrovisor</h3>
+        <h3>Retrovisor Direito</h3>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa perspiciatis vitae impedit iste omnis ullam
             beatae similique quam autem debitis incidunt veritatis, provident tenetur dolorum, nesciunt, aliquid odio
             nihil sequi dolorem ad unde porro libero ratione sapiente! Nostrum, consequuntur sapiente?</p>
     </div>
 
+    <div id="espelho-retrovisor" class="data oculto">
+        <span class="close">✖</span>
+        <h3>Espelho Retrovisor</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt velit quisquam impedit veniam harum quis ea facere voluptate ullam, quasi et dicta eos, aperiam in possimus temporibus pariatur recusandae consectetur.</p>
+    </div>
+
     <script src="./scripts/script.js"></script>
     <script src="./scripts/imageMapResizer.min.js"></script>
     <script>

diff --git a/style.css b/style.css
@@ -7,8 +7,15 @@
     scroll-behavior: smooth;
 }
 
+body {
+    display: flex;
+    justify-content: center;
+    height: 100vh;
+    overflow: hidden;
+}
+
 img {
-    width: 100%;
+    height: 100%;
 }
 
 .oculto {
@@ -34,13 +41,18 @@ area {
 }
 
 #parabrisa {
-    top: 50px;
+    top: 30%;
     left: 80px;
 }
 
 #retrovisor-dir {
-    top: 50%;
-    left: calc(50% - 100px);
+    top: 30%;
+    left: 80px;
+}
+
+#espelho-retrovisor {
+    top: 30%;
+    left: 80px;
 }
 
 .close {