services section layout #225

openmindculture · Apr 3, 2024 · e39f325 · e39f325
1 parent 3c94554
commit e39f325
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 6 deletions.
diff --git a/dist/index.html b/dist/index.html
diff --git a/dist/styles.css b/dist/styles.css
diff --git a/dist_en/index.html b/dist_en/index.html
diff --git a/dist_en/styles.css b/dist_en/styles.css
diff --git a/src/_data/de/content.js b/src/_data/de/content.js
@@ -301,6 +301,22 @@ module.exports = {
   "toggleHighContrast": "Kontrast ändern",
   "reduceContrast": "Kontrast verringern",
   "increaseContrast": "Kontrast erhöhen",
+  "services": "Leistungen",
+  "servicesBuildTitle": "Let's build your website!",
+  "servicesBuild1": "schnell erste Erfolge erreichen",
+  "servicesBuild2": "nachhaltiges Konzept von Anfang an",
+  "servicesBuild3": "Kooperation mit erfahrenen Partner:innen",
+  "servicesBuildMoreLinkText": "mehr über Websiteerstellung",
+  "servicesVerifyTitle": "Let's verify your website!",
+  "servicesVerify1": "measure your carbon footprint",
+  "servicesVerify2": "inspect loading time and accessibility",
+  "servicesVerify3": "identify critical errors and problems",
+  "servicesVerifyMoreLinkText": "mehr über Test und Analyse",
+  "servicesImproveTitle": "Let's improve and optimize your website!",
+  "servicesImprove1": "make your customers love it",
+  "servicesImprove2": "ake it work smoothly on every device",
+  "servicesImprove3": "improve and certify its ecological efficiency",
+  "servicesImproveMoreLinkText": "mehr über Optimierung und Zertifizierung",
   "showLandingpageLinks": "true",
   "landingLinkTitleWordPress":"Wordpress-Website nachhaltig optimieren lassen",
   "landingLinkTextWordPress": "WordPress",

diff --git a/src/_data/en/content.js b/src/_data/en/content.js
@@ -302,6 +302,22 @@ module.exports = {
   "toggleHighContrast": "toggle high contrast",
   "reduceContrast": "reduce contrast",
   "increaseContrast": "increase contrast",
+  "services": "Services",
+  "servicesBuildTitle": "Let's build your website!",
+  "servicesBuild1": "schnell erste Erfolge erreichen",
+  "servicesBuild2": "nachhaltiges Konzept von Anfang an",
+  "servicesBuild3": "Kooperation mit erfahrenen Partner:innen",
+  "servicesBuildMoreLinkText": "mehr über Websiteerstellung",
+  "servicesVerifyTitle": "Let's verify your website!",
+  "servicesVerify1": "measure your carbon footprint",
+  "servicesVerify2": "inspect loading time and accessibility",
+  "servicesVerify3": "identify critical errors and problems",
+  "servicesVerifyMoreLinkText": "mehr über Test und Analyse",
+  "servicesImproveTitle": "Let's improve and optimize your website!",
+  "servicesImprove1": "make your customers love it",
+  "servicesImprove2": "ake it work smoothly on every device",
+  "servicesImprove3": "improve and certify its ecological efficiency",
+  "servicesImproveMoreLinkText": "mehr über Optimierung und Zertifizierung",
   "showLandingpageLinks": "",
   "landingLinkTitleWordPress":"Wordpress-Website nachhaltig optimieren lassen",
   "landingLinkTextWordPress": "WordPress",

diff --git a/src/index.liquid b/src/index.liquid
@@ -647,6 +647,39 @@
             </article>
           </section>
 
+          <section class="no-print text-content-layout services-wrapper avoid-page-break">
+            <h3 id="services" class="font-sans target-offset">{{ content.services }}</h3>
+            <ul class="grid-container services">
+              <li class="tile text-content-color">
+                <h4 class="font-sans">{{ content.servicesBuildTitle }}</h4>
+                <ul>
+                  <li>{{ content.servicesBuild1 }}</li>
+                  <li>{{ content.servicesBuild2 }}</li>
+                  <li>{{ content.servicesBuild3 }}</li>
+                </ul>
+                <a href="#">{{ content.servicesBuildMoreLinkText }}...</a>
+              </li>
+              <li class="tile text-content-color">
+                <h4 class="font-sans">{{ content.servicesVerifyTitle }}</h4>
+                <ul>
+                  <li>{{ content.servicesVerify1 }}</li>
+                  <li>{{ content.servicesVerify2 }}</li>
+                  <li>{{ content.servicesVerify3 }}</li>
+                </ul>
+                <a href="#">{{ content.servicesVerifyMoreLinkText }}...</a>
+              </li>
+              <li class="tile text-content-color">
+                <h4 class="font-sans">{{ content.servicesImproveTitle }}</h4>
+                <ul>
+                  <li>{{ content.servicesImprove1 }}</li>
+                  <li>{{ content.servicesImprove2 }}</li>
+                  <li>{{ content.servicesImprove3 }}</li>
+                </ul>
+                <a href="#">{{ content.servicesImproveMoreLinkText }}...</a>
+              </li>
+            </ul>
+          </section>
+
           <section class="text-content-layout skills-wrapper avoid-page-break">
             <h3 id="skills" class="font-sans target-offset">{{ content.SkillsHeading }}</h3>
             <ul class="grid-container skills">

diff --git a/src/styles.css b/src/styles.css
@@ -798,8 +798,6 @@ ul.code-links {
   }
 }
 
-/* skills grid */
-
 ul.grid-container.skills {
   margin-bottom: 2em;
 }
@@ -833,6 +831,23 @@ ul.grid-container.skills {
   font-size: 0.8125em;
 }
 
+.grid-container.services {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.grid-container.services > li {
+  padding: 0 0 1rem 1rem;
+}
+
+.grid-container.services > li ul {
+  padding: 0 0 0 1rem;
+  list-style-type: disc;
+}
+
+.grid-container.services > li ul li {
+  padding: 0;
+}
+
 .brand-coral {
   background-color: var(--interior-rose);
   color: #000;