update frontpage

front-page.php

@@ -1,7 +1,12 @@
 <?php get_header(); ?>
 
-<div class="container-fluid p-0" id="main">
+<div class="container p-0" id="main">
 
+    <div class="row">
+        <div class="col-12">
+            <?php get_template_part('template-parts/posts/postgrid'); ?>
+        </div>
+    </div>
 
 </div>
 

scss/includes/_content.scss

@@ -0,0 +1,15 @@
+.posts-grid {
+    display: grid;
+    font-size: 20px;
+    padding: 25px;
+    grid-template-columns: repeat(3, 1fr );
+    padding-top: 40px;
+
+    .single-post {
+        min-height: 100px;
+        box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
+        background-color: #fff;
+        margin-right: 20px;
+        margin-bottom: 20px;
+    }
+}

scss/includes/_main.scss

@@ -12,6 +12,8 @@ body {
         font-family: 'BarlowBold';
     }
 
+
+
     #page-wrap {
         max-width: 1320px;
         height:100%;

scss/styles.css

@@ -133,4 +133,19 @@ body header .contact .clock:before {
 }
 #menucontainer ul li.blue a {
   border-bottom: 8px solid #245861;
+}
+
+.posts-grid {
+  display: grid;
+  font-size: 20px;
+  padding: 25px;
+  grid-template-columns: repeat(3, 1fr);
+  padding-top: 40px;
+}
+.posts-grid .single-post {
+  min-height: 100px;
+  box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
+  background-color: #fff;
+  margin-right: 20px;
+  margin-bottom: 20px;
 }

scss/styles.scss

@@ -2,5 +2,6 @@
 @import 'includes/variables';
 @import 'includes/main';
 @import 'includes/menu';
+@import 'includes/content';
 
 

template-parts/posts/postgrid.php

@@ -1,52 +1,36 @@
-<?php
-    $arguments = array(
-        'posts_per_page' => 4,
-        'orderby' => 'date',
-        'order' => 'DESC',
-        'post_status' => 'publish',
-        'post_type' => 'post',
-        'page' => 1,
-        'tax_query' => array(
-            array(
-                'taxonomy' => 'category',
-                'field' => 'slug',
-                'terms' => 'kardanwelle',
-            )
-        )
-      );
-    $title = "Produkte und Services";
-    $bg = "bg-2";
+<h1 class="text-center m-5">Das Fahrzeugzentrum Olpe ist Ihr Spezialist rund um
+Fahrzeuge, Felgenreparaturen, Fahrzeugaufbereitung, Beschichtungen, Service und vieles mehr.</h1> 
 
-    if(isset($args['category'])) :
-        $arguments['tax_query'][0]['terms'] = $args['category'];
-    endif;
-    if(isset($args['title'])) :
-        $title = $args['title'];
-    endif;
-    if(isset($args['bg'])) :
-        $bg = $args['bg'];
-    endif;
-    $posts = get_posts($arguments);
+<div class="posts-grid">
 
-
-?>
-<div class="w-100 text-center <?php echo $bg; ?>">
-          <h2 class="category-headline"><?php echo $title; ?></h2> 
-          <hr class="yellow-line" />
+        <div class="single-post">
+        
+        </div>
+        <div class="single-post">
+        
+        </div>
+        <div class="single-post">
+        
         </div>
-<div class="posts-grid  <?php echo $bg; ?>">
 
-    <?php foreach($posts as $post): ?>
+        <div class="single-post">
+        
+        </div>
+        <div class="single-post">
+        
+        </div>
+        <div class="single-post">
+        
+        </div>
 
-    <?php
-        $image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'catlist')[0];
-        $readmore_text = get_post_meta( $post->ID, 'readmore-text', true );
-    ?>    
         <div class="single-post">
-        <img src="<?php echo $image; ?>" alt="<?php echo $post->post_title; ?>" class="img-fluid"/>
-        <h2> <a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a></h2>
-        <p><?php echo $post->post_excerpt; ?></p>
-        <a href="<?php echo get_permalink($post->ID); ?>" class="readmore"><?php echo $readmore_text; ?></a>
+        
+        </div>
+        <div class="single-post">
+        
+        </div>
+        <div class="single-post">
+        
         </div>
-    <?php endforeach; ?>    
+   
 </div>