<h2>Flexbox Layout</h2>
<header class="header--flex">
  <a href="" class="logo">
    <svg t="1661407041989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17473" width="200" height="200">
      <path d="M98.048 357.568a31.872 31.872 0 0 0-13.632 30.528v247.808a31.872 31.872 0 0 0 13.632 30.528l395.904 270.72a32 32 0 0 0 36.096 0l395.84-270.72a31.808 31.808 0 0 0 13.824-29.696V387.328a31.808 31.808 0 0 0-13.824-29.76l-395.84-270.72a32 32 0 0 0-36.096 0l-395.904 270.72zM155.776 384l328.96-225.024v190.08L294.848 479.04 155.776 384z m383.36-34.944v-190.08L868.224 384l-138.944 95.04-190.08-129.92zM246.656 512L138.816 585.728V438.272L246.592 512z m638.72-73.792v147.584L777.408 512l107.904-73.792z m-156.096 106.752L868.16 640l-328.96 225.024v-190.08l190.016-129.984z m-244.48 129.92v190.08L155.84 640l139.008-95.04 190.016 129.92zM681.088 512L512 627.648 342.976 512l168.96-115.648L681.088 512z" fill="#000000" fill-opacity=".9" p-id="17474"></path>
    </svg>
  </a>
  <nav>
    <ul>
      <li><a href="">Shop</a></li>
      <li><a href="">Popular pie</a></li>
      <li><a href="">Events</a></li>
      <li><a href="">Recipes</a></li>
      <li><a href="">Contact us</a></li>
    </ul>
  </nav>
  <div class="section">
    <span class="avatar">
      <svg t="1661407284427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20491" width="200" height="200">
        <path d="M410.156231 702.707207h212.242673c16.639103 0 30.116023-13.48194 30.116023-30.116023s-13.47692-30.116023-30.116023-30.116023H410.156231c-16.634083 0-30.116023 13.48194-30.116023 30.116023s13.48194 30.116023 30.116023 30.116023z" fill="#EB4548" p-id="20492"></path>
        <path d="M999.597075 85.840705a20.042213 20.042213 0 0 0-28.258869-2.765655l-57.692262 47.397601C888.348485 54.781046 816.923317 0 732.824322 0c-80.339511 0-149.099411 49.992598-177.157506 120.464093H468.270117C440.22206 49.992598 371.46216 0 291.122649 0 207.028674 0 135.603506 54.781046 110.301027 130.472651L52.608765 83.07505a20.052252 20.052252 0 0 0-28.258868 2.760635 20.06731 20.06731 0 0 0 2.770674 28.258869L96.683565 171.239708c1.405414 1.154448 2.991525 1.862174 4.557558 2.579939a192.873051 192.873051 0 0 0-0.853287 16.910147c0 105.170172 85.564641 190.734813 190.734813 190.734813s190.734813-85.564641 190.734813-190.734813c0-10.274583-1.039003-20.278122-2.615074-30.116023h65.467215c-1.571053 9.837901-2.620094 19.84144-2.620094 30.116023 0 105.170172 85.564641 190.734813 190.734813 190.734813s190.734813-85.564641 190.734813-190.734813c0-5.706986-0.361392-11.333663-0.863326-16.915166 1.581091-0.712746 3.167202-1.415453 4.567597-2.57492l69.568014-57.155193a20.06731 20.06731 0 0 0 2.760635-28.24883zM291.122649 341.314929c-53.24011 0-100.010294-27.852302-126.793477-69.6684l-0.250967 0.190735a19.99202 19.99202 0 0 1-12.48811 4.366823 20.082368 20.082368 0 0 1-12.508189-35.787874l7.900437-6.294249A149.987834 149.987834 0 0 1 140.542533 190.734813c0-83.034895 67.545221-150.580116 150.580116-150.580115 27.174692 0 52.617712 7.328232 74.642564 19.976962l3.824735-3.036699a20.06731 20.06731 0 0 1 28.213694 3.212375c5.802354 7.308155 5.390768 17.206288 0.050193 24.333747C424.938179 111.881026 441.702765 149.385514 441.702765 190.734813c0 83.034895-67.545221 150.580116-150.580116 150.580116z m441.701673 0c-53.24011 0-100.010294-27.852302-126.793477-69.6684l-0.250967 0.190735a19.99202 19.99202 0 0 1-12.48811 4.366823 20.082368 20.082368 0 0 1-12.508189-35.787874l7.900437-6.294249A149.987834 149.987834 0 0 1 582.244206 190.734813c0-83.034895 67.545221-150.580116 150.580116-150.580115 27.174692 0 52.617712 7.328232 74.642564 19.976962l3.824734-3.036699a20.072329 20.072329 0 0 1 28.213695 3.212375c5.802354 7.308155 5.390768 17.206288 0.050193 24.333747 27.084343 27.234924 43.84893 64.74443 43.84893 106.09373 0 83.034895-67.545221 150.580116-150.580116 150.580116z" fill="#4F676D" p-id="20493"></path>
        <path d="M394.586247 88.52605L164.329172 271.64151C191.112356 313.462627 237.87752 341.314929 291.122649 341.314929c83.034895 0 150.580116-67.545221 150.580116-150.580116 0-41.3493-16.764586-78.853787-43.84893-106.09373-1.008887 1.355221-1.882251 2.785732-3.262569 3.884967zM291.122649 40.154698c-83.034895 0-150.580116 67.545221-150.580116 150.580115 0 15.088128 2.293837 29.644205 6.43981 43.387151L365.770232 60.13166A149.41563 149.41563 0 0 0 291.132688 40.154698zM836.28792 88.52605l-230.257075 183.11546C632.814029 313.462627 679.579193 341.314929 732.824322 341.314929c83.034895 0 150.580116-67.545221 150.580116-150.580116 0-41.3493-16.764586-78.853787-43.84893-106.09373-1.008887 1.355221-1.882251 2.785732-3.262569 3.884967zM732.824322 40.154698c-83.034895 0-150.580116 67.545221-150.580116 150.580115 0 15.088128 2.293837 29.644205 6.43981 43.387151L807.471905 60.13166A149.41563 149.41563 0 0 0 732.834361 40.154698z" fill="#7BE5E4" p-id="20494"></path>
        <path d="M839.555508 84.641083c5.340575-7.127459 5.75216-17.025592-0.050193-24.328727a20.072329 20.072329 0 0 0-28.213695-3.217395l-3.824734 3.036699-218.78287 173.990304-7.900437 6.28421a20.082368 20.082368 0 0 0 24.996299 31.43109l0.250967-0.195754 230.257075-183.11546c1.385337-1.099235 2.258702-2.529746 3.262569-3.884967zM397.853835 84.641083c5.340575-7.127459 5.75216-17.025592-0.050193-24.328727a20.06731 20.06731 0 0 0-28.213694-3.217395l-3.824735 3.036699-218.78287 173.990304-7.900437 6.28421a20.082368 20.082368 0 0 0 24.996299 31.43109l0.250967-0.195754L394.581227 88.52605c1.385337-1.099235 2.258702-2.529746 3.26257-3.884967z" fill="#B7F5F0" p-id="20495"></path>
        <path d="M722.931209 441.701673H301.337c-88.661572 0-160.794467 72.057605-160.794467 160.61879v63.163339c0 5.541348 2.283798 10.83173 6.324365 14.626349a19.876575 19.876575 0 0 0 14.977702 5.410845c24.91097-1.606188 56.803839 4.657945 96.918382 14.405498a19.931788 19.931788 0 0 0 15.303959-2.444417 20.027155 20.027155 0 0 0 9.009711-12.618614c8.221674-36.189421 41.153546-62.465651 78.30166-62.465651h301.195367c37.158153 0 70.085005 26.261172 78.30166 62.455613a20.072329 20.072329 0 0 0 24.30865 15.06805c40.129601-9.732495 71.987334-15.986589 96.923401-14.400479 5.701967 0.411586 10.942155-1.616227 14.977702-5.410845a20.06731 20.06731 0 0 0 6.324365-14.626349V602.320463c0-88.561185-71.987334-160.61879-160.478248-160.61879zM792.96602 737.195073c-31.466225-24.604791-76.55995-13.40163-133.685026 0.783016-41.1937 10.22439-87.878556 21.814039-137.268834 21.81404s-96.070114-11.58965-137.263814-21.81404c-57.110019-14.184647-102.243899-25.377769-133.690046-0.783016-20.609399 16.117092-30.206371 44.034645-30.206372 87.858478 0 175.265216 152.236497 198.891236 301.160232 198.891236s301.160232-23.62602 301.160232-198.891236c0-43.818814-9.596973-71.741386-30.201352-87.858478z" fill="#89714D" p-id="20496"></path>
      </svg>
    </span>
    <span class="nick">Current user:Pikachu</span>
    <a href="" class="cart">Shopping cart</a>
  </div>
</header>
<h2>Grid Layout</h2>
<header class="header--grid">
  <a href="" class="logo">
    <svg t="1661407041989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17473" width="200" height="200">
      <path d="M98.048 357.568a31.872 31.872 0 0 0-13.632 30.528v247.808a31.872 31.872 0 0 0 13.632 30.528l395.904 270.72a32 32 0 0 0 36.096 0l395.84-270.72a31.808 31.808 0 0 0 13.824-29.696V387.328a31.808 31.808 0 0 0-13.824-29.76l-395.84-270.72a32 32 0 0 0-36.096 0l-395.904 270.72zM155.776 384l328.96-225.024v190.08L294.848 479.04 155.776 384z m383.36-34.944v-190.08L868.224 384l-138.944 95.04-190.08-129.92zM246.656 512L138.816 585.728V438.272L246.592 512z m638.72-73.792v147.584L777.408 512l107.904-73.792z m-156.096 106.752L868.16 640l-328.96 225.024v-190.08l190.016-129.984z m-244.48 129.92v190.08L155.84 640l139.008-95.04 190.016 129.92zM681.088 512L512 627.648 342.976 512l168.96-115.648L681.088 512z" fill="#000000" fill-opacity=".9" p-id="17474"></path>
    </svg>
  </a>
  <nav>
    <ul>
      <li><a href="">Shop</a></li>
      <li><a href="">Popular pie</a></li>
      <li><a href="">Events</a></li>
      <li><a href="">Recipes</a></li>
      <li><a href="">Contact us</a></li>
    </ul>
  </nav>
  <div class="section">
    <span class="avatar">
      <svg t="1661407284427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20491" width="200" height="200">
        <path d="M410.156231 702.707207h212.242673c16.639103 0 30.116023-13.48194 30.116023-30.116023s-13.47692-30.116023-30.116023-30.116023H410.156231c-16.634083 0-30.116023 13.48194-30.116023 30.116023s13.48194 30.116023 30.116023 30.116023z" fill="#EB4548" p-id="20492"></path>
        <path d="M999.597075 85.840705a20.042213 20.042213 0 0 0-28.258869-2.765655l-57.692262 47.397601C888.348485 54.781046 816.923317 0 732.824322 0c-80.339511 0-149.099411 49.992598-177.157506 120.464093H468.270117C440.22206 49.992598 371.46216 0 291.122649 0 207.028674 0 135.603506 54.781046 110.301027 130.472651L52.608765 83.07505a20.052252 20.052252 0 0 0-28.258868 2.760635 20.06731 20.06731 0 0 0 2.770674 28.258869L96.683565 171.239708c1.405414 1.154448 2.991525 1.862174 4.557558 2.579939a192.873051 192.873051 0 0 0-0.853287 16.910147c0 105.170172 85.564641 190.734813 190.734813 190.734813s190.734813-85.564641 190.734813-190.734813c0-10.274583-1.039003-20.278122-2.615074-30.116023h65.467215c-1.571053 9.837901-2.620094 19.84144-2.620094 30.116023 0 105.170172 85.564641 190.734813 190.734813 190.734813s190.734813-85.564641 190.734813-190.734813c0-5.706986-0.361392-11.333663-0.863326-16.915166 1.581091-0.712746 3.167202-1.415453 4.567597-2.57492l69.568014-57.155193a20.06731 20.06731 0 0 0 2.760635-28.24883zM291.122649 341.314929c-53.24011 0-100.010294-27.852302-126.793477-69.6684l-0.250967 0.190735a19.99202 19.99202 0 0 1-12.48811 4.366823 20.082368 20.082368 0 0 1-12.508189-35.787874l7.900437-6.294249A149.987834 149.987834 0 0 1 140.542533 190.734813c0-83.034895 67.545221-150.580116 150.580116-150.580115 27.174692 0 52.617712 7.328232 74.642564 19.976962l3.824735-3.036699a20.06731 20.06731 0 0 1 28.213694 3.212375c5.802354 7.308155 5.390768 17.206288 0.050193 24.333747C424.938179 111.881026 441.702765 149.385514 441.702765 190.734813c0 83.034895-67.545221 150.580116-150.580116 150.580116z m441.701673 0c-53.24011 0-100.010294-27.852302-126.793477-69.6684l-0.250967 0.190735a19.99202 19.99202 0 0 1-12.48811 4.366823 20.082368 20.082368 0 0 1-12.508189-35.787874l7.900437-6.294249A149.987834 149.987834 0 0 1 582.244206 190.734813c0-83.034895 67.545221-150.580116 150.580116-150.580115 27.174692 0 52.617712 7.328232 74.642564 19.976962l3.824734-3.036699a20.072329 20.072329 0 0 1 28.213695 3.212375c5.802354 7.308155 5.390768 17.206288 0.050193 24.333747 27.084343 27.234924 43.84893 64.74443 43.84893 106.09373 0 83.034895-67.545221 150.580116-150.580116 150.580116z" fill="#4F676D" p-id="20493"></path>
        <path d="M394.586247 88.52605L164.329172 271.64151C191.112356 313.462627 237.87752 341.314929 291.122649 341.314929c83.034895 0 150.580116-67.545221 150.580116-150.580116 0-41.3493-16.764586-78.853787-43.84893-106.09373-1.008887 1.355221-1.882251 2.785732-3.262569 3.884967zM291.122649 40.154698c-83.034895 0-150.580116 67.545221-150.580116 150.580115 0 15.088128 2.293837 29.644205 6.43981 43.387151L365.770232 60.13166A149.41563 149.41563 0 0 0 291.132688 40.154698zM836.28792 88.52605l-230.257075 183.11546C632.814029 313.462627 679.579193 341.314929 732.824322 341.314929c83.034895 0 150.580116-67.545221 150.580116-150.580116 0-41.3493-16.764586-78.853787-43.84893-106.09373-1.008887 1.355221-1.882251 2.785732-3.262569 3.884967zM732.824322 40.154698c-83.034895 0-150.580116 67.545221-150.580116 150.580115 0 15.088128 2.293837 29.644205 6.43981 43.387151L807.471905 60.13166A149.41563 149.41563 0 0 0 732.834361 40.154698z" fill="#7BE5E4" p-id="20494"></path>
        <path d="M839.555508 84.641083c5.340575-7.127459 5.75216-17.025592-0.050193-24.328727a20.072329 20.072329 0 0 0-28.213695-3.217395l-3.824734 3.036699-218.78287 173.990304-7.900437 6.28421a20.082368 20.082368 0 0 0 24.996299 31.43109l0.250967-0.195754 230.257075-183.11546c1.385337-1.099235 2.258702-2.529746 3.262569-3.884967zM397.853835 84.641083c5.340575-7.127459 5.75216-17.025592-0.050193-24.328727a20.06731 20.06731 0 0 0-28.213694-3.217395l-3.824735 3.036699-218.78287 173.990304-7.900437 6.28421a20.082368 20.082368 0 0 0 24.996299 31.43109l0.250967-0.195754L394.581227 88.52605c1.385337-1.099235 2.258702-2.529746 3.26257-3.884967z" fill="#B7F5F0" p-id="20495"></path>
        <path d="M722.931209 441.701673H301.337c-88.661572 0-160.794467 72.057605-160.794467 160.61879v63.163339c0 5.541348 2.283798 10.83173 6.324365 14.626349a19.876575 19.876575 0 0 0 14.977702 5.410845c24.91097-1.606188 56.803839 4.657945 96.918382 14.405498a19.931788 19.931788 0 0 0 15.303959-2.444417 20.027155 20.027155 0 0 0 9.009711-12.618614c8.221674-36.189421 41.153546-62.465651 78.30166-62.465651h301.195367c37.158153 0 70.085005 26.261172 78.30166 62.455613a20.072329 20.072329 0 0 0 24.30865 15.06805c40.129601-9.732495 71.987334-15.986589 96.923401-14.400479 5.701967 0.411586 10.942155-1.616227 14.977702-5.410845a20.06731 20.06731 0 0 0 6.324365-14.626349V602.320463c0-88.561185-71.987334-160.61879-160.478248-160.61879zM792.96602 737.195073c-31.466225-24.604791-76.55995-13.40163-133.685026 0.783016-41.1937 10.22439-87.878556 21.814039-137.268834 21.81404s-96.070114-11.58965-137.263814-21.81404c-57.110019-14.184647-102.243899-25.377769-133.690046-0.783016-20.609399 16.117092-30.206371 44.034645-30.206372 87.858478 0 175.265216 152.236497 198.891236 301.160232 198.891236s301.160232-23.62602 301.160232-198.891236c0-43.818814-9.596973-71.741386-30.201352-87.858478z" fill="#89714D" p-id="20496"></path>
      </svg>
    </span>
    <span class="nick">Current user:Pikachu</span>
    <a href="" class="cart">Shopping cart</a>
  </div>
</header>

<div class="tutorials">
  <a href="https://s.juejin.cn/ds/idBv71cd" target="_blank">
    <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200">
      <path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path>
    </svg>
  </a>

</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  gap: 2rem;
  align-content: start;
}

a {
  text-decoration: none;
}

svg {
  display: block;
  width: 1em;
  height: 1em;
}

ul {
  list-style: none outside none;
}

h2 {
  padding: 0.2em;
  margin-bottom: -30px;
}

header {
  background-color: #b6d7e4;
  padding: 10px 20px;
  color: #000;
  white-space: nowrap;
  gap: 18px;
  font-size: 12px;
}

nav ul {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}

nav a {
  display: block;
  padding: 10px;
  color: #000;
  text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);
  transition: all 0.28s ease-in;
}

nav a:hover {
  color: #1067eb;
  text-shadow: -1px -1px 0 rgb(255 255 255 / 0.35);
}

.section {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6d97e6;
  border-radius: 6px;
  padding: 5px 8px;
  text-shadow: 1px 1px 0 rgb(255 255 255 / 0.5);
  gap: 10px;
}

.avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  font-size: 18px;
}

.cart {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #6d97e6;
  border-radius: 4px;
  color: #000;
  padding: 5px 10px;
  transition: all 0.28s ease-in-out;
}

.cart:hover {
  background-color: #2051ac;
  text-shadow: -1px -1px 0 rgb(0 0 0 / 0.35);
  color: #fff;
}

.logo {
  font-size: 48px;
  display: block;
}

.header--flex {
  display: flex;
  justify-content: space-between;
}

.header--grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.header--grid .section {
  justify-self: end;
}

.tutorials {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3f517e;
  padding: 0.5rem;
  display: grid;
  place-content: center;
  transition: all 0.28s linear;

  &:hover {
    background: #4161b2;
  }

  & svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: invert(1);
  }
}