Tarea completada

a346e8f5 · Nahuel Mereles Rodriguez · a346e8f5 · a346e8f5
Commit a346e8f5 authored May 04, 2022 by Nahuel Mereles Rodriguez
Hide whitespace changes
Inline Side-by-side

Showing with 135 additions and 0 deletions

index.html
+43 -0

styles.css
+92 -0

No files found.
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Tarea De HTML y CSS</title>
+</head>
+
+<body>
+    <div class="mainContainer">
+
+        <div class="imageContainer">
+            <div class="miniImageContainer z1">
+                <img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
+            </div>
+
+            <div class="miniImageContainer z2">
+                <img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
+            </div>
+
+            <div class="miniImageContainer z3">
+                <img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
+
+            </div>
+
+            <div class="miniImageContainer z4">
+                <img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
+
+            </div>
+            
+            <div class="miniImageContainer z5">
+                <img src="https://tdj.gg/uploads/attachs/50201_ashe.png" alt="Pinguino">
+            </div>
+        </div>
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
--- a/styles.css
+++ b/styles.css
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.mainContainer {
+    background-color: aqua;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+
+}
+
+.imageContainer {
+    background-color: red;
+    width: 40%;
+    height: 70%;
+    border: 2px solid rgb(0, 0, 0);
+    display: flex;
+    /* justify-content: space-around;
+    align-items: center; */
+    position: relative;
+    /* border: ; */
+}
+
+.miniImageContainer {
+    width: 19%;
+    height: 19%;
+    border: 2px solid rgb(96, 49, 175);
+}
+
+.miniImageContainer:hover {
+    border: 2px solid rgb(29, 218, 108);
+}
+
+.z1:hover ~ div {
+    visibility: hidden;
+}
+
+.z2:hover ~ div {
+    visibility: hidden;
+}
+
+.z3:hover ~ div {
+    visibility: hidden;
+}
+
+.z4:hover ~ div {
+    visibility: hidden;
+}
+
+.z1 {
+    position: absolute;
+    top: 8%;
+    left: 8%;
+}
+
+.z2 {
+    position: absolute;
+    top: 24%;
+    left: 24%;
+}
+
+.z3 {
+    position: absolute;
+    top: 40%;
+    left: 40%;
+}
+
+.z4 {
+    position: absolute;
+    top: 56%;
+    left: 56%;
+}
+
+.z5 {
+    position: absolute;
+    top: 72%;
+    left: 72%;
+}
+
+.miniImageContainer img {
+    width: 100%;
+    height: 100%;
+    
+}
+
+/* Visibility: hidden Ocultar */
\ No newline at end of file