join.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>【参加方法】HTMLから入門してJavaScriptまで習得する会.mmc</title>

    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

<div class="container card">
  <h1>【参加方法】HTMLから入門してJavaScriptまで習得する会.mmc</h1>
　　<a class="img" href="https://techplay.jp/event/627753" target="_blank"><img src="http://i.imgur.com/AC76mZJ.png"></a>
  <h2>
    概要
  </h2>
  <p>
    こちらが用意した教材を利用して、学習を進めていただく会です。<br>
    それぞれに技術習得の目標を設定し、会への継続的な参加を通して各自目標を達成していただくことを目的としています。
  </p>
  <p>
    <b>会場の様子は以下で配信しています。</b><br>
    <a href="https://www.youtube.com/channel/UCBGqexNLjaoXxj3fS8JRVjw/live" target="_blank">https://www.youtube.com/channel/UCBGqexNLjaoXxj3fS8JRVjw/live</a>
  </p>
  <p>
    <b>会の終わりには懇親会を開きます。会場の方はもちろん、リモートで参加される方もぜひご参加ください！</b>
  </p><ul>
   <li>場所　：株式会社ネクストビート イベントスペース（https://www.nextbeat.co.jp/style）</li>
   <li>住所　：東京都品川区西五反田1-18-9 五反田NTビル7階</li>
   <li>時間　：17:00～（LTが終わり次第開催）</li>
   <li>参加費：500円</li>
  </ul>  
<p></p>
  <h2>
    タイムスケジュール
  </h2>
  <table>
    <tbody>
      <tr>
        <th>
          12:30
        </th>
        <td>
          開場・受付
        </td>
        <td></td>
      </tr>
      <tr>
        <th>
          13:00
        </th>
        <td>
          導入支援・講義
        </td>
        <td></td>
      </tr>
      <tr>
        <th>
          14:30
        </th>
        <td>
          各自作業開始
        </td>
        <td></td>
      </tr>
      <tr>
        <th>
          16:00
        </th>
        <td>
          進捗報告
        </td>
        <td>
          ※Slack上で行います
          | <br>※リモート参加の方で、懇親会に参加される場合は移動をしはじめてください。
        </td>
      </tr>
      <tr>
        <th>
          16:30
        </th>
        <td>
          LT大会(技術共有会)
        </td>
        <td>
          ※先輩エンジニアからのありがたいお話です
        </td>
      </tr>
      <tr>
        <th>
          17:00
        </th>
        <td>
          懇親会
        </td>
        <td>
          ※参加には500円必要です。
        </td>
      </tr>
    </tbody>
  </table>
  <p>
      <a href="https://techplay.jp/event/626092" target="_blank">もくもく会の詳細はこちら</a><br>
  </p>
  <h2>
    利用教材
  </h2>
  <p>
    <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a><br>
    参考：<a href="http://qiita.com/applideveloper/items/9ef1f8258f54982b8045" target="_blank">フルスタックなWeb開発が無料で学べるFreeCodeCamp</a>
  </p>
  <h2>
    ルール
  </h2>
  <h3>
   参加したらまずやること
  </h3>
  <b>
    SlackとGitHubに入ってください
  </b>
  <p>
    参加したら、Slackの下記チャンネルにてにて<pre>@channel 着席しました！</pre>とコメントをください<br>
    <a href="https://moqumoqu.slack.com/messages/C6C6B31R9/" target="_blank">Slack</a>
    ※登録がまだの方は<a href="https://goo.gl/forms/xAYvAl5j82jyrgoG3" target="_blank">こちら</a>
   </p>
  <p>
    GitHubのプロジェクトに、自己紹介をお願いします<br>
  <a href="https://github.com/MoquMoquCOM" target="_blank">https://github.com/MoquMoquCOM</a>
  </p>
  <h3>
    質問について
  </h3>
  <p>
    作業を進めていく中で、わからないところがあればSlackに質問を投げてください。<br>
   <b>質問のテンプレート</b>
   <pre>
     
###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
　　■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

```
エラーメッセージ
```

###該当のソースコード
```ここに言語を入力
ここにご自身が実行したソースコードを書いてください
```

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

   </pre>
  </p>
  <h2>
    その他質問
  </h2>
  <p>
    Slackにて、お気軽に質問ください！
  </p>
  <h3>メンターSlackアカウント一覧</h3>
  <ul>
    <li>こばしゅん → <a href="https://moqumoqu.slack.com/messages/@ksyunnnn/team/ksyunnnn/" target="_blank">@ksyunnnn</a></li>
    <li>いさお → <a href="https://moqumoqu.slack.com/messages/@isao/team/isao/" target="_blank">@isao</a></li>
    <li>相澤氏 → <a href="#" target="_blank">@</a></li>
  </ul>
  
</div>


</body>
<style type="text/css">
.container {
  font-family: 游ゴシック;
  font-size: 14px;
  max-width: 900px;
  margin: 1% auto;
  min-height: 300px;
  padding: 30px 5%;
  /* カスタマイズ */
}
.container a {
  color:#000;
}
.container span.num {
  font-weight: bold;
  font-size: 1.5em;
}
.container .gold {
  font-size: 1.5em;
}
.container pre {
  overflow-x: auto;
  margin: 0;
  padding: .6em 1.2em;
  border: 0;
  border-radius: 3px;
  background-color: #f7f7f7;
  white-space: pre;
  word-wrap: normal;
  font-size: .8em;
  font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
  line-height: 1.2;
}
.container b.red {
  color: red;
}
.container b.green {
  color: green;
}
.container b.blue {
  color: blue;
}
.card{
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4);
  transition: 0.6s;
}
.card:hover {
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.8);
  opacity: 0.9;
}
.container .box {
  min-width: 100px;
  max-width: 300px;
  padding: 10px;
}
.container img {
  height: 580px;
  width: 700px;
  object-fit: cover;
  object-position: top 	right;
}
.container i {
  margin-right: 5px;
  margin-left: 5px;
}
.container .works {
  margin-bottom: 10px;
  text-align: center;
}
@media screen and (min-width: 780px) {
  .container .works {
    width: 48%;
  }
  .container .works.left {
    float: left;
  }
  .container .works.right {
    float: right;
  }
}
.container .works img {
  height: 240px;
  object-fit: cover;
}
.container .clear:after {
  content: '';
  display: block;
  clear: both;
}
.container ul.member li {
  list-style: none;
}
b:before{
  font-family: FontAwesome;
  content: "\f0eb";
  padding: .2em;
}
a:after {
  font-family: FontAwesome;
  content: "\f08e";
  padding: .2em;
}
a.img:after {
  font-family: FontAwesome;
  content: "";
  padding: 0em;
}
h3:before {
  font-family: FontAwesome;
  content: "\f00c";
  padding: .2em;
}
h2:before {
  font-family: FontAwesome;
  content: "\f096";
  padding: .2em;
}
table {
  border: 1px solid;
}
table th {
  width: 100px;
}
table th, table td {
  padding: 1%;
  border-bottom: 1px solid #E1E2E1;
}
table tr:nth-child(6) > th, table tr:nth-child(6) > td {
  border-bottom: 0px solid;
}
</style>