diff --git a/workshops/app.css b/workshops/app.css
new file mode 100644
index 0000000..cb71cee
--- /dev/null
+++ b/workshops/app.css
@@ -0,0 +1,72 @@
+.workshops {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+}
+.workshops-row {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+}
+
+.workshop {
+ flex: 1 1;
+ margin: 0 20px 80px;
+}
+.workshop-inner {
+ width: 260px;
+}
+.workshop .workshop-title {
+ margin: 0 0 10px;
+ font-size: 20px;
+ font-weight: bold;
+ text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+}
+.workshop .workshop-description {
+ position: relative;
+ height: 260px;
+ overflow: hidden;
+ box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
+}
+.workshop .workshop-description .workshop-image {
+ width: 260px;
+ height: 260px;
+ background: #eee;
+ border: 0;
+}
+.workshop .workshop-description .workshop-description-text {
+ position: absolute;
+ bottom: -80px;
+ transition: bottom 0.1s linear;
+ left: 0;
+ right: 0;
+ height: 80px;
+ background: rgba(255,255,255,0.8);
+ padding: 5px 10px;
+ margin: 0;
+ font-size: 14px;
+ box-sizing: border-box;
+}
+.workshop .workshop-description:hover .workshop-description-text {
+ bottom: 0;
+}
+.workshop .workshop-navs {
+ margin: 20px 0 0;
+}
+.workshop .workshop-navs button {
+ background: #8C6450;
+ box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
+ text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
+ outline: 0;
+ border: 0;
+ color: white;
+ padding: 5px 10px;
+ font-size: 14px;
+}
+.workshop .workshop-navs button:first-child {
+ background: #00A5BF;
+ float: left;
+}
+.workshop .workshop-navs button:last-child {
+ float: right;
+}
diff --git a/workshops/images/01.png b/workshops/images/01.png
new file mode 100644
index 0000000..4522fb3
Binary files /dev/null and b/workshops/images/01.png differ
diff --git a/workshops/images/02.png b/workshops/images/02.png
new file mode 100644
index 0000000..2973ac9
Binary files /dev/null and b/workshops/images/02.png differ
diff --git a/workshops/images/03.png b/workshops/images/03.png
new file mode 100644
index 0000000..f47f0c1
Binary files /dev/null and b/workshops/images/03.png differ
diff --git a/workshops/images/04.png b/workshops/images/04.png
new file mode 100644
index 0000000..480a1b9
Binary files /dev/null and b/workshops/images/04.png differ
diff --git a/workshops/images/05.png b/workshops/images/05.png
new file mode 100644
index 0000000..b098455
Binary files /dev/null and b/workshops/images/05.png differ
diff --git a/workshops/images/06.png b/workshops/images/06.png
new file mode 100644
index 0000000..aaf9f08
Binary files /dev/null and b/workshops/images/06.png differ
diff --git a/workshops/images/07.png b/workshops/images/07.png
new file mode 100644
index 0000000..f6bd5d7
Binary files /dev/null and b/workshops/images/07.png differ
diff --git a/workshops/images/08.png b/workshops/images/08.png
new file mode 100644
index 0000000..843b6f3
Binary files /dev/null and b/workshops/images/08.png differ
diff --git a/workshops/index.html b/workshops/index.html
new file mode 100644
index 0000000..3a59910
--- /dev/null
+++ b/workshops/index.html
@@ -0,0 +1,123 @@
+---
+layout: default
+title: Workshops
+---
+
+
+
+きょーくりっの教材
+
+
+
+
+
+
インベーダーゲーム
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
ブロック崩し
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
くるくる迷路
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
+
+
猫逃げ
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
カメ踏み
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
ハエ叩き
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
+
+
床塗りゲーム
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
落下物拾いゲーム
+
+
+
ここに内容紹介が入ります。
+
+
+
+
+
+
+
+