java-women · mahya8585 · May 28, 2016 · May 28, 2016 · Aug 27, 2016 · Sep 3, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+.idea/
diff --git a/css/bgfixed.css b/css/bgfixed.css
@@ -0,0 +1,42 @@
+body, html{
+    /* important */
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    background-color: #DC103C;
+    font-family: "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN";
+}
+
+.fixed-bg {
+    min-height: 100%;
+    background-size: cover;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.container-color {
+    background-color: #DC103C;
+    color: #FFFFFF;
+    font-size: 18pt;
+}
+
+.fixed-bg#bg-top {
+  background-image: url("../img/bg-coffee.jpg");
+}
+.fixed-bg#bg-profile {
+  background-image: url("../img/bg-session.jpg");
+}
+.fixed-bg#bg-sns {
+  background-image: url("../img/bg-pc.jpg");
+}
+.fixed-bg#bg-event {
+  background-image: url("../img/bg-helloween.jpg");
+}
+.fixed-bg#bg-staff {
+  background-image: url("../img/bg-staff.jpg");
+}
+
+.scrolling-bg {
+    min-height: 100%;
+}
diff --git a/css/decoration.css b/css/decoration.css
@@ -0,0 +1,26 @@
+
+a {
+    font-weight: 700;
+    padding: 10px 0;
+    color: white;
+    text-decoration: none;
+}
+
+a:hover {
+    color: hotpink;
+}
+
+.container {
+    padding: 70px;
+}
+
+.title {
+    font-weight: bold;
+    font-size: 150%;
+}
+
+footer {
+    color: lightpink;
+    text-align: center; 
+    margin: 10px;   
+}
diff --git a/img/bg-coffee.jpg b/img/bg-coffee.jpg
diff --git a/img/bg-helloween.jpg b/img/bg-helloween.jpg
diff --git a/img/bg-pc.jpg b/img/bg-pc.jpg
diff --git a/img/bg-session.jpg b/img/bg-session.jpg
diff --git a/img/bg-staff.jpg b/img/bg-staff.jpg
diff --git a/index.html b/index.html
@@ -1 +1,70 @@
-準備中
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="./css/bgfixed.css">
+    <link rel="stylesheet" type="text/css" href="./css/decoration.css">
+    <title>Welcome to Java女子部</title>
+</head>
+<body>
+
+    <div class="fixed-bg" id="bg-top"></div>
+    <div class="scrolling-bg container-color">
+        <div class="container">
+            <div class="title"> Java女子部TOP</div>
+            <p>Welcom to our site的な何か。このコンテナの右下にJava女子部ロゴを入れようと思うよ。</p>
+        </div>
+    </div>
+
+    <div class="fixed-bg" id="bg-profile"></div>
+
+    <div class="scrolling-bg container-color">
+        <div class="container">
+            <div class="title">Java女子部とは</div>
+            <p>よこなの熱い思いが書かれるよ。</p>
+        </div>
+    </div>
+
+    <div class="fixed-bg" id="bg-sns"></div>
+
+    <div class="scrolling-bg container-color">
+        <div class="container">
+            <div class="title">SNS</div>
+            <ul>
+                <li><a href="https://javajo.doorkeeper.jp/" target="_blank">DoorKeeper</a></li>
+                <li><a href="https://www.facebook.com/groups/javajo/" target="_blank">FacebookGroup</a></li>
+                <li><a href="https://twitter.com/java_women" target="_blank">Twitter:@java-women</a> #javajo</li>
+                <li>お問い合わせはDoorKeeperの<a href="https://javajo.doorkeeper.jp/contact/new" target="_blank">「主催者にお問い合わせ」</a>からよろしくお願いします。</li>
+                <li>各SNSのアイコンを作りますよ。文字に合わせて白で作ろうかな。</li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="fixed-bg" id="bg-event"></div>
+
+    <div class="scrolling-bg container-color">
+        <div class="container">
+            <div class="title">PAST EVENT</div>
+            <ul>
+                <li>もくもく会</li>
+                <li>ハロウィンLT</li>
+                <li>クリスマスイベント</li>
+                <li>座談会</li>
+                <li>ミニプロジェクト開発</li>
+                <li>受講式勉強会</li>
+            </ul>
+            <div>過去のイベントは<a href="https://javajo.doorkeeper.jp/events/past" target="_blank">こちら</a></div>
+        </div>
+    </div>
+
+    <div class="fixed-bg" id="bg-staff"></div>
+
+    <div class="scrolling-bg container-color">
+        <div class="container">
+            <div class="title">すたっふ</div>
+            <p>部長から登録順に。TwitterアイコンとTwitterID</p>
+        </div>
+    </div>
+    <footer>©Java女子部. All rights reserved.</footer>
+</body>
+</html>