Add blog item to blog page

static/src/scss/content.scss

@@ -41,3 +41,29 @@ h1.page-title {
     height: 100%;
   }
 }
+
+.page-list {
+  .card {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  .card + .card {
+    margin-top: 2rem;
+  }
+
+  .card-image {
+    max-width: 25% !important;
+    margin: auto 0;
+  }
+
+  @media #{$small-and-down} {
+    .card {
+      display: initial;
+    }
+
+    .card-image {
+      max-width: initial !important;
+    }
+  }
+}

templates/blog/index.html

@@ -1,9 +1,9 @@
 {% extends "content.html" %}
 
-{% load static %}
-
 {% block title %}Blog{% endblock %}
 
 {% block content %}
-
+<div class="row page-list">
+  {% include "blog/item.html" %}
+</div>
 {% endblock%}

templates/blog/item.html

@@ -0,0 +1,20 @@
+{% load static %}
+
+
+<div class="col s12">
+  <div class="card horizontal">
+    <div class="card-image">
+      <img src="{% static 'img/header.jpg' %}">
+    </div>
+    <div class="card-stacked">
+      <div class="card-content">
+          <span class="card-title">Card Title</span>
+        <p>I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.</p>
+      </div>
+      <div class="card-action">
+        <a href="#">Read More</a>
+        <p class="right"><i class="far fa-calendar-alt pr-1"></i> 2020-01-01 &emsp;<i class="far fa-clock pr-1"></i> 10 minutes</p>
+      </div>
+    </div>
+  </div>
+</div>