Weitere Inhaltsseiten

deploy/html/sites/about.html

@@ -0,0 +1,53 @@
+{% extends "template.html" %}
+
+{% block content %}
+
+    <div class="wrapper">
+        <div class="bind">
+            <h1 class="headline">
+                Über Uns
+            </h1>
+            <p class="paragraph">
+                Wir sind Ihr zuverlässiger Partner für die Verwaltung von Immobilien. Ob Eigentumswohnung, Mehrfamilienhaus oder Gewerbeimmobilie – wir kümmern uns um Ihre Immobilie, als wäre es unsere eigene. Mit langjähriger Erfahrung, einem engagierten Team und modernster Technik bieten wir maßgeschneiderte Lösungen, die den Werterhalt und die Rentabilität Ihrer Immobilien sichern.
+            </p>
+            <p class="paragraph">
+            Seit 10 Jahren sind wir als Hausverwaltung tätig. Unser Ziel ist es, Immobilienbesitzern die Sorgen und den Aufwand rund um die Verwaltung abzunehmen. Wir verstehen uns als Schnittstelle zwischen Eigentümern, Mietern und Dienstleistern. Unser erfahrenes Team bietet individuelle Betreuung, transparente Abrechnungen und schnelle Reaktionszeiten, damit Sie sich entspannt zurücklehnen können.
+            </p>
+        </div>
+
+        <div class="bind">
+            <h2 class="headline">Leistungen</h2>
+            <p class="paragraph">Unser Leistungsportfolio für Ihre Immobilie</p>
+
+            <h3 class="headline">Mietverwaltung</h3>
+            <p class="paragraph">
+                Wir übernehmen für Sie die vollständige Betreuung Ihrer Mietobjekte. Dazu gehören die Mietersuche, Vertragsgestaltung, Mieterkommunikation, Nebenkostenabrechnungen und vieles mehr.
+            </p>
+
+            <h3 class="headline">WEG-Verwaltung</h3>
+            <p class="paragraph">
+                Für Wohnungseigentümergemeinschaften (WEG) bieten wir umfassende Dienstleistungen von der Verwaltung der gemeinschaftlichen Finanzen über die Durchführung von Eigentümerversammlungen bis hin zur Abwicklung von Instandhaltungsmaßnahmen.
+            </p>
+
+            <h3 class="headline">Buchhaltung & Abrechnung</h3>
+            <p class="paragraph">
+                Eine transparente und ordnungsgemäße Buchführung ist das Rückgrat jeder Immobilienverwaltung. Wir sorgen für korrekte Abrechnungen und die rechtzeitige Erstellung der jährlichen Nebenkostenabrechnung.
+            </p>
+
+            <h3 class="headline">Instandhaltung & Modernisierung</h3>
+            <p class="paragraph">
+                Unser Team koordiniert alle nötigen Reparaturen, Wartungen und Modernisierungen, um den Wert Ihrer Immobilie langfristig zu sichern.
+            </p>
+        </div>
+
+        <div class="bind">
+            <h2 class="headline">Service für Mieter</h2>
+            <p class="paragraph">
+                Als Mieter profitieren Sie von einem direkten Zugang zu unserem Mieterportal. Hier können Sie wichtige Dokumente einsehen, Schäden melden und Fragen direkt an unser Team stellen. Wir garantieren eine schnelle Bearbeitung Ihrer Anliegen und einen transparenten Kommunikationsfluss.
+            </p>
+
+
+       </div>
+
+    </div>
+{% endblock %}

deploy/html/sites/immobilien.html

@@ -0,0 +1,63 @@
+{% extends "template.html" %}
+
+{% block content %}
+
+    <div class="wrapper">
+        <div class="bind">
+            <h1 class="headline">
+                Unsere Immobilien
+            </h1>
+            <p class="paragraph">
+               Hier finden Sie eine Übersicht der Immobilien, die wir für Sie verwalten.
+            </p>
+        </div>
+
+        <div class="bind">
+            <div class="immobilie-wrap">
+        <sl-card class="immobilie">
+            <img src="/static/site/images/haus-1.png" slot="image">
+            <h2 class="headline">Kanalhafen 23</h2>
+            <p>
+                Als Mieter profitieren Sie von einem direkten Zugang zu unserem Mieterportal. Hier können Sie wichtige Dokumente einsehen, Schäden melden und Fragen direkt an unser Team stellen. Wir garantieren eine schnelle Bearbeitung Ihrer Anliegen und einen transparenten Kommunikationsfluss.
+            </p>
+       </sl-card>
+       <sl-card class="immobilie">
+        <img src="/static/site/images/haus-3.png" slot="image">
+           <h2 class="headline">Kohlenhafen 13</h2>
+           <p>
+               Als Mieter profitieren Sie von einem direkten Zugang zu unserem Mieterportal. Hier können Sie wichtige Dokumente einsehen, Schäden melden und Fragen direkt an unser Team stellen. Wir garantieren eine schnelle Bearbeitung Ihrer Anliegen und einen transparenten Kommunikationsfluss.
+           </p>
+        </sl-card>
+        <sl-card class="immobilie">
+        <img src="/static/site/images/haus-4.png" slot="image">
+          <h2 class="headline">Petroleumhafen 42</h2>
+          <p>
+              Als Mieter profitieren Sie von einem direkten Zugang zu unserem Mieterportal. Hier können Sie wichtige Dokumente einsehen, Schäden melden und Fragen direkt an unser Team stellen. Wir garantieren eine schnelle Bearbeitung Ihrer Anliegen und einen transparenten Kommunikationsfluss.
+          </p>
+        </sl-card>
+        <sl-card class="immobilie">
+        <img src="/static/site/images/haus-2.png" slot="image">
+         <h2 class="headline">Stadthafen 1a</h2>
+         <p>
+             Als Mieter profitieren Sie von einem direkten Zugang zu unserem Mieterportal. Hier können Sie wichtige Dokumente einsehen, Schäden melden und Fragen direkt an unser Team stellen. Wir garantieren eine schnelle Bearbeitung Ihrer Anliegen und einen transparenten Kommunikationsfluss.
+         </p>
+        </sl-card>
+        <sl-card class="immobilie">
+        <img src="/static/site/images/haus-2.png" slot="image">
+        <h2 class="headline">Stadthafen 1b</h2>
+        <p>
+            Als Mieter profitieren Sie von einem direkten Zugang zu unserem Mieterportal. Hier können Sie wichtige Dokumente einsehen, Schäden melden und Fragen direkt an unser Team stellen. Wir garantieren eine schnelle Bearbeitung Ihrer Anliegen und einen transparenten Kommunikationsfluss.
+        </p>
+    </sl-card>
+    <sl-card class="immobilie">
+    <img src="/static/site/images/haus-5.png" slot="image">
+       <h2 class="headline">Südhafen 9</h2>
+       <p>
+           Als Mieter profitieren Sie von einem direkten Zugang zu unserem Mieterportal. Hier können Sie wichtige Dokumente einsehen, Schäden melden und Fragen direkt an unser Team stellen. Wir garantieren eine schnelle Bearbeitung Ihrer Anliegen und einen transparenten Kommunikationsfluss.
+       </p>
+    </sl-card>
+</div>
+  </div>
+
+    </div>
+{% endblock %}

deploy/html/template.html

@@ -21,10 +21,10 @@
                     <img src="/static/site/images/logo.svg">
                 </a>
                 <div class="menu">
-                    <a href="#" class="menu-item">
+                    <a href="/s/about" class="menu-item">
                         Über Uns
                     </a>
-                    <a href="#" class="menu-item">
+                    <a href="/s/immobilien" class="menu-item">
                         Unsere Immobilien
                     </a>
                     <a href="/todo/add" class="menu-item">

sources/site/styles/config.css

@@ -0,0 +1,79 @@
+
+:root,
+:host {
+  --ignt-theme-name: "Hausverwaltung";
+
+  /* Color Set */
+  --ignt-color-primary: #970000;
+  --ignt-color-grey: #EBEBEB;
+  --ignt-color-border-default: var(--ignt-color-gray-300);
+  --ignt-color-border-light: var(--ignt-color-gray-200);
+  --ignt-color-text-default: #353535;
+  --ignt-color-text-light: #91989c;
+
+  --ignt-basic-color-hover: #670101;
+
+  --sl-input-filled-background-color: var(--ignt-color-grey);
+  --sl-input-filled-background-color-focus: var(--ignt-color-grey);
+
+  --ignt-surface-light: color-mix(in srgb, var(--ignt-color-neutral-0), var(--ignt-mix-color-up) 3%);
+  --ignt-surface-dark: color-mix(in srgb, var(--ignt-color-neutral-0), var(--ignt-mix-color-up) 7%);
+
+  --ignt-color-hover-default: #f7f7f7;
+
+  /* Alert colors */
+  --ignt-color-success: #419839;
+  --ignt-color-warning: #ff8c00;
+  --ignt-color-danger: color-mix(in oklch, var(--ignt-color-primary), darkred 80%);
+  --ignt-color-info: #4785a7;
+
+  /* Buttons, Inputs, Forms and Menus */
+  --ignt-color-form-default: var(--ignt-color-neutral-0);
+
+  /* Font sizes */
+  --ignt-font-size-3x-small: .8rem;
+  --ignt-font-size-2x-small: .85rem;
+  --ignt-font-size-x-small: .9rem;
+  --ignt-font-size-small: .95rem;
+  --ignt-font-size-medium: 1rem;
+  --ignt-font-size-large: 1rem;
+  --ignt-font-size-x-large: 1rem;
+  --ignt-font-size-2x-large: 1.2rem;
+  --ignt-font-size-3x-large: 1.3rem;
+  --ignt-font-size-4x-large: 1.4rem;
+
+  --ignt-input-height-large: 2.5rem;
+
+  /* Font Weights */
+  --ignt-font-weight-light: 300;
+  --ignt-font-weight-normal: 400;
+  --ignt-font-weight-bold: 700;
+
+  --ignt-page-width-default: 1560px;
+  --ignt-bind-gap: 140px;
+  --ignt-bind-padding: var(--sl-spacing-3x-large);
+  --ignt-bind-padding-mobile: var(--sl-spacing-large);
+  --ignt-inner-page-width: calc(var(--ignt-page-width-default) - (2 * var(--ignt-bind-padding)));
+
+  --ignt-border-radius-default: 8px;
+
+  --ignt-menu-height: 130px;
+
+  /* Media queries / Supported screen sizes */
+  --ignt-break-2x-small: 32em; /* old smart phones or gadgets like smart watches up to: 512px / 16px = 32em */
+  --ignt-break-x-small: 54em; /* smart phones up to: 640px / 16px = 40em */
+  --ignt-break-small: 900px; /* tablets up to: 1040px / 16px = 65em */
+  --ignt-break-medium: 900px; /* screens: 1200px / 16px = 75em */
+  --ignt-break-large: 94em; /* big screens up to: 1504px / 16px = 94em */
+  --ignt-break-x-large: 105em; /* enough space left and right of the main binder: 1680px / 16px = 105em */
+  --ignt-break-2x-large: 114em; /* huge screens: 1824px / 16px = 114em; */
+  --ignt-break-3x-large: 225em; /* 4k screens: 3600px / 16px = 225em; */
+
+  --fluid-height-small: 300px;
+  --fluid-height-medium: 450px;
+  --fluid-height-large: 600px;
+
+  --sl-input-height-small: 2.5em;
+  --sl-input-height-medium: 3em;
+  --sl-input-height-large: 3.75em;
+}

sources/site/styles/style.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 @import url('@viur/ignite/ignite.css');
+@import url('config.css');
 
 body {
   height: 100%;
@@ -60,6 +61,10 @@ body {
   gap: 20px;
 }
 
+.menu-item{
+  font-weight: 600;
+}
+
 .stage{
   width: 100%;
   height: calc(100vh - 200px);
@@ -129,3 +134,41 @@ body {
   font-size: 2em;
   font-weight: 600;
 }
+
+h1.headline{
+  font-size: 2.6em;
+}
+
+h2.headline{
+  font-size: 2.2em;
+}
+
+h3.headline{
+  font-size: 1.6em;
+  color: var(--ignt-color-text-default);
+}
+
+h4.headline{
+  font-size: 1.5em;
+}
+
+h5.headline{
+  font-size: 1.2em;
+}
+
+.immobilie-wrap{
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-gap: 30px;
+}
+
+.immobilie{
+  &::part(image){
+    aspect-ratio: 1;
+
+  }
+
+  img{
+    object-fit: cover;
+  }
+}