Hugging Face's logo

Spaces:
Alexander1337
/
fitflame-coaching
Running

App Files Community
Alexander1337 commited on
Commit
ec00964
·
verified ·
1 Parent(s): 352aee2

<!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>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Grundinställningar */
body { font-family:'Inter',sans-serif; margin:0; padding:0; line-height:1.6; color:#333; background:#fff; }
a { text-decoration:none; color:inherit; }
h1,h2,h3 { margin:0 0 10px 0; }
section { padding:60px 20px; max-width:1100px; margin:auto; }
.btn { display:inline-block; padding:15px 30px; background:#FF4C29; color:#fff; border-radius:8px; font-weight:600; margin-top:15px; transition:0.3s; }
.btn:hover { background:#e04322; }
img.icon { width:30px; height:30px; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:1000; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.logo { font-weight:700; font-size:1.3em; color:#FF4C29; }
nav ul { list-style:none; display:flex; gap:25px; margin:0; padding:0; }
nav li { display:inline; }
.lang { display:flex; gap:10px; font-weight:600; }

/* Hero */
.hero { background:#f9f9f9; text-align:center; padding:100px 20px; border-bottom:1px solid #eee; }
.hero h1 { font-size:2.7em; margin-bottom:20px; }
.hero p { font-size:1.3em; margin-bottom:30px; }

/* Om mig */
.about { background:#fff; text-align:center; }
.about p { max-width:700px; margin:auto 0; }
.about ul { list-style:none; padding:0; margin-top:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:15px; font-weight:600; }

/* Tjänster */
.services { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:30px; text-align:center; margin-top:40px; }
.service-card { padding:25px; border-radius:12px; background:#fafafa; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:0.3s; }
.service-card:hover { transform:translateY(-5px); }
.service-card h3 { margin-bottom:15px; color:#FF4C29; }
.service-card p { margin-bottom:20px; }

/* Prisplaner */
.pricing { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:25px; text-align:center; margin-top:40px; }
.price-card { border-radius:12px; padding:25px; background:#fafafa; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:0.3s; }
.price-card:hover { transform:translateY(-5px); }
.price-card h3 { margin-bottom:15px; color:#FF4C29; }
.price-card p { margin-bottom:10px; font-weight:600; }
.icons { display:flex; justify-content:center; gap:10px; margin-top:15px; }

/* Förtroende */
.trust { background:#f9f9f9; text-align:center; padding:50px 20px; }
.trust ul { list-style:none; padding:0; display:grid; gap:15px; max-width:600px; margin:auto; font-weight:600; }

/* Bokning */
#booking { text-align:center; background:#fff; padding:60px 20px; }

/* Kontakt */
form { display:grid; grid-gap:15px; max-width:500px; margin:auto; }
input, textarea { padding:12px; border:1px solid #ccc; border-radius:6px; width:100%; font-size:1em; }
textarea { resize:none; }
form button { width:100%; }

/* Footer */
footer { text-align:center; padding:30px 20px; background:#222; color:#fff; }
footer a { color:#FF4C29; margin:0 5px; }

/* Mobiloptimering */
@media (max-width:768px) {
nav ul { flex-direction:column; gap:10px; }
.about ul { flex-direction:column; }
}
</style>
</head>
<body>

<!-- HEADER -->
<header>
<div class="logo">Alexander Adolfsson Coaching</div>
<nav>
<ul>
<li><a href="#hero">Hem</a></li>
<li><a href="#about">Om mig</a></li>
<li><a href="#services">Tjänster</a></li>
<li><a href="#pricing">Priser</a></li>
<li><a href="#booking">Boka</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<div class="lang"><a href="#">SV</a> | <a href="#">EN</a></div>
</header>

<!-- HERO -->
<section id="hero" class="hero">
<h1>Bli starkare. Må bättre. Ta nästa steg.</h1>
<p>Personlig träning & kostrådgivning – online eller på plats i Borås</p>
<a href="#booking" class="btn">Boka gratis konsultation</a>
</section>

<!-- OM MIG -->
<section id="about" class="about">
<h2>Om mig – Alexander Adolfsson</h2>
<p>Jag är licenserad personlig tränare & kostrådgivare med över 15 års erfarenhet. Jag hjälper dig bygga hållbara vanor som ger långsiktiga resultat – utan snabba lösningar.</p>
<ul>
<li>Licenserad Personlig Tränare</li>
<li>Certifierad Kostrådgivare</li>
<li>15+ års erfarenhet</li>
<li>Specialist på hållbara vanor</li>
</ul>
</section>

<!-- TJÄNSTER -->
<section id="services">
<h2 style="text-align:center; margin-bottom:40px;">Tjänster</h2>
<div class="services">
<div class="service-card">
<h3>Personlig träning</h3>
<p>På plats eller online, teknikfeedback, program & progression, flexibla tider, fokus på styrka, teknik, kondition & rörlighet</p>
<a href="#booking" class="btn">Boka PT-pass</a>
</div>
<div class="service-card">
<h3>Kostupplägg</h3>
<p>Personligt kostschema utan extrema dieter, anpassat efter mål, preferenser & vardag</p>
<a href="#booking" class="btn">Få kostupplägg</a>
</div>
<div class="service-card">
<h3>Online coachning</h3>
<p>Träning + kost + veckovis uppföljning via app och direktkontakt</p>
<a href="#booking" class="btn">Ansök om online coachning</a>
</div>
</div>
</section>

<!-- PRISPLANER -->
<section id="pricing">
<h2 style="text-align:center; margin-bottom:40px;">Prisplaner</h2>
<div class="pricing">
<div class="price-card">
<h3>Bas</h3>
<p>1 495 kr / mån</p>
<p>Träningsprogram, grundläggande kostråd, veckovis uppföljning</p>
<div class="icons">
<img src="https://img.icons8.com/color/48/000000/stripe.png" alt="Stripe" class="icon">
<img src="https://img.icons8.com/color/48/000000/apple-pay.png" alt="Apple Pay" class="icon">
<img src="https://img.icons8.com/color/48/000000/google-pay.png" alt="Google Pay" class="icon">
</div>
<a href="#booking" class="btn">Ansök</a>
</div>
<div class="price-card">
<h3>Standard</h3>
<p>2 495 kr / mån</p>
<p>Träningsprogram, personligt kostupplägg, direktkontakt</p>
<div class="icons">
<img src="https://img.icons8.com/color/48/000000/stripe.png" alt="Stripe" class="icon">
<img src="https://img.icons8.com/color/48/000000/apple-pay.png" alt="Apple Pay" class="icon">
<img src="https://img.icons8.com/color/48/000000/google-pay.png" alt="Google Pay" class="icon">
</div>
<a href="#booking" class="btn">Ansök</a>
</div>
<div class="price-card">
<h3>Premium</h3>
<p>3 495 kr / mån</p>
<p>Allt i Standard + tätare uppföljning & videosamtal</p>
<div class="icons">
<img src="https://img.icons8.com/color/48/000000/stripe.png" alt="Stripe" class="icon">
<img src="https://img.icons8.com/color/48/000000/apple-pay.png" alt="Apple Pay" class="icon">
<img src="https://img.icons8.com/color/48/000000/google-pay.png" alt="Google Pay" class="icon">
</div>
<a href="#booking" class="btn">Ansök</a>
</div>
</div>
</section>

<!-- FÖRTROENDE -->
<section class="trust">
<h2>Varför välja mig?</h2>
<ul>
<li>✅ 15+ års erfarenhet</li>
<li>✅ Licenserad PT & kostrådgivare</li>
<li>✅ Individanpassad coachning</li>
<li>✅ Inga bindningstider utan överenskommelse</li>
<li>✅ Personlig kontakt – inga massupplägg</li>
</ul>
</section>

<!-- BOKNING -->
<section id="booking">
<h2 style="text-align:center; margin-bottom:20px;">Boka online</h2>
<p style="text-align:center; max-width:700px; margin:auto;">All bokning sker via Calendly. Välj tid som passar dig och få bekräftelse direkt via e-post.</p>
<div style="text-align:center; margin-top:20px;">
<a href="https://calendly.com/alexander-adolfsson" class="btn"><i class="fa fa-calendar"></i> Boka gratis konsultation</a>
</div>
</section>

<!-- KONTAKT -->
<section id="contact">
<h2 style="text-align:center; margin-bottom:20px;">Kontakta mig</h2>
<form>
<input type="text" placeholder="Namn" required>
<input type="email" placeholder="E-post" required>
<input type="tel" placeholder="Telefonnummer" required>
<textarea rows="5" placeholder="Ditt främsta mål" required></textarea>
<button type="submit" class="btn">Skicka meddelande</button>
</form>
<p style="text-align:center; margin-top:20px;">
📧 alexander.pt.adolfsson@gmail.com | 📞 073-640 50 08
</p>
</section>

<!-- FOOTER -->
<footer>
<p>Följ mig:</p>
<p>
📸 <a href="https://www.instagram.com/ptalexadolfsson/">Instagram</a> |
🎵 <a href="https://www.tiktok.com/@ptalexanderadolfsson?lang=sv-SE">TikTok</a> |
📘 <a href="https://www.facebook.com/profile.php?id=61583938018630">Facebook</a>
</p>
<p>© 2026 Alexander Adolfsson Coaching – Personlig träning & online coachning, Borås & online</p>
</footer>

</body>
</html>

Files changed (5) hide show
  1. README.md +7 -4
  2. components/footer.js +152 -0
  3. components/header.js +170 -0
  4. index.html +301 -19
  5. style.css +54 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Fitflame Coaching
3
- emoji: 🏃
4
  colorFrom: red
5
- colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: FitFlame Coaching 🔥
 
3
  colorFrom: red
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background-color: #111827;
9
+ color: white;
10
+ padding: 3rem 1rem;
11
+ }
12
+
13
+ .footer-container {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ display: grid;
17
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
18
+ gap: 2rem;
19
+ }
20
+
21
+ .footer-logo {
22
+ font-weight: 700;
23
+ font-size: 1.5rem;
24
+ color: #EF4444;
25
+ margin-bottom: 1rem;
26
+ }
27
+
28
+ .footer-about {
29
+ margin-bottom: 1.5rem;
30
+ color: #9CA3AF;
31
+ }
32
+
33
+ .footer-links h3 {
34
+ font-size: 1.125rem;
35
+ margin-bottom: 1.25rem;
36
+ color: white;
37
+ }
38
+
39
+ .footer-links ul {
40
+ list-style: none;
41
+ padding: 0;
42
+ margin: 0;
43
+ }
44
+
45
+ .footer-links li {
46
+ margin-bottom: 0.75rem;
47
+ }
48
+
49
+ .footer-links a {
50
+ color: #9CA3AF;
51
+ transition: color 0.2s;
52
+ }
53
+
54
+ .footer-links a:hover {
55
+ color: #EF4444;
56
+ }
57
+
58
+ .social-links {
59
+ display: flex;
60
+ gap: 1rem;
61
+ margin-top: 1rem;
62
+ }
63
+
64
+ .social-links a {
65
+ display: inline-flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ width: 40px;
69
+ height: 40px;
70
+ background-color: #1F2937;
71
+ border-radius: 50%;
72
+ color: white;
73
+ transition: background-color 0.2s;
74
+ }
75
+
76
+ .social-links a:hover {
77
+ background-color: #EF4444;
78
+ }
79
+
80
+ .footer-bottom {
81
+ text-align: center;
82
+ margin-top: 3rem;
83
+ padding-top: 1.5rem;
84
+ border-top: 1px solid #1F2937;
85
+ color: #9CA3AF;
86
+ font-size: 0.875rem;
87
+ }
88
+
89
+ @media (max-width: 768px) {
90
+ .footer-container {
91
+ grid-template-columns: 1fr;
92
+ }
93
+ }
94
+ </style>
95
+ <div class="footer-container">
96
+ <div class="footer-about">
97
+ <div class="footer-logo">Alexander Adolfsson Coaching</div>
98
+ <p>Personlig träning & online coachning, Borås & online</p>
99
+ <div class="social-links">
100
+ <a href="https://www.instagram.com/ptalexadolfsson/" aria-label="Instagram">
101
+ <i data-feather="instagram"></i>
102
+ </a>
103
+ <a href="https://www.tiktok.com/@ptalexanderadolfsson?lang=sv-SE" aria-label="TikTok">
104
+ <i data-feather="video"></i>
105
+ </a>
106
+ <a href="https://www.facebook.com/profile.php?id=61583938018630" aria-label="Facebook">
107
+ <i data-feather="facebook"></i>
108
+ </a>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="footer-links">
113
+ <h3>Länkar</h3>
114
+ <ul>
115
+ <li><a href="#hero">Hem</a></li>
116
+ <li><a href="#about">Om mig</a></li>
117
+ <li><a href="#services">Tjänster</a></li>
118
+ <li><a href="#pricing">Priser</a></li>
119
+ <li><a href="#booking">Boka</a></li>
120
+ <li><a href="#contact">Kontakt</a></li>
121
+ </ul>
122
+ </div>
123
+
124
+ <div class="footer-links">
125
+ <h3>Kontakt</h3>
126
+ <ul>
127
+ <li><i data-feather="mail" class="mr-2"></i> alexander.pt.adolfsson@gmail.com</li>
128
+ <li><i data-feather="phone" class="mr-2"></i> 073-640 50 08</li>
129
+ <li><i data-feather="map-pin" class="mr-2"></i> Borås, Sverige</li>
130
+ </ul>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="footer-bottom">
135
+ &copy; ${new Date().getFullYear()} Alexander Adolfsson Coaching. Alla rättigheter reserverade.
136
+ </div>
137
+ `;
138
+
139
+ // Load Feather icons after component is rendered
140
+ if (window.feather) {
141
+ feather.replace();
142
+ } else {
143
+ document.addEventListener('DOMContentLoaded', () => {
144
+ if (window.feather) {
145
+ feather.replace();
146
+ }
147
+ });
148
+ }
149
+ }
150
+ }
151
+
152
+ customElements.define('custom-footer', CustomFooter);
components/header.js ADDED
@@ -0,0 +1,170 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHeader extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ background-color: white;
9
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
10
+ position: sticky;
11
+ top: 0;
12
+ z-index: 1000;
13
+ }
14
+
15
+ header {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ align-items: center;
19
+ padding: 1rem 2rem;
20
+ max-width: 1200px;
21
+ margin: 0 auto;
22
+ }
23
+
24
+ .logo {
25
+ font-weight: 700;
26
+ font-size: 1.25rem;
27
+ color: #EF4444;
28
+ }
29
+
30
+ nav ul {
31
+ display: flex;
32
+ gap: 1.5rem;
33
+ list-style: none;
34
+ margin: 0;
35
+ padding: 0;
36
+ }
37
+
38
+ nav a {
39
+ font-weight: 500;
40
+ color: #333;
41
+ transition: color 0.2s;
42
+ position: relative;
43
+ }
44
+
45
+ nav a:hover {
46
+ color: #EF4444;
47
+ }
48
+
49
+ nav a::after {
50
+ content: '';
51
+ position: absolute;
52
+ bottom: -4px;
53
+ left: 0;
54
+ width: 0;
55
+ height: 2px;
56
+ background-color: #EF4444;
57
+ transition: width 0.2s;
58
+ }
59
+
60
+ nav a:hover::after {
61
+ width: 100%;
62
+ }
63
+
64
+ .lang-switcher {
65
+ display: flex;
66
+ gap: 0.5rem;
67
+ }
68
+
69
+ .lang-switcher a {
70
+ font-weight: 600;
71
+ color: #6B7280;
72
+ }
73
+
74
+ .lang-switcher a.active {
75
+ color: #EF4444;
76
+ }
77
+
78
+ .mobile-menu-button {
79
+ display: none;
80
+ background: none;
81
+ border: none;
82
+ cursor: pointer;
83
+ }
84
+
85
+ @media (max-width: 768px) {
86
+ nav {
87
+ position: fixed;
88
+ top: 70px;
89
+ left: 0;
90
+ width: 100%;
91
+ background-color: white;
92
+ padding: 1rem;
93
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
94
+ transform: translateY(-150%);
95
+ transition: transform 0.3s ease;
96
+ }
97
+
98
+ nav.active {
99
+ transform: translateY(0);
100
+ }
101
+
102
+ nav ul {
103
+ flex-direction: column;
104
+ gap: 1rem;
105
+ }
106
+
107
+ .mobile-menu-button {
108
+ display: block;
109
+ }
110
+
111
+ .lang-switcher {
112
+ margin-top: 1rem;
113
+ }
114
+ }
115
+ </style>
116
+ <header>
117
+ <a href="#" class="logo">Alexander Adolfsson Coaching</a>
118
+
119
+ <button class="mobile-menu-button">
120
+ <i data-feather="menu"></i>
121
+ </button>
122
+
123
+ <nav>
124
+ <ul>
125
+ <li><a href="#hero">Hem</a></li>
126
+ <li><a href="#about">Om mig</a></li>
127
+ <li><a href="#services">Tjänster</a></li>
128
+ <li><a href="#pricing">Priser</a></li>
129
+ <li><a href="#booking">Boka</a></li>
130
+ <li><a href="#contact">Kontakt</a></li>
131
+ </ul>
132
+ <div class="lang-switcher">
133
+ <a href="#" class="active">SV</a>
134
+ <span>|</span>
135
+ <a href="#">EN</a>
136
+ </div>
137
+ </nav>
138
+ </header>
139
+ `;
140
+
141
+ // Mobile menu toggle
142
+ const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu-button');
143
+ const nav = this.shadowRoot.querySelector('nav');
144
+
145
+ mobileMenuButton.addEventListener('click', () => {
146
+ nav.classList.toggle('active');
147
+ });
148
+
149
+ // Close menu when clicking a link
150
+ const navLinks = this.shadowRoot.querySelectorAll('nav a');
151
+ navLinks.forEach(link => {
152
+ link.addEventListener('click', () => {
153
+ nav.classList.remove('active');
154
+ });
155
+ });
156
+
157
+ // Load Feather icons after component is rendered
158
+ if (window.feather) {
159
+ feather.replace();
160
+ } else {
161
+ document.addEventListener('DOMContentLoaded', () => {
162
+ if (window.feather) {
163
+ feather.replace();
164
+ }
165
+ });
166
+ }
167
+ }
168
+ }
169
+
170
+ customElements.define('custom-header', CustomHeader);
index.html CHANGED
@@ -1,19 +1,301 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Alexander Adolfsson Coaching</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#EF4444',
17
+ secondary: '#FECACA',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ </head>
24
+ <body class="font-sans antialiased text-gray-800 bg-white">
25
+ <!-- Header Component -->
26
+ <custom-header></custom-header>
27
+
28
+ <!-- Hero Section -->
29
+ <section class="bg-gradient-to-b from-red-50 to-white py-20 px-4">
30
+ <div class="max-w-4xl mx-auto text-center">
31
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Bli starkare. Må bättre. Ta nästa steg.</h1>
32
+ <p class="text-xl text-gray-600 mb-8">Personlig träning & kostrådgivning – online eller på plats i Borås</p>
33
+ <a href="#booking" class="bg-primary hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-lg shadow-lg transition duration-300 inline-block">
34
+ Boka gratis konsultation
35
+ </a>
36
+ </div>
37
+ </section>
38
+
39
+ <!-- About Section -->
40
+ <section id="about" class="py-16 px-4 max-w-6xl mx-auto">
41
+ <div class="text-center mb-12">
42
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Om mig – Alexander Adolfsson</h2>
43
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Jag är licenserad personlig tränare & kostrådgivare med över 15 års erfarenhet. Jag hjälper dig bygga hållbara vanor som ger långsiktiga resultat – utan snabba lösningar.</p>
44
+ </div>
45
+ <div class="flex flex-wrap justify-center gap-6">
46
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center gap-3">
47
+ <i data-feather="award" class="text-primary"></i>
48
+ <span>Licenserad Personlig Tränare</span>
49
+ </div>
50
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center gap-3">
51
+ <i data-feather="heart" class="text-primary"></i>
52
+ <span>Certifierad Kostrådgivare</span>
53
+ </div>
54
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center gap-3">
55
+ <i data-feather="clock" class="text-primary"></i>
56
+ <span>15+ års erfarenhet</span>
57
+ </div>
58
+ <div class="bg-white p-6 rounded-xl shadow-md flex items-center gap-3">
59
+ <i data-feather="repeat" class="text-primary"></i>
60
+ <span>Specialist på hållbara vanor</span>
61
+ </div>
62
+ </div>
63
+ </section>
64
+
65
+ <!-- Services Section -->
66
+ <section id="services" class="py-16 bg-gray-50">
67
+ <div class="max-w-6xl mx-auto px-4">
68
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Tjänster</h2>
69
+ <div class="grid md:grid-cols-3 gap-8">
70
+ <!-- Service Card 1 -->
71
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
72
+ <div class="p-6">
73
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 mx-auto">
74
+ <i data-feather="activity" class="text-primary w-8 h-8"></i>
75
+ </div>
76
+ <h3 class="text-xl font-bold text-center mb-4">Personlig träning</h3>
77
+ <p class="text-gray-600 mb-6">På plats eller online, teknikfeedback, program & progression, flexibla tider, fokus på styrka, teknik, kondition & rörlighet</p>
78
+ <a href="#booking" class="block w-full bg-primary hover:bg-red-600 text-white text-center font-semibold py-2 px-4 rounded-lg transition duration-300">
79
+ Boka PT-pass
80
+ </a>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Service Card 2 -->
85
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
86
+ <div class="p-6">
87
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 mx-auto">
88
+ <i data-feather="feather" class="text-primary w-8 h-8"></i>
89
+ </div>
90
+ <h3 class="text-xl font-bold text-center mb-4">Kostupplägg</h3>
91
+ <p class="text-gray-600 mb-6">Personligt kostschema utan extrema dieter, anpassat efter mål, preferenser & vardag</p>
92
+ <a href="#booking" class="block w-full bg-primary hover:bg-red-600 text-white text-center font-semibold py-2 px-4 rounded-lg transition duration-300">
93
+ Få kostupplägg
94
+ </a>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Service Card 3 -->
99
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
100
+ <div class="p-6">
101
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4 mx-auto">
102
+ <i data-feather="monitor" class="text-primary w-8 h-8"></i>
103
+ </div>
104
+ <h3 class="text-xl font-bold text-center mb-4">Online coachning</h3>
105
+ <p class="text-gray-600 mb-6">Träning + kost + veckovis uppföljning via app och direktkontakt</p>
106
+ <a href="#booking" class="block w-full bg-primary hover:bg-red-600 text-white text-center font-semibold py-2 px-4 rounded-lg transition duration-300">
107
+ Ansök om online coachning
108
+ </a>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Pricing Section -->
116
+ <section id="pricing" class="py-16 px-4">
117
+ <div class="max-w-6xl mx-auto">
118
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Prisplaner</h2>
119
+ <div class="grid md:grid-cols-3 gap-8">
120
+ <!-- Price Card 1 -->
121
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-gray-100 hover:border-primary transition-all">
122
+ <div class="p-8">
123
+ <h3 class="text-xl font-bold text-center mb-2">Bas</h3>
124
+ <p class="text-3xl font-bold text-center text-primary mb-6">1 495 kr<span class="text-sm font-normal text-gray-500"> / mån</span></p>
125
+ <ul class="space-y-3 mb-8">
126
+ <li class="flex items-start">
127
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
128
+ <span>Träningsprogram</span>
129
+ </li>
130
+ <li class="flex items-start">
131
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
132
+ <span>Grundläggande kostråd</span>
133
+ </li>
134
+ <li class="flex items-start">
135
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
136
+ <span>Veckovis uppföljning</span>
137
+ </li>
138
+ </ul>
139
+ <div class="flex justify-center space-x-4 mb-6">
140
+ <img src="https://img.icons8.com/color/48/000000/stripe.png" alt="Stripe" class="w-8 h-8">
141
+ <img src="https://img.icons8.com/color/48/000000/apple-pay.png" alt="Apple Pay" class="w-8 h-8">
142
+ <img src="https://img.icons8.com/color/48/000000/google-pay.png" alt="Google Pay" class="w-8 h-8">
143
+ </div>
144
+ <a href="#booking" class="block w-full bg-primary hover:bg-red-600 text-white text-center font-semibold py-2 px-4 rounded-lg transition duration-300">
145
+ Ansök
146
+ </a>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Price Card 2 (Featured) -->
151
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden border-2 border-primary transform hover:scale-105 transition-all relative">
152
+ <div class="absolute top-0 right-0 bg-primary text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
153
+ POPULÄR
154
+ </div>
155
+ <div class="p-8">
156
+ <h3 class="text-xl font-bold text-center mb-2">Standard</h3>
157
+ <p class="text-3xl font-bold text-center text-primary mb-6">2 495 kr<span class="text-sm font-normal text-gray-500"> / mån</span></p>
158
+ <ul class="space-y-3 mb-8">
159
+ <li class="flex items-start">
160
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
161
+ <span>Träningsprogram</span>
162
+ </li>
163
+ <li class="flex items-start">
164
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
165
+ <span>Personligt kostupplägg</span>
166
+ </li>
167
+ <li class="flex items-start">
168
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
169
+ <span>Direktkontakt</span>
170
+ </li>
171
+ </ul>
172
+ <div class="flex justify-center space-x-4 mb-6">
173
+ <img src="https://img.icons8.com/color/48/000000/stripe.png" alt="Stripe" class="w-8 h-8">
174
+ <img src="https://img.icons8.com/color/48/000000/apple-pay.png" alt="Apple Pay" class="w-8 h-8">
175
+ <img src="https://img.icons8.com/color/48/000000/google-pay.png" alt="Google Pay" class="w-8 h-8">
176
+ </div>
177
+ <a href="#booking" class="block w-full bg-primary hover:bg-red-600 text-white text-center font-semibold py-2 px-4 rounded-lg transition duration-300">
178
+ Ansök
179
+ </a>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Price Card 3 -->
184
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-gray-100 hover:border-primary transition-all">
185
+ <div class="p-8">
186
+ <h3 class="text-xl font-bold text-center mb-2">Premium</h3>
187
+ <p class="text-3xl font-bold text-center text-primary mb-6">3 495 kr<span class="text-sm font-normal text-gray-500"> / mån</span></p>
188
+ <ul class="space-y-3 mb-8">
189
+ <li class="flex items-start">
190
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
191
+ <span>Allt i Standard</span>
192
+ </li>
193
+ <li class="flex items-start">
194
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
195
+ <span>Tätare uppföljning</span>
196
+ </li>
197
+ <li class="flex items-start">
198
+ <i data-feather="check" class="text-green-500 mr-2 mt-1"></i>
199
+ <span>Videosamtal</span>
200
+ </li>
201
+ </ul>
202
+ <div class="flex justify-center space-x-4 mb-6">
203
+ <img src="https://img.icons8.com/color/48/000000/stripe.png" alt="Stripe" class="w-8 h-8">
204
+ <img src="https://img.icons8.com/color/48/000000/apple-pay.png" alt="Apple Pay" class="w-8 h-8">
205
+ <img src="https://img.icons8.com/color/48/000000/google-pay.png" alt="Google Pay" class="w-8 h-8">
206
+ </div>
207
+ <a href="#booking" class="block w-full bg-primary hover:bg-red-600 text-white text-center font-semibold py-2 px-4 rounded-lg transition duration-300">
208
+ Ansök
209
+ </a>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Trust Section -->
217
+ <section class="py-16 bg-red-50">
218
+ <div class="max-w-2xl mx-auto px-4 text-center">
219
+ <h2 class="text-3xl font-bold text-gray-900 mb-8">Varför välja mig?</h2>
220
+ <ul class="space-y-4 text-left inline-block">
221
+ <li class="flex items-start">
222
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
223
+ <span>15+ års erfarenhet</span>
224
+ </li>
225
+ <li class="flex items-start">
226
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
227
+ <span>Licenserad PT & kostrådgivare</span>
228
+ </li>
229
+ <li class="flex items-start">
230
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
231
+ <span>Individanpassad coachning</span>
232
+ </li>
233
+ <li class="flex items-start">
234
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
235
+ <span>Inga bindningstider utan överenskommelse</span>
236
+ </li>
237
+ <li class="flex items-start">
238
+ <i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i>
239
+ <span>Personlig kontakt – inga massupplägg</span>
240
+ </li>
241
+ </ul>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Booking Section -->
246
+ <section id="booking" class="py-16 px-4 bg-white">
247
+ <div class="max-w-2xl mx-auto text-center">
248
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Boka online</h2>
249
+ <p class="text-gray-600 mb-8">All bokning sker via Calendly. Välj tid som passar dig och få bekräftelse direkt via e-post.</p>
250
+ <a href="https://calendly.com/alexander-adolfsson" class="inline-flex items-center bg-primary hover:bg-red-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg transition duration-300">
251
+ <i data-feather="calendar" class="mr-2"></i>
252
+ Boka gratis konsultation
253
+ </a>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Contact Section -->
258
+ <section id="contact" class="py-16 px-4 bg-gray-50">
259
+ <div class="max-w-2xl mx-auto">
260
+ <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Kontakta mig</h2>
261
+ <form class="space-y-4">
262
+ <div>
263
+ <input type="text" placeholder="Namn" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
264
+ </div>
265
+ <div>
266
+ <input type="email" placeholder="E-post" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
267
+ </div>
268
+ <div>
269
+ <input type="tel" placeholder="Telefonnummer" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required>
270
+ </div>
271
+ <div>
272
+ <textarea rows="5" placeholder="Ditt främsta mål" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" required></textarea>
273
+ </div>
274
+ <button type="submit" class="w-full bg-primary hover:bg-red-600 text-white font-semibold py-3 px-4 rounded-lg shadow-lg transition duration-300">
275
+ Skicka meddelande
276
+ </button>
277
+ </form>
278
+ <div class="mt-8 text-center text-gray-600">
279
+ <p class="flex items-center justify-center gap-2">
280
+ <i data-feather="mail"></i> alexander.pt.adolfsson@gmail.com
281
+ </p>
282
+ <p class="flex items-center justify-center gap-2 mt-2">
283
+ <i data-feather="phone"></i> 073-640 50 08
284
+ </p>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Footer Component -->
290
+ <custom-footer></custom-footer>
291
+
292
+ <!-- Components -->
293
+ <script src="components/header.js"></script>
294
+ <script src="components/footer.js"></script>
295
+
296
+ <script>
297
+ feather.replace();
298
+ </script>
299
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
300
+ </body>
301
+ </html>
style.css CHANGED
@@ -1,28 +1,63 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles that extend Tailwind */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
3
+
4
+ /* Smooth scrolling */
5
+ html {
6
+ scroll-behavior: smooth;
7
+ }
8
+
9
+ /* Custom animations */
10
+ @keyframes fadeIn {
11
+ from { opacity: 0; transform: translateY(20px); }
12
+ to { opacity: 1; transform: translateY(0); }
13
+ }
14
+
15
+ .animate-fade-in {
16
+ animation: fadeIn 0.6s ease-out forwards;
17
  }
18
 
19
+ /* Service card hover effect */
20
+ .service-card:hover {
21
+ transform: translateY(-8px);
22
+ box-shadow: 0 10px 25px rgba(239, 68, 68, 0.1);
23
  }
24
 
25
+ /* Price card featured ribbon */
26
+ .featured-ribbon {
27
+ position: absolute;
28
+ top: 0;
29
+ right: 0;
30
+ background-color: #EF4444;
31
+ color: white;
32
+ padding: 0.25rem 1rem;
33
+ font-size: 0.75rem;
34
+ font-weight: bold;
35
+ border-bottom-left-radius: 0.5rem;
36
  }
37
 
38
+ /* Form input focus state */
39
+ input:focus, textarea:focus {
40
+ box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
 
 
 
41
  }
42
 
43
+ /* Mobile menu transition */
44
+ .nav-menu {
45
+ transition: max-height 0.3s ease-out;
46
  }
47
+
48
+ /* Responsive adjustments */
49
+ @media (max-width: 768px) {
50
+ .service-card, .price-card {
51
+ margin-bottom: 1.5rem;
52
+ }
53
+ }
54
+
55
+ /* Custom button styles */
56
+ .btn-primary {
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ .btn-primary:hover {
61
+ transform: translateY(-2px);
62
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
63
+ }