ウェブ家の備忘録

ウェブデザイナーの備忘録

HTML : ボタンなど

HTML JavaScript CSS

後で消します

ここに表題を入れる

長いサブタイトル　長いサブタイトル　長いサブタイトル

or sign up with


<style>
  .top-wrapper {
    padding: 180px 0 100px 0;
    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sirakabaararagi/20200403/20200403042518.jpg);
    background-size: cover;
    color: white;
  }
  .container {
    width: 1170px;
    padding: 0 15px;
    margin: 0 auto;
  }
  a{
    text-decoration: none;
  }
  .btn-wrapper{
    margin:20px;
  }
  .btn{
    padding: 8px 24px;
    color:   white;
    display: inline-block;
    opacity: 0.8;
  }
  .signup{
    background-color:#239b76;
  }
  .facebook{
    background-color:#3b5998;
    margin-right:10px;/*ボタン右との間隔*/
  }
  .twitter{
    background-color:#55acee;
  }
</style>


<div class="top-wrapper">
  <div class="container">
    <h1>ここに表題を入れる</h1>
    <p>長いサブタイトル　長いサブタイトル　長いサブタイトル</p>
    
    <div class="btn-wrapper">
      <a href="#" class="btn signup">新規登録はこちら</a>
      <p>or sign up with</p>
      <a href="#" class="btn facebook">Facebookで登録</a>
      <a href="#" class="btn twitter">Twitterで登録</a>
    </div>
  </div>
</div>