From a681496e1569c0f152d881b17f341127287462fb Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Mon, 8 Jul 2024 22:24:20 -0400
Subject: few basic pages

---
 pom.xml                                            |   4 +
 .../blog/web/controllers/ArticleController.java    |  33 +++
 src/main/java/com/blog/web/dto/ArticleDto.java     |  27 ++
 src/main/java/com/blog/web/models/Article.java     |  30 ++
 .../com/blog/web/repository/ArticleRepository.java |   8 +
 .../java/com/blog/web/services/ArticleService.java |   9 +
 .../blog/web/services/impl/ArticleServiceImpl.java |  36 +++
 src/main/resources/templates/articles-list.html    |  16 ++
 src/main/resources/templates/articles/new.html     |  68 +++++
 src/main/resources/templates/index.html            | 224 +++++++++++++++
 src/main/resources/templates/layout.html           |  81 ++++++
 src/main/resources/templates/post.html             | 315 +++++++++++++++++++++
 12 files changed, 851 insertions(+)
 create mode 100644 src/main/java/com/blog/web/controllers/ArticleController.java
 create mode 100644 src/main/java/com/blog/web/dto/ArticleDto.java
 create mode 100644 src/main/java/com/blog/web/models/Article.java
 create mode 100644 src/main/java/com/blog/web/repository/ArticleRepository.java
 create mode 100644 src/main/java/com/blog/web/services/ArticleService.java
 create mode 100644 src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java
 create mode 100644 src/main/resources/templates/articles-list.html
 create mode 100644 src/main/resources/templates/articles/new.html
 create mode 100644 src/main/resources/templates/index.html
 create mode 100644 src/main/resources/templates/layout.html
 create mode 100644 src/main/resources/templates/post.html

diff --git a/pom.xml b/pom.xml
index 2a2996c..de71b39 100644
--- a/pom.xml
+++ b/pom.xml
@@ -38,6 +38,10 @@
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-thymeleaf</artifactId>
 		</dependency>
+		<dependency>
+			<groupId>nz.net.ultraq.thymeleaf</groupId>
+			<artifactId>thymeleaf-layout-dialect</artifactId>
+		</dependency>
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-web</artifactId>
diff --git a/src/main/java/com/blog/web/controllers/ArticleController.java b/src/main/java/com/blog/web/controllers/ArticleController.java
new file mode 100644
index 0000000..3c86ea3
--- /dev/null
+++ b/src/main/java/com/blog/web/controllers/ArticleController.java
@@ -0,0 +1,33 @@
+package com.blog.web.controllers;
+
+import com.blog.web.dto.ArticleDto;
+import com.blog.web.models.Article;
+import com.blog.web.services.ArticleService;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+import java.util.List;
+
+@Controller
+public class ArticleController {
+    private ArticleService articleService;
+
+    public ArticleController(ArticleService articleService) {
+        this.articleService = articleService;
+    }
+
+    @GetMapping("/")
+    public String listArticles(Model model) {
+        List<ArticleDto> articles = articleService.findAllArticles();
+        model.addAttribute("articles", articles);
+        return "index";
+    }
+
+    @GetMapping("/articles/new")
+    public String createArticleForm(Model model) {
+        Article article = new Article();
+        model.addAttribute("article", article);
+        return "articles/new";
+    }
+}
diff --git a/src/main/java/com/blog/web/dto/ArticleDto.java b/src/main/java/com/blog/web/dto/ArticleDto.java
new file mode 100644
index 0000000..ffe7926
--- /dev/null
+++ b/src/main/java/com/blog/web/dto/ArticleDto.java
@@ -0,0 +1,27 @@
+package com.blog.web.dto;
+
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import lombok.Builder;
+import lombok.Data;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+
+import java.time.LocalDateTime;
+
+@Data
+@Builder
+public class ArticleDto {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+    private String title;
+    private String photoUrl;
+    private String content;
+    @CreationTimestamp
+    private LocalDateTime createdOn;
+    @UpdateTimestamp
+    private LocalDateTime updatedOn;
+
+}
diff --git a/src/main/java/com/blog/web/models/Article.java b/src/main/java/com/blog/web/models/Article.java
new file mode 100644
index 0000000..5d4566f
--- /dev/null
+++ b/src/main/java/com/blog/web/models/Article.java
@@ -0,0 +1,30 @@
+package com.blog.web.models;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import jakarta.persistence.*;
+import org.hibernate.annotations.CreationTimestamp;
+import org.hibernate.annotations.UpdateTimestamp;
+
+import java.time.LocalDateTime;
+
+@Data
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+@Entity
+public class Article {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+    private String title;
+    private String photoUrl;
+    private String content;
+    @CreationTimestamp
+    private LocalDateTime createdOn;
+    @UpdateTimestamp
+    private LocalDateTime updatedOn;
+}
diff --git a/src/main/java/com/blog/web/repository/ArticleRepository.java b/src/main/java/com/blog/web/repository/ArticleRepository.java
new file mode 100644
index 0000000..c7e8c04
--- /dev/null
+++ b/src/main/java/com/blog/web/repository/ArticleRepository.java
@@ -0,0 +1,8 @@
+package com.blog.web.repository;
+
+import com.blog.web.models.Article;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface ArticleRepository extends JpaRepository<Article, Long> {
+    
+}
diff --git a/src/main/java/com/blog/web/services/ArticleService.java b/src/main/java/com/blog/web/services/ArticleService.java
new file mode 100644
index 0000000..c1b28e6
--- /dev/null
+++ b/src/main/java/com/blog/web/services/ArticleService.java
@@ -0,0 +1,9 @@
+package com.blog.web.services;
+
+import com.blog.web.dto.ArticleDto;
+
+import java.util.List;
+
+public interface ArticleService {
+    List<ArticleDto> findAllArticles();
+}
diff --git a/src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java b/src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java
new file mode 100644
index 0000000..2d3f253
--- /dev/null
+++ b/src/main/java/com/blog/web/services/impl/ArticleServiceImpl.java
@@ -0,0 +1,36 @@
+package com.blog.web.services.impl;
+
+import com.blog.web.dto.ArticleDto;
+import com.blog.web.models.Article;
+import com.blog.web.repository.ArticleRepository;
+import com.blog.web.services.ArticleService;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+@Service
+public class ArticleServiceImpl implements ArticleService {
+    public ArticleServiceImpl(com.blog.web.repository.ArticleRepository articleRepository) {
+        this.articleRepository = articleRepository;
+    }
+
+    private ArticleRepository articleRepository;
+
+    @Override
+    public List<ArticleDto> findAllArticles() {
+        List<Article> articles = articleRepository.findAll();
+        return articles.stream().map(this::mapToArticleDto).collect(Collectors.toList());
+    }
+
+    private ArticleDto mapToArticleDto(Article article) {
+        return ArticleDto.builder()
+                .id(article.getId())
+                .title(article.getTitle())
+                .photoUrl(article.getPhotoUrl())
+                .content(article.getContent())
+                .createdOn(article.getCreatedOn())
+                .updatedOn(article.getUpdatedOn())
+                .build();
+    }
+}
diff --git a/src/main/resources/templates/articles-list.html b/src/main/resources/templates/articles-list.html
new file mode 100644
index 0000000..799c751
--- /dev/null
+++ b/src/main/resources/templates/articles-list.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h1>blah blah</h1>
+    <div th:each="article :${articles}" style="">
+        <div>my aga article</div>
+        <h2 th:text="${article.title}"></h2>
+        <img th:src="${article.photoUrl}" alt="..."/>
+        <p th:text="${article.content}"></p>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/articles/new.html b/src/main/resources/templates/articles/new.html
new file mode 100644
index 0000000..d288e91
--- /dev/null
+++ b/src/main/resources/templates/articles/new.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="https://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}"
+>
+<body layout:fragment="content">
+
+<div class="flex justify-center bg-white p-12">
+<form class="w-full max-w-lg">
+    <div class="flex flex-wrap -mx-3 mb-6">
+        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
+                First Name
+            </label>
+            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="Jane">
+            <p class="text-red-500 text-xs italic">Please fill out this field.</p>
+        </div>
+        <div class="w-full md:w-1/2 px-3">
+            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
+                Last Name
+            </label>
+            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" placeholder="Doe">
+        </div>
+    </div>
+    <div class="flex flex-wrap -mx-3 mb-6">
+        <div class="w-full px-3">
+            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-password">
+                Password
+            </label>
+            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-password" type="password" placeholder="******************">
+            <p class="text-gray-600 text-xs italic">Make it as long and as crazy as you'd like</p>
+        </div>
+    </div>
+    <div class="flex flex-wrap -mx-3 mb-2">
+        <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
+                City
+            </label>
+            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-city" type="text" placeholder="Albuquerque">
+        </div>
+        <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
+                State
+            </label>
+            <div class="relative">
+                <select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
+                    <option>New Mexico</option>
+                    <option>Missouri</option>
+                    <option>Texas</option>
+                </select>
+                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+                </div>
+            </div>
+        </div>
+        <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
+                Zip
+            </label>
+            <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-zip" type="text" placeholder="90210">
+        </div>
+    </div>
+</form>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
new file mode 100644
index 0000000..611ef92
--- /dev/null
+++ b/src/main/resources/templates/index.html
@@ -0,0 +1,224 @@
+
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="https://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout}"
+>
+<body layout:fragment="content">
+
+<!--Container-->
+<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
+
+    <div class="mx-0 sm:mx-6">
+
+        <!--Nav-->
+        <nav class="mt-0 w-full">
+            <div class="container mx-auto flex items-center">
+
+                <div class="flex w-1/2 pl-4 text-sm">
+                    <ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
+                        <li class="mr-2">
+                            <a class="inline-block py-2 px-2 text-white no-underline hover:underline" href="post.html">POST</a>
+                        </li>
+                        <li class="mr-2">
+                            <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="multimenu post.html">MULTIMENU POST</a>
+                        </li>
+                        <li class="mr-2">
+                            <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="#">LINK</a>
+                        </li>
+                        <li class="mr-2">
+                            <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-2" href="post_vue.html">POST_VUE</a>
+                        </li>
+                    </ul>
+                </div>
+
+
+                <div class="flex w-1/2 justify-end content-center">
+                    <a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="@twitter_handle" href="https://twitter.com/intent/tweet?url=#">
+                        <svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
+                    </a>
+                    <a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="#facebook_id" href="https://www.facebook.com/sharer/sharer.php?u=#">
+                        <svg class="fill-current h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
+                    </a>
+                </div>
+
+            </div>
+        </nav>
+
+        <div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
+
+            <!--Lead Card-->
+            <div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
+                <a href="post.html" class="flex flex-wrap no-underline hover:no-underline">
+                    <div class="w-full md:w-2/3 rounded-t">
+                        <img src="https://source.unsplash.com/collection/494263/800x600" class="h-full w-full shadow">
+                    </div>
+
+                    <div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
+                        <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
+                            <p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6">GETTING STARTED</p>
+                            <div class="w-full font-bold text-xl text-gray-900 px-6">👋 Welcome fellow Tailwind CSS and Ghost fan</div>
+                            <p class="text-gray-800 font-serif text-base px-6 mb-5">
+                                This starter template is an attempt to replicate the default Ghost theme "Casper" using Tailwind CSS and vanilla Javascript.
+                            </p>
+                        </div>
+
+                        <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
+                            <div class="flex items-center justify-between">
+                                <img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                                <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
+                            </div>
+                        </div>
+                    </div>
+
+                </a>
+            </div>
+            <!--/Lead Card-->
+
+
+            <!--Posts Container-->
+            <div class="flex flex-wrap justify-between pt-12 -mx-6">
+
+                <!--1/3 col -->
+                <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+                    <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
+                        <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                            <img src="https://source.unsplash.com/collection/225/800x600" class="h-64 w-full rounded-t pb-6">
+                            <p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
+                            <div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
+                            <p class="text-gray-800 font-serif text-base px-6 mb-5">
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
+                            </p>
+                        </a>
+                    </div>
+                    <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
+                        <div class="flex items-center justify-between">
+                            <img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!--1/2 col -->
+                <div th:each="article :${articles}" class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
+                    <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
+                        <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                            <img th:src="${article.photoUrl}" class="h-full w-full rounded-t pb-6">
+                            <div th:text="${article.title}" class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
+                            <p th:text="${article.content}" class="text-gray-800 font-serif text-base px-6 mb-5"></p>
+                        </a>
+                    </div>
+                    <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
+                        <div class="flex items-center justify-between">
+                            <img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!--1/2 col -->
+                <div class="w-full md:w-1/2 p-6 flex flex-col flex-grow flex-shrink">
+                    <div class="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
+                        <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                            <img src="https://source.unsplash.com/collection/764827/800x600" class="h-full w-full rounded-t pb-6">
+                            <p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
+                            <div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
+                            <p class="text-gray-800 font-serif text-base px-6 mb-5">
+                                Lorem ipsum eu nunc commodo posuere et sit amet ligula.
+                            </p>
+                        </a>
+                    </div>
+                    <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
+                        <div class="flex items-center justify-between">
+                            <img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <!--2/3 col -->
+                <div class="w-full md:w-2/3 p-6 flex flex-col flex-grow flex-shrink">
+                    <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
+                        <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                            <img src="https://source.unsplash.com/collection/325867/800x600" class="h-full w-full rounded-t pb-6">
+                            <p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
+                            <div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
+                            <p class="text-gray-800 font-serif text-base px-6 mb-5">
+                                Lorem ipsum eu nunc commodo posuere et sit amet ligula.
+                            </p>
+                        </a>
+                    </div>
+                    <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
+                        <div class="flex items-center justify-between">
+                            <img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!--1/3 col -->
+                <div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
+                    <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
+                        <a href="#" class="flex flex-wrap no-underline hover:no-underline">
+                            <img src="https://source.unsplash.com/collection/1118905/800x600" class="h-full w-full rounded-t pb-6">
+                            <p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
+                            <div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
+                            <p class="text-gray-800 font-serif text-base px-6 mb-5">
+                                Lorem ipsum eu nunc commodo posuere et sit amet ligula.
+                            </p>
+                        </a>
+                    </div>
+                    <div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
+                        <div class="flex items-center justify-between">
+                            <img class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Author Name" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">1 MIN READ</p>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <!--/ Post Content-->
+
+        </div>
+
+
+        <!--Subscribe-->
+        <div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
+            <h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
+            <h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3>
+            <div class="w-full text-center pt-4">
+                <form action="#">
+                    <div class="max-w-xl mx-auto p-1 pr-0 flex flex-wrap items-center">
+                        <input type="email" placeholder="youremail@example.com" class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
+                        <button type="submit" class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <!-- /Subscribe-->
+
+
+        <!--Author-->
+        <div class="flex w-full items-center font-sans p-8 md:p-24">
+            <img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+            <div class="flex-1">
+                <p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
+                <p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
+            </div>
+            <div class="justify-end">
+                <a href="post.html" class="bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full">Read More</a>
+            </div>
+        </div>
+        <!--/Author-->
+
+    </div>
+
+
+</div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/layout.html b/src/main/resources/templates/layout.html
new file mode 100644
index 0000000..3a93a87
--- /dev/null
+++ b/src/main/resources/templates/layout.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:th="https://thymeleaf.org"
+      xmlns:layout="https://www.ultraq.net.nz/thymeleaf/layout"
+>
+<head>
+    <meta charset="UTF-8">
+    <link th:href="@{/css/styles.css}" rel="stylesheet">
+    <title>Title Layout</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="author" content="name">
+    <meta name="description" content="description here">
+    <meta name="keywords" content="keywords,here">
+    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/> <!--Replace with your tailwind.css once created-->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
+    <style>:root{
+::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}</style>
+
+</head>
+
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+</head>
+<body class="bg-gray-200 font-sans leading-normal tracking-normal">
+
+<!--Header-->
+<div class="w-full m-0 p-0 bg-cover bg-bottom" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/6/65/Toronto_Skyline_Summer_2020.jpg'); height: 60vh; max-height:460px;">
+    <div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
+        <!--Title-->
+        <p class="text-white font-extrabold text-3xl md:text-5xl">
+            👻 Ghostwind CSS
+        </p>
+        <p class="text-xl md:text-2xl text-gray-500">Welcome to my Blog</p>
+    </div>
+</div>
+
+<div layout:fragment="content" ></div>
+
+<footer class="bg-gray-900">
+    <div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
+
+        <div class="w-full mx-auto flex flex-wrap items-center">
+            <div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
+                <a class="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#">
+                    👻 <span class="text-base text-gray-200">Ghostwind CSS</span>
+                </a>
+            </div>
+            <div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
+                <ul class="list-reset flex justify-center flex-1 md:flex-none items-center">
+                    <li>
+                        <a class="inline-block py-2 px-3 text-white no-underline" href="#">Active</a>
+                    </li>
+                    <li>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                    </li>
+                    <li>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                    </li>
+                    <li>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+
+
+    </div>
+</footer>
+
+<script src="https://unpkg.com/@popperjs/core@2"></script>
+<script src="https://unpkg.com/tippy.js@6"></script>
+<script>
+    //Init tooltips
+    tippy('.avatar')
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/post.html b/src/main/resources/templates/post.html
new file mode 100644
index 0000000..bf86f96
--- /dev/null
+++ b/src/main/resources/templates/post.html
@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Tailwind Starter Template - Ghostwind CSS : Tailwind Toolbox</title>
+    <meta name="author" content="name">
+    <meta name="description" content="description here">
+    <meta name="keywords" content="keywords,here">
+    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/> <!--Replace with your tailwind.css once created-->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
+    <style>
+        .smooth {transition: box-shadow 0.3s ease-in-out;}
+        ::selection{background-color: aliceblue}
+        :root{::-webkit-scrollbar{height:10px;width:10px;}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}
+        ::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:#c4c4c4}}
+        /*scroll to top*/
+         .scroll-top {position: fixed;z-index: 50;padding: 0;right: 30px;bottom: 100px;opacity: 0;visibility: hidden;transform: translateY(15px);height: 46px;width: 46px;cursor: pointer;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all .4s ease;border: none;box-shadow: inset 0 0 0 2px #ccc;color: #ccc;background-color: #fff;}.scroll-top.is-active {opacity: 1;visibility: visible;transform: translateY(0);}.scroll-top .icon-tabler-arrow-up {position: absolute;stroke-width: 2px;stroke: #333;}.scroll-top svg path {fill: none;}.scroll-top svg.progress-circle path {stroke: #333;stroke-width: 4;transition: all .4s ease;}.scroll-top:hover {color: var(--ghost-accent-color);}.scroll-top:hover .progress-circle path, .scroll-top:hover .icon-tabler-arrow-up {stroke: var(--ghost-accent-color);}
+    </style>
+</head>
+<body class="bg-white font-sans leading-normal tracking-normal">
+
+<!--Nav-->
+<nav class="bg-gray-900 p-4 mt-0 w-full">
+    <div class="container mx-auto flex items-center">
+        <div class="flex text-white font-extrabold">
+            <a class="flex text-white text-base no-underline hover:text-white hover:no-underline" href="#">
+                👻 <span class="hidden w-0 md:w-auto md:block pl-1">Ghostwind CSS</span>
+            </a>
+        </div>
+        <div class="flex pl-4 text-sm">
+            <ul class="list-reset flex justify-between flex-1 md:flex-none items-center">
+                <li class="mr-2">
+                    <a class="inline-block py-2 px-2 text-white no-underline" href="index.html">HOME</a>
+                </li>
+                <li class="mr-2">
+                    <a class="inline-block text-indigo-200 no-underline hover:text-gray-100 hover:text-underline py-2 px-2" href="#">LINK</a>
+                </li>
+                <li class="mr-2">
+                    <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="#">LINK</a>
+                </li>
+                <li class="mr-2">
+                    <a class="inline-block text-indigo-200 no-underline hover:text-indigo-100 hover:text-underline py-2 px-2" href="#">LINK</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<!--slide in nav-->
+<div id="header" class="bg-white fixed w-full z-10 top-0 hidden animated" style="opacity: .95;">
+    <div class="bg-white">
+        <div class="flex flex-wrap items-center content-center">
+            <div class="flex w-1/2 justify-start text-white font-extrabold">
+                <a class="flex text-gray-900 no-underline hover:text-gray-900 hover:no-underline pl-2" href="#">
+                    👻 <span class="hidden w-0 md:w-auto md:block pl-1">Ghostwind CSS</span>
+                </a>
+            </div>
+            <div class="flex w-1/2 justify-end content-center">
+                <p class="hidden sm:block mr-3 text-center h-14 p-4 text-xs"><span class="pr-2">Share this</span> 👉</p>
+                <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://twitter.com/intent/tweet?url=#" style="background-color:#33b1ff;">
+                    <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
+                </a>
+                <a class="inline-block text-white no-underline hover:text-white hover:text-underline text-center h-10 w-10 p-2 md:h-auto md:w-16 md:p-4" href="https://www.facebook.com/sharer/sharer.php?u=#" style="background-color:#005e99">
+                    <svg class="fill-current text-white h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
+                </a>
+            </div>
+        </div>
+
+    </div>
+    <!--Progress bar-->
+    <div id="progress" class="h-1 bg-white shadow" style="background:linear-gradient(to right, #4dc0b5 var(--scroll), transparent 0);"></div>
+</div>
+
+
+<!--Title-->
+<div class="text-center pt-16 md:pt-32">
+    <p class="text-sm md:text-base text-green-500 font-bold">04 JULY 2023 <span class="text-gray-900">/</span> GETTING STARTED</p>
+    <h1 class="font-bold break-normal text-3xl md:text-5xl">Welcome to Ghostwind CSS</h1>
+</div>
+
+<!--image-->
+<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded" style="background-image:url('https://source.unsplash.com/collection/1118905/'); height: 75vh;"></div>
+
+<!--Container-->
+<div class="container max-w-5xl mx-auto -mt-32">
+
+    <div class="mx-0 sm:mx-6">
+
+        <div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal" style="font-family:Georgia,serif;">
+
+            <!--Post Content-->
+
+
+            <!--Lead Para-->
+            <p class="text-2xl md:text-3xl mb-5">
+                👋 Welcome fellow <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindcss.com">Tailwind CSS</a> and <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.ghost.org">Ghost</a> fan.  This starter template is an attempt to replicate the default Ghost theme <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://demo.ghost.io/welcome">"Casper"</a> using Tailwind CSS and vanilla Javascript.
+            </p>
+
+            <p class="py-6">The basic blog page layout is available and all using the default Tailwind CSS classes (although there are a few hardcoded style tags). If you are going to use this in your project, you will want to convert the classes into components.</p>
+
+            <p class="py-6">Sed dignissim lectus ut tincidunt vulputate. Fusce tincidunt lacus purus, in mattis tortor sollicitudin pretium. Phasellus at diam posuere, scelerisque nisl sit amet, tincidunt urna. Cras nisi diam, pulvinar ut molestie eget, eleifend ac magna. Sed at lorem condimentum, dignissim lorem eu, blandit massa. Phasellus eleifend turpis vel erat bibendum scelerisque. Maecenas id risus dictum, rhoncus odio vitae, maximus purus. Etiam efficitur dolor in dolor molestie ornare. Aenean pulvinar diam nec neque tincidunt, vitae molestie quam fermentum. Donec ac pretium diam. Suspendisse sed odio risus. Nunc nec luctus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis nec nulla eget sem dictum elementum.</p>
+
+            <ol>
+                <li class="py-3">Maecenas accumsan lacus sit amet elementum porta. Aliquam eu libero lectus. Fusce vehicula dictum mi. In non dolor at sem ullamcorper venenatis ut sed dui. Ut ut est quam. Suspendisse quam quam, commodo sit amet placerat in, interdum a ipsum. Morbi sit amet tellus scelerisque tortor semper posuere.</li>
+                <li class="py-3">Morbi varius posuere blandit. Praesent gravida bibendum neque eget commodo. Duis auctor ornare mauris, eu accumsan odio viverra in. Proin sagittis maximus pharetra. Nullam lorem mauris, faucibus ut odio tempus, ultrices aliquet ex. Nam id quam eget ipsum luctus hendrerit. Ut eros magna, eleifend ac ornare vulputate, pretium nec felis.</li>
+                <li class="py-3">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vitae pretium elit. Cras leo mauris, tristique in risus ac, tristique rutrum velit. Mauris accumsan tempor felis vitae gravida. Cras egestas convallis malesuada. Etiam ac ante id tortor vulputate pretium. Maecenas vel sapien suscipit, elementum odio et, consequat tellus.</li>
+            </ol>
+
+            <blockquote class="border-l-4 border-green-500 italic my-8 pl-8 md:pl-12">Example of blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.</blockquote>
+
+            <p class="py-6">Example code block:</p>
+            <pre class="bg-gray-900 rounded text-white font-mono text-base p-4">
+					<code class="break-words whitespace-pre-wrap">
+&lt;header class="site-header outer"&gt;
+  &lt;div class="inner"&gt;
+    {{&gt; "site-nav"}}
+  &lt;/div&gt;
+&lt;/header&gt;
+					</code>
+				</pre>
+
+
+            <!--/ Post Content-->
+
+        </div>
+
+
+        <!--Subscribe-->
+        <div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
+            <h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
+            <h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3>
+            <div class="w-full text-center pt-4">
+                <form action="#">
+                    <div class="max-w-sm mx-auto p-1 pr-0 flex flex-wrap items-center">
+                        <input type="email" placeholder="youremail@example.com" class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
+                        <button type="submit" class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <!-- /Subscribe-->
+
+
+        <!--Author-->
+        <div class="flex w-full items-center font-sans p-8 md:p-24">
+            <img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+            <div class="flex-1">
+                <p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
+                <p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
+            </div>
+            <div class="justify-end">
+
+            </div>
+            <!--/Author-->
+
+        </div>
+
+
+    </div>
+
+</div>
+
+
+<!--   Scroll Top Button  -->
+<button class="btn-toggle-round scroll-top js-scroll-top" type="button" title="Scroll to top">
+    <svg class="progress-circle" width="100%" height="100%" viewBox="-1 -1 102 102">
+        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="cuurentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="18" y1="11" x2="12" y2="5" />
+        <line x1="6" y1="11" x2="12" y2="5" />
+    </svg>
+</button>
+
+<div class="bg-gray-200">
+
+    <div class="container w-full max-w-6xl mx-auto px-2 py-8">
+        <div class="flex flex-wrap -mx-2">
+            <div class="w-full md:w-1/3 px-2 pb-12">
+                <div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
+                    <a href="#" class="no-underline hover:no-underline">
+                        <img src="https://source.unsplash.com/_AjqGGafofE/400x200" class="h-48 w-full rounded-t shadow-lg">
+                        <div class="p-6 h-auto md:h-48">
+                            <p class="text-gray-600 text-xs md:text-sm">GETTING STARTED</p>
+                            <div class="font-bold text-xl text-gray-900">Aperture Science</div>
+                            <p class="text-gray-800 font-serif text-base mb-5">
+                                I’ll be honest, we’re throwing science at the wall here to see what sticks. No idea what it’ll do. Probably nothing. Best case scenario you might get some super powers. Worst case, some tumors, which we’ll cut out.
+                            </p>
+                        </div>
+                        <div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
+                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">2 MIN READ</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="w-full md:w-1/3 px-2 pb-12">
+                <div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
+                    <a href="#" class="no-underline hover:no-underline">
+                        <img src="https://source.unsplash.com/_AjqGGafofE/400x200" class="h-48 w-full rounded-t shadow">
+                        <div class="p-6 h-auto md:h-48">
+                            <p class="text-gray-600 text-xs md:text-sm">UNDERWATER</p>
+                            <div class="font-bold text-xl text-gray-900">Biolumini algae diatomeae ecology.</div>
+                            <p class="text-gray-800 font-serif text-base mb-5">
+                                Lorem ipsum dolor sit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
+                            </p>
+                        </div>
+                        <div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
+                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">4 MIN READ</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="w-full md:w-1/3 px-2 pb-12">
+                <div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
+                    <a href="#" class="no-underline hover:no-underline">
+                        <img src="https://source.unsplash.com/DEa8_vxKlEo/400x200" class="h-48 w-full rounded-t shadow">
+                        <div class="p-6 h-auto md:h-48">
+                            <p class="text-gray-600 text-xs md:text-sm">FOREST</p>
+                            <div class="font-bold text-xl text-gray-900">What is life but a teardrop in the eye of infinity?</div>
+                            <p class="text-gray-800 font-serif text-base mb-5">
+                                Mollis pretium integer eros et dui orci, lectus nec elit sagittis neque. Dignissim ac nullam semper aliquet volutpat, ut scelerisque.
+                            </p>
+                        </div>
+                        <div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
+                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <p class="text-gray-600 text-xs md:text-sm">7 MIN READ</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+</div>
+
+<footer class="bg-gray-900">
+    <div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
+
+        <div class="w-full mx-auto flex flex-wrap items-center">
+            <div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
+                <a class="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#">
+                    <span class="text-base text-gray-200">Ghostwind</span>
+                </a>
+            </div>
+            <div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
+                <ul class="list-reset flex justify-center flex-1 md:flex-none items-center">
+                    <li>
+                        <a class="inline-block py-2 px-3 text-white no-underline" href="index.html">HOME</a>
+                    </li>
+                    <li>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                    </li>
+                    <li>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                    </li>
+                    <li>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+
+
+    </div>
+</footer>
+
+<script>
+    /* Progress bar */
+    //Source: https://alligator.io/js/progress-bar-javascript-css-variables/
+    var h = document.documentElement,
+          b = document.body,
+          st = 'scrollTop',
+          sh = 'scrollHeight',
+          progress = document.querySelector('#progress'),
+          scroll;
+    var scrollpos = window.scrollY;
+    var header = document.getElementById("header");
+
+    document.addEventListener('scroll', function() {
+
+        /*Refresh scroll % width*/
+        scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
+        progress.style.setProperty('--scroll', scroll + '%');
+
+        /*Apply classes for slide in bar*/
+        scrollpos = window.scrollY;
+
+    if(scrollpos > 100){
+      header.classList.remove("hidden");
+      header.classList.remove("fadeOutUp");
+      header.classList.add("slideInDown");
+    }
+    else {
+      header.classList.remove("slideInDown");
+      header.classList.add("fadeOutUp");
+      header.classList.add("hidden");
+    }
+
+    });
+
+// scroll to top
+const t=document.querySelector(".js-scroll-top");if(t){t.onclick=()=>{window.scrollTo({top:0,behavior:"smooth"})};const e=document.querySelector(".scroll-top path"),o=e.getTotalLength();e.style.transition=e.style.WebkitTransition="none",e.style.strokeDasharray=`${o} ${o}`,e.style.strokeDashoffset=o,e.getBoundingClientRect(),e.style.transition=e.style.WebkitTransition="stroke-dashoffset 10ms linear";const n=function(){const t=window.scrollY||window.scrollTopBtn||document.documentElement.scrollTopBtn,n=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight),s=Math.max(document.documentElement.clientHeight,window.innerHeight||0);var l=o-t*o/(n-s);e.style.strokeDashoffset=l};n();const s=100;window.addEventListener("scroll",(function(e){n();(window.scrollY||window.scrollTopBtn||document.getElementsByTagName("html")[0].scrollTopBtn)>s?t.classList.add("is-active"):t.classList.remove("is-active")}),!1)}
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
-- 
cgit v1.2.3