Hero component

16783 ワード
テキストリンク
今日はheroコンポーネントを作りました.
制作結果は以下の通り.

コードを1つずつ復習しましょう.
まずは体の部分
<body>
    <header>
      <nav class="container">
        <div>LOGO</div>
        <div>NAVIGATION</div>
      </nav>

      <div class="header-container">
        <div class="header-container-inner">
          <h1>A healthy meal delivered to your door, every single day</h1>
          <p>
            The smart 365-days-per-year food subscription that will make you eat
            healthy again. Tailored to your personal tastes and nutritional
            needs
          </p>
          <a href="#" class="btn">Start eating well</a>
        </div>
      </div>
    </header>

    <section>
      <div class="container">
        <h2>Some random heading</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quaerat
          necessitatibus suscipit nobis, voluptas omnis ullam odio eaque neque
          amet unde voluptates obcaecati error illum soluta itaque perferendis
          molestiae iste?Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Sequi laborum est porro vel ex inventore veniam architecto,
          repellat, reprehenderit repellendus accusamus cupiditate libero harum
          pariatur velit! Nam laborum minima porro.
        </p>
      </div>
    </section>
  </body>
ロゴとnavingをnavで包む
最下部は断面で包まれています.
cssの部分を見てみましょう
 <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        font-family: "Rubik", sans-serif;
        color: #444;
      }

      .container {
        margin: 0 auto;
        width: 1200px;
      }

      header {
        /* background-color: orangered; */
        height: 100vh;
        position: relative;

        background-image: linear-gradient(
            rgba(43, 42, 42, 0.6),
            rgba(32, 32, 32, 0.6)
          ),
          url(hero.jpg);
        background-size: cover;
        color: #fff;
      }

      nav {
        font-size: 20px;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        padding-top: 32px;
        /* background-image: linear-gradient(to right, red, blue); */
        /* background-color: green; */
      }

      .header-container {
        width: 1200px;
        position: absolute;

        /* In relation to PARENT size*/
        left: 50%;
        top: 50%;

        /*In relation to ELEMENT size*/
        transform: translate(-50%, -50%);

        /* background-color: violet; */

        /* text-align: center; */
      }

      .header-container-inner {
        width: 50%;
        /* background-color: blue; */
      }

      h1 {
        font-size: 52px;
        margin-bottom: 32px;
        line-height: 1.05;
      }

      p {
        font-size: 20px;
        line-height: 1.6;
        margin-bottom: 48px;
      }
      .btn:link,
      .btn:visited {
        font-size: 20px;
        font-weight: 600;
        background-color: #e67e22;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        padding: 16px 32px;
        border-radius: 9px;
      }

      h2 {
        font-size: 44px;
      }

      section {
        padding: 96px 0;
        /* margin: 0 auto; */
        background-color: #f7f7f7;
      }
    </style>
見出しセクション
height: 100vh; これを使いました.
見える部分をすべて埋め尽くすキャラクターです.
字が書いてある部分はヘッド-コンテナ
真ん中に移動するため、位置をaboulteにしてから
学んだ変革を応用した.
参考までにposition absoulteならparentコンテナで
position: relative; 設定が必要なので、タイトル部分で
あなたに書いたのです.こんな真ん中のタイトル容器の
半分は文章の部分で利用しています.
 .header-container-inner {
        width: 50%;
        /* background-color: blue; */
      }
こう書いてある
[JavaScript ES 6+基本]10番号付けオブジェクト
「1つのSTAスレッド上の複数のハンドルに対するWaitAllはサポートされていません.」ソリューション