IBM think 2019 のウェブサイト

まずヘッダー。header 属性で Think2019 と What to expect , How to attend, Registration opens in X days を定義している。そういう構成。

映像をはめ込んでいるが、それはどうやっているのか？ 実は２層になっている。それを div でまとめている。 一番上は文字とSVG。文字は h2 や p でつくっていて特記するほどではない。z-index で上に来るようになっている。ついでに書くと js で slide-in するようになっている。data-trigger="slide-in" がそれ。class にも slide-in はあるが slide in の動作には関係ない（なかった）。 そして、play/pause ボタンのために SVG がかかれている。absolute で bottom:2rem と下に来るようになっている。

これらは small, mid, large のサイズで hide/display を切り替えている。このケースでは small の時に hide。

したの div に mp4 を配置している。sm (small サイズ。つまりスマホ)のときは動画は表示しない。

ここまでが一個目のsection。div で ibm-grid という名称の class とかつかっているのが特徴。

.ibm-grid {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  position: relative;
}

どうも、ibm-col-group というのが別のページにはあったのだが、名称が変わったか、新たに作られたかしたらしい。

次の section は Join us... で、これも sm, md, lg でサイズで表示が微妙に変わる。

更に次の section は Expand your ... でこれもサイズで配置が変わる。

[ ]

基本的に以下これの繰り返しだ。