Spaces:

Alexander1337
/

swedish-website-magic

Running

App Files Files Community

Alexander1337 commited on Feb 2

Commit

99a0edc

verified ·

1 Parent(s): 6a50caf

<!DOCTYPE html>

Browse files

<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bildgalleri</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 30px;
}

/* Grid för bilder */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.gallery img {
width: 100%;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}

.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* Ljusbox */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
}

.lightbox:target {
display: flex;
}

/* Stäng-knapp */
.close {
position: absolute;
top: 20px;
right: 30px;
font-size: 2rem;
color: white;
text-decoration: none;
}
</style>
</head>
<body>

<h1>Min Bildgalleri</h1>

<div class="gallery">
<a href="#img1"><img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770072235/260c3f64-d8ed-477d-b62a-07a174991a39_qa4zui.jpg" alt="Bild 1"></a>
<a href="#img2"><img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Bild 2"></a>
<a href="#img3"><img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071777/505614071_3142653765911038_1307952678568576126_n_cc5ddo.jpg" alt="Bild 3"></a>
</div>


<div id="img1" class="lightbox">
<a href="#" class="close">×</a>
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770072235/260c3f64-d8ed-477d-b62a-07a174991a39_qa4zui.jpg" alt="Bild 1">
</div>

<div id="img2" class="lightbox">
<a href="#" class="close">×</a>
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Bild 2">
</div>

<div id="img3" class="lightbox">
<a href="#" class="close">×</a>
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071777/505614071_3142653765911038_1307952678568576126_n_cc5ddo.jpg" alt="Bild 3">
</div>

</body>
</html>

Files changed (5) hide show

components/footer.js +1 -1
components/header.js +3 -2
gallery.html +94 -0
index.html +1 -11
style.css +3 -20

components/footer.js CHANGED Viewed

@@ -124,7 +124,7 @@ class FooterComponent extends HTMLElement {
           </div>
         </div>
         <div class="footer-bottom">
-          <p>Alexander Adolfsson Coaching | Hem | Om mig | Tjänster | Priser | Boka | Kontakt</p>
           <p>📸 Instagram: <a href="https://www.instagram.com/ptalexadolfsson/" target="_blank">@ptalexadolfsson</a> | 🎵 TikTok: <a href="https://www.tiktok.com/@ptalexanderadolfsson?lang=sv-SE" target="_blank">@ptalexanderadolfsson</a> | 📘 Facebook: <a href="https://www.facebook.com/profile.php?id=61583938018630" target="_blank">Alexander Adolfsson</a> | ▶️ YouTube: <a href="https://www.youtube.com/@alexanderadolfsson9295" target="_blank">Alexander Adolfsson</a></p>
           <p>&copy; 2026 Alexander Adolfsson Coaching. Alla rättigheter reserverade.</p>
         </div>

           </div>
         </div>
         <div class="footer-bottom">
+          <p>Alexander Adolfsson Coaching | Hem | Om mig | Tjänster | Priser | Boka | Galleri | Kontakt</p>
           <p>📸 Instagram: <a href="https://www.instagram.com/ptalexadolfsson/" target="_blank">@ptalexadolfsson</a> | 🎵 TikTok: <a href="https://www.tiktok.com/@ptalexanderadolfsson?lang=sv-SE" target="_blank">@ptalexanderadolfsson</a> | 📘 Facebook: <a href="https://www.facebook.com/profile.php?id=61583938018630" target="_blank">Alexander Adolfsson</a> | ▶️ YouTube: <a href="https://www.youtube.com/@alexanderadolfsson9295" target="_blank">Alexander Adolfsson</a></p>
           <p>&copy; 2026 Alexander Adolfsson Coaching. Alla rättigheter reserverade.</p>
         </div>

components/header.js CHANGED Viewed

@@ -87,17 +87,18 @@ class HeaderComponent extends HTMLElement {
             <span>MinHemsida</span>
           </div>
           <ul class="nav-links">
-            <li><a href="#"><i data-feather="home"></i> Hem</a></li>
             <li><a href="#"><i data-feather="user"></i> Om mig</a></li>
             <li><a href="#"><i data-feather="list"></i> Tjänster</a></li>
             <li><a href="#"><i data-feather="dollar-sign"></i> Priser</a></li>
             <li><a href="#"><i data-feather="calendar"></i> Boka</a></li>
             <li><a href="#"><i data-feather="mail"></i> Kontakt</a></li>
           </ul>
 <button class="mobile-menu-btn">
             <i data-feather="menu"></i>
           </button>
-        </nav>
       </header>
     `;

             <span>MinHemsida</span>
           </div>
           <ul class="nav-links">
+            <li><a href="/"><i data-feather="home"></i> Hem</a></li>
             <li><a href="#"><i data-feather="user"></i> Om mig</a></li>
             <li><a href="#"><i data-feather="list"></i> Tjänster</a></li>
             <li><a href="#"><i data-feather="dollar-sign"></i> Priser</a></li>
             <li><a href="#"><i data-feather="calendar"></i> Boka</a></li>
+            <li><a href="gallery.html"><i data-feather="image"></i> Galleri</a></li>
             <li><a href="#"><i data-feather="mail"></i> Kontakt</a></li>
           </ul>
 <button class="mobile-menu-btn">
             <i data-feather="menu"></i>
           </button>
+</nav>
       </header>
     `;

gallery.html ADDED Viewed

	@@ -0,0 +1,94 @@

+<!DOCTYPE html>
+<html lang="sv">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bildgalleri - Alexander Adolfsson Coaching</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8">
+        <h1 class="text-3xl font-bold text-center mb-8">Mitt Bildgalleri</h1>
+        <div class="gallery grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+            <a href="#img1" class="block">
+                <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770072235/260c3f64-d8ed-477d-b62a-07a174991a39_qa4zui.jpg" alt="Träningsresultat 1" class="w-full h-64 object-cover rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
+            </a>
+            <a href="#img2" class="block">
+                <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Träningsresultat 2" class="w-full h-64 object-cover rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
+            </a>
+            <a href="#img3" class="block">
+                <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071777/505614071_3142653765911038_1307952678568576126_n_cc5ddo.jpg" alt="Träningsresultat 3" class="w-full h-64 object-cover rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
+            </a>
+        </div>
+        <!-- Lightboxes -->
+        <div id="img1" class="lightbox fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
+            <a href="#" class="close absolute top-4 right-8 text-4xl text-white">&times;</a>
+            <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770072235/260c3f64-d8ed-477d-b62a-07a174991a39_qa4zui.jpg" alt="Träningsresultat 1" class="max-w-4xl max-h-[90vh] rounded-lg">
+        </div>
+        <div id="img2" class="lightbox fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
+            <a href="#" class="close absolute top-4 right-8 text-4xl text-white">&times;</a>
+            <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Träningsresultat 2" class="max-w-4xl max-h-[90vh] rounded-lg">
+        </div>
+        <div id="img3" class="lightbox fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden">
+            <a href="#" class="close absolute top-4 right-8 text-4xl text-white">&times;</a>
+            <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071777/505614071_3142653765911038_1307952678568576126_n_cc5ddo.jpg" alt="Träningsresultat 3" class="max-w-4xl max-h-[90vh] rounded-lg">
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        // Lightbox functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const lightboxes = document.querySelectorAll('.lightbox');
+            lightboxes.forEach(lightbox => {
+                const closeBtn = lightbox.querySelector('.close');
+                // Close lightbox when clicking on close button
+                closeBtn.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    lightbox.classList.add('hidden');
+                    window.location.hash = '';
+                });
+                // Close lightbox when clicking outside the image
+                lightbox.addEventListener('click', function(e) {
+                    if (e.target === lightbox) {
+                        lightbox.classList.add('hidden');
+                        window.location.hash = '';
+                    }
+                });
+            });
+            // Show lightbox when hash changes
+            window.addEventListener('hashchange', function() {
+                lightboxes.forEach(lightbox => {
+                    if (window.location.hash === '#' + lightbox.id) {
+                        lightbox.classList.remove('hidden');
+                    } else {
+                        lightbox.classList.add('hidden');
+                    }
+                });
+            });
+            // Show lightbox on initial load if hash exists
+            if (window.location.hash) {
+                const targetLightbox = document.querySelector(window.location.hash);
+                if (targetLightbox) {
+                    targetLightbox.classList.remove('hidden');
+                }
+            }
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -145,17 +145,7 @@
             <p><i class="fas fa-envelope"></i> E-post: <a href="mailto:alexander.pt.adolfsson@gmail.com">alexander.pt.adolfsson@gmail.com</a></p>
             <p><i class="fas fa-phone"></i> Telefon: <a href="tel:0736405008">073-640 50 08</a></p>
             <p><i class="fas fa-map-marker-alt"></i> Plats: Borås, Sverige</p>
-        </div>
-    </section>
-    <!-- Gallery -->
-    <section id="gallery">
-        <div class="gallery">
-          <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg">
-          <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071777/505614071_3142653765911038_1307952678568576126_n_cc5ddo.jpg">
-          <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071762/pexels-photo-376464_br5ucq.jpg">
-          <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071721/11062b_f11d2809bac34baaadb2950e9d15f8a3_mv2_o2ltbl.avif">
-          <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071709/11062b_b80bd0860f1749178b81eee39e3bc15b_mv2_d_4538_3119_s_4_2_tbiobt.avif">
         </div>
     </section>
 </main>

             <p><i class="fas fa-envelope"></i> E-post: <a href="mailto:alexander.pt.adolfsson@gmail.com">alexander.pt.adolfsson@gmail.com</a></p>
             <p><i class="fas fa-phone"></i> Telefon: <a href="tel:0736405008">073-640 50 08</a></p>
             <p><i class="fas fa-map-marker-alt"></i> Plats: Borås, Sverige</p>
+            <p><i class="fas fa-images"></i> <a href="gallery.html">Se mitt bildgalleri</a></p>
         </div>
     </section>
 </main>

style.css CHANGED Viewed

@@ -13,7 +13,7 @@
 body {
   font-family: 'Inter', sans-serif;
   margin: 0;
-  padding: 0;
   line-height: 1.6;
   scroll-behavior: smooth;
   background: #fff;
@@ -274,6 +274,7 @@ ul.check li {
   font-size: 1.1rem;
   color: #333;
 }
 ul.check li::before {
   content: "✓";
   position: absolute;
@@ -290,28 +291,10 @@ ul.check li::before {
   font-weight: bold;
   font-size: 14px;
 }
-/* Gallery */
-.gallery {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  margin: 20px 0;
-}
-.gallery img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 12px;
-  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
-  transition: transform .3s ease;
-}
-.gallery img:hover {
-  transform: scale(1.05);
-}
 /* Kontakt */
 #contact {
   background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-color: white;
   border-radius: 20px;
   padding: 3rem;
 }

 body {
   font-family: 'Inter', sans-serif;
   margin: 0;
+padding: 0;
   line-height: 1.6;
   scroll-behavior: smooth;
   background: #fff;
   font-size: 1.1rem;
   color: #333;
 }
 ul.check li::before {
   content: "✓";
   position: absolute;
   font-weight: bold;
   font-size: 14px;
 }
 /* Kontakt */
 #contact {
   background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  color: white;
   border-radius: 20px;
   padding: 3rem;
 }