IBM think 2019 のウェブサイト
まずヘッダー。header 属性で Think2019 と What to expect , How to attend, Registration opens in X days を定義している。そういう構成。
映像をはめ込んでいるが、それはどうやっているのか? 実は2層になっている。それを 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 ... でこれもサイズで配置が変わる。
[ ]
基本的に以下これの繰り返しだ。