Spaces:

Alexander1337
/

fitflow-coaching

Running

App Files Files Community

Alexander1337 commited on Feb 5

Commit

22872b5

verified ·

1 Parent(s): 81e5c53

<!DOCTYPE html>

Browse files

<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alexander Adolfsson Coaching</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html { scroll-behavior: smooth; }
body { margin:0; font-family:sans-serif; background:#f9f9f9; color:#111; }

/* HEADER */
header {
position:sticky;
top:0;
z-index:50;
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:1rem 2rem;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
header nav a {
margin:0 1rem;
text-decoration:none;
font-weight:bold;
color:#111;
}
header nav a:hover { color:#10b981; }

/* HERO VIDEO */
.hero-video {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.hero-video video {
position:absolute;
top:50%;
left:50%;
width:auto;
height:100%;
min-width:100%;
min-height:100%;
transform: translate(-50%, -50%);
object-fit:cover;
z-index:0;
}
.hero-overlay {
position:absolute;
top:0; left:0;
width:100%; height:100%;
background: rgba(0,0,0,0.35);
z-index:1;
}
.hero-content {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:2;
text-align:center;
color:white;
}
.hero-content h1 { font-size:3rem; margin-bottom:1rem; text-shadow:2px2px8px rgba(0,0,0,0.7);}
.hero-content a {
display:inline-block;
background:#10b981;
color:black;
font-weight:bold;
padding:1rem 2rem;
border-radius:9999px;
font-size:1.5rem;
transition: all 0.3s;
}
.hero-content a:hover { background:#059669; transform:scale(1.05); }

/* OM MIG */
.about {
max-width:900px;
margin:3rem auto;
text-align:center;
padding:0 1rem;
}
.about img { max-width:300px; width:100%; border-radius:12px; margin-top:2rem; }

/* TJÄNSTER */
.services {
background:#f0f0f0;
padding:3rem 1rem;
text-align:center;
}
.services-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
margin-top:2rem;
}
.service-card {
background:white;
padding:1.5rem;
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.service-card h3 { margin-bottom:1rem; font-size:1.25rem; }
.service-card p { font-size:1rem; margin-bottom:1rem; }
.service-card a {
display:inline-block;
background:#10b981;
color:black;
font-weight:bold;
padding:0.75rem 1.5rem;
border-radius:9999px;
transition: all 0.3s;
}
.service-card a:hover { background:#059669; transform:scale(1.05); }

/* PRISER */
.pricing { padding:3rem 1rem; text-align:center; }
.pricing-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
margin-top:2rem;
}
.price-card {
background:white;
padding:2rem;
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
text-align:left;
}
.price-card h3 { font-size:1.5rem; margin-bottom:0.5rem; }
.price-card .price { font-size:1.25rem; font-weight:bold; margin-bottom:1rem; }
.price-card ul { margin-bottom:1rem; list-style:none; padding-left:0; }
.price-card ul li::before { content:"✔ "; color:#10b981; }
.price-card a {
display:inline-block;
background:#10b981;
color:black;
font-weight:bold;
padding:0.75rem 1.5rem;
border-radius:9999px;
transition: all 0.3s;
text-align:center;
}
.price-card a:hover { background:#059669; transform:scale(1.05); }

/* FOOTER */
footer {
background:#111;
color:white;
text-align:center;
padding:2rem 1rem;
}
.social-links a {
margin:0 0.5rem;
font-size:2rem;
display:inline-block;
transition: all 0.3s;
}
.social-links a:hover { transform:scale(1.2); color:#10b981; }

@media (max-width:768px){
.hero-content h1 { font-size:2rem; }
.hero-content a { font-size:1rem; padding:0.75rem 1.5rem; }
}
</style>
</head>
<body>

<header>
<div><strong>Alexander Adolfsson Coaching</strong></div>
<nav>
<a href="#home">Hem</a>
<a href="#about">Om mig</a>
<a href="#services">Tjänster</a>
<a href="#pricing">Priser</a>
<a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank">Boka gratis konsultation</a>
</nav>
</header>


<section id="home" class="hero-video">
<video autoplay muted loop playsinline>
<source src="https://res.cloudinary.com/dttivz1il/video/upload/v1770166272/00733_njitjk.ts" type="video/mp4">
Din webbläsare stöder inte videon.
</video>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Boka din PT-session idag!</h1>
<a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank">Boka nu</a>
</div>
</section>


<section id="about" class="about">
<h2>Om mig</h2>
<p>Träning är inte bara något jag gör – det är en livsstil. Jag har byggt upp min kunskap genom år av egen erfarenhet i gymmet, där jag testat, lärt mig och finslipat vad som verkligen fungerar.</p>
<p>Min passion är att inspirera andra till att må bättre, bli starkare och känna sig mer självsäkra – både fysiskt och mentalt. Mitt mål är att hjälpa dig göra just det.</p>
<p>Oavsett om du vill bygga muskler, gå ner i vikt eller ta din träning till nästa nivå – finns jag här för att guida dig.</p>
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Alexander Adolfsson PT">
<div style="margin-top:1rem;">
<a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank" class="hero-content a">Börja din resa idag</a>
</div>
</section>


<section id="services" class="services">
<h2>Tjänster</h2>
<div class="services-grid">
<div class="service-card">
<h3>Personlig träning</h3>
<p>Individuellt anpassad träning – nybörjare eller erfaren.</p>
<a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank">Börja nu →</a>
</div>
<div class="service-card">
<h3>Kostrådgivning</h3>
<p>Struktur, tydlighet och resultat – utan extrema dieter.</p>
<a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank">Börja nu →</a>
</div>
<div class="service-card">
<h3>Online coaching</h3>
<p>Komplett upplägg med träning, kost och uppföljning.</p>
<a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank">Börja nu →</a>
</div>
</div>
</section>


<section id="pricing" class="pricing">
<h2>Prispaket</h2>
<div class="pricing-grid">
<div class="price-card">
<h3>Online Coaching Bas</h3>
<p class="price">1 495 kr / mån</p>
<ul>
<li>Struktur & planering</li>
<li>Träningsprogram</li>
<li>Veckovis uppföljning</li>
</ul>
<a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" target="_blank">Betala / Boka</a>
</div>
<div class="price-card">
<h3>Online Coaching Standard</h3>
<p class="price">2 495 kr / mån</p>
<ul>
<li>Träningsprogram</li>
<li>Personligt kostupplägg</li>
<li>Direktkontakt & justeringar</li>
<li>Veckovis uppföljning</li>
</ul>
<a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" target="_blank">Betala / Boka</a>
</div>
<div class="price-card">
<h3>Online Coaching Premium</h3>
<p class="price">3 495 kr / mån</p>
<ul>
<li>Allt i Standard</li>
<li>Tätare uppföljning</li>
<li>Prioriterad support</li>
<li>Regelbundna videosamtal</li>
</ul>
<a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" target="_blank">Betala / Boka</a>
</div>
</div>
</section>


<footer>
<p>Borås, Sverige | alexander.pt.adolfsson@gmail.com | 073-640 50 08</p>
<div class="social-links">
<a href="https://www.instagram.com/ptalexadolfsson/" target="_blank">📸</a>
<a href="https://www.tiktok.com/@ptalexanderadolfsson?lang=sv-SE" target="_blank">🎵</a>
<a href="https://www.facebook.com/profile.php?id=61583938018630" target="_blank">📘</a>
<a href="https://www.youtube.com/@alexanderadolfsson9295" target="_blank">▶️</a>
</div>
<p>© 2026 Alexander Adolfsson Coaching. Alla rättigheter reserverade.</p>
</footer>

</body>
</html>

Files changed (4) hide show

components/header.js +73 -1
index.html +2 -0
script.js +9 -14
style.css +1 -26

components/header.js CHANGED Viewed

	@@ -1 +1,73 @@
1	-

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: sticky;
+          top: 0;
+          z-index: 50;
+          background: white;
+          padding: 1rem 2rem;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .logo {
+          font-weight: bold;
+          color: #111;
+        }
+        nav {
+          display: flex;
+          gap: 1rem;
+        }
+        nav a {
+          text-decoration: none;
+          font-weight: bold;
+          color: #111;
+          transition: color 0.3s;
+        }
+        nav a:hover {
+          color: #10b981;
+        }
+        .cta-btn {
+          background: #10b981;
+          color: black;
+          font-weight: bold;
+          padding: 0.5rem 1rem;
+          border-radius: 9999px;
+          transition: all 0.3s;
+        }
+        .cta-btn:hover {
+          background: #059669;
+          transform: scale(1.05);
+        }
+        @media (max-width: 768px) {
+          :host {
+            padding: 1rem;
+          }
+          nav {
+            display: none;
+          }
+        }
+      </style>
+      <div class="container">
+        <div class="logo">Alexander Adolfsson Coaching</div>
+        <nav>
+          <a href="#home">Hem</a>
+          <a href="#about">Om mig</a>
+          <a href="#services">Tjänster</a>
+          <a href="#pricing">Priser</a>
+          <a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank" class="cta-btn">Boka gratis konsultation</a>
+        </nav>
+      </div>
+    `;
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -208,6 +208,8 @@ Osäker? <a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" targe
   <script src="components/footer.js"></script>
   <script src="script.js"></script>
   <script src="components/navbar.js"></script>
 </body>
 </html>
 https://res.cloudinary.com/dttivz1il/image/upload/v1770071721/11062b_f11d2809bac34baaadb2950e9d15f8a3_mv2_o2ltbl.avif$0

   <script src="components/footer.js"></script>
   <script src="script.js"></script>
   <script src="components/navbar.js"></script>
+  <script src="components/header.js"></script>
+  <script src="components/footer.js"></script>
 </body>
 </html>
 https://res.cloudinary.com/dttivz1il/image/upload/v1770071721/11062b_f11d2809bac34baaadb2950e9d15f8a3_mv2_o2ltbl.avif$0

script.js CHANGED Viewed

@@ -1,16 +1,17 @@
 // Smooth scroll for anchor links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-  anchor.addEventListener('click', function (e) {
     e.preventDefault();
-    document.querySelector(this.getAttribute('href')).scrollIntoView({
-      behavior: 'smooth'
-    });
-  });
 });
 // Add fade-in animation to sections when they come into view
 const sections = document.querySelectorAll('section');
 const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
@@ -19,10 +20,4 @@ const observer = new IntersectionObserver((entries) => {
   });
 }, { threshold: 0.1 });
-sections.forEach(section => {
-  observer.observe(section);
-});

 // Smooth scroll for anchor links
+document.addEventListener('click', function(e) {
+  if (e.target.matches('a[href^="#"]')) {
     e.preventDefault();
+    const target = document.querySelector(e.target.getAttribute('href'));
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
 });
 // Add fade-in animation to sections when they come into view
 const sections = document.querySelectorAll('section');
 const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
   });
 }, { threshold: 0.1 });
+sections.forEach(section => observer.observe(section));

style.css CHANGED Viewed

@@ -1,30 +1,5 @@
-/* Navbar styles for non-component pages */
-header {
-  background: #111827;
-  padding: 1rem 1.5rem;
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-header nav {
-  display: flex;
-  gap: 1.5rem;
-}
-header nav a {
-  color: white;
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.3s ease;
-}
-header nav a:hover {
-  color: #34d399;
-}
 /* Hero Section */
 #home {
   height: 100vh;

+/* Header styles moved to web component */
 /* Hero Section */
 #home {
   height: 100vh;