カテゴリー: プログラミング

body {
  background: linear-gradient( 
    black 0%, black 20%,
     white 20%, white 30%, 
     black 30%, black 60%,  
     white 60%, white 80%,  
     black 80%, black 90%, 
     white 90%, white 100%,
     white 100%);
}

    <header>
      <div class="hdr">
        <div class="logo">
          <img class="logoimg" src="img/airbnb_logo.png" alt="airbnbのロゴ">
        </div>
        <div class="sbtn">
          <a href="" class="starthosting">ホスティングをはじめる</a>
        </div>
      </div>
    </header>

.logoimg {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
}

.starthosting {
  width: 300px;
  height: 50px;
  background-color: rgb(240, 60, 90);
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 100vh;
  position: absolute;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;

    <div class="container">
      <div class="hosting">
        <h1>ホスティングこそ<br>まさにAirbnbが<br>Airbnbである理由</h1>
      </div>
      <div class="movie">
        動画
      </div>
    </div>

.container {
  display: flex;
  margin: 0;
}

.hosting {
  width: 100%;
  height: 300px;
  padding: 300px 50px;
  margin: 0;
}

.movie {
  width: 100%;
  height: 900px;
}

    <div class="container">
      <div class="item">
        <img src="img/hosting1.jpg">
        <div>お部屋をホスティングしたことで私の人生は変わり、思い出に残る経験や出会いに恵まれました。</div>
        <img class="reka" src="img/reka.png">
        <div>ミラノのホスト</div>
      </div>
      <div class="item">
        <img src="img/hosting2.jpg">
        <div>自宅にゲストを迎え、ホスティングすることで、起業家として経済的に自由な道を切り開くことができました。</div>
        <img class="darrel" src="img/darrel.png">
        <div>アトランタのホスト</div>
      </div>
      <div class="item">
        <img src="img/hosting3.jpg">
        <div>パスタ作り体験のホスティングを通じて、文化を生かし続けられています。</div>
        <img class="nerina" src="img/rerina.png">
        <div>パロンバーラ・サビーナのホスト</div>
      </div>
      <div class="item">
        <img src="img/hosting4.jpg">
        <div>Airbnbは、「自分の家でゲストをもてなす」という情熱を仕事に変える機会を与えてくれました。</div>
        <img class="clair" src="img/clair.png">
        <div>チェンマイのホスト</div>
      </div>
      <div class="item">
        <img src="img/hosting5.jpg">
        <div>ベドウィンのテントにゲストを受け入れることで、世界中の人たちに出会うことができました。</div>
        <img class="mohammed" src="img/mohammed.png">
        <div>ワディ・ラムのホスト</div>
      </div>
      <div class="item">
        <img src="img/hosting6.jpg">
        <div>ゲストが自然や大切な人とつながれるエコハウスをホスティングすることが大好きです。</div>
        <img class="marko" src="img/marko.png">
        <div>パラチのホスト</div>
      </div>
    </div>

.container {
  width: 100%;
  overflow: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  margin: 0;
  color: white;
}

.item {
  margin: 50px;
  float: none;
  scroll-snap-align: start;
  font-size: 20px;
}

    <div class="menu">
      <h2>お部屋のタイプは？</h2>
      <div class="room">
        <div class="room-title">まるまる貸切</div>
        <div class="sub-room">
          <ul>
            <li>まるまる貸切</li>
            <li>個室</li>
            <li>シェアルーム</li>
          </ul>
        </div>
      </div>

.room, .guest, .place {
  width: 500px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: auto;
}

.sub-room, .sub-guest, .sub-place {
  display: none;
}

.room:hover .sub-room {
  display: block;
}

.guest:hover .sub-guest {
  display: block;
}

.place:hover .sub-place {
  display: block;
}

<div>
      <table class="link">
        <thead>
          <th>企業情報</th><th>コミュニティ</th><th>ホスト</th><th>サポート</th>
        </thead>
        <tr>
          <td>Airbnbのご利用方法</td><td>ダイバーシティ＆ビロンギング</td><td>宿泊をホストする</td><td>Airbnbの新型コロナウイルスに対する取り組み</td>
        </tr>
        <tr>
          <td>ニュースルーム</td><td>アクセシビリティ対応</td><td>オンライン体験をホストする</td><td>ヘルプセンター</td>
        </tr>
        <tr>
          <td>株主・投資家のみなさまへ</td><td>Airbnbアソシエイト</td><td>体験をホストする</td><td>キャンセルオプション</td>
        </tr>
        <tr>
          <td>Airbnb Plus</td><td>ゲストの紹介</td><td>責任あるホスティング</td><td>近隣コミュニティサポート</td>
        </tr>
        <tr>
          <td>Airbnb Luxe</td><td>Airbnb.org</td><td>リソースセンター</td><td>信頼＆安全</td>
        </tr>
        <tr>
          <td>HotelTonight</td><td></td><td>コミュニティセンター</td><td></td>
        </tr>
        <tr>
          <td>Airbnbビジネスプログラム</td><td></td><td></td><td></td>
        </tr>
        <tr>
          <td>ホストのおもてなしがもたらす、特別な旅</td><td></td><td></td><td></td>
        </tr>
        <tr>
          <td>採用情報</td><td></td><td></td><td></td>
        </tr>
        <tr>
          <td>共同創業者からの手紙</td><td></td><td></td><td></td>
        </tr>
      </table>
    </div>
    

   <footer>
      <div class="footer">
        <div class="info">
          <p>Airbnb Global Services Limited<br>観光庁長官(01)第S00001号(2018年6月15日-2023年6月14日)<br>©2021 Airbnb, Inc.・プライバシー・利用規約・サイトマップ・企業情報</p>
        </div>
        <div class="lang-money">
          <p><a>日本語(JP)　￥JPY</a></p>
        </div>
        <div class="sns">
          <p><a>F</a><a>T</a><a>I</a></p>
        </div>
      </div>
    </footer>

.footer {
  border-top: solid 1px black;
  display: flex;
}

.lang-money {
  margin: 0 0 0 auto;
}

.sns {
  margin: 0 0 0 auto;
}