diff --git a/jpashop/src/main/java/com/example/jpashop/controller/HomeController.java b/jpashop/src/main/java/com/example/jpashop/controller/HomeController.java
new file mode 100644
index 00000000..5fe8a109
--- /dev/null
+++ b/jpashop/src/main/java/com/example/jpashop/controller/HomeController.java
@@ -0,0 +1,16 @@
+package com.example.jpashop.controller;
+
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@Slf4j
+public class HomeController {
+
+ @RequestMapping("/")
+ public String home() {
+ log.info("home controller");
+ return "home";
+ }
+}
diff --git a/jpashop/src/main/resources/static/css/jumbotron-narrow.css b/jpashop/src/main/resources/static/css/jumbotron-narrow.css
new file mode 100644
index 00000000..4b2d21c4
--- /dev/null
+++ b/jpashop/src/main/resources/static/css/jumbotron-narrow.css
@@ -0,0 +1,72 @@
+/* Space out content a bit */
+body {
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header,
+.marketing,
+.footer {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+/* Custom page header */
+.header {
+ border-bottom: 1px solid #e5e5e5;
+}
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+ margin-top: 0;
+ margin-bottom: 0;
+ line-height: 40px;
+ padding-bottom: 19px;
+}
+/* Custom page footer */
+.footer {
+ padding-top: 19px;
+ color: #777;
+ border-top: 1px solid #e5e5e5;
+}
+/* Customize container */
+@media (min-width: 768px) {
+ .container {
+ max-width: 730px;
+ }
+}
+.container-narrow > hr {
+ margin: 30px 0;
+}
+/* Main marketing message and sign up button */
+.jumbotron {
+ text-align: center;
+ border-bottom: 1px solid #e5e5e5;
+}
+.jumbotron .btn {
+ font-size: 21px;
+ padding: 14px 24px;
+}
+/* Supporting marketing content */
+.marketing {
+ margin: 40px 0;
+}
+.marketing p + h4 {
+ margin-top: 28px;
+}
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+ /* Remove the padding we set earlier */
+ .header,
+ .marketing,
+ .footer {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ /* Space out the masthead */
+ .header {
+ margin-bottom: 30px;
+ }
+ /* Remove the bottom border on the jumbotron for visual effect */
+ .jumbotron {
+ border-bottom: 0;
+ }
+}
\ No newline at end of file
diff --git a/jpashop/src/main/resources/templates/fragments/bodyHeader.html b/jpashop/src/main/resources/templates/fragments/bodyHeader.html
new file mode 100644
index 00000000..02f5de50
--- /dev/null
+++ b/jpashop/src/main/resources/templates/fragments/bodyHeader.html
@@ -0,0 +1,8 @@
+
+
+
\ No newline at end of file
diff --git a/jpashop/src/main/resources/templates/fragments/footer.html b/jpashop/src/main/resources/templates/fragments/footer.html
new file mode 100644
index 00000000..156326b3
--- /dev/null
+++ b/jpashop/src/main/resources/templates/fragments/footer.html
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file
diff --git a/jpashop/src/main/resources/templates/fragments/header.html b/jpashop/src/main/resources/templates/fragments/header.html
new file mode 100644
index 00000000..d29c7327
--- /dev/null
+++ b/jpashop/src/main/resources/templates/fragments/header.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+ Hello, world!
+
\ No newline at end of file
diff --git a/jpashop/src/main/resources/templates/home.html b/jpashop/src/main/resources/templates/home.html
new file mode 100644
index 00000000..5f0f9f95
--- /dev/null
+++ b/jpashop/src/main/resources/templates/home.html
@@ -0,0 +1,31 @@
+
+
+
+ Hello
+
+
+
+
+
+
\ No newline at end of file