Spaces:

maa6
/

nordic-documasters-saga

Running

App Files Files Community

maa6 commited on Nov 13, 2025

Commit

f4f4e44

verified ·

1 Parent(s): ebc56b7

kan du byta ut företagslogon till denna bild och införa färgskalan på övriga sidan?

Browse files

Files changed (2) hide show

index.html +30 -28
style.css +44 -18

index.html CHANGED Viewed

@@ -25,8 +25,10 @@
 </head>
 <body class="bg-light text-dark font-sans antialiased">
     <custom-navbar></custom-navbar>
-    <main>
         <!-- Hero Section -->
         <section class="relative h-screen flex items-center justify-center overflow-hidden">
             <div class="absolute inset-0 bg-black/50 z-10"></div>
@@ -72,13 +74,13 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="bg-white p-6">
-                            <div class="flex justify-between items-start mb-2">
-                                <h3 class="text-xl font-bold">Midnight Sun Chronicles</h3>
-                                <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2023</span>
                             </div>
-                            <p class="text-gray-600">Director: Erik Johansson</p>
-                        </div>
                     </div>
                     <!-- Film 2 -->
@@ -96,13 +98,13 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="bg-white p-6">
-                            <div class="flex justify-between items-start mb-2">
-                                <h3 class="text-xl font-bold">The Silent Forest</h3>
-                                <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2021</span>
                             </div>
-                            <p class="text-gray-600">Director: Lena Andersson</p>
-                        </div>
                     </div>
                     <!-- Film 3 -->
@@ -120,13 +122,13 @@
                                 </a>
                             </div>
                         </div>
-                        <div class="bg-white p-6">
-                            <div class="flex justify-between items-start mb-2">
-                                <h3 class="text-xl font-bold">Stockholm Underground</h3>
-                                <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2019</span>
                             </div>
-                            <p class="text-gray-600">Director: Mikael Bergman</p>
-                        </div>
                     </div>
                 </div>
@@ -140,19 +142,19 @@
         </section>
         <!-- About Section -->
-        <section id="about" class="py-20 bg-gray-50">
-            <div class="container mx-auto px-4">
                 <div class="flex flex-col lg:flex-row items-center gap-12">
                     <div class="lg:w-1/2">
                         <img src="http://static.photos/office/1200x630/15" alt="Our Studio in Gustavsberg" class="rounded-xl shadow-lg w-full">
                     </div>
                     <div class="lg:w-1/2">
 <h2 class="text-4xl font-bold mb-6">The <span class="text-primary">DOKUMENTARMINISTERIET</span></h2>
-<p class="text-lg text-gray-600 mb-6">Established in 2012, DOKUMENTARMINISTERIET AB is Sweden's premier documentary production house, dedicated to cinematic truth-telling and authentic storytelling.</p>
-<p class="text-lg text-gray-600 mb-8">Our collective of award-winning filmmakers brings a distinctly Swedish perspective to global documentary production, combining journalistic rigor with artistic vision.</p>
 <div class="flex flex-wrap gap-4">
-                            <div class="flex items-center gap-3 bg-white px-6 py-4 rounded-lg shadow-sm">
-                                <div class="bg-primary/10 p-3 rounded-full">
                                     <i data-feather="award" class="text-primary w-6 h-6"></i>
                                 </div>
                                 <div>
@@ -160,8 +162,8 @@
                                     <p class="text-sm text-gray-500">International recognition</p>
                                 </div>
                             </div>
-                            <div class="flex items-center gap-3 bg-white px-6 py-4 rounded-lg shadow-sm">
-                                <div class="bg-primary/10 p-3 rounded-full">
                                     <i data-feather="film" class="text-primary w-6 h-6"></i>
                                 </div>
                                 <div>

 </head>
 <body class="bg-light text-dark font-sans antialiased">
     <custom-navbar></custom-navbar>
+    <div class="logo-container">
+        <img src="https://static.photos/minimal/1200x630/99" alt="DOKUMENTARMINISTERIET AB Logo" class="logo-img">
+    </div>
+<main>
         <!-- Hero Section -->
         <section class="relative h-screen flex items-center justify-center overflow-hidden">
             <div class="absolute inset-0 bg-black/50 z-10"></div>
                                 </a>
                             </div>
                         </div>
+                        <div class="bg-dark p-6 border-t border-primary/20">
+<div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold text-secondary">Midnight Sun Chronicles</h3>
+<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2023</span>
                             </div>
+                            <p class="text-light/70">Director: Erik Johansson</p>
+</div>
                     </div>
                     <!-- Film 2 -->
                                 </a>
                             </div>
                         </div>
+                        <div class="bg-dark p-6 border-t border-primary/20">
+<div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold text-secondary">The Silent Forest</h3>
+<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2021</span>
                             </div>
+                            <p class="text-light/70">Director: Lena Andersson</p>
+</div>
                     </div>
                     <!-- Film 3 -->
                                 </a>
                             </div>
                         </div>
+                        <div class="bg-dark p-6 border-t border-primary/20">
+<div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold text-secondary">Stockholm Underground</h3>
+<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">2019</span>
                             </div>
+                            <p class="text-light/70">Director: Mikael Bergman</p>
+</div>
                     </div>
                 </div>
         </section>
         <!-- About Section -->
+        <section id="about" class="py-20 bg-primary">
+<div class="container mx-auto px-4">
                 <div class="flex flex-col lg:flex-row items-center gap-12">
                     <div class="lg:w-1/2">
                         <img src="http://static.photos/office/1200x630/15" alt="Our Studio in Gustavsberg" class="rounded-xl shadow-lg w-full">
                     </div>
                     <div class="lg:w-1/2">
 <h2 class="text-4xl font-bold mb-6">The <span class="text-primary">DOKUMENTARMINISTERIET</span></h2>
+<p class="text-lg text-light/80 mb-6">Established in 2012, DOKUMENTARMINISTERIET AB is Sweden's premier documentary production house, dedicated to cinematic truth-telling and authentic storytelling.</p>
+<p class="text-lg text-light/80 mb-8">Our collective of award-winning filmmakers brings a distinctly Swedish perspective to global documentary production, combining journalistic rigor with artistic vision.</p>
 <div class="flex flex-wrap gap-4">
+                            <div class="flex items-center gap-3 bg-dark px-6 py-4 rounded-lg shadow-sm">
+<div class="bg-primary/10 p-3 rounded-full">
                                     <i data-feather="award" class="text-primary w-6 h-6"></i>
                                 </div>
                                 <div>
                                     <p class="text-sm text-gray-500">International recognition</p>
                                 </div>
                             </div>
+                            <div class="flex items-center gap-3 bg-dark px-6 py-4 rounded-lg shadow-sm">
+<div class="bg-primary/10 p-3 rounded-full">
                                     <i data-feather="film" class="text-primary w-6 h-6"></i>
                                 </div>
                                 <div>

style.css CHANGED Viewed

@@ -1,28 +1,54 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

 body {
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    background: linear-gradient(135deg, #0F4C81 0%, #1A1A2E 100%);
+    color: #F8F9FA;
 }
+h1, h2, h3, h4, h5, h6 {
+    color: #E8C547;
 }
 p {
+    color: rgba(248, 249, 250, 0.8);
+    font-size: 16px;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+}
+.logo-container {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+    background: rgba(15, 76, 129, 0.5);
+    border-bottom: 1px solid rgba(232, 197, 71, 0.3);
+}
+.logo-img {
+    max-width: 300px;
+    height: auto;
+}
+.bg-primary {
+    background-color: #0F4C81;
+}
+.bg-secondary {
+    background-color: #E8C547;
+}
+.bg-dark {
+    background-color: #1A1A2E;
+}
+.text-primary {
+    color: #0F4C81;
 }
+.text-secondary {
+    color: #E8C547;
 }
+.text-light {
+    color: #F8F9FA;
 }