diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bd07d84
--- /dev/null
+++ b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang=ja>
+<head>
+  <meta charset="UTF-8" />
+  <title>CSS training</title>
+  <link rel="stylesheet" href="style2.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
+</head>
+<body>
+  <div class="container">
+    <div class="inner">
+      <a href="#">
+        <img src="http://lorempixel.com/250/350/abstract/1" alt="" class="pic" />
+      <div class="text">
+        <p class="title">Lorem Ipsum</p>
+        <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
+      </div>
+      </a>
+    </div>
+  </div>
+  <div class="container">
+    <div class="inner">
+      <a href="#">
+        <img src="http://lorempixel.com/250/350/abstract/2" alt="" class="pic" />
+        <div class="text">
+          <p class="title">lorem ipsum</p>
+          <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div class="container">
+    <div class="inner">
+      <a href="#">
+        <img src="http://lorempixel.com/250/350/abstract/3" alt="" class="pic" />
+        <div class="text">
+          <p class="title">lorem ipsum</p>
+          <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
+        </div>
+      </a>
+    </div>
+  </div>
+  <div class="container">
+    <div class="inner">
+      <a href="#">
+        <img src="http://lorempixel.com/250/350/abstract/4" alt="" class="pic" />
+        <div class="text">
+          <p class="title">lorem ipsum</p>
+          <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iure quisquam accusamus animi explicabo rerum ex nam possimus laborum vero, voluptatum nisi repellat architecto illum cum beatae eos deserunt nostrum.</p>
+        </div>
+      </a>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/style2.css b/style2.css
new file mode 100644
index 0000000..5f28270
--- /dev/null
+++ b/style2.css
@@ -0,0 +1 @@
+﻿
\ No newline at end of file
