Skapa fil
kontakt.php
X
index4.php
X
index.php
X
index_org.php
X
index2.php
X
about.php
X
article2.png
X
portrait.png
X
article1.png
X
article3.png
X
mooks.png
X
about1.png
X
hero.png
X
Ladda upp
Editor : index.php
<?php // Simple PHP version of the same page (no framework required) ?> <!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Insikt</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { margin: 0; font-family: Arial, sans-serif; color: #2d2d2d; } section { padding: 80px 60px; } h1 { font-size: 48px; line-height: 1.2; } h2 { font-size: 36px; } p { color: #555; } /* HERO */ .hero { background: url('images/hero.png') center/cover no-repeat; min-height: 90vh; display: flex; align-items: center; } .hero-content { max-width: 600px; } .btn { display: inline-block; margin-top: 20px; background: #3f5d4a; color: #fff; padding: 12px 24px; border-radius: 30px; text-decoration: none; } /* CARDS */ .services { display: flex; gap: 20px; margin-top: -100px; padding: 0 60px 60px; } .card { background: rgba(255,255,255,0.9); padding: 30px; border-radius: 15px; flex: 1; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } /* ABOUT */ .about { display: flex; gap: 40px; } .about img { width: 100%; border-radius: 15px; } /* ARTICLES */ .articles { padding: 60px; } .article-grid { display: flex; gap: 20px; } .article { flex: 1; } .article img { width: 100%; border-radius: 12px; } </style> </head> </head> <body class="font-sans text-stone-800"> <!-- Navbar --> <div class="flex justify-between items-center p-6 max-w-6xl mx-auto"> <div class="flex items-center space-x-3"> <div class="relative w-9 h-9"> <div class="absolute inset-0 rounded-full border border-stone-300"></div> <div class="absolute inset-0 flex items-center justify-center"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="text-stone-700"> <path d="M12 5L18 18H6L12 5Z" fill="currentColor" opacity="0.9"/> </svg> </div> </div> <div class="flex flex-col leading-tight"> <span class="text-base font-normal tracking-tight" style="font-size: 20px;">Mooks</span> <span class="text-xs text-stone-500">Ledarskap & förändring</span> </div> </div> <div class="space-x-6 text-sm"> <a href="about.php">Om</a> <a href="#">Tjänster</a> <a href="#">Insikter</a> <a href="#">Partners</a> <a href="#">Kontakt</a> </div> </div> <!-- HERO --> <section class="hero"> <div class="hero-content"> <h1 style="font-size: 48px;"> Vi hjälper individer, par och organisationer till bättre välmående och långsiktig förändring </h1> <p> Genom att öka medvetenhet i relationen till sig själv och andra. </p> <a href="#" class="btn">Kontakta oss</a> </div> </section> <!-- TJÄNSTER --> <div class="services"> <div class="card"> <h3 style="font-size: 1.17em;">Samtalsterapi</h3> <p>Enskild terapi för ökat självförståelse och välmående.</p> </div> <div class="card"> <h3 style="font-size: 1.17em;">Parterapi</h3> <p>Parterapi för djupare förståelse och starkare relationer.</p> </div> <div class="card"> <h3 style="font-size: 1.17em;">Organisationer</h3> <p>Utveckling av ledare, team och organisationer.</p> </div> </div> <!-- OM OSS --> <section> <div class="about"> <div> <h2 style="font-size: 36px;">Om oss</h2> <p> Vi arbetar med personlig utveckling, terapi och ledarskap. Med ett gestaltiskt förhållningssätt – där medvetenhet, ansvar och relation är centralt. </p> <img src="images/about1.png" alt=""> </div> <div> <img src="images/portrait.png" alt=""> <p>Kort presentation om personen här.</p> </div> </div> </section> <!-- ARTIKLAR --> <section class="articles"> <h2 style="font-size: 36px;">Senaste artiklar</h2> <div class="article-grid"> <div class="article"> <img src="images/article1.png"> <h3>Att hantera stress</h3> <p>Strategier för ett lugnare liv.</p> </div> <div class="article"> <img src="images/article2.png"> <h3>Vikten av självkännedom</h3> <p>Hur medvetenhet leder till bättre relationer.</p> </div> <div class="article"> <img src="images/article3.png"> <h3>Ledarskap och empati</h3> <p>Skapa trygga team.</p> </div> </div> </section> <!-- CTA --> <div class="bg-stone-800 text-white py-24 text-center"> <h2 class="text-3xl font-light mb-6">Vill du ta nästa steg?</h2> <div class="space-x-4"> <button class="bg-white text-black px-4 py-2 rounded-xl">Kontakta oss</button> <button class="bg-black border border-white px-4 py-2 rounded-xl">Boka möte</button> </div> </div> <!-- Footer --> <div class="py-10 text-center text-sm text-stone-500"> Kontakt · Email · LinkedIn </div> </body> </html>
Spara
