-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (155 loc) · 8.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!doctype html>
<html lang="ja-JP">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="UTF-8" />
<title>Designer meets Programming == デザイナー向けプログラミング勉強会</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="Imagetoolbar" content="no" />
<meta property="og:site_name" content="Designer meets Programming (DmP)" />
<meta property="og:type" content="website" />
<meta property="og:title" content="DmP : デザイナー向けプログラミング勉強会" />
<meta property="og:image" content="http://designer-meets-programming.github.io/img/img_ogp.png" />
<meta property="og:description" content="DmPは、デザイナーをはじめとした「プログラミング初心者」のための勉強会です。ハンズオン勉強会や、プログラミング相談会などを大阪で開催しています。" />
<meta property="og:url" content="http://designer-meets-programming.github.io" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="540977562636705" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="css/style.css" /> -->
<style>
#header { margin:0 0 50px; padding:50px 0 70px; background:#0ac; border-bottom:1px solid #fff; text-align:center; }
#header h1 { font-size:2em; font-weight:200; letter-spacing:0.05em; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5); color:#fff; }
#content h2, #content h3 { text-align:center; }
#footer { text-align:center; background:#eee; border-top:1px solid #fff; color:#888; }
#link-footer li:first-child { border-left:none; }
.log-table th { text-align:center; vertical-align:middle; }
.log-table td { vertical-align:middle; }
td.cell-icon { text-align:center; }
.cell-icon img { width:24px; }
#btn-social li {width: 100px;}
@media (max-width:767px) {
#header, #footer { margin-right:-20px; margin-left:-20px; }
#header { margin-bottom:20px; padding:30px 0; }
#header #logo img { width:50px; }
#header h1 { margin:10px 0 0; font-size:1.2em; line-height:1.2; }
#content h2, #content h3 { font-size:1.5em; line-height:1.4; }
.log-table { font-size:80%; }
#schedule { margin:30px 0; }
#footer { margin:30px 0 0; padding:20px 0; font-size:80%; }
#footer p, #footer ul { margin-bottom:0; }
}
@media (min-width:768px) {
.container-narrow { max-width:700px; margin:0 auto; }
#schedule { margin:50px 0; }
#footer { margin:50px 0 0; padding:30px 0; }
.log-table .date { width: 10%; }
.log-table .theme { width: 74%; }
.log-table .outline { width: 8%; }
.log-table .resume { width: 8%; }
}
</style>
</head>
<body>
<div class="jumbotron masthead" id="header">
<div class="container-narrow">
<span id="logo"><img src="img/main.svg" alt="logo mark" /></span>
<h1>Designer meets Programming</h1>
</div><!-- /.container -->
</div><!-- /#header -->
<div id="content" class="container-narrow">
<section id="lead">
<h2>デザイナー向けプログラミング勉強会</h2>
<p>DmP (Designer meets Programming) は、デザイナーをはじめとした「プログラミング初心者」のための勉強会です。テーマに沿ったハンズオン形式のプログラム勉強会や、プログラミングのことを相談・解決する会を開催します。<br />
プログラムを知りたい・作ってみたい方、一緒に勉強しませんか？</p>
<p class="well">デザイナー以外の方も参加できます。HTML/CSSメインでその先になかなか踏み出せないコーダーや、普段の業務では直接コードを書く機会がないディレクターなどでも、もちろんOKですよ (｡ゝω・｡)v</p>
<p class="well"><span class="text-error">PmD = プログラマー向けデザイン勉強会も、ときどきあるかも。</span><br />
デザインのことをちょっと勉強してみたいプログラマーさんも、待っててね★</p>
</section><!-- /#lead -->
<section id="schedule">
<h3>{ これからの予定 }</h3>
<table class="table table-bordered log-table">
<thead>
<tr>
<th class="date">日付</th>
<th class="theme">テーマ</th>
<th class="outline">概要</th>
<th class="resume">資料</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td></td>
<td>（調整中）</td>
<td class="cell-icon">-</td>
<td class="cell-icon">-</td>
</tr>
</tbody>
</table>
</section><!-- /#schedule -->
<section id="schedule">
<h3>{ これまでの記録 }</h3>
<table class="table table-bordered log-table">
<thead>
<tr>
<th class="date">日付</th>
<th class="theme">テーマ</th>
<th class="outline">概要</th>
<th class="resume">資料</th>
</tr>
</thead>
<tbody>
<tr>
<td>2014.08.23</td>
<td>DmP Vol.4 : ドロワーについて勉強してみよう</td>
<td class="cell-icon"><a href="http://dmp.connpass.com/event/7450/"><img src="img/ico_connpass.svg" alt="connpass" class="icon-link" /></a></td>
<td class="cell-icon"><a href="https://github.com/Designer-meets-Programming/files-vol4-drower"><img src="img/ico_github.svg" alt="GitHub" class="icon-link" /></a></td>
</tr>
<tr>
<td>2014.02.22</td>
<td>DmP Vol.3 : jQueryについて改めて理解してみよう</td>
<td class="cell-icon"><a href="http://connpass.com/event/4979/"><img src="img/ico_connpass.svg" alt="connpass" class="icon-link" /></a></td>
<td class="cell-icon"><a href="https://github.com/Designer-meets-Programming/files-vol3-jQuery"><img src="img/ico_github.svg" alt="GitHub" class="icon-link" /></a></td>
</tr>
<tr>
<td>2013.11.16</td>
<td>DmP Vol.2 : CSSのメタ言語Sassを触ってみよう！</td>
<td class="cell-icon"><a href="http://connpass.com/event/3840/"><img src="img/ico_connpass.svg" alt="connpass" class="icon-link" /></a></td>
<td class="cell-icon"><a href="https://github.com/Designer-meets-Programming/files-vol2-Sass"><img src="img/ico_github.svg" alt="GitHub" class="icon-link" /></a></td>
</tr>
<tr>
<td>2013.09.21</td>
<td>PmD Vol.1 : プログラマー向けデザイン勉強会（セミナー形式）</td>
<td class="cell-icon"><a href="http://connpass.com/event/3086/"><img src="img/ico_connpass.svg" alt="connpass" class="icon-link" /></a></td>
<td class="cell-icon"><a href="https://github.com/Designer-meets-Programming/data-PmD01"><img src="img/ico_github.svg" alt="GitHub" class="icon-link" /></a></td>
</tr>
<tr>
<td>2013.08.02</td>
<td>DmP Vol.1 : 外部サイトのRSSを取得してサイトに表示してみよう</td>
<td class="cell-icon"><a href="http://connpass.com/event/2884/"><img src="img/ico_connpass.svg" alt="connpass" class="icon-link" /></a></td>
<td class="cell-icon"><a href="https://github.com/Designer-meets-Programming/files-vol1-RSS"><img src="img/ico_github.svg" alt="GitHub" class="icon-link" /></a></td>
</tr>
</tbody>
</table>
</section><!-- /#schedule -->
</div><!-- /#content -->
<footer id="footer">
<ul id="btn-social" class="inline">
<li><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a></li>
<li><div class="fb-like" data-href="http://designer-meets-programming.github.io/" data-send="false" data-layout="button_count" data-width="110" data-show-faces="false"></div></li>
</ul>
<p>Copyright © DmP ( organizers: <a href="https://twitter.com/kamiyam"><img src="img/ico_kamiyam.png" alt="kamiyam"></a> <a href="https://twitter.com/yokotak0527"><img src="img/ico_yokotak0527.png" alt="yokotak0527"></a> <a href="https://twitter.com/awayuki"><img src="img/ico_awayuki.png" alt="awayuki"></a> )</p>
<ul id="link-footer" class="inline">
<li><a href="https://github.com/Designer-meets-Programming">GitHub</a></li><li><a href="https://www.facebook.com/dmposaka">Facebook</a></li>
</ul>
</footer><!-- /.footer -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=540977562636705";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>