bulmaで、レスポンシブルかつ最低限必要なページを作成する

#動機
webアプリに必要なビデオやジャイロを許可する前段階のタイトル画面が必要になり
簡単に作る方法を探していたところ、bulma.cssが見つかりました。
cssだけで作られているので、学習コストが低くそうなので使ってみました。

#最低限必要な項目
タイトル
概要
スタートボタン
問合せ

#テンプレート
https://bulmatemplates.github.io/bulma-templates/templates/hello-parallax.html　
を文言等を適宜変え

#スクリプト
問合せは、formタグとname属性つければ送信できます

hello-parallax.html

<form method="POST" action="/sendmail.php" id="mailform">
<div class="column is-6">
 <div class="field">
              <label class="label">Email</label>
              <div class="control">
                <input id="email"  name="email" class="input is-medium" type="email" >
              </div>
            </div>
</div>

    <div class="field">
              <label class="label">内容</label>
              <div class="control">
                <textarea id="mailbody" name="body"　class="textarea" placeholder=""></textarea>
              </div>
            </div>
           
            <br>
            <div class="field is-grouped">
              <div class="control">
                <button id="submit" class="button is-white is-rounded is-outlined">Submit</button>
              </div>
            </div>
          </div>
 </form>

#ウインドウ幅を狭くすると、問合せのマージンがなくなってしまったので対処

hello-parallax.css

body {
  background: rgb(48, 48, 48);
}

.cta {
  height: 800px;
  border-top: 10px solid rgb(48, 48, 48);
  margin-left: 25px;
  margin-right: 25px;
}

つづき
https://qiita.com/im02kai/items/4a7e4f974b65a0af171d