the app is done and works properly

AlexM566 · Jan 23, 2025 · 2302986 · 2302986
1 parent 2c59025
commit 2302986
Show file tree

Hide file tree

Showing 37 changed files with 280 additions and 19 deletions.
diff --git a/ImageGridLayout/images/1.avif b/ImageGridLayout/images/1.avif
diff --git a/ImageGridLayout/images/1.jpg b/ImageGridLayout/images/1.jpg
diff --git a/ImageGridLayout/images/2.avif b/ImageGridLayout/images/2.avif
diff --git a/ImageGridLayout/images/3.avif b/ImageGridLayout/images/3.avif
diff --git a/ImageGridLayout/images/4.avif b/ImageGridLayout/images/4.avif
diff --git a/ImageGridLayout/images/5.avif b/ImageGridLayout/images/5.avif
diff --git a/ImageGridLayout/images/6.avif b/ImageGridLayout/images/6.avif
diff --git a/ImageGridLayout/index.html b/ImageGridLayout/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Image Grid</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+        <div class="container">
+            <img class="img1"  src="/images/1.avif" alt="1">
+            <img class="img2" src="/images/2.avif" alt="2">
+            <img class="img3" src="/images/3.avif" alt="3">
+            <img class="img4" src="/images/4.avif" alt="4">
+            <img class="img5" src="/images/5.avif" alt="5">
+            <img class="img6" src="/images/6.avif" alt="6">
+        </div>
+    </body>
+</html>
diff --git a/ImageGridLayout/style.css b/ImageGridLayout/style.css
@@ -0,0 +1,32 @@
+.img1, .img4, .img5 {
+    width: 220px;
+    height: 280px;
+}
+
+.img2, .img3, .img6 {
+    width: 220px;
+    height: 180px;
+}
+
+.img1, .img3, .img5{
+    grid-row-start: 1;
+    grid-row-end:2;
+}
+
+.img4 {
+    position: relative;
+    bottom: 100px;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: repeat(3, 220px); /* Each column will have the same width */
+    grid-template-rows: repeat(3, 1fr); /* Each row will have the same height */
+    gap:5px;
+   margin: 0 auto;
+}
+
+.container img{
+    display: grid;
+    gap:0;
+}
diff --git a/InteractivePhotoGallery/images/1.jpg b/InteractivePhotoGallery/images/1.jpg
diff --git a/InteractivePhotoGallery/images/10.jpg b/InteractivePhotoGallery/images/10.jpg
diff --git a/InteractivePhotoGallery/images/2.jpg b/InteractivePhotoGallery/images/2.jpg
diff --git a/InteractivePhotoGallery/images/3.jpg b/InteractivePhotoGallery/images/3.jpg
diff --git a/InteractivePhotoGallery/images/4.jpg b/InteractivePhotoGallery/images/4.jpg
diff --git a/InteractivePhotoGallery/images/6.jpg b/InteractivePhotoGallery/images/6.jpg
diff --git a/InteractivePhotoGallery/images/7.jpg b/InteractivePhotoGallery/images/7.jpg
diff --git a/InteractivePhotoGallery/images/8.jpg b/InteractivePhotoGallery/images/8.jpg
diff --git a/InteractivePhotoGallery/index.html b/InteractivePhotoGallery/index.html
@@ -1,24 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple HTML Page</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Lightbox Gallery</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <header>
-        <h1>Welcome to My Simple HTML Page</h1>
-    </header>
-    <main>
-        <p>This is a simple HTML file. You can add more content here as needed.</p>
-        <ul>
-            <li>Item 1</li>
-            <li>Item 2</li>
-            <li>Item 3</li>
-        </ul>
-    </main>
-    <footer>
-        <p>&copy; 2025 My Website</p>
-    </footer>
+  <div class="gallery">
+    <img src="images/1.jpg" alt="Image 1" class="thumbnail">
+    <img src="images/2.jpg"  alt="Image 2" class="thumbnail">
+    <img src="images/3.jpg" alt="Image 3" class="thumbnail">
+  </div>
+
+  <div class="lightbox" id="lightbox">
+    <span class="close">&times;</span>
+    <img class="lightbox-img" id="lightbox-img" src=""   alt="Expanded View">
+  </div>
+
+  <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/InteractivePhotoGallery/script.js b/InteractivePhotoGallery/script.js
@@ -0,0 +1,27 @@
+// script.js
+
+// Select the lightbox and related elements
+const lightbox = document.getElementById('lightbox');
+const lightboxImg = document.getElementById('lightbox-img');
+const thumbnails = document.querySelectorAll('.thumbnail');
+const closeBtn = document.querySelector('.close');
+
+// Open lightbox on thumbnail click
+thumbnails.forEach(thumbnail => {
+  thumbnail.addEventListener('click', () => {
+    lightbox.style.display = 'flex';
+    lightboxImg.src = thumbnail.src; // Set the lightbox image source
+  });
+});
+
+// Close lightbox when close button is clicked
+closeBtn.addEventListener('click', () => {
+  lightbox.style.display = 'none';
+});
+
+// Close lightbox when clicking outside the image
+lightbox.addEventListener('click', (e) => {
+  if (e.target !== lightboxImg) {
+    lightbox.style.display = 'none';
+  }
+});
diff --git a/InteractivePhotoGallery/style.css b/InteractivePhotoGallery/style.css
@@ -0,0 +1,78 @@
+/* styles.css */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+
+}
+
+.gallery {
+  display: flex;
+  gap: 10px;
+  padding: 20px;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid #6a6666;
+  padding: 10px;
+  background-color: #ccb5b5;
+}
+
+.thumbnail {
+  width: 200px;
+  height: 300px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid #6a6666;
+  padding: 5px;
+  box-shadow: rgba(0, 0, 0, 0.8);
+  border-radius: 5px;
+  transition: transform 0.2s;
+}
+
+.thumbnail:hover {
+  transform: scale(1.3);
+  border: 0px;
+  padding: 0px;
+}
+
+.lightbox {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.lightbox-img {
+  max-width: 90%;
+  max-height: 90%;
+}
+
+.close {
+  position: absolute;
+  top: 20px;
+  right: 30px;
+  font-size: 30px;
+  color: white;
+  cursor: pointer;
+}
+
+@media only screen{
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    padding: 20px;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #6a6666;
+    padding: 10px;
+    background-color: #ccb5b5;
+  }
+}
diff --git a/Scrolltoseetheanimation/images/1.jpg b/Scrolltoseetheanimation/images/1.jpg
diff --git a/Scrolltoseetheanimation/images/10.jpg b/Scrolltoseetheanimation/images/10.jpg
diff --git a/Scrolltoseetheanimation/images/11.jpg b/Scrolltoseetheanimation/images/11.jpg
diff --git a/Scrolltoseetheanimation/images/12.jpg b/Scrolltoseetheanimation/images/12.jpg
diff --git a/Scrolltoseetheanimation/images/13.jpg b/Scrolltoseetheanimation/images/13.jpg
diff --git a/Scrolltoseetheanimation/images/2.jpg b/Scrolltoseetheanimation/images/2.jpg
diff --git a/Scrolltoseetheanimation/images/3.jpg b/Scrolltoseetheanimation/images/3.jpg
diff --git a/Scrolltoseetheanimation/images/4.jpg b/Scrolltoseetheanimation/images/4.jpg
diff --git a/Scrolltoseetheanimation/images/5.jpg b/Scrolltoseetheanimation/images/5.jpg
diff --git a/Scrolltoseetheanimation/images/6.jpg b/Scrolltoseetheanimation/images/6.jpg
diff --git a/Scrolltoseetheanimation/images/7.jpg b/Scrolltoseetheanimation/images/7.jpg
diff --git a/Scrolltoseetheanimation/images/8.jpg b/Scrolltoseetheanimation/images/8.jpg
diff --git a/Scrolltoseetheanimation/images/9.jpg b/Scrolltoseetheanimation/images/9.jpg
diff --git a/Scrolltoseetheanimation/index.html b/Scrolltoseetheanimation/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title> Beautiful Romania</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+        <header>
+            <h1> Discover Beautiful Romania</h1>
+        </header>
+        <main>
+            <div class="container">
+
+                <img src="images/1.jpg" alt="Beautiful Romania"      class="pic1">
+                <img src="images/2.jpg" alt="Beautiful Romania"      class="pic2">
+                <img src="images/3.jpg" alt="Beautiful Romania"      class="left">
+                <img src="images/4.jpg" alt="Beautiful Romania"      class="right">
+                <img src="images/5.jpg" alt="Beautiful Romania"      class="left">
+                <img src="images/6.jpg" alt="Beautiful Romania"      class="right">
+                <img src="images/7.jpg" alt="Beautiful Romania"      class="left">
+                <img src="images/8.jpg" alt="Beautiful Romania"      class="right">
+                <img src="images/9.jpg" alt="Beautiful Romania"      class="left">
+                <img src="images/10.jpg" alt="Beautiful Romania"    class="right">
+                <img src="images/11.jpg" alt="Beautiful Romania"    class="left">
+                <img src="images/12.jpg" alt="Beautiful Romania"    class="right">
+                <img src="images/13.jpg" alt="Beautiful Romania"    class="left">
+
+            </div>
+        </main>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/Scrolltoseetheanimation/script.js b/Scrolltoseetheanimation/script.js
@@ -0,0 +1,27 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const images = document.querySelectorAll(".container img");
+
+    // Funcție pentru a verifica dacă o imagine este în viewport
+    const isInViewport = (element) => {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+        );
+    };
+
+    // Funcție care gestionează evenimentul de scroll
+    const handleScroll = () => {
+        images.forEach((img) => {
+            if (isInViewport(img)) {
+                img.classList.add("visible"); // Adaugă clasa pentru animație
+            }
+        });
+    };
+
+    // Atașăm evenimentul scroll
+    window.addEventListener("scroll", handleScroll);
+
+    // Verificăm imaginile inițial (în caz că unele sunt deja vizibile)
+    handleScroll();
+});
diff --git a/Scrolltoseetheanimation/style.css b/Scrolltoseetheanimation/style.css
@@ -0,0 +1,44 @@
+body, html{
+    background-color: #ffe99b;
+}
+
+
+
+header h1{
+    font-family: cursive;
+    text-align: center;
+    text-shadow: 4px 1px 0.5px rgba(0, 0, 0, 0.5); ;
+}
+
+
+.container{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 50px;
+}
+.container img{
+    display: flex;
+    flex-direction: column;
+    width: 300px;
+    height: 200px;
+    border-radius: 5%;
+    margin:20px;
+}
+
+.left, .right {
+    opacity: 0; /* Inițial invizibile */
+    transform: translateX(-100%); /* Elemente `left` încep din stânga */
+    transition: transform 0.6s ease-out, opacity 0.6s ease-out; /* Tranziție lină */
+}
+
+.right {
+    transform: translateX(100%); /* Elemente `right` încep din dreapta */
+}
+
+.visible {
+    transform: translateX(0); /* Revin la poziția centrală */
+    opacity: 1; /* Devine vizibil */
+}
+
diff --git a/SinglePageCV/style.css b/SinglePageCV/style.css
@@ -33,7 +33,7 @@ navbar .name {
 
 header h1{
     text-align: center;
-    font-family: cursive
+    font-family: cursive;
 }
 
 .container {