Init nav UI

2026-09-22 13:38:40 +00:00 · 2023-07-17 15:47:16 +07:00
commit d0a548d7b4
24 changed files with 4374 additions and 0 deletions
@@ -0,0 +1,5 @@
 dist
 node_modules
 .parcel
@@ -0,0 +1,23 @@
 {
  "name": "practice-02",
  "version": "1.0.0",
  "description": "Practice 02",
  "scripts": {
    "start": "del -rf dist && del -rf .parcel-cache && parcel ./src/*.pug --no-cache --no-source-maps",
    "build": "rm -rf build && rm -rf .parcel-cache && parcel build ./src/*.pug --no-cache --no-source-maps --dist-dir dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-pug": "^2.9.3",
    "@parcel/transformer-sass": "^2.9.3",
    "@prettier/plugin-pug": "^2.5.1",
    "parcel": "^2.9.3"
  },
  "dependencies": {
    "pug": "^3.0.2",
    "sass": "^1.63.6"
  }
 }
@@ -0,0 +1,23 @@
 <svg width="121" height="78" viewBox="0 0 121 78" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Logo">
 <path id="Vector" d="M23.5112 53.8623L23.1268 54.5052C22.2317 54.5052 21.3681 54.5682 20.5298 54.7006C18.5254 61.5144 13.9302 64.9182 6.7571 64.9182C4.98588 64.9182 3.51091 64.6409 2.33849 64.0799C0.781583 63.3487 0 62.1952 0 60.6068C0 59.7054 0.296231 58.949 0.882437 58.3376C1.46864 57.7262 2.21245 57.4236 3.10752 57.4236C4.66443 57.4236 5.44605 58.0792 5.44605 59.3839C5.44605 60.0269 5.12457 60.4807 4.48794 60.7328C4.12235 60.8211 3.58656 60.9661 2.86799 61.1678C2.14941 61.3695 1.79642 61.7225 1.79642 62.2141C1.79642 62.9012 2.36372 63.4243 3.49201 63.7899C4.34295 64.0673 5.2002 64.206 6.05745 64.206C8.47161 64.206 10.5328 63.2731 12.241 61.4073C13.5205 60.0143 14.6866 57.9909 15.733 55.3309C14.7055 55.52 13.5962 55.9423 12.4049 56.579C12.0834 56.7681 11.0623 57.3669 9.32886 58.3754L9.17127 58.3124C9.15236 58.2493 9.12717 58.1926 9.10826 58.1548C9.10826 57.556 10.1105 56.8311 12.1212 55.9739C13.7853 55.2679 15.0775 54.833 15.9977 54.6628C16.5335 53.15 17.5357 51.2779 19.0107 49.0592C20.8071 46.3487 22.2317 44.9683 23.3032 44.9305L23.4293 44.9935L23.4923 45.2205C22.7044 47.143 22.156 48.5738 21.8598 49.513C21.4123 50.9438 21.0593 52.4503 20.8008 54.0261C21.4123 53.982 22.3199 53.9253 23.5112 53.8623ZM9.16496 54.5682C8.01146 54.5682 7.05965 54.2405 6.31587 53.5912C5.56578 52.942 5.1939 52.0469 5.1939 50.9186C5.1939 49.9164 5.52168 48.8574 6.18983 47.7481C7.55764 45.4663 9.51165 43.6257 12.0519 42.239C14.5291 40.8712 17.1197 40.1904 19.8364 40.1904C20.8197 40.1904 22.2758 40.4111 24.2109 40.846C26.146 41.2872 27.5769 41.5015 28.5161 41.5015C28.9636 41.5015 29.7956 41.2683 31.0122 40.7955L31.2013 40.8586L31.2643 41.0477C31.2643 41.7536 30.7537 42.447 29.7263 43.1278C28.7871 43.7896 27.9424 44.1237 27.1987 44.1237C26.3036 44.1237 24.6837 43.7077 22.3452 42.8756C20.0066 42.0436 18.2102 41.6276 16.9495 41.6276C14.0248 41.6276 11.2072 43.0395 8.49682 45.8571C6.76972 47.6535 5.89987 49.3239 5.89987 50.8871C5.89987 51.5931 6.10159 52.1982 6.505 52.7151C6.90841 53.2256 7.45677 53.4841 8.13753 53.4841C9.86463 53.4841 11.3522 52.7151 12.5876 51.1771C13.7601 49.7462 14.3463 48.1452 14.3463 46.374C14.3463 45.8823 14.1446 45.6365 13.7348 45.6365C13.2621 45.6365 12.7768 46.1722 12.2599 47.2375C11.8754 48.0506 11.6169 48.7881 11.4909 49.45C11.0181 49.6643 10.4761 49.9857 9.85835 50.4081C8.87504 51.0888 8.36447 51.4544 8.32034 51.4985C8.27622 51.3472 8.23209 51.1897 8.19427 51.0195C8.19427 49.2672 8.65441 47.7229 9.56838 46.374C10.5958 44.8359 11.9384 44.0669 13.6025 44.0669C15.0775 44.0669 15.8149 45.0566 15.8149 47.0421V47.3636C15.8149 49.3302 15.1972 51.0069 13.9555 52.3936C12.7074 53.8433 11.1064 54.5682 9.16496 54.5682Z" fill="#191919"/>
 <path id="Vector_2" d="M31.8377 57.1651C31.8377 57.4236 31.5288 57.6253 30.9111 57.7703C30.4194 57.8963 29.9908 57.9657 29.6315 57.9657C29.3983 57.9657 29.1588 57.9657 28.9255 57.9657C28.1124 59.51 27.1543 60.8967 26.0449 62.1195C24.5069 63.834 23.1328 64.6913 21.9163 64.6913C20.227 64.6913 19.3887 63.9223 19.3887 62.3843C19.3887 60.4618 20.3089 58.3376 22.1432 56.0117C24.0657 53.5975 25.963 52.3936 27.8414 52.3936C29.2911 52.3936 30.0223 53.068 30.0223 54.4106C30.0223 54.8581 29.7891 55.7343 29.3163 57.0391C29.5307 57.1021 29.7197 57.1336 29.8962 57.1336C30.0664 57.1336 30.3248 57.1021 30.6652 57.0391C31.0056 56.9761 31.2641 56.9445 31.4342 56.9445C31.699 56.9382 31.8377 57.0139 31.8377 57.1651ZM27.9989 57.7387C26.8265 57.6127 25.9945 57.0328 25.5028 56.0117C25.1372 56.4403 24.6078 57.3543 23.9018 58.7662V58.7347C23.8577 58.9679 23.6875 59.4154 23.3912 60.0773C23.1328 60.6509 23.0068 61.111 23.0068 61.4514C23.0068 61.88 23.221 62.0943 23.6497 62.0943C25.0301 62.0943 26.4799 60.6446 27.9989 57.7387ZM29.1146 54.5997C29.1146 53.8937 28.8373 53.5408 28.2826 53.5408C27.854 53.5408 27.4001 53.7362 26.9211 54.1207C26.442 54.5052 26.2025 54.9023 26.2025 55.3057C26.2025 55.7343 26.4231 56.1251 26.8581 56.4718C27.293 56.8185 27.7279 57.0013 28.1565 57.0013C28.2006 57.0013 28.2511 56.9887 28.3141 56.9697V56.9382C28.5095 56.9382 28.6986 56.5979 28.894 55.9108C29.0453 55.3813 29.1146 54.9401 29.1146 54.5997Z" fill="#191919"/>
 <path id="Vector_3" d="M42.5349 57.1651C42.5349 57.4236 42.2261 57.6253 41.6084 57.7703C41.1167 57.8963 40.6881 57.9657 40.3288 57.9657C40.0956 57.9657 39.856 57.9657 39.6228 57.9657C38.8097 59.51 37.8516 60.8967 36.7422 62.1195C35.2042 63.834 33.8301 64.6913 32.6136 64.6913C30.9243 64.6913 30.0859 63.9223 30.0859 62.3843C30.0859 60.4618 31.0062 58.3376 32.8405 56.0117C34.763 53.5975 36.6603 52.3936 38.5387 52.3936C39.9884 52.3936 40.7196 53.068 40.7196 54.4106C40.7196 54.8581 40.4864 55.7343 40.0136 57.0391C40.2279 57.1021 40.417 57.1336 40.5935 57.1336C40.7637 57.1336 41.0221 57.1021 41.3625 57.0391C41.7029 56.9761 41.9613 56.9445 42.1315 56.9445C42.3962 56.9382 42.5349 57.0139 42.5349 57.1651ZM38.6962 57.7387C37.5238 57.6127 36.6918 57.0328 36.2001 56.0117C35.8345 56.4403 35.3051 57.3543 34.5991 58.7662V58.7347C34.555 58.9679 34.3848 59.4154 34.0885 60.0773C33.8301 60.6509 33.704 61.111 33.704 61.4514C33.704 61.88 33.9183 62.0943 34.347 62.0943C35.7274 62.0943 37.1772 60.6446 38.6962 57.7387ZM39.8119 54.5997C39.8119 53.8937 39.5346 53.5408 38.9799 53.5408C38.5512 53.5408 38.0974 53.7362 37.6184 54.1207C37.1393 54.5052 36.8998 54.9023 36.8998 55.3057C36.8998 55.7343 37.1204 56.1251 37.5554 56.4718C37.9903 56.8185 38.4252 57.0013 38.8538 57.0013C38.898 57.0013 38.9484 56.9887 39.0114 56.9697V56.9382C39.2068 56.9382 39.3959 56.5979 39.5913 55.9108C39.7426 55.3813 39.8119 54.9401 39.8119 54.5997Z" fill="#191919"/>
 <path id="Vector_4" d="M58.6456 43.4552C58.0909 44.8671 57.2022 46.8905 55.9857 49.5378C55.1536 51.328 54.5548 52.5823 54.1955 53.282C53.5148 54.6939 52.8277 55.8979 52.1469 56.9001C50.8863 58.7785 50.0227 60.3354 49.55 61.5771L49.84 61.7662C50.6531 61.5078 51.3653 60.9216 51.9894 60.0076C52.6953 58.9865 53.1429 58.4066 53.332 58.2805H53.458C53.54 58.3877 53.5841 58.5074 53.5841 58.6335C53.5841 59.5286 52.8403 60.7388 51.359 62.2516C49.8778 63.7707 48.6865 64.5271 47.7851 64.5271C47.1043 64.5271 46.6316 64.3569 46.3732 64.0165C46.3101 63.9346 46.1273 63.4618 45.831 62.6046C45.1062 63.8841 44.1103 64.5271 42.8496 64.5271C42.276 64.5271 41.7717 64.2812 41.3431 63.7896C40.9145 63.2979 40.7002 62.7621 40.7002 62.1885C40.7002 60.3732 42.2004 57.896 45.1944 54.757C46.8018 53.0677 48.2641 52.2294 49.5878 52.2294C49.758 52.2294 50.0605 52.3428 50.4829 52.5634C50.9115 52.7904 51.2204 52.9101 51.4158 52.929C51.504 52.8849 51.5734 52.7399 51.6427 52.4815C51.7246 52.1411 52.1028 51.183 52.7647 49.6072C53.956 46.7203 54.9519 44.4889 55.7587 42.9068L57.5489 42.8375C58.0279 42.8249 58.3872 43.0266 58.6456 43.4552ZM50.798 53.8304C50.735 53.553 50.5396 53.4144 50.2181 53.4144C49.9219 53.4144 49.6004 53.553 49.26 53.8304V53.7989C48.1948 54.675 47.1863 55.8159 46.2471 57.2279C45.1377 58.873 44.583 60.2471 44.583 61.3565C44.583 61.804 44.7658 62.031 45.1251 62.031C45.6167 62.031 46.6442 60.827 48.2011 58.4129C49.5941 56.2761 50.4577 54.7507 50.798 53.8304Z" fill="#191919"/>
 <path id="Vector_5" d="M98.3883 52.3555L95.6968 56.9064C95.224 57.6754 94.7576 58.4318 94.2849 59.1819C93.7491 60.077 93.3583 60.8775 93.0998 61.5835L93.3898 61.7726C94.2029 61.5141 94.9719 60.8775 95.6968 59.8501C96.4217 58.8226 96.8188 58.2995 96.8818 58.2806H97.0078C97.0898 58.3877 97.134 58.5075 97.134 58.6336C97.134 59.5286 96.3902 60.7388 94.9089 62.2516C93.4276 63.7707 92.2363 64.5271 91.3349 64.5271C90.6541 64.5271 90.1814 64.3569 89.923 64.0165C89.8599 63.9346 89.6771 63.4619 89.3809 62.6046C88.656 63.8842 87.6601 64.5271 86.3994 64.5271C85.8258 64.5271 85.3216 64.2813 84.8929 63.7896C84.4643 63.298 84.25 62.7622 84.25 62.1886C84.25 61.76 84.3572 61.3124 84.5715 60.846L88.2841 52.6454L91.9652 52.3555C91.1143 53.509 90.276 54.8516 89.4691 56.3896C88.4858 58.2932 87.9942 59.7429 87.9942 60.7451C87.9942 61.6024 88.2211 62.0247 88.6686 62.0247C89.2485 62.0247 90.3642 60.6506 92.0283 57.8961C93.3078 55.8034 94.2596 54.0511 94.8773 52.6454L98.3883 52.3555Z" fill="#191919"/>
 <path id="Vector_6" d="M109.519 43.2979L106.991 48.1325H109.38L109.154 48.996H106.374L101.041 59.0813C100.663 59.8062 100.474 60.6193 100.474 61.5207L100.827 62.2897C100.909 62.3086 100.966 62.3212 100.985 62.3212C101.388 62.3212 102.043 61.8169 102.939 60.8147C103.834 59.8125 104.388 59.3082 104.603 59.3082C104.71 59.3082 104.76 59.3586 104.76 59.4658C104.76 59.7242 104.287 60.405 103.348 61.5143C101.47 63.7331 100.102 64.8425 99.2511 64.8425C98.7153 64.8425 98.2741 64.6471 97.9211 64.25C97.5681 63.8529 97.3916 63.3927 97.3916 62.8569C97.3916 61.0857 97.9589 58.9489 99.0872 56.4528C99.3457 55.8981 100.398 53.9126 102.258 50.4962L106.103 43.4491L109.519 43.2979Z" fill="#191919"/>
 <g id="Group">
 <path id="Vector_7" d="M35.0713 26.2722C39.2882 25.5221 43.4294 24.6963 47.5959 24.0723C53.8677 23.1394 59.7108 20.8387 65.6485 18.7839C69.0081 17.624 72.5191 16.7227 76.0363 16.2751C78.5324 15.9537 81.1672 16.4768 83.7074 16.8298C85.3148 17.0567 85.34 17.3152 85.0059 19.1179C79.5851 17.5925 74.1895 17.8636 68.8254 19.4646C74.2462 18.5695 79.6481 18.0275 84.9492 20.2525C84.2243 23.7004 82.4972 26.3982 79.8876 28.5161C76.2002 31.5039 71.977 33.3192 67.2432 33.5777C61.148 33.9117 56.6474 31.0122 53.3823 26.0389C52.9033 25.3078 52.4179 25.0367 51.5733 25.0745C48.2325 25.2132 45.0494 25.9444 41.9734 27.2555C40.5929 27.848 39.1621 28.3838 37.6997 28.7052C35.8844 29.1275 35.0839 28.3207 35.0713 26.2722Z" fill="#F54748"/>
 <path id="Vector_8" d="M57.4733 20.3155C56.9312 18.601 56.5089 16.2184 57.7128 14.34C58.1477 13.6592 58.5133 13.4827 58.9104 12.9091C59.6857 11.7745 60.1522 9.68814 58.4314 5.50276C59.0239 5.92508 59.8055 6.60583 60.3413 7.65218C60.9527 8.8435 60.8708 9.76377 61.0599 10.7597C61.2805 11.9384 61.9423 13.5395 63.9278 15.2981C63.7198 14.6551 63.4992 13.7601 63.4488 12.6696C63.4047 11.598 63.537 10.6904 63.6883 10.0411C63.9152 10.703 64.2808 11.5476 64.886 12.4301C65.2894 13.0163 65.7054 13.489 66.0836 13.8609C65.5604 13.0919 64.867 11.8817 64.4132 10.2743C64.0665 9.04521 63.6883 6.99033 64.1737 4.53835C64.5897 2.43936 65.4721 0.895067 66.0836 0C66.0394 0.769001 66.0583 2.23766 66.8021 3.81979C67.943 6.25916 70.0231 7.33702 70.6219 7.63958C72.1221 8.39597 72.431 7.98626 75.3998 8.8372C77.7194 9.49905 78.8792 9.83312 79.9382 10.7471C80.5433 11.264 81.9489 12.6885 82.3271 15.7645C80.9656 15.5376 79.1251 15.3359 76.9505 15.4052C74.5174 15.4809 72.6894 15.8591 71.454 16.1238C69.563 16.5272 68.0439 17.0315 65.0057 18.0337C63.2408 18.6199 61.9801 19.08 59.7488 19.7041C58.797 19.9814 58.0091 20.1831 57.4733 20.3155Z" fill="#FDC55E"/>
 <path id="Vector_9" d="M72.3932 15.6891C72.4247 15.79 73.8114 15.2353 75.7402 14.9706C78.0346 14.6554 80.0201 14.8949 81.4762 15.2101C81.4888 14.1637 81.1926 13.4389 80.9972 13.0607C80.4866 12.0584 79.6987 11.5037 78.8477 10.9112C78.1859 10.4448 77.5871 10.1422 77.1774 9.95312C77.7321 10.3881 78.4191 11.0121 79.0872 11.863C79.7806 12.7455 80.2281 13.5901 80.5181 14.252C79.5537 14.1007 78.1291 13.9809 76.4588 14.252C74.1959 14.6302 72.3553 15.5757 72.3932 15.6891Z" fill="white"/>
 </g>
 <path id="Vector_10" d="M110.283 70.6227C111.487 68.8389 116.75 68.9334 120.217 69.5637C117.09 67.0866 113.428 65.8448 109.217 65.8448C108.19 65.8448 106.57 66.0654 104.351 66.513C100.122 67.3639 97.0709 68.051 95.1925 68.5615C92.8224 69.2045 91.1899 69.5259 90.2948 69.5259C89.6141 69.5259 88.927 69.4503 88.2463 69.299C86.9037 69.0027 85.6745 67.9627 84.5651 66.1915C84.0294 65.3405 83.7647 63.9286 83.7647 61.962C83.7647 60.8715 84.0231 59.2642 84.5336 57.1274C85.0883 54.8204 85.6304 53.295 86.1662 52.5449C88.7064 51.5868 91.0134 50.4081 93.0809 49.0213C96.0497 47.0358 97.531 45.1448 97.531 43.3547C97.531 42.6046 97.2789 42.0184 96.7809 41.5961C96.2766 41.1674 95.6463 40.9531 94.8773 40.9531C92.8035 40.9531 90.2759 42.5668 87.2882 45.7878C85.3026 47.9435 83.3802 50.4837 81.5207 53.4084L78.7661 54.2089C80.0016 49.8975 81.7854 46.3109 84.1176 43.4492C84.3067 43.216 84.4391 43.0458 84.5021 42.9387L84.4076 42.7496L84.2185 42.655C83.2604 42.8252 80.8588 45.3654 77.0138 50.2757C75.709 51.9398 74.5681 53.6921 73.5848 55.5263C73.3957 55.6146 73.1688 55.6524 72.9104 55.6524C72.507 55.6524 71.4985 55.4066 69.8974 54.9149C69.0213 54.2089 68.5863 53.3139 68.5863 52.2234C68.5863 47.6094 72.3368 44.5712 79.8251 43.0962C77.4362 42.8819 76.1188 42.7748 75.8855 42.7748C73.7046 42.7748 71.6875 43.7392 69.8344 45.6743C67.9749 47.6094 67.0483 49.6706 67.0483 51.8704C67.0483 53.4525 67.6787 54.6376 68.9393 55.4255C70.0046 56.1062 71.3724 56.4529 73.0364 56.4529C72.009 58.8671 71.0635 60.6194 70.1873 61.7036C68.7565 63.5 67.0672 64.395 65.1258 64.395C64.401 64.395 63.6635 64.2438 62.9134 63.9475C61.9742 63.5819 61.5014 63.0966 61.5014 62.4726C61.5014 62.0439 61.867 61.6909 62.5919 61.4136C62.636 61.3947 63.1907 61.2308 64.256 60.9345C64.8989 60.6383 65.214 60.1529 65.214 59.4911C65.214 58.8482 65.0124 58.3376 64.6026 57.9531C64.1992 57.5686 63.6761 57.3732 63.0331 57.3732C62.0939 57.3732 61.3249 57.7073 60.7261 58.3817C60.1273 59.0562 59.8311 59.8693 59.8311 60.8337C59.8311 62.3087 60.5244 63.418 61.9111 64.1618C63.0205 64.7606 64.3757 65.0569 65.9768 65.0569C69.0086 65.0569 71.6371 64.0673 73.8559 62.0818C75.8414 60.3357 77.3794 57.9342 78.4699 54.8834C79.5603 54.5997 80.4113 54.3539 81.029 54.1396C79.8944 57.0454 79.3334 59.6991 79.3334 62.1133C79.3334 64.4581 79.781 66.1663 80.676 67.2378C82.5544 69.4755 84.2122 70.7299 85.643 70.982C86.8154 71.1963 87.679 71.3034 88.24 71.3034C89.6708 71.3034 91.026 71.1207 92.3056 70.7614L96.2452 69.6394C97.8021 69.1919 99.3968 68.8073 101.017 68.4859C101.975 68.2968 102.864 68.1959 103.677 68.1959C106.047 68.1959 107.906 68.7065 109.249 69.7339C109.602 70.0176 109.949 70.3138 110.283 70.6227ZM89.841 45.6302C91.5681 43.0017 93.1376 41.6906 94.5495 41.6906C95.4446 41.6906 95.8921 42.1634 95.8921 43.1025C95.8921 44.6595 94.7197 46.3677 92.3686 48.2271C90.5533 49.658 88.6623 50.78 86.702 51.5931C87.7042 49.2609 88.7505 47.2753 89.841 45.6302Z" fill="#191919"/>
 <path id="Vector_11" d="M120.925 70.7337C121.046 71.4119 121.088 72.3349 120.521 72.9875C120.316 73.2221 120.164 73.2731 119.981 73.472C119.619 73.8646 119.33 74.6295 119.781 76.3071C119.572 76.1184 119.304 75.8176 119.147 75.3943C118.968 74.915 119.052 74.5632 119.031 74.1807C119.005 73.7218 118.832 73.0793 118.15 72.3145C118.197 72.5694 118.239 72.9213 118.197 73.3343C118.161 73.7422 118.061 74.0788 117.966 74.3184C117.914 74.0584 117.814 73.7167 117.625 73.3496C117.5 73.1048 117.363 72.906 117.232 72.7428C117.395 73.064 117.604 73.5535 117.699 74.1858C117.772 74.6703 117.809 75.4708 117.494 76.3734C117.222 77.1484 116.797 77.689 116.513 78C116.571 77.7093 116.639 77.1535 116.435 76.5161C116.12 75.532 115.365 75.017 115.144 74.8742C114.599 74.5122 114.457 74.6499 113.345 74.1756C112.474 73.8085 112.039 73.6198 111.672 73.2221C111.462 72.9926 110.99 72.3807 111 71.1977C112.222 69.4232 118.517 69.9331 120.925 70.7337Z" fill="#F54748"/>
 <g id="Group_2">
 <path id="Vector_12" d="M112.779 44.7038C113.823 44.7038 114.67 43.8572 114.67 42.8129C114.67 41.7685 113.823 40.9219 112.779 40.9219C111.734 40.9219 110.888 41.7685 110.888 42.8129C110.888 43.8572 111.734 44.7038 112.779 44.7038Z" stroke="#191919" stroke-width="0.25" stroke-miterlimit="10"/>
 <g id="Group_3">
 <path id="Vector_13" d="M111.984 41.729H112.287V43.9036H111.984V41.729ZM112.117 42.6934H112.861C112.917 42.6934 112.968 42.6808 113.012 42.6492C113.056 42.624 113.094 42.5799 113.113 42.5295C113.138 42.479 113.15 42.416 113.15 42.353C113.15 42.2836 113.138 42.2269 113.113 42.1765C113.087 42.1261 113.056 42.0882 113.012 42.0567C112.968 42.0315 112.917 42.0126 112.854 42.0126H112.11V41.7227H112.842C112.968 41.7227 113.075 41.7479 113.176 41.7983C113.277 41.8487 113.346 41.9244 113.396 42.0189C113.447 42.1135 113.472 42.2269 113.472 42.3467C113.472 42.4727 113.447 42.5799 113.39 42.6745C113.333 42.769 113.264 42.8447 113.169 42.8951C113.075 42.9455 112.961 42.9707 112.842 42.9707H112.11V42.6934H112.117ZM112.709 42.914L113.012 42.8446L113.567 43.9036H113.207L112.709 42.914Z" fill="#191919"/>
 </g>
 </g>
 </g>
 </svg>
@@ -0,0 +1,7 @@
 <svg width="36" height="27" viewBox="0 0 36 27" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Group 8471">
 <rect id="Rectangle 4600" width="36" height="5" rx="2.5" fill="#191919"/>
 <rect id="Rectangle 4601" y="11" width="36" height="5" rx="2.5" fill="#191919"/>
 <rect id="Rectangle 4602" y="22" width="36" height="5" rx="2.5" fill="#191919"/>
 </g>
 </svg>
@@ -0,0 +1,14 @@
 doctype html
 html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet", href="./styles/main.scss")
    title Food Hut
  body
    header.header
      .logo-wrapper
        a.logo-link(href="javascript:void(0)")
          img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
      .header-content
        include nav-menu
@@ -0,0 +1,3 @@
 mixin navItem(content)
  li.nav-item
    a.nav-link(href="javascrip:void(0)")= content
@@ -0,0 +1,8 @@
 nav.nav
  input.toggle-menu(type="checkbox")
  .icon-menu
  ul.nav-list
    each val in ["Today Special Offers","Why FoodHut","Our Menu","Our Popular Food"]
      li.nav-item
        a.nav-link(href="javascrip:void(0)")= val
 a.btn(href="javascript:void(0)") Download App
@@ -0,0 +1,15 @@
@mixin base-icon-menu {
  height: 3px;
  width: auto;
  background: #000000;
  border-radius: 10px;
  transition: 0.3s;
 }
@mixin icon-menu {
  @include base-icon-menu;
  content: "";
  position: absolute;
  right: 0;
 }
@@ -0,0 +1,21 @@
 $primary-font: "Sofia Pro";
 $secondary-font: "Inter";
 // Color
 $black: #000;
 $white: #fff;
 $primary-color: #f54748;
 $secondary-color: #fdc55e;
 // Font size
 $fs-xx-sm: 14px;
 $fs-x-sm: 16px;
 $fs-sm: 17px;
 $fs-md: 18px;
 $fs-lg: 24px;
 $fs-x-lg: 48px;
 $fs-xx-lg: 58px;
 // Size
 $max-width: 1440px;
 $min-width: 320px;
@@ -0,0 +1,11 @@
 $font-path: "../assets/fonts";
@font-face {
  src: url("#{$font-path}/sofia-pro-regular.otf") format("opentype");
  font-family: "Sofia Pro";
 }
@font-face {
  src: url("#{$font-path}/inter-regular.ttf") format("truetype");
  font-family: "Inter";
 }
@@ -0,0 +1,54 @@
 $background-color_1: transparent;
 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
  &:before {
    box-sizing: border-box;
  }
  &:after {
    box-sizing: border-box;
  }
 }
 img {
  display: block;
  max-width: 100%;
 }
 picture {
  display: block;
  max-width: 100%;
 }
 svg {
  display: block;
  max-width: 100%;
 }
 video {
  display: block;
  max-width: 100%;
 }
 input {
  background-color: $background-color_1;
  outline: none;
 }
 select {
  background-color: $background-color_1;
  outline: none;
 }
 textarea {
  background-color: $background-color_1;
  outline: none;
 }
 button {
  cursor: pointer;
  background-color: $background-color_1;
  outline: none;
  border: 0;
 }
 body {
  min-height: 100vh;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
 }
@@ -0,0 +1,22 @@
 .btn {
  align-self: center;
  display: none;
  padding: 13px 20px;
  background-color: $primary-color;
  border-radius: 100px;
  font-size: $fs-md;
  color: $white;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.2s;
 }
@media screen and (min-width: 840px) {
  .btn {
    display: block;
    &:hover {
      background-color: $secondary-color;
    }
  }
 }
@@ -0,0 +1,11 @@
 .logo-wrapper {
  width: 121px;
  height: 78px;
  flex-shrink: 0;
 }
 .logo-link {
  display: inline-block;
  width: 100%;
  height: 100%;
 }
@@ -0,0 +1,57 @@
 .icon-menu {
  @include base-icon-menu;
  position: relative;
  top: 27px;
  width: 36px;
  cursor: pointer;
  &:before {
    @include icon-menu;
    top: -10px;
    width: 36px;
  }
  &:after {
    @include icon-menu;
    top: 10px;
    width: 36px;
  }
 }
 .toggle-menu {
  position: absolute;
  top: 40px;
  width: 36px;
  height: 27px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
 }
 .toggle-menu:checked ~ .icon-menu {
  background: transparent;
 }
 .toggle-menu:checked ~ .icon-menu:before {
  top: 0;
  transform: rotate(-45deg);
 }
 .toggle-menu:checked ~ .icon-menu:after {
  top: 0;
  transform: rotate(45deg);
 }
 .toggle-menu:checked ~ .nav-list {
  right: 0px;
 }
@media screen and (min-width: 840px) {
  .icon-menu,
  .toggle-menu {
    display: none;
  }
 }
@@ -0,0 +1,26 @@
 .header {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: $max-width;
  min-width: $min-width;
  padding: 24px;
  margin: auto;
 }
@media screen and (min-width: 840px) {
  .header {
    padding-top: 32px;
    padding-inline: 24px;
    gap: 10px;
  }
  .header-content {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 918px;
    height: auto;
  }
 }
@@ -0,0 +1,62 @@
 .nav-list {
  list-style: none;
  transition: 0.1s;
  position: fixed;
  border: 2px solid $primary-color;
  top: 0px;
  right: -300px;
  width: auto;
  height: auto;
  margin-top: 80px;
  margin-right: 10px;
  z-index: 2;
 }
 .nav-item {
  font-size: 14px;
  padding: 14px;
  border-bottom: 1px solid $black;
  &:last-child {
    border-bottom: unset;
  }
  &:hover {
    background-color: $secondary-color;
  }
 }
 .nav-link {
  text-decoration: none;
  color: $black;
 }
@media screen and (min-width: 840px) {
  .nav {
    margin: auto;
    width: 100%;
    height: auto;
  }
  .nav-list {
    position: unset;
    display: flex;
    justify-content: space-between;
    border: none;
    margin: auto;
    max-width: 600px;
  }
  .nav-item {
    border-bottom: none;
    padding: 0px;
    &:hover {
      background-color: unset;
    }
  }
  .nav-link:hover {
    color: $secondary-color;
  }
 }
@@ -0,0 +1,20 @@
 // Abstracts
@import "./abstracts/mixins";
@import "./abstracts/variables";
 // Bases
@import "./bases/typography";
@import "./bases/reset.scss";
 // Components
@import "./components/button";
@import "./components/menu-button";
@import "./components/logo";
 // Layouts
@import "./layouts/navbar";
@import "./layouts/header";
 * {
  font-family: $primary-font;
 }