Spaces:

Alexander1337
/

fitflame-coaching

Running

App Files Files Community

Alexander1337 commited on Feb 6

Commit

79eec6d

verified ·

1 Parent(s): 9b1da87

<!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 | Online PT</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">

<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:#0a0a0a;
color:white;
}

/* NAVBAR */

.nav{
position:fixed;
top:0;
width:100%;
z-index:1000;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);
padding:15px 30px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-weight:700;
font-size:18px;
}

.nav-links{
display:flex;
gap:25px;
}

.nav-links a{
color:white;
text-decoration:none;
font-weight:500;
}

.nav-links a:hover{
color:#22c55e;
}

/* HERO VIDEO */

.hero{
position:relative;
height:100vh;
width:100%;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero video{
position:absolute;
top:50%;
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
transform:translate(-50%,-50%);
object-fit:cover;
z-index:-2;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:-1;
}

.hero-content{
max-width:800px;
padding:20px;
}

.hero h1{
font-size:48px;
font-weight:800;
margin-bottom:20px;
}

.hero p{
font-size:20px;
margin-bottom:30px;
}

.btn{
display:inline-block;
padding:15px 30px;
background:#22c55e;
color:black;
font-weight:700;
text-decoration:none;
border-radius:8px;
transition:0.3s;
}

.btn:hover{
background:#16a34a;
transform:scale(1.05);
}

/* SECTIONS */

.section{
padding:100px 20px;
max-width:1100px;
margin:auto;
}

.section h2{
font-size:36px;
margin-bottom:20px;
}

.section p{
color:#ccc;
line-height:1.6;
}

/* IMAGE */

.profile-img{
width:100%;
max-width:400px;
border-radius:12px;
margin-top:30px;
}

/* SERVICES */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;
}

.card{
background:#111;
padding:25px;
border-radius:12px;
}

.card img{
width:100%;
border-radius:10px;
margin-bottom:15px;
}

/* PRICING */

.price{
font-size:32px;
font-weight:700;
margin:15px 0;
}

/* FOOTER */

.footer{
padding:40px;
text-align:center;
background:black;
}

.socials{
margin-top:15px;
}

.socials a{
margin:10px;
font-size:24px;
text-decoration:none;
color:white;
}

.socials a:hover{
color:#22c55e;
}

/* MOBILE */

@media (max-width:768px){

.hero h1{
font-size:32px;
}

.nav-links{
display:none;
}

}

</style>
</head>

<body>



<div class="nav">

<div class="logo">
Alexander Adolfsson Coaching
</div>

<div class="nav-links">

<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" class="btn">
Boka nu
</a>

</div>

</div>



<section class="hero">

<video autoplay muted loop playsinline>

<source src="https://res.cloudinary.com/dttivz1il/video/upload/v1770166272/00733_njitjk.ts" type="video/mp4">

</video>

<div class="hero-overlay"></div>

<div class="hero-content">

<h1>Bygg din bästa fysik</h1>

<p>
Personlig online coachning för muskeltillväxt,
fettminskning och maximal prestation
</p>

<a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" class="btn">
Boka nu
</a>

</div>

</section>



<section id="about" class="section">

<h2>Om mig</h2>

<p>

Jag är licenserad personlig tränare och kostrådgivare med över 15 års erfarenhet.

Jag hjälper dig bygga muskler, tappa fett och nå din bästa form med ett individuellt upplägg.

</p>

<img
class="profile-img"
src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg">

</section>



<section id="services" class="section">

<h2>Tjänster</h2>

<div class="grid">

<div class="card">

<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071762/pexels-photo-376464_br5ucq.jpg">

<h3>Personlig träning</h3>

<p>Individuellt träningsprogram baserat på dina mål</p>

</div>

<div class="card">

<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071709/11062b_b80bd0860f1749178b81eee39e3bc15b_mv2_d_4538_3119_s_4_2_tbiobt.avif">

<h3>Kostrådgivning</h3>

<p>Koststrategi för optimal fysik och prestation</p>

</div>

<div class="card">

<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770079671/530312918_2055614884970852_6024544081288430228_n_vf9xgb.jpg">

<h3>Online coachning</h3>

<p>Full coaching med uppföljning och support</p>

</div>

</div>

</section>



<section id="pricing" class="section">

<h2>Priser</h2>

<div class="grid">

<div class="card">

<h3>Online Coaching</h3>

<div class="price">
1495 kr / mån
</div>

<a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" class="btn">
Starta coachning
</a>

</div>

</div>

</section>



<div class="footer">

<p>© 2026 Alexander Adolfsson Coaching</p>

<div class="socials">

<a href="https://instagram.com/ptalexadolfsson">📸</a>

<a href="https://tiktok.com/@ptalexanderadolfsson">🎵</a>

<a href="https://youtube.com/@alexanderadolfsson9295">▶️</a>

<a href="https://facebook.com/profile.php?id=61583938018630">📘</a>

</div>

</div>

</body>
</html>

Files changed (3) hide show

images/alexelit.JPG +1 -1
index.html +78 -0
style.css +143 -0

images/alexelit.JPG CHANGED Viewed

Git LFS Details

SHA256: e8ec80fc4d69392e93027e99495d8e07c2a60876f27393a171279d877092ef06
Pointer size: 128 Bytes
Size of remote file: 128 Bytes

Git LFS Details

SHA256: 3193384fd9bcbe33b180cd57f43516d0c2eb33aa78f08187695b4ff95daf37b6
Pointer size: 128 Bytes
Size of remote file: 128 Bytes

index.html CHANGED Viewed

	@@ -1 +1,79 @@













1

+<!DOCTYPE html>
+<html lang="sv">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Alexander Adolfsson Coaching | Online PT</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+<script src="https://cdn.tailwindcss.com"></script>
+<script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body>
+<custom-header></custom-header>
+<!-- HERO VIDEO -->
+<section class="hero">
+  <video autoplay muted loop playsinline>
+    <source src="https://res.cloudinary.com/dttivz1il/video/upload/v1770166272/00733_njitjk.ts" type="video/mp4">
+  </video>
+  <div class="hero-overlay"></div>
+  <div class="hero-content">
+    <h1>Bygg din bästa fysik</h1>
+    <p>Personlig online coachning för muskeltillväxt, fettminskning och maximal prestation</p>
+    <a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" class="btn">Boka nu</a>
+  </div>
+</section>
+<!-- ABOUT -->
+<section id="about" class="section">
+  <h2>Om mig</h2>
+  <p>Jag är licenserad personlig tränare och kostrådgivare med över 15 års erfarenhet. Jag hjälper dig bygga muskler, tappa fett och nå din bästa form med ett individuellt upplägg.</p>
+  <img class="profile-img" src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg">
+</section>
+<!-- SERVICES -->
+<section id="services" class="section">
+  <h2>Tjänster</h2>
+  <div class="grid">
+    <div class="card">
+      <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071762/pexels-photo-376464_br5ucq.jpg">
+      <h3>Personlig träning</h3>
+      <p>Individuellt träningsprogram baserat på dina mål</p>
+    </div>
+    <div class="card">
+      <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071709/11062b_b80bd0860f1749178b81eee39e3bc15b_mv2_d_4538_3119_s_4_2_tbiobt.avif">
+      <h3>Kostrådgivning</h3>
+      <p>Koststrategi för optimal fysik och prestation</p>
+    </div>
+    <div class="card">
+      <img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770079671/530312918_2055614884970852_6024544081288430228_n_vf9xgb.jpg">
+      <h3>Online coachning</h3>
+      <p>Full coaching med uppföljning och support</p>
+    </div>
+  </div>
+</section>
+<!-- PRICING -->
+<section id="pricing" class="section">
+  <h2>Priser</h2>
+  <div class="grid">
+    <div class="card">
+      <h3>Online Coaching</h3>
+      <div class="price">1495 kr / mån</div>
+      <a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" class="btn">Starta coachning</a>
+    </div>
+  </div>
+</section>
+<custom-footer></custom-footer>
+<script src="components/header.js"></script>
+<script src="components/footer.js"></script>
+<script>
+  feather.replace();
+</script>
+<!-- Calendly script -->
+<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
+<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,3 +1,4 @@
 /* Custom styles that extend Tailwind */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@@ -177,3 +178,145 @@ input:focus, textarea:focus {
     height: 600px;
   }
 }

 /* Custom styles that extend Tailwind */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
     height: 600px;
   }
 }
+/* Hero section styles */
+.hero {
+  position: relative;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.hero video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  transform: translate(-50%, -50%);
+  object-fit: cover;
+  z-index: -2;
+}
+.hero-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: -1;
+}
+.hero-content {
+  max-width: 800px;
+  padding: 20px;
+}
+.hero h1 {
+  font-size: 48px;
+  font-weight: 800;
+  margin-bottom: 20px;
+}
+.hero p {
+  font-size: 20px;
+  margin-bottom: 30px;
+}
+.btn {
+  display: inline-block;
+  padding: 15px 30px;
+  background: #22c55e;
+  color: black;
+  font-weight: 700;
+  text-decoration: none;
+  border-radius: 8px;
+  transition: 0.3s;
+}
+.btn:hover {
+  background: #16a34a;
+  transform: scale(1.05);
+}
+/* Sections */
+.section {
+  padding: 100px 20px;
+  max-width: 1100px;
+  margin: auto;
+}
+.section h2 {
+  font-size: 36px;
+  margin-bottom: 20px;
+}
+.section p {
+  color: #ccc;
+  line-height: 1.6;
+}
+/* Services grid */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 30px;
+  margin-top: 40px;
+}
+.card {
+  background: #111;
+  padding: 25px;
+  border-radius: 12px;
+}
+.card img {
+  width: 100%;
+  border-radius: 10px;
+  margin-bottom: 15px;
+}
+/* Pricing */
+.price {
+  font-size: 32px;
+  font-weight: 700;
+  margin: 15px 0;
+}
+/* Footer */
+.footer {
+  padding: 40px;
+  text-align: center;
+  background: black;
+}
+.socials {
+  margin-top: 15px;
+}
+.socials a {
+  margin: 10px;
+  font-size: 24px;
+  text-decoration: none;
+  color: white;
+}
+.socials a:hover {
+  color: #22c55e;
+}
+/* Mobile */
+@media (max-width: 768px) {
+  .hero h1 {
+    font-size: 32px;
+  }
+  .nav-links {
+    display: none;
+  }
+}