modal css v2

Leo-Brd · Nov 13, 2024 · 0a955a9 · 0a955a9
1 parent 860d881
commit 0a955a9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/FrontEnd/index.html b/FrontEnd/index.html
@@ -93,39 +93,39 @@ <h2>Contact</h2>
 			<i class="fa-solid fa-xmark close-modal"></i>
 			<h3>Galerie photo</h3>
 			<div class="modal-gallery">
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>
-				<div class="modal-gallery-img">
+				<div class="modal-gallery-project">
 					<img src="assets/images/abajour-tahina.png">
 					<i class="fa-solid fa-trash-can delete-project"></i>
 				</div>

diff --git a/FrontEnd/styles/modal.css b/FrontEnd/styles/modal.css
@@ -46,20 +46,30 @@
 .modal-gallery {
     display: flex;
     flex-wrap: wrap;
+    width: calc((77px * 5) + (10px * 4));
     gap: 10px;
     row-gap: 30px;
-    width: 420px;
     padding-bottom: 50px;
     margin-bottom: 30px;
     border-bottom: 1px solid #B3B3B3;
 }
 
-.modal-gallery img {
+.modal-gallery-project {
+    position: relative;
     height: 102px;
     width: 77px;
 }
 
+.modal-gallery img {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
 .delete-project {
+    position: absolute;
+    top: 5px;
+    right: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -68,7 +78,7 @@
     background-color: black;
     color: white;
     font-size: 10px;
-    position: fixed;
+    cursor: pointer;
 }
 
 #add-project-button {