codepenの以下のカードを複数並べたいです

Question

下のサイトで紹介されている紹介ページ（カード）を複数横に並べて、
僕たちのページに導入したいのですが、どの部分をどのように書き換えればよいのかわかりません。
分かる方いらっしゃればよろしくお願いいたします。

http://codepen.io/designcouch/pen/sqxdi

横並びはできるのですが、各々に対してクリックイベントが効きません。
どのようにすればよろしいでしょうか？

引き続きよろしくお願いいたします。

Answer 1

• リンク先はSCSSで記述されているので、cssに変換します（View Compiledボタン）
• opacityでフェードイン処理が施されているので、これをコメントアウトします

そうすると、生のcssとして編集可能なソースコードが出来ます。

https://jsfiddle.net/59naga/x0Ld47ga/1/

---

• タグを<div id="card">のみにします

https://jsfiddle.net/59naga/x0Ld47ga/2/

---

• 左右中央寄せを無効にします

https://jsfiddle.net/59naga/x0Ld47ga/3/

/*42: margin: 0 auto;*/

---

• <div id="card">を複数並べます。
• このままだと周り込まないので、#cardの表示形式をinline-blockに変更します。

#card {
  height: 400px;
  width: 300px;
  /*margin: 0 auto;*/
  position: relative;
  z-index: 1;
  perspective: 600px;
  display: inline-block;/* add */
}

https://jsfiddle.net/59naga/x0Ld47ga/4/

Comments

[jimmypage0311]

ご回答ありがとうございます。

横並びの件詳しく解説ありがとうございます。
クリックイベントも導入したいのですがどのようにすればよろしいでしょうか？
私の説明不足で申し訳ございません。

よろしければ、引き続きよろしくお願いいたします。