CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。
<section class="CG2-customers">
<h1>団体購読も承っております</h1>
<p>CodeGridは、すでにいくつもの会社で団体購読いただき、好評を得ています。</p>
<div class="CG2-customers__logos">
<ul>
<li><img src="http://img.pxgrid.net/109x66" alt="" width="109" height="66"></li>
<li><img src="http://img.pxgrid.net/158x79" alt="" width="158" height="79"></li>
<li><img src="http://img.pxgrid.net/158x61" alt="" width="158" height="61"></li>
<li><img src="http://img.pxgrid.net/140x80" alt="" width="140" height="80"></li>
<li><img src="http://img.pxgrid.net/196x58" alt="" width="196" height="58"></li>
<li><img src="http://img.pxgrid.net/176x69" alt="" width="176" height="69"></li>
<li><img src="http://img.pxgrid.net/216x65" alt="" width="216" height="65"></li>
</ul>
</div>
</section>
CG2-seriesList__article--unread
追加する<span class="CG2-icon-lock"></span>
を使う。CG2-icon--colored
は付与しない<div class="CG2-seriesList">
<div class="CG2-seriesList__inner">
<div class="CG2-seriesList__item">
<div class="CG2-seriesList__itemHeader">
<div class="CG2-seriesList__itemCategory">
<a href="#"><span class="CG2-icon-cat-architecture"></span></a>
</div>
<div class="CG2-seriesList__itemTitle">
<a href="javascript:alert( 'シリーズ一覧へ' );">
<div class="CG2-seriesList__itemTitleText">Web Fonts 自由自在</div>
</a>
</div>
<div class="CG2-seriesList__itemUtil">
<ul>
<li><a href="#"><span class="CG2-icon-list"></span></a></li>
<li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
</ul>
</div>
</div>
<div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
<div class="CG2-seriesList__articles">
<div class="CG2-seriesList__article CG2-seriesList__article--unread">
<a href="#">
<div class="CG2-seriesList__articleIcon">
<span class="CG2-icon-unlock CG2-icon--colored"></span>
</div>
<div class="CG2-seriesList__articleOrder">第3回</div>
<div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
<div class="CG2-seriesList__articleDate">4/16</div>
</a>
</div>
<div class="CG2-seriesList__article">
<a href="#">
<div class="CG2-seriesList__articleIcon">
<span class="CG2-icon-unlock CG2-icon--colored"></span>
</div>
<div class="CG2-seriesList__articleOrder">第2回</div>
<div class="CG2-seriesList__articleTitle">gulpで生成を自動化</div>
<div class="CG2-seriesList__articleDate">4/9</div>
</a>
</div>
<div class="CG2-seriesList__article">
<a href="#">
<div class="CG2-seriesList__articleIcon">
<span class="CG2-icon-unlock CG2-icon--colored"></span>
</div>
<div class="CG2-seriesList__articleOrder">第1回</div>
<div class="CG2-seriesList__articleTitle">Webアプリの利用</div>
<div class="CG2-seriesList__articleDate">4/2</div>
</a>
</div>
</div>
<div class="CG2-seriesList__authors">
<a href="#">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</a>
<a href="#">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</a>
<a href="#">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</a>
</div>
</div>
<!-- .CG2-seriesList__item 繰り返し -->
<div class="CG2-seriesList__itemMore"><a href="#">more</a></div>
</div>
</div>
<div class="CG2-seriesList">
<div class="CG2-seriesList__inner">
<div class="CG2-seriesList__item CG2-seriesList__item--fullWidth">
<div class="CG2-seriesList__itemHeader">
<div class="CG2-seriesList__itemCategory">
<a href="#"><span class="CG2-icon-cat-architecture"></span>実践</a>
</div>
<div class="CG2-seriesList__itemTitle">Web Fonts 自由自在</div>
<div class="CG2-seriesList__itemUtil">
<ul>
<li><a href="#"><span class="CG2-icon-list"></span></a></li>
<li><button class="CG2-seriesList__itemUtilButton--favAdded" onclick="javascript:alert('added to fav list');"><span class="CG2-icon-star"></span></button></li>
</ul>
</div>
</div>
<div class="CG2-seriesList__coverImage CG2-seriesList__coverImage--blurry" style="background-image: url( '/build/img/_01.jpg' )"></div>
<div class="CG2-seriesList__articles">
<div class="CG2-seriesList__article">
<a href="#">
<div class="CG2-seriesList__articleIcon">
<span class="CG2-icon-unlock CG2-icon--colored"></span>
</div>
<div class="CG2-seriesList__articleOrder">第3回</div>
<div class="CG2-seriesList__articleTitle">アイコンの配置テクニック</div>
<div class="CG2-seriesList__articleDate">4/16</div>
</a>
</div>
</div>
<div class="CG2-seriesList__authors">
<a href="#">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</a>
<a href="#">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</a>
<a href="#">
<div class="CG2-seriesList__author">
<div class="CG2-seriesList__authorPic">
<img src="http://img.pxgrid.net/40x40" alt="" width="40" height="40">
</div>
<div class="CG2-seriesList__authorName">高津戸 壮 | フロントエンド・エンジニア</div>
</div>
</a>
</div>
</div>
<!-- .CG2-seriesList__item.CG2-seriesList__item--fullWidth 繰り返し -->
<div class="CG2-seriesList__itemMore"><a href="#">more</a></div>
</div>
</div>
![]() |
||
---|---|---|
購読料 (税込金額) |
|
|
購読料 | 自動継続 | 随時購入 |
無料購読期間 |
|
|
<div class="CG2-paymentTable">
<table>
<thead>
<tr>
<th></th>
<th><img src="/build/assets2/img/logos/paypal.svg" alt="PayPal" width="100" height="25"></th>
<th><img src="/build/assets2/img/logos/webmoney.png" alt="WebMoney" width="156" height="30"></th>
</tr>
</thead>
<tbody>
<tr>
<th>購読料<br><span class="CG2-paymentTable__annotation">(税込金額)</span></th>
<td>
<div class="CG2-paymentTable__priceList">
<ul>
<li>
<div class="CG2-paymentTable__priceLabel">月額</div>
<div class="CG2-paymentTable__priceValue">800</div>
<div class="CG2-paymentTable__priceUnit">円</div>
<div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
</li>
</ul>
</div>
</td>
<td>
<div class="CG2-paymentTable__priceList">
<ul>
<li>
<div class="CG2-paymentTable__priceLabel">月払い</div>
<div class="CG2-paymentTable__priceValue">800</div>
<div class="CG2-paymentTable__priceUnit">円</div>
<div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
</li>
<li>
<div class="CG2-paymentTable__priceLabel">年払い</div>
<div class="CG2-paymentTable__priceValue">9,600</div>
<div class="CG2-paymentTable__priceUnit">円</div>
<div class="CG2-paymentTable__priceAnnotation">(税込10,368円)</div>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<th>購読料</th>
<td>自動継続</td>
<td>随時購入</td>
</tr>
<tr>
<th>無料購読期間</th>
<td>
<div class="CG2-paymentTable__valueList">
<ul>
<li>
<span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
<span class="CG2-paymentTable__value">30</span>
<span class="CG2-paymentTable__valueUnit">日</span>
</li>
</ul>
</div>
</td>
<td>
<div class="CG2-paymentTable__valueList">
<ul>
<li>
<span class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</span>
<span class="CG2-paymentTable__valueText">なし</span>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="CG2-paymentLine">
<span class="CG2-paymentLine__label">月額</span>
<span class="CG2-paymentLine__value">800</span>
<span class="CG2-paymentLine__unit">円</span>
<span class="CG2-paymentLine__extra">(税込み864円)</span>
</div>