first commit
No files matched your search
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zxx">
|
||||
|
||||
<head>
|
||||
|
||||
<!-- Metas -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>404</title>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap"
|
||||
rel="stylesheet">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../plugins.css">
|
||||
|
||||
<!-- Core Style Css -->
|
||||
<link rel="stylesheet" href="../404.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="main-bg">
|
||||
|
||||
|
||||
<div class="cursor"></div>
|
||||
|
||||
|
||||
<div id="smooth-wrapper">
|
||||
|
||||
|
||||
|
||||
<div id="smooth-content">
|
||||
|
||||
<main class="main-bg">
|
||||
|
||||
|
||||
<!-- ==================== Start 404 ==================== -->
|
||||
|
||||
<section class="error-404 section-padding">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-5 col-md-8">
|
||||
<div class="img">
|
||||
<img src="../404.svg" alt="">
|
||||
</div>
|
||||
<div class="cont text-center">
|
||||
<h3>Page not found</h3>
|
||||
<p class="mt-15">The requested URL you are looking for <br>
|
||||
doesn’t exist on this server.</p>
|
||||
<a href="https://tdvorak.dev" class="fourofour butn butn-md main-colorbg3 radius-30 mt-50 fw-600">Back To Homepage</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../jquery-3.6.0.min.js"></script>
|
||||
<script src="../404.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M92.64 317.14L77.8 317.42L70.29 317.54C67.78 317.54 65.29 317.54 62.74 317.54H62.3V317.09V304.46V304H62.8L77.75 304.07C82.75 304.07 87.75 304.18 92.75 304.23H93.02V304.5C93.02 306.64 92.93 308.77 92.89 310.88L92.64 317.14ZM92.64 317.14L92.49 310.77C92.49 308.67 92.38 306.58 92.36 304.51L92.64 304.78C87.64 304.84 82.64 304.94 77.64 304.95L62.74 305L63.24 304.5L63.19 317.13L62.74 316.69C65.21 316.69 67.67 316.69 70.14 316.74L77.57 316.86L92.64 317.14Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M76 333.07L61.17 333.35L53.65 333.47C51.14 333.47 48.65 333.47 46.1 333.47H45.66V333.02L45.6 320.39V319.89H46.1L61 320C66 320 71 320.12 75.95 320.17H76.22V320.44C76.22 322.58 76.14 324.71 76.09 326.82L76 333.07ZM76 333.07L75.86 326.7C75.86 324.6 75.75 322.51 75.73 320.44L76 320.71C71 320.77 66 320.87 61.05 320.88L46.1 320.94L46.6 320.44L46.55 333.07L46.1 332.63C48.57 332.63 51.03 332.63 53.5 332.68L60.94 332.8L76 333.07Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M76 59.71L61.13 60L53.61 60.11C51.1 60.11 48.61 60.11 46.06 60.17H45.62V59.72L45.56 47.09V46.59H46.06L61 46.64C66 46.64 71 46.76 75.95 46.81H76.22V47.08C76.22 49.22 76.14 51.35 76.09 53.46L76 59.71ZM76 59.71L75.86 53.34C75.86 51.24 75.75 49.15 75.73 47.08L76 47.35C71 47.35 66 47.51 61.05 47.52L46.1 47.58L46.6 47.08L46.55 59.71L46.1 59.27C48.57 59.27 51.03 59.27 53.5 59.27L60.94 59.39L76 59.71Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M453.94 59.71L439.1 60L431.59 60.11C429.08 60.11 426.59 60.11 424.04 60.17H423.6V59.72V47.09V46.59H424.1L439.05 46.65C444.05 46.65 449.05 46.77 454 46.82H454.27V47.09C454.27 49.23 454.18 51.36 454.14 53.47L453.94 59.71ZM453.94 59.71L453.8 53.34C453.75 51.24 453.68 49.15 453.66 47.08L453.94 47.35C448.94 47.35 443.94 47.51 438.99 47.52L424 47.58L424.5 47.08L424.45 59.71L424 59.27C426.47 59.27 428.93 59.27 431.4 59.27L438.83 59.39L453.94 59.71Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M437.26 75.64L422.43 75.92L414.91 76.03C412.4 76.03 409.91 76.03 407.36 76.09H406.92V75.64L406.86 63V62.5H407.36L422.31 62.56C427.31 62.56 432.31 62.68 437.26 62.73H437.54V63C437.54 65.14 437.46 67.27 437.41 69.38L437.26 75.64ZM437.26 75.64L437.12 69.27C437.07 67.16 437.01 65.08 436.99 63.01L437.26 63.28C432.26 63.28 427.26 63.44 422.31 63.45L407.36 63.51L407.86 63.01L407.81 75.64L407.36 75.2C409.83 75.2 412.29 75.2 414.76 75.2L422.2 75.32L437.26 75.64Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M360.69 223.44L345.86 223.72L338.34 223.83C335.83 223.83 333.34 223.83 330.8 223.83H330.35V223.38L330.3 210.74V210.24H330.81L345.75 210.31C350.75 210.31 355.75 210.42 360.7 210.47H361V210.74C361 212.88 360.92 215.01 360.87 217.12L360.69 223.44ZM360.69 223.44L360.55 217.06C360.5 214.96 360.44 212.88 360.42 210.8L360.69 211.08C355.69 211.08 350.69 211.24 345.74 211.24L330.8 211.3L331.29 210.8L331.24 223.44L330.8 222.99C333.26 222.99 335.72 222.99 338.19 223.05L345.63 223.16L360.69 223.44Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M344 239.37L329.17 239.65L321.66 239.76C319.15 239.81 316.66 239.76 314.11 239.81H313.66V239.36L313.61 226.72V226.22H314.11L329.06 226.29C334.06 226.29 339.06 226.4 344 226.45H344.28V226.72C344.28 228.86 344.19 230.99 344.15 233.1L344 239.37ZM344 239.37L343.86 232.99C343.86 230.89 343.75 228.81 343.73 226.73L344 227.01C339 227.06 334 227.17 329.06 227.17L314.11 227.23L314.61 226.73L314.55 239.37L314.11 238.92C316.57 238.92 319.04 238.92 321.51 238.98L328.94 239.09L344 239.37Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M327.4 223.44L312.57 223.72L305.06 223.83C302.55 223.83 300.06 223.83 297.51 223.83H297.06V223.38L297 210.8V210.3H297.51L312.45 210.37C317.45 210.37 322.45 210.48 327.4 210.53H327.68V210.8C327.68 212.94 327.59 215.07 327.55 217.18L327.4 223.44ZM327.4 223.44L327.26 217.06C327.26 214.96 327.15 212.88 327.13 210.8L327.4 211.08C322.4 211.08 317.4 211.24 312.45 211.24L297.51 211.3L298.01 210.8L298 223.44L297.56 222.99C300.02 222.99 302.48 222.99 304.96 223.05L312.39 223.16L327.4 223.44Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M453.94 333.07L439.1 333.35L431.59 333.47C429.08 333.47 426.59 333.47 424.04 333.47H423.6V333.02V320.39V319.89H424.1L439 320C444 320 449 320.12 453.95 320.17H454.22V320.44C454.22 322.58 454.13 324.71 454.09 326.82L453.94 333.07ZM453.94 333.07L453.8 326.7C453.75 324.6 453.68 322.51 453.66 320.44L453.94 320.71C448.94 320.77 443.94 320.87 438.99 320.88L424.04 320.94L424.54 320.44L424.49 333.07L424.04 332.63C426.51 332.63 428.97 332.63 431.44 332.68L438.87 332.8L453.94 333.07Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M199.93 97.28L185.09 97.56L177.58 97.67C175.07 97.67 172.58 97.67 170.03 97.73H169.59V97.28L169.54 84.65V84.15H170.04L184.99 84.21C189.99 84.21 194.99 84.32 199.99 84.38H200.26V84.65C200.26 86.79 200.17 88.92 200.13 91.02L199.93 97.28ZM199.93 97.28L199.78 90.91C199.78 88.8 199.67 86.72 199.65 84.65L199.93 84.92C194.93 84.92 189.93 85.08 184.93 85.08L170 85.15L170.5 84.65L170.45 97.28L170 96.84C172.47 96.84 174.93 96.84 177.4 96.84L184.83 96.95L199.93 97.28Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M423.23 181L429.11 171.51L426.21 169.71C425.793 169.448 425.456 169.076 425.237 168.635C425.019 168.194 424.926 167.701 424.97 167.21C425.02 166.655 425.04 166.097 425.03 165.54C425.015 165.05 425.135 164.565 425.379 164.14C425.623 163.714 425.98 163.365 426.41 163.13L429.41 161.52L424.13 151.67L421.13 153.29C420.696 153.518 420.208 153.622 419.72 153.59C419.231 153.558 418.76 153.392 418.36 153.11C417.902 152.792 417.428 152.498 416.94 152.23C416.507 151.997 416.146 151.649 415.899 151.223C415.652 150.798 415.528 150.312 415.54 149.82L415.65 146.4L404.48 146L404.38 149.43C404.358 149.921 404.201 150.397 403.925 150.805C403.65 151.212 403.268 151.536 402.82 151.74C402.58 151.85 402.33 151.98 402.09 152.11C401.85 152.24 401.61 152.37 401.38 152.51C400.962 152.767 400.481 152.904 399.99 152.904C399.499 152.904 399.018 152.767 398.6 152.51L395.67 150.7L389.79 160.19L392.7 162C393.116 162.262 393.451 162.635 393.669 163.076C393.886 163.517 393.976 164.01 393.93 164.5C393.878 165.052 393.862 165.606 393.88 166.16C393.891 166.65 393.767 167.135 393.522 167.559C393.277 167.984 392.92 168.334 392.49 168.57L389.49 170.18L394.77 180.03L397.77 178.41C398.204 178.182 398.692 178.078 399.18 178.11C399.669 178.142 400.14 178.308 400.54 178.59C400.998 178.908 401.472 179.202 401.96 179.47C402.393 179.701 402.753 180.048 403 180.472C403.247 180.896 403.372 181.38 403.36 181.87L403.25 185.3L414.42 185.65L414.52 182.22C414.541 181.731 414.696 181.257 414.97 180.851C415.244 180.445 415.624 180.123 416.07 179.92L416.81 179.54C417.06 179.41 417.3 179.28 417.53 179.14C417.95 178.883 418.433 178.747 418.925 178.747C419.417 178.747 419.9 178.883 420.32 179.14L423.23 181ZM413.77 173.95C412.176 174.801 410.365 175.161 408.567 174.984C406.768 174.806 405.063 174.1 403.666 172.953C402.269 171.807 401.243 170.272 400.718 168.543C400.193 166.814 400.193 164.968 400.717 163.238C401.241 161.509 402.265 159.973 403.662 158.826C405.058 157.679 406.763 156.971 408.561 156.792C410.36 156.614 412.17 156.973 413.765 157.823C415.36 158.673 416.666 159.977 417.52 161.57C418.657 163.706 418.9 166.205 418.197 168.52C417.494 170.835 415.902 172.777 413.77 173.92V173.95Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M101.53 288.51L107.42 279.02L104.51 277.22C104.094 276.958 103.759 276.585 103.541 276.144C103.324 275.703 103.234 275.21 103.28 274.72C103.31 274.164 103.31 273.606 103.28 273.05C103.267 272.559 103.389 272.074 103.635 271.649C103.88 271.223 104.238 270.874 104.67 270.64L107.67 269.03L102.39 259.18L99.39 260.8C98.9546 261.028 98.4651 261.131 97.9748 261.1C97.4845 261.068 97.0124 260.902 96.61 260.62C96.1547 260.299 95.6805 260.005 95.19 259.74C94.7581 259.505 94.399 259.156 94.1521 258.731C93.9051 258.306 93.7799 257.821 93.79 257.33L93.9 253.91L82.74 253.56L82.64 256.99C82.6198 257.483 82.4633 257.961 82.1879 258.37C81.9125 258.78 81.529 259.105 81.08 259.31C80.83 259.42 80.59 259.55 80.34 259.68C80.09 259.81 79.86 259.94 79.63 260.08C79.214 260.338 78.7344 260.474 78.245 260.474C77.7557 260.474 77.276 260.338 76.86 260.08L74 258.29L68.11 267.78L71 269.59C71.4177 269.851 71.7543 270.223 71.9717 270.665C72.189 271.106 72.2785 271.6 72.23 272.09C72.23 272.64 72.17 273.19 72.23 273.75C72.2433 274.241 72.1205 274.726 71.8752 275.151C71.6299 275.577 71.2716 275.926 70.84 276.16L67.84 277.77L73.12 287.62L76.12 286C76.5554 285.772 77.0449 285.669 77.5352 285.7C78.0255 285.732 78.4976 285.898 78.9 286.18C79.352 286.498 79.8229 286.789 80.31 287.05C80.7419 287.285 81.101 287.634 81.3479 288.059C81.5949 288.484 81.7201 288.969 81.71 289.46L81.61 292.89L92.77 293.23L92.88 289.81C92.9 289.319 93.0554 288.844 93.329 288.436C93.6025 288.029 93.9836 287.704 94.43 287.5C94.68 287.39 94.92 287.26 95.17 287.13C95.42 287 95.65 286.87 95.88 286.72C96.299 286.461 96.7821 286.323 97.275 286.323C97.7679 286.323 98.251 286.461 98.67 286.72L101.53 288.51ZM92.08 281.46C90.4851 282.316 88.672 282.68 86.8703 282.505C85.0686 282.331 83.3592 281.626 81.9583 280.479C80.5574 279.333 79.528 277.797 79.0003 276.065C78.4726 274.334 78.4703 272.485 78.9938 270.752C79.5173 269.019 80.543 267.48 81.9411 266.331C83.3392 265.181 85.0469 264.472 86.8482 264.293C88.6495 264.114 90.4634 264.473 92.0604 265.325C93.6574 266.177 94.9658 267.484 95.82 269.08C96.3879 270.138 96.7417 271.298 96.8611 272.493C96.9805 273.688 96.8632 274.895 96.5159 276.045C96.1685 277.195 95.598 278.265 94.8368 279.194C94.0757 280.123 93.1389 280.893 92.08 281.46Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M215.87 106.74L212 100L209.92 101.2C209.621 101.371 209.28 101.455 208.935 101.443C208.59 101.431 208.256 101.322 207.97 101.13C207.647 100.919 207.313 100.726 206.97 100.55C206.668 100.394 206.414 100.157 206.238 99.8657C206.061 99.5746 205.969 99.2404 205.97 98.9V96.5H198.15V98.9C198.149 99.2399 198.055 99.5732 197.879 99.8639C197.703 100.155 197.451 100.392 197.15 100.55C196.8 100.73 196.46 100.92 196.15 101.13C195.858 101.332 195.515 101.446 195.16 101.459C194.806 101.471 194.455 101.381 194.15 101.2L192 100L188.09 106.78L190.17 107.98C190.466 108.154 190.709 108.407 190.869 108.711C191.03 109.014 191.103 109.357 191.08 109.7C191.08 109.89 191.08 110.09 191.08 110.28C191.08 110.47 191.08 110.66 191.08 110.86C191.106 111.201 191.035 111.542 190.876 111.844C190.717 112.147 190.475 112.398 190.18 112.57L188.09 113.78L192 120.56L194.08 119.36C194.379 119.189 194.72 119.105 195.065 119.117C195.41 119.129 195.744 119.238 196.03 119.43C196.353 119.641 196.687 119.834 197.03 120.01C197.331 120.168 197.583 120.405 197.759 120.696C197.935 120.987 198.029 121.32 198.03 121.66V124H205.85V121.6C205.849 121.26 205.941 120.925 206.118 120.634C206.294 120.343 206.548 120.106 206.85 119.95C207.2 119.77 207.53 119.58 207.85 119.37C208.136 119.178 208.47 119.069 208.815 119.057C209.16 119.045 209.501 119.129 209.8 119.3L211.88 120.5L215.79 113.72L213.71 112.52C213.414 112.346 213.171 112.093 213.011 111.789C212.85 111.486 212.777 111.143 212.8 110.8C212.8 110.61 212.8 110.41 212.8 110.22C212.8 110.03 212.8 109.83 212.8 109.64C212.777 109.297 212.85 108.954 213.011 108.651C213.171 108.347 213.414 108.094 213.71 107.92L215.87 106.74ZM208.39 110.24C208.39 111.508 208.014 112.747 207.31 113.801C206.605 114.855 205.604 115.677 204.433 116.162C203.262 116.647 201.973 116.774 200.729 116.527C199.486 116.28 198.344 115.669 197.447 114.773C196.551 113.876 195.94 112.734 195.693 111.491C195.446 110.247 195.573 108.958 196.058 107.787C196.543 106.616 197.365 105.615 198.419 104.91C199.473 104.206 200.712 103.83 201.98 103.83C203.68 103.83 205.31 104.505 206.513 105.707C207.715 106.91 208.39 108.54 208.39 110.24Z" fill="#EBEBEB" fill-opacity="0.12"/>
|
||||
<path d="M88.84 303.84C75.77 316.63 73.57 336.43 76.33 353.76C76.4 354.16 77.01 354.05 77.01 353.68C77.01 349.73 76.89 345.82 76.9 341.92C76.97 341.75 77.03 341.58 77.1 341.4C80.51 338.92 83.65 336.12 85.59 332.28C87.77 327.99 88.59 323.14 90.3 318.66C90.46 318.23 90 318.36 89.7 318.58C81.7 324.44 79.22 330.75 76.94 339.18C76.9841 334.77 77.4461 330.373 78.32 326.05C80.04 318.05 83.43 310.12 89.18 304.19C89.4 304 89.06 303.61 88.84 303.84Z" fill="white"/>
|
||||
<path d="M91.29 305.33C93.54 305.41 94.95 309 96.7 310.05C96.8832 310.201 97.0962 310.311 97.325 310.373C97.5538 310.435 97.7933 310.448 98.0275 310.412C98.2618 310.375 98.4856 310.289 98.6842 310.159C98.8828 310.03 99.0518 309.86 99.18 309.66C100.92 307.24 98.54 304.25 96.3 302.57C97.9 303.23 99.23 304.39 100.95 304.72C101.171 304.791 101.405 304.813 101.636 304.787C101.867 304.76 102.089 304.685 102.289 304.566C102.488 304.446 102.66 304.286 102.793 304.096C102.926 303.905 103.017 303.688 103.06 303.46C103.82 300.15 99.67 298.69 96.83 298.62C98.21 297.62 102.16 295.05 100.06 293.77C97.96 292.49 93.3 296.21 91.79 297.44C89.56 299.24 86.91 301.94 86.79 304.76C86.68 308.05 89.56 306 91.29 305.33Z" fill="#55E6A5"/>
|
||||
<path opacity="0.1" d="M91.29 305.33C93.54 305.41 94.95 309 96.7 310.05C96.8832 310.201 97.0962 310.311 97.325 310.373C97.5538 310.435 97.7933 310.448 98.0275 310.412C98.2618 310.375 98.4856 310.289 98.6842 310.159C98.8828 310.03 99.0518 309.86 99.18 309.66C100.92 307.24 98.54 304.25 96.3 302.57C97.9 303.23 99.23 304.39 100.95 304.72C101.171 304.791 101.405 304.813 101.636 304.787C101.867 304.76 102.089 304.685 102.289 304.566C102.488 304.446 102.66 304.286 102.793 304.096C102.926 303.905 103.017 303.688 103.06 303.46C103.82 300.15 99.67 298.69 96.83 298.62C98.21 297.62 102.16 295.05 100.06 293.77C97.96 292.49 93.3 296.21 91.79 297.44C89.56 299.24 86.91 301.94 86.79 304.76C86.68 308.05 89.56 306 91.29 305.33Z" fill="black"/>
|
||||
<path d="M90.64 305.89C93.52 304.58 99.04 306.46 99.51 305.37C100.46 303.16 96.05 301.64 93.66 301.37C95.86 300.78 100.06 299.83 99.93 297.72C99.77 295.13 93.49 297.36 90.3 299.8C86.3 302.87 86.3 305.8 86.98 306.43C87.89 307.22 90.17 306.1 90.64 305.89Z" fill="#55E6A5"/>
|
||||
<path d="M59.07 302.57C72.62 314.86 75.56 334.57 73.47 351.99C73.41 352.38 72.8 352.3 72.79 351.93C72.64 347.98 72.61 344.07 72.45 340.18C72.37 340 72.3 339.84 72.23 339.66C68.72 337.31 65.48 334.66 63.4 330.87C61.05 326.66 60.01 321.87 58.17 317.44C58 317.02 58.46 317.12 58.77 317.33C66.94 322.89 69.71 329.1 72.31 337.44C72.0885 333.035 71.4591 328.659 70.43 324.37C68.43 316.44 64.71 308.65 58.74 302.93C58.52 302.71 58.84 302.36 59.07 302.57Z" fill="white"/>
|
||||
<path d="M56.68 304.16C54.43 304.32 53.16 307.96 51.45 309.08C51.2724 309.237 51.0637 309.354 50.8375 309.424C50.6114 309.495 50.3729 309.516 50.1378 309.488C49.9026 309.46 49.6762 309.382 49.4732 309.26C49.2702 309.138 49.0953 308.974 48.96 308.78C47.13 306.43 49.39 303.35 51.57 301.59C49.99 302.31 48.71 303.52 47 303.91C46.7819 303.991 46.5489 304.025 46.3168 304.008C46.0847 303.991 45.8589 303.924 45.6549 303.812C45.4509 303.7 45.2734 303.546 45.1345 303.359C44.9956 303.172 44.8986 302.958 44.85 302.73C43.96 299.46 48.05 297.83 50.85 297.66C49.44 296.75 45.39 294.3 47.44 292.94C49.49 291.58 54.29 295.12 55.85 296.29C58.14 298 60.85 300.6 61.1 303.41C61.38 306.7 58.43 304.78 56.68 304.16Z" fill="#55E6A5"/>
|
||||
<path opacity="0.1" d="M56.68 304.16C54.43 304.32 53.16 307.96 51.45 309.08C51.2724 309.237 51.0637 309.354 50.8375 309.424C50.6114 309.495 50.3729 309.516 50.1378 309.488C49.9026 309.46 49.6762 309.382 49.4732 309.26C49.2702 309.138 49.0953 308.974 48.96 308.78C47.13 306.43 49.39 303.35 51.57 301.59C49.99 302.31 48.71 303.52 47 303.91C46.7819 303.991 46.5489 304.025 46.3168 304.008C46.0847 303.991 45.8589 303.924 45.6549 303.812C45.4509 303.7 45.2734 303.546 45.1345 303.359C44.9956 303.172 44.8986 302.958 44.85 302.73C43.96 299.46 48.05 297.83 50.85 297.66C49.44 296.75 45.39 294.3 47.44 292.94C49.49 291.58 54.29 295.12 55.85 296.29C58.14 298 60.85 300.6 61.1 303.41C61.38 306.7 58.43 304.78 56.68 304.16Z" fill="black"/>
|
||||
<path d="M57.35 304.69C54.42 303.49 48.98 305.58 48.47 304.51C47.47 302.33 51.78 300.65 54.15 300.26C51.94 299.75 47.7 298.97 47.75 296.85C47.81 294.26 54.18 296.24 57.45 298.56C61.58 301.48 61.66 304.44 61.02 305.06C60.15 305.91 57.83 304.88 57.35 304.69Z" fill="#55E6A5"/>
|
||||
<path d="M72.93 335C73.8419 341.569 75.2459 348.061 77.13 354.42C77.1552 354.553 77.232 354.67 77.3436 354.746C77.4552 354.822 77.5924 354.85 77.725 354.825C77.8576 354.8 77.9748 354.723 78.0507 354.611C78.1267 354.5 78.1552 354.363 78.13 354.23C77.24 348.23 75.62 342.37 74.73 336.38C73.7679 330.324 73.4328 324.185 73.73 318.06C74.3 307.97 77.04 297.23 83.62 289.34C83.76 289.15 83.46 288.89 83.31 289.06C70 304.46 72.13 323.3 72.15 325C70.28 318.64 68.36 311.35 61.3 304.87C60.99 304.59 60.76 304.72 60.81 305.2C62.07 317 65.35 323.2 72.19 329.47C72.39 331.33 72.63 333.19 72.93 335Z" fill="white"/>
|
||||
<path d="M83.65 291.14C86.02 290.08 89.29 293.14 91.65 293.31C91.9138 293.369 92.1871 293.373 92.4523 293.32C92.7175 293.268 92.9688 293.16 93.19 293.005C93.4113 292.85 93.5977 292.65 93.7371 292.418C93.8766 292.186 93.9662 291.928 94 291.66C94.59 288.27 90.61 286.36 87.44 285.76C89.44 285.63 91.44 286.17 93.36 285.64C93.6255 285.603 93.88 285.51 94.1062 285.366C94.3324 285.222 94.5251 285.031 94.6711 284.807C94.8172 284.582 94.9132 284.328 94.9527 284.063C94.9922 283.798 94.9742 283.528 94.9 283.27C94 279.46 89 280 86 281.38C86.94 279.69 89.73 275 86.91 274.73C84.09 274.46 81.12 280.66 80.17 282.73C78.77 285.73 77.38 289.85 78.69 292.82C80.23 296.27 82.2 292.72 83.65 291.14Z" fill="#55E6A5"/>
|
||||
<path opacity="0.1" d="M83.65 291.14C86.02 290.08 89.29 293.14 91.65 293.31C91.9138 293.369 92.1871 293.373 92.4523 293.32C92.7175 293.268 92.9688 293.16 93.19 293.005C93.4113 292.85 93.5977 292.65 93.7371 292.418C93.8766 292.186 93.9662 291.928 94 291.66C94.59 288.27 90.61 286.36 87.44 285.76C89.44 285.63 91.44 286.17 93.36 285.64C93.6255 285.603 93.88 285.51 94.1062 285.366C94.3324 285.222 94.5251 285.031 94.6711 284.807C94.8172 284.582 94.9132 284.328 94.9527 284.063C94.9922 283.798 94.9742 283.528 94.9 283.27C94 279.46 89 280 86 281.38C86.94 279.69 89.73 275 86.91 274.73C84.09 274.46 81.12 280.66 80.17 282.73C78.77 285.73 77.38 289.85 78.69 292.82C80.23 296.27 82.2 292.72 83.65 291.14Z" fill="black"/>
|
||||
<path d="M83.25 292C85.58 289.2 92.25 288.37 92.19 287C92.07 284.23 86.72 284.87 84.1 285.77C86.1 284.04 89.96 280.95 88.77 278.82C87.3 276.22 81.89 281.69 79.77 285.82C77.16 291.03 78.68 294.1 79.67 294.38C81.07 294.81 82.87 292.5 83.25 292Z" fill="#55E6A5"/>
|
||||
<path d="M64.25 338.58L58.44 383H93.81C93.09 379.07 86.5 338.54 86.5 338.54L64.25 338.58Z" fill="#55E6A5"/>
|
||||
<path d="M43.37 383.14L95.03 382.9L146.69 382.81L250 382.64L353.31 382.81L404.97 382.9L456.63 383.14L404.97 383.39L353.31 383.48L250 383.64L146.69 383.48L95.03 383.39L43.37 383.14Z" fill="white" fill-opacity="0.4"/>
|
||||
<path d="M250 470.12C332.324 470.12 399.06 460.682 399.06 449.04C399.06 437.398 332.324 427.96 250 427.96C167.676 427.96 100.94 437.398 100.94 449.04C100.94 460.682 167.676 470.12 250 470.12Z" fill="#EBEBEB" fill-opacity="0.2"/>
|
||||
<path d="M157.57 227.67L151.36 203.24L102.36 215.71L95.88 190.21L135 100.89L154.47 96L173.37 170.36L189.06 166.36L195.59 192L179.9 196L186.1 220.43L157.57 227.67ZM124 182.87L148.26 176.7L140.26 145.14L124 182.87Z" fill="white"/>
|
||||
<path d="M298 146.12C298.079 153.727 296.834 161.29 294.32 168.47C292.066 174.934 288.635 180.925 284.2 186.14C280.004 191.029 274.825 194.978 269 197.73C263.056 200.513 256.563 201.927 250 201.87C243.392 201.927 236.854 200.513 230.86 197.73C225.009 194.988 219.804 191.038 215.59 186.14C211.173 180.933 207.78 174.938 205.59 168.47C203.131 161.278 201.917 153.72 202 146.12C201.916 138.517 203.13 130.955 205.59 123.76C207.782 117.296 211.175 111.305 215.59 106.1C219.814 101.189 225.015 97.2117 230.86 94.42C236.838 91.5802 243.382 90.1339 250 90.19C256.573 90.1334 263.072 91.5803 269 94.42C274.812 97.2242 279.98 101.201 284.18 106.1C288.612 111.313 292.043 117.3 294.3 123.76C296.821 130.942 298.073 138.508 298 146.12ZM268.38 146.12C268.38 137.533 266.663 130.573 263.23 125.24C259.797 119.907 255.38 117.24 249.98 117.24C244.34 117.24 239.833 119.907 236.46 125.24C233.087 130.573 231.4 137.533 231.4 146.12C231.4 154.707 233.087 161.637 236.46 166.91C239.833 172.183 244.347 174.82 250 174.82C255.4 174.82 259.817 172.183 263.25 166.91C266.683 161.637 268.4 154.707 268.4 146.12H268.38Z" fill="white"/>
|
||||
<path d="M350.84 223L354.84 198.12L304.93 190L309.14 164L380.64 97.67L400.44 100.88L388.17 176.62L404.17 179.21L399.94 205.36L383.94 202.77L379.94 227.65L350.84 223ZM337.84 168.53L362.54 172.53L367.75 140.38L337.84 168.53Z" fill="white"/>
|
||||
<path d="M208.68 72.46C206.718 72.4839 204.776 72.0634 203 71.23C201.331 70.442 199.836 69.3305 198.6 67.96C196.141 65.2065 194.769 61.6517 194.74 57.96C194.732 56.0742 195.096 54.2054 195.81 52.46C196.502 50.7465 197.502 49.1739 198.76 47.82C200.019 46.4647 201.535 45.3735 203.22 44.61C204.983 43.8049 206.902 43.3986 208.84 43.42C210.803 43.3943 212.745 43.8293 214.51 44.69C216.157 45.5027 217.631 46.6268 218.85 48C220.071 49.3779 221.03 50.9673 221.68 52.69C223.053 56.159 223.053 60.021 221.68 63.49C221.002 65.1925 220.015 66.7552 218.77 68.1C217.516 69.447 216.007 70.5313 214.33 71.29C212.555 72.0884 210.626 72.4878 208.68 72.46ZM200.35 57.92C200.346 59.1395 200.539 60.3516 200.92 61.51C201.274 62.6253 201.83 63.666 202.56 64.58C203.269 65.4739 204.163 66.204 205.18 66.72C206.277 67.2732 207.492 67.5512 208.72 67.53C209.961 67.5567 211.188 67.2713 212.29 66.7C213.314 66.1627 214.21 65.4126 214.92 64.5C215.639 63.5759 216.185 62.5289 216.53 61.41C217.29 59.1078 217.29 56.6223 216.53 54.32C216.164 53.208 215.605 52.1689 214.88 51.25C214.164 50.3642 213.268 49.6414 212.25 49.13C211.144 48.5967 209.933 48.3197 208.705 48.3197C207.477 48.3197 206.266 48.5967 205.16 49.13C204.137 49.6588 203.239 50.4025 202.53 51.31C201.823 52.2316 201.285 53.2709 200.94 54.38C200.561 55.5224 200.362 56.7166 200.35 57.92Z" fill="white"/>
|
||||
<path d="M236.23 72.66C234.635 72.6897 233.051 72.3865 231.58 71.77C230.264 71.2194 229.075 70.4023 228.09 69.37C227.133 68.3616 226.383 67.1761 225.88 65.88C224.866 63.1821 224.866 60.208 225.88 57.51C226.38 56.2068 227.131 55.0143 228.09 54C229.075 52.9678 230.264 52.1506 231.58 51.6C233.051 50.9835 234.635 50.6804 236.23 50.71C237.815 50.6801 239.389 50.9833 240.85 51.6C242.159 52.1535 243.34 52.9705 244.32 54C245.277 55.0084 246.027 56.1939 246.53 57.49C247.544 60.188 247.544 63.1621 246.53 65.86C246.031 67.1508 245.291 68.335 244.35 69.35C243.368 70.382 242.183 71.1992 240.87 71.75C239.403 72.3726 237.823 72.6825 236.23 72.66ZM230.69 61.72C230.677 62.5923 230.823 63.4598 231.12 64.28C231.381 65.0143 231.778 65.6928 232.29 66.28C232.76 66.8334 233.343 67.2801 234 67.59C234.687 67.9 235.432 68.0604 236.185 68.0604C236.938 68.0604 237.683 67.9 238.37 67.59C239.041 67.285 239.638 66.838 240.12 66.28C240.632 65.6909 241.032 65.013 241.3 64.28C241.589 63.4475 241.731 62.5711 241.72 61.69C241.728 60.8254 241.586 59.966 241.3 59.15C241.032 58.417 240.632 57.7391 240.12 57.15C239.638 56.592 239.041 56.1451 238.37 55.84C237.686 55.5266 236.942 55.3662 236.19 55.37C235.432 55.3624 234.683 55.5301 234 55.86C233.332 56.1792 232.736 56.6318 232.25 57.19C231.738 57.7772 231.341 58.4557 231.08 59.19C230.801 60.0036 230.669 60.8602 230.69 61.72Z" fill="white"/>
|
||||
<path d="M263.61 72.66C262.082 72.6964 260.574 72.3124 259.25 71.55C258.027 70.831 257.021 69.7943 256.34 68.55V80.86H250.93V51.09H255.66V54.73C256.402 53.5202 257.433 52.5135 258.66 51.8C259.984 51.0588 261.483 50.6892 263 50.73C264.382 50.7125 265.75 51.01 267 51.6C268.188 52.165 269.252 52.9604 270.13 53.94C271.025 54.9598 271.723 56.1362 272.19 57.41C272.689 58.7606 272.94 60.1902 272.93 61.63C272.939 63.1006 272.709 64.563 272.25 65.96C271.828 67.2366 271.177 68.4258 270.33 69.47C269.532 70.451 268.533 71.249 267.4 71.81C266.224 72.395 264.923 72.6867 263.61 72.66ZM261.8 68.06C262.578 68.0641 263.346 67.8824 264.04 67.53C264.715 67.1867 265.311 66.7065 265.79 66.12C266.291 65.5078 266.678 64.8099 266.93 64.06C267.199 63.2782 267.334 62.4567 267.33 61.63C267.334 60.7835 267.185 59.9433 266.89 59.15C266.608 58.4102 266.187 57.7313 265.65 57.15C265.127 56.5845 264.494 56.1319 263.79 55.82C263.062 55.4874 262.27 55.3201 261.47 55.33C260.936 55.3345 260.405 55.4257 259.9 55.6C259.365 55.7691 258.86 56.0186 258.4 56.34C257.944 56.6632 257.531 57.0429 257.17 57.47C256.815 57.8926 256.534 58.3729 256.34 58.89V63.89C256.809 65.0646 257.574 66.098 258.56 66.89C259.473 67.6418 260.617 68.0551 261.8 68.06Z" fill="white"/>
|
||||
<path d="M284.54 72.66C282.769 72.6633 281.009 72.3761 279.33 71.81C277.742 71.296 276.27 70.4737 275 69.39L277 66C278.172 66.8431 279.441 67.5415 280.78 68.08C281.947 68.5363 283.187 68.7736 284.44 68.78C285.327 68.826 286.208 68.6179 286.98 68.18C287.272 67.9951 287.512 67.7376 287.674 67.4327C287.837 67.1277 287.919 66.7857 287.91 66.44C287.919 66.0866 287.819 65.7389 287.624 65.4439C287.429 65.1489 287.149 64.9207 286.82 64.79C285.671 64.2903 284.484 63.8824 283.27 63.57C281.89 63.2 280.72 62.83 279.75 62.48C278.915 62.2029 278.126 61.8017 277.41 61.29C276.857 60.8976 276.413 60.3711 276.12 59.76C275.833 59.1048 275.694 58.3949 275.71 57.68C275.693 56.6745 275.909 55.6787 276.34 54.77C276.752 53.9125 277.354 53.1601 278.1 52.57C278.886 51.9442 279.781 51.4696 280.74 51.17C281.806 50.8421 282.915 50.6802 284.03 50.69C285.546 50.6804 287.055 50.9099 288.5 51.37C289.91 51.8428 291.207 52.602 292.31 53.6L290.13 56.87C289.177 56.1298 288.123 55.5303 287 55.09C286.043 54.7203 285.026 54.5271 284 54.52C283.195 54.4925 282.399 54.6899 281.7 55.09C281.396 55.2817 281.149 55.5519 280.985 55.8722C280.821 56.1925 280.747 56.5511 280.77 56.91C280.761 57.2339 280.836 57.5546 280.99 57.84C281.17 58.1092 281.414 58.3292 281.7 58.48C282.105 58.704 282.53 58.8882 282.97 59.03C283.5 59.2 284.15 59.39 284.97 59.57C286.43 59.95 287.67 60.33 288.71 60.71C289.591 61.0188 290.423 61.4533 291.18 62C291.796 62.4289 292.297 63.0024 292.64 63.67C292.971 64.4008 293.128 65.1983 293.1 66C293.136 66.9426 292.946 67.8801 292.546 68.7343C292.146 69.5885 291.547 70.3345 290.8 70.91C288.966 72.1742 286.763 72.79 284.54 72.66Z" fill="white"/>
|
||||
<path d="M297.67 61.47V43.29H303.08V61.47H297.67ZM297.67 72.26V66.16H303.08V72.26H297.67Z" fill="white"/>
|
||||
<path d="M270.6 313.85H235.09V316.76H270.6V313.85Z" fill="white"/>
|
||||
<path d="M270.6 317.63H235.09V320.54H270.6V317.63Z" fill="white"/>
|
||||
<path d="M270.6 321.42H235.09V324.33H270.6V321.42Z" fill="white"/>
|
||||
<path d="M270.6 325.21H235.09V328.12H270.6V325.21Z" fill="white"/>
|
||||
<path d="M270.6 329H235.09V331.91H270.6V329Z" fill="white"/>
|
||||
<path d="M285.98 404.59H218.46V407.5H285.98V404.59Z" fill="white"/>
|
||||
<path d="M285.98 408.38H218.46V411.29H285.98V408.38Z" fill="white"/>
|
||||
<path d="M285.98 412.17H218.46V415.08H285.98V412.17Z" fill="white"/>
|
||||
<path d="M285.98 415.96H218.46V418.87H285.98V415.96Z" fill="white"/>
|
||||
<path d="M285.98 419.75H218.46V422.66H285.98V419.75Z" fill="white"/>
|
||||
<path d="M188.83 289.8C188.83 289.41 174.06 284.44 174.06 284.44L174.93 233.56L194.57 229.34L188.83 289.8Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M188.83 289.8C188.83 289.41 174.06 284.44 174.06 284.44L174.93 233.56L194.57 229.34L188.83 289.8Z" fill="black"/>
|
||||
<path d="M324.49 309.77C324.59 309.39 340.21 309.83 340.21 309.83L356.9 261.75L339.9 251.04L324.49 309.77Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M324.49 309.77C324.59 309.39 340.21 309.83 340.21 309.83L356.9 261.75L339.9 251.04L324.49 309.77Z" fill="black"/>
|
||||
<path d="M186 308.54C186 308.54 191.49 226.24 196.31 199.16C196.31 199.16 295.73 206.68 349.4 227.16C349.4 227.16 321.73 323.28 320.3 328.05C320.28 328.09 250.27 314.3 186 308.54Z" fill="#55E6A5"/>
|
||||
<path opacity="0.1" d="M274.72 210.15C273.107 220.057 271.46 229.963 269.78 239.87L264.65 269.54L264.38 269.13L297.69 277L314.33 281L330.94 285.11L314.24 281.37L297.55 277.56L264.21 269.77L263.87 269.69L263.93 269.35L269.24 239.7C271.02 229.9 272.847 220.05 274.72 210.15Z" fill="black"/>
|
||||
<path opacity="0.1" d="M271.07 215.8C271.059 216.279 270.877 216.739 270.556 217.095C270.234 217.451 269.796 217.68 269.32 217.74C269.057 217.76 268.793 217.728 268.542 217.646C268.291 217.563 268.06 217.432 267.86 217.26C267.655 217.075 267.491 216.85 267.377 216.599C267.264 216.348 267.203 216.076 267.2 215.8C267.203 215.524 267.264 215.252 267.377 215.001C267.491 214.75 267.655 214.525 267.86 214.34C268.141 214.097 268.485 213.94 268.853 213.886C269.22 213.833 269.595 213.887 269.933 214.041C270.271 214.194 270.558 214.442 270.759 214.754C270.961 215.066 271.069 215.429 271.07 215.8ZM271.07 215.8C271.068 215.574 271.017 215.351 270.922 215.146C270.828 214.941 270.69 214.758 270.52 214.61C270.292 214.416 270.013 214.29 269.716 214.25C269.418 214.209 269.116 214.254 268.844 214.38C268.571 214.505 268.341 214.706 268.179 214.959C268.018 215.212 267.932 215.505 267.932 215.805C267.932 216.105 268.018 216.398 268.179 216.651C268.341 216.904 268.571 217.105 268.844 217.23C269.116 217.356 269.418 217.401 269.716 217.36C270.013 217.32 270.292 217.194 270.52 217C270.69 216.849 270.826 216.664 270.921 216.458C271.016 216.251 271.066 216.027 271.07 215.8Z" fill="black"/>
|
||||
<path opacity="0.1" d="M269.32 228.05C269.322 228.531 269.145 228.995 268.823 229.352C268.502 229.709 268.058 229.933 267.58 229.98C267.311 230.008 267.039 229.979 266.781 229.895C266.524 229.81 266.288 229.672 266.087 229.49C265.887 229.308 265.728 229.085 265.62 228.837C265.511 228.589 265.457 228.321 265.46 228.05C265.458 227.774 265.516 227.502 265.628 227.25C265.74 226.998 265.904 226.773 266.11 226.59C266.311 226.416 266.544 226.285 266.797 226.202C267.049 226.12 267.315 226.088 267.58 226.11C268.054 226.172 268.49 226.402 268.809 226.758C269.129 227.114 269.31 227.572 269.32 228.05ZM269.32 228.05C269.319 227.822 269.269 227.598 269.175 227.391C269.08 227.184 268.942 226.999 268.77 226.85C268.607 226.712 268.417 226.609 268.212 226.547C268.008 226.485 267.792 226.466 267.58 226.49C267.197 226.533 266.843 226.717 266.586 227.004C266.329 227.292 266.187 227.664 266.187 228.05C266.187 228.436 266.329 228.808 266.586 229.096C266.843 229.383 267.197 229.567 267.58 229.61C267.799 229.636 268.022 229.614 268.232 229.547C268.443 229.48 268.637 229.369 268.801 229.222C268.966 229.074 269.097 228.894 269.187 228.692C269.276 228.49 269.321 228.271 269.32 228.05Z" fill="black"/>
|
||||
<path opacity="0.1" d="M267.17 241C267.172 241.481 266.995 241.945 266.673 242.302C266.352 242.659 265.908 242.883 265.43 242.93C265.033 242.938 264.642 242.828 264.307 242.613C263.973 242.399 263.71 242.089 263.552 241.724C263.394 241.359 263.349 240.956 263.422 240.565C263.494 240.174 263.682 239.814 263.96 239.53C264.162 239.358 264.395 239.228 264.648 239.147C264.9 239.067 265.166 239.037 265.43 239.06C265.909 239.11 266.353 239.336 266.674 239.694C266.996 240.053 267.173 240.518 267.17 241ZM267.17 241C267.169 240.772 267.119 240.548 267.025 240.341C266.93 240.134 266.792 239.949 266.62 239.8C266.457 239.662 266.267 239.559 266.062 239.497C265.858 239.435 265.642 239.416 265.43 239.44C265.047 239.483 264.693 239.667 264.436 239.954C264.179 240.242 264.037 240.614 264.037 241C264.037 241.386 264.179 241.758 264.436 242.046C264.693 242.333 265.047 242.517 265.43 242.56C265.643 242.58 265.858 242.558 266.062 242.494C266.266 242.43 266.456 242.327 266.62 242.19C266.793 242.043 266.931 241.861 267.026 241.656C267.121 241.45 267.17 241.226 267.17 241Z" fill="black"/>
|
||||
<path opacity="0.1" d="M265 253.93C265 254.41 264.822 254.873 264.501 255.229C264.18 255.586 263.737 255.811 263.26 255.86C262.994 255.879 262.727 255.843 262.476 255.755C262.225 255.666 261.994 255.527 261.799 255.345C261.604 255.164 261.448 254.944 261.342 254.699C261.236 254.455 261.181 254.191 261.181 253.925C261.181 253.659 261.236 253.395 261.342 253.151C261.448 252.906 261.604 252.686 261.799 252.505C261.994 252.323 262.225 252.184 262.476 252.095C262.727 252.007 262.994 251.971 263.26 251.99C263.739 252.04 264.183 252.266 264.504 252.624C264.826 252.983 265.003 253.448 265 253.93ZM265 253.93C264.999 253.702 264.949 253.478 264.855 253.271C264.76 253.064 264.622 252.879 264.45 252.73C264.287 252.592 264.097 252.489 263.892 252.427C263.688 252.365 263.472 252.346 263.26 252.37C262.877 252.413 262.523 252.597 262.266 252.884C262.009 253.172 261.867 253.544 261.867 253.93C261.867 254.316 262.009 254.688 262.266 254.976C262.523 255.263 262.877 255.447 263.26 255.49C263.473 255.51 263.688 255.488 263.892 255.424C264.096 255.361 264.286 255.257 264.45 255.12C264.621 254.972 264.758 254.789 264.852 254.584C264.947 254.379 264.998 254.156 265 253.93Z" fill="black"/>
|
||||
<path opacity="0.1" d="M272.35 274.56C272.35 274.952 272.232 275.335 272.01 275.658C271.788 275.981 271.474 276.229 271.109 276.37C270.743 276.512 270.343 276.539 269.962 276.448C269.581 276.358 269.236 276.154 268.973 275.864C268.71 275.574 268.541 275.21 268.488 274.822C268.435 274.434 268.501 274.039 268.677 273.689C268.853 273.339 269.131 273.05 269.474 272.861C269.818 272.672 270.21 272.592 270.6 272.63C271.079 272.677 271.524 272.901 271.847 273.258C272.171 273.614 272.35 274.078 272.35 274.56ZM272.35 274.56C272.346 274.333 272.296 274.109 272.201 273.902C272.106 273.696 271.97 273.511 271.8 273.36C271.634 273.223 271.442 273.121 271.236 273.059C271.03 272.997 270.814 272.977 270.6 273C270.357 273.029 270.125 273.115 269.921 273.25C269.718 273.386 269.548 273.566 269.427 273.779C269.305 273.991 269.235 274.228 269.222 274.472C269.208 274.716 269.252 274.96 269.35 275.185C269.447 275.409 269.595 275.607 269.783 275.764C269.971 275.92 270.192 276.031 270.43 276.087C270.668 276.143 270.916 276.142 271.154 276.086C271.392 276.029 271.613 275.917 271.8 275.76C271.97 275.609 272.106 275.424 272.201 275.218C272.296 275.011 272.346 274.787 272.35 274.56Z" fill="black"/>
|
||||
<path opacity="0.1" d="M284.56 277.54C284.559 277.911 284.451 278.274 284.249 278.586C284.048 278.898 283.761 279.146 283.423 279.299C283.085 279.453 282.71 279.507 282.343 279.454C281.975 279.4 281.631 279.243 281.35 279C281.142 278.818 280.975 278.593 280.861 278.342C280.747 278.09 280.688 277.817 280.688 277.54C280.688 277.263 280.747 276.99 280.861 276.738C280.975 276.487 281.142 276.262 281.35 276.08C281.55 275.909 281.783 275.78 282.033 275.699C282.284 275.619 282.548 275.588 282.81 275.61C283.29 275.655 283.736 275.878 284.06 276.235C284.384 276.592 284.562 277.058 284.56 277.54ZM284.56 277.54C284.559 277.312 284.509 277.088 284.415 276.881C284.32 276.674 284.182 276.489 284.01 276.34C283.844 276.203 283.652 276.101 283.446 276.039C283.24 275.977 283.024 275.957 282.81 275.98C282.567 276.009 282.335 276.095 282.131 276.23C281.928 276.366 281.758 276.546 281.637 276.759C281.515 276.971 281.445 277.208 281.432 277.452C281.418 277.696 281.462 277.94 281.56 278.165C281.657 278.389 281.806 278.587 281.993 278.744C282.181 278.9 282.402 279.011 282.64 279.067C282.878 279.123 283.126 279.122 283.364 279.066C283.602 279.009 283.823 278.897 284.01 278.74C284.182 278.591 284.32 278.406 284.415 278.199C284.509 277.992 284.559 277.768 284.56 277.54Z" fill="black"/>
|
||||
<path opacity="0.1" d="M296.77 280.52C296.771 280.891 296.665 281.255 296.465 281.568C296.265 281.88 295.979 282.129 295.641 282.283C295.303 282.437 294.928 282.49 294.561 282.436C294.194 282.383 293.85 282.224 293.57 281.98C293.365 281.795 293.201 281.57 293.087 281.319C292.974 281.068 292.913 280.796 292.91 280.52C292.908 280.244 292.966 279.972 293.078 279.72C293.19 279.468 293.354 279.243 293.56 279.06C293.762 278.888 293.995 278.758 294.248 278.677C294.5 278.597 294.766 278.567 295.03 278.59C295.508 278.637 295.952 278.861 296.273 279.218C296.595 279.575 296.772 280.039 296.77 280.52ZM296.77 280.52C296.771 280.293 296.723 280.068 296.63 279.862C296.537 279.655 296.4 279.47 296.23 279.32C296.057 279.188 295.858 279.091 295.647 279.036C295.436 278.981 295.216 278.969 295 279C294.617 279.043 294.263 279.227 294.006 279.514C293.749 279.802 293.607 280.174 293.607 280.56C293.607 280.946 293.749 281.318 294.006 281.606C294.263 281.893 294.617 282.077 295 282.12C295.214 282.142 295.43 282.122 295.636 282.06C295.842 281.998 296.034 281.896 296.2 281.76C296.381 281.609 296.526 281.419 296.625 281.204C296.723 280.99 296.773 280.756 296.77 280.52Z" fill="black"/>
|
||||
<path opacity="0.1" d="M309 283.5C308.999 283.871 308.891 284.234 308.689 284.546C308.488 284.858 308.201 285.106 307.863 285.259C307.525 285.413 307.15 285.467 306.783 285.414C306.415 285.36 306.071 285.203 305.79 284.96C305.585 284.775 305.421 284.55 305.307 284.299C305.194 284.048 305.133 283.776 305.13 283.5C305.133 283.224 305.194 282.952 305.307 282.701C305.421 282.45 305.585 282.225 305.79 282.04C305.99 281.868 306.221 281.737 306.472 281.654C306.723 281.572 306.987 281.54 307.25 281.56C307.726 281.62 308.164 281.849 308.486 282.205C308.807 282.561 308.989 283.021 309 283.5ZM309 283.5C308.996 283.273 308.946 283.049 308.851 282.842C308.756 282.636 308.62 282.451 308.45 282.3C308.263 282.143 308.042 282.031 307.804 281.974C307.566 281.918 307.318 281.917 307.08 281.973C306.842 282.029 306.621 282.14 306.433 282.296C306.246 282.453 306.097 282.651 306 282.875C305.902 283.1 305.858 283.343 305.872 283.588C305.885 283.832 305.955 284.069 306.077 284.281C306.198 284.494 306.368 284.674 306.571 284.81C306.775 284.945 307.007 285.031 307.25 285.06C307.464 285.083 307.68 285.063 307.886 285.001C308.092 284.939 308.284 284.837 308.45 284.7C308.62 284.549 308.756 284.364 308.851 284.158C308.946 283.951 308.996 283.727 309 283.5Z" fill="black"/>
|
||||
<path opacity="0.1" d="M321.2 286.61C321.15 287.085 320.933 287.526 320.586 287.855C320.239 288.183 319.787 288.376 319.31 288.4C319.045 288.403 318.782 288.353 318.537 288.253C318.291 288.154 318.068 288.007 317.88 287.82C317.689 287.621 317.541 287.384 317.448 287.125C317.355 286.865 317.318 286.588 317.34 286.313C317.362 286.038 317.442 285.771 317.574 285.529C317.707 285.287 317.89 285.076 318.11 284.91C318.32 284.751 318.561 284.637 318.817 284.575C319.074 284.513 319.34 284.504 319.6 284.55C320.069 284.645 320.488 284.905 320.782 285.283C321.076 285.661 321.224 286.132 321.2 286.61ZM321.2 286.61C321.215 286.384 321.181 286.158 321.102 285.946C321.023 285.734 320.899 285.541 320.74 285.38C320.527 285.168 320.258 285.022 319.965 284.959C319.672 284.895 319.366 284.917 319.085 285.022C318.804 285.126 318.559 285.309 318.378 285.549C318.198 285.789 318.09 286.075 318.067 286.375C318.045 286.674 318.108 286.973 318.25 287.238C318.393 287.502 318.608 287.72 318.87 287.865C319.132 288.011 319.431 288.079 319.73 288.06C320.03 288.041 320.318 287.937 320.56 287.76C320.742 287.625 320.893 287.452 321.004 287.254C321.114 287.056 321.181 286.836 321.2 286.61Z" fill="black"/>
|
||||
<path opacity="0.1" d="M262.87 266.86C262.873 267.342 262.696 267.807 262.374 268.166C262.053 268.524 261.609 268.75 261.13 268.8C260.597 268.841 260.07 268.672 259.66 268.33C259.346 268.06 259.127 267.697 259.034 267.294C258.942 266.891 258.98 266.469 259.144 266.089C259.308 265.71 259.59 265.392 259.947 265.184C260.304 264.975 260.719 264.886 261.13 264.93C261.607 264.979 262.049 265.204 262.371 265.561C262.692 265.917 262.87 266.38 262.87 266.86ZM262.87 266.86C262.868 266.634 262.817 266.411 262.722 266.206C262.628 266.001 262.49 265.818 262.32 265.67C262.092 265.476 261.813 265.35 261.515 265.31C261.218 265.269 260.916 265.314 260.644 265.44C260.371 265.565 260.141 265.766 259.979 266.019C259.818 266.272 259.732 266.565 259.732 266.865C259.732 267.165 259.818 267.458 259.979 267.711C260.141 267.964 260.371 268.165 260.644 268.29C260.916 268.416 261.218 268.461 261.515 268.42C261.813 268.38 262.092 268.254 262.32 268.06C262.492 267.911 262.63 267.726 262.725 267.519C262.819 267.312 262.869 267.088 262.87 266.86Z" fill="black"/>
|
||||
<path opacity="0.2" d="M242.307 288.309C253.9 277.885 254.848 260.036 244.424 248.442C234 236.848 216.15 235.9 204.557 246.325C192.963 256.749 192.015 274.598 202.44 286.192C212.864 297.786 230.713 298.733 242.307 288.309Z" fill="black"/>
|
||||
<path d="M244.605 275.307C249.03 263.613 243.138 250.545 231.444 246.119C219.75 241.693 206.682 247.585 202.256 259.28C197.83 270.974 203.722 284.042 215.417 288.468C227.111 292.894 240.179 287.001 244.605 275.307Z" fill="#263238"/>
|
||||
<path d="M222.073 258.995L216.782 258.138L215.925 263.429L221.216 264.286L222.073 258.995Z" fill="#55E6A5"/>
|
||||
<path d="M217.633 252.844L212.342 251.987L211.485 257.278L216.776 258.135L217.633 252.844Z" fill="#55E6A5"/>
|
||||
<path d="M238.802 256.275L233.511 255.418L232.654 260.709L237.946 261.566L238.802 256.275Z" fill="#55E6A5"/>
|
||||
<path d="M214.222 273.898L208.931 273.041L208.074 278.332L213.365 279.189L214.222 273.898Z" fill="#55E6A5"/>
|
||||
<path d="M235.401 277.329L230.11 276.472L229.253 281.763L234.544 282.62L235.401 277.329Z" fill="#55E6A5"/>
|
||||
<path d="M220.372 269.459L215.081 268.602L214.224 273.893L219.515 274.75L220.372 269.459Z" fill="#55E6A5"/>
|
||||
<path d="M226.512 265.087L221.221 264.23L220.364 269.521L225.655 270.378L226.512 265.087Z" fill="#55E6A5"/>
|
||||
<path d="M232.653 260.705L227.362 259.848L226.505 265.139L231.796 265.996L232.653 260.705Z" fill="#55E6A5"/>
|
||||
<path d="M230.971 271.17L225.68 270.313L224.823 275.604L230.114 276.461L230.971 271.17Z" fill="#55E6A5"/>
|
||||
<path d="M321.026 297.011C330.907 284.951 329.141 267.164 317.081 257.283C305.022 247.402 287.235 249.167 277.353 261.227C267.472 273.287 269.238 291.074 281.298 300.955C293.358 310.837 311.144 309.071 321.026 297.011Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M321.026 297.011C330.907 284.951 329.141 267.164 317.081 257.283C305.022 247.402 287.235 249.167 277.353 261.227C267.472 273.287 269.238 291.074 281.298 300.955C293.358 310.837 311.144 309.071 321.026 297.011Z" fill="black"/>
|
||||
<path opacity="0.2" d="M326.66 285.67C326.53 286.23 326.38 286.76 326.22 287.3L271.22 275.56C271.35 274.56 271.52 273.56 271.75 272.61C272.552 268.946 274.076 265.478 276.233 262.409C278.39 259.34 281.137 256.732 284.313 254.736C287.489 252.74 291.031 251.398 294.732 250.786C298.433 250.174 302.219 250.306 305.868 251.174C309.517 252.041 312.957 253.627 315.987 255.839C319.017 258.05 321.576 260.843 323.514 264.055C325.453 267.266 326.732 270.832 327.277 274.543C327.822 278.254 327.623 282.037 326.69 285.67H326.66Z" fill="black"/>
|
||||
<path d="M307.926 300.001C319.463 295.18 324.907 281.919 320.086 270.382C315.264 258.846 302.004 253.401 290.467 258.223C278.93 263.044 273.486 276.305 278.307 287.842C283.128 299.378 296.389 304.823 307.926 300.001Z" fill="#263238"/>
|
||||
<path d="M304.875 266.79L299.661 265.551L293.489 291.517L298.703 292.757L304.875 266.79Z" fill="#55E6A5"/>
|
||||
<path d="M328.3 285.14L270.5 271.4C272.435 263.856 277.255 257.373 283.923 253.348C290.591 249.323 298.572 248.076 306.149 249.878C313.727 251.679 320.294 256.384 324.436 262.979C328.579 269.574 329.967 277.532 328.3 285.14Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M328.3 285.14L270.5 271.4C272.435 263.856 277.255 257.373 283.923 253.348C290.591 249.323 298.572 248.076 306.149 249.878C313.727 251.679 320.294 256.384 324.436 262.979C328.579 269.574 329.967 277.532 328.3 285.14Z" fill="black"/>
|
||||
<path opacity="0.1" d="M250.07 295.92C250.205 293.571 251.124 291.335 252.68 289.57C253.519 288.64 254.573 287.929 255.75 287.5C256.939 287.097 258.202 286.957 259.45 287.09C260.723 287.204 261.939 287.669 262.963 288.433C263.987 289.198 264.779 290.232 265.25 291.42C266.141 293.59 266.347 295.98 265.84 298.27C265.549 296.119 264.871 294.039 263.84 292.13C263.382 291.281 262.721 290.558 261.917 290.024C261.113 289.49 260.191 289.163 259.23 289.07C258.253 288.94 257.26 289.017 256.315 289.294C255.369 289.571 254.492 290.043 253.74 290.68C252.149 292.138 250.896 293.926 250.07 295.92Z" fill="black"/>
|
||||
<path d="M193.72 238.34C193.95 235.34 194.29 232.34 194.58 229.34C194.87 226.34 195.23 223.34 195.58 220.34C195.93 217.34 196.32 214.34 196.7 211.34C197.08 208.34 197.51 205.34 197.92 202.34L198.02 201.54L198.83 201.59C205.35 201.997 211.853 202.533 218.34 203.2C221.58 203.53 224.82 203.91 228.06 204.32C231.3 204.73 234.53 205.22 237.74 205.8L218.22 204.6L198.73 203.33L199.64 202.59C199.2 205.59 198.79 208.59 198.32 211.59C197.85 214.59 197.4 217.59 196.9 220.54C196.4 223.49 195.9 226.49 195.38 229.47C194.86 232.45 194.33 235.38 193.72 238.34Z" fill="#263238"/>
|
||||
<path d="M198.41 261.16C199.13 257.497 200.676 254.046 202.93 251.07C203.48 250.31 204.11 249.61 204.71 248.89C205.31 248.17 206.04 247.56 206.71 246.89C207.38 246.22 208.18 245.71 208.93 245.14C209.68 244.57 210.51 244.14 211.32 243.62C212.13 243.1 213.03 242.79 213.89 242.4L216.57 241.47L219.35 240.9C220.28 240.76 221.22 240.73 222.16 240.66C225.879 240.614 229.567 241.329 233 242.76C229.458 242.016 225.829 241.773 222.22 242.04C218.68 242.362 215.249 243.429 212.15 245.17C209.033 246.901 206.261 249.189 203.97 251.92C201.626 254.677 199.748 257.798 198.41 261.16Z" fill="white"/>
|
||||
<path d="M276.29 268.78C277.513 265.255 279.516 262.052 282.15 259.41C282.8 258.74 283.52 258.13 284.22 257.5C284.92 256.87 285.72 256.37 286.48 255.81C287.24 255.25 288.09 254.81 288.92 254.38C289.75 253.95 290.63 253.58 291.5 253.21C292.37 252.84 293.3 252.62 294.2 252.35L296.99 251.8L299.82 251.62C300.76 251.62 301.7 251.72 302.64 251.78C306.337 252.237 309.901 253.449 313.11 255.34C309.703 254.118 306.142 253.378 302.53 253.14C298.982 252.972 295.438 253.555 292.13 254.85C288.82 256.142 285.771 258.022 283.13 260.4C280.412 262.805 278.102 265.635 276.29 268.78Z" fill="white"/>
|
||||
<path d="M189.14 359.25C181.91 359.25 166.08 357.63 155.89 344.53C142.89 327.77 147.57 295.61 147.77 294.25L153.43 295.11C153.43 295.42 148.89 326.2 160.43 341.01C171.69 355.49 192.12 353.42 192.32 353.39L192.97 359.08C192.72 359.1 191.32 359.25 189.14 359.25Z" fill="#55E6A5"/>
|
||||
<path opacity="0.4" d="M189.14 359.25C181.91 359.25 166.08 357.63 155.89 344.53C142.89 327.77 147.57 295.61 147.77 294.25L153.43 295.11C153.43 295.42 148.89 326.2 160.43 341.01C171.69 355.49 192.12 353.42 192.32 353.39L192.97 359.08C192.72 359.1 191.32 359.25 189.14 359.25Z" fill="white"/>
|
||||
<path d="M155.1 299C154.042 299.005 152.985 298.921 151.94 298.75C142.39 297.2 138.17 291.49 136.3 286.97C134.43 282.45 134 277 135 270.68L147.1 272.68C146.47 276.57 146.66 280 147.62 282.33C148.31 283.99 149.62 285.99 153.88 286.68C155.82 286.99 157.88 286.83 160.11 283.52C161.653 281 162.692 278.205 163.17 275.29L175.28 277.29C174.489 281.911 172.789 286.33 170.28 290.29C166.56 296 161.22 299 155.1 299Z" fill="#55E6A5"/>
|
||||
<path d="M201.1 375.63C201.1 375.37 190.84 373.74 190.84 373.74L185.84 340.33L198.23 335.43L201.1 375.63Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M201.1 375.63C201.1 375.37 190.84 373.74 190.84 373.74L185.84 340.33L198.23 335.43L201.1 375.63Z" fill="black"/>
|
||||
<path d="M302.3 375.69C302.3 375.43 312.59 374.03 312.59 374.03L318.3 340.74L306 335.57L302.3 375.69Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M302.3 375.69C302.3 375.43 312.59 374.03 312.59 374.03L318.3 340.74L306 335.57L302.3 375.69Z" fill="black"/>
|
||||
<path d="M196.84 328C196.84 328 279.63 324.47 307.59 329.13C307.59 329.13 299.38 409.23 298.94 410.79C298.94 410.79 216.58 410.56 203.71 410.79C203.71 410.74 196.74 357.47 196.84 328Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M222 349.91C222 349.91 267.19 348.12 282.46 350.47C282.46 350.47 277.97 390.86 277.73 391.65C277.73 391.65 232.73 391.54 225.73 391.65C225.74 391.65 222.65 364 222 349.91Z" fill="black"/>
|
||||
<path opacity="0.2" d="M228.16 391.63H225.73C225.73 391.63 222.65 364 222 349.9L224.83 349.8L228.16 391.63Z" fill="black"/>
|
||||
<path d="M241.49 359.87C240.582 359.581 239.608 359.569 238.693 359.835C237.777 360.1 236.961 360.632 236.349 361.362C235.736 362.092 235.354 362.988 235.251 363.935C235.148 364.883 235.329 365.84 235.771 366.684C236.213 367.529 236.896 368.223 237.733 368.679C238.571 369.134 239.524 369.331 240.473 369.244C241.423 369.157 242.324 368.789 243.064 368.189C243.805 367.588 244.349 366.781 244.63 365.87C245.003 364.658 244.883 363.347 244.295 362.224C243.707 361.1 242.699 360.254 241.49 359.87ZM244.07 365.73C243.818 366.525 243.335 367.228 242.683 367.749C242.032 368.27 241.24 368.587 240.409 368.658C239.577 368.73 238.743 368.553 238.012 368.15C237.281 367.748 236.686 367.138 236.302 366.397C235.918 365.657 235.761 364.819 235.853 363.989C235.945 363.16 236.281 362.376 236.818 361.738C237.355 361.099 238.069 360.634 238.871 360.401C239.672 360.168 240.524 360.178 241.32 360.43C241.849 360.597 242.339 360.867 242.764 361.224C243.188 361.581 243.538 362.018 243.793 362.51C244.049 363.002 244.205 363.54 244.252 364.093C244.3 364.645 244.238 365.201 244.07 365.73ZM241.49 359.87C240.582 359.581 239.608 359.569 238.693 359.835C237.777 360.1 236.961 360.632 236.349 361.362C235.736 362.092 235.354 362.988 235.251 363.935C235.148 364.883 235.329 365.84 235.771 366.684C236.213 367.529 236.896 368.223 237.733 368.679C238.571 369.134 239.524 369.331 240.473 369.244C241.423 369.157 242.324 368.789 243.064 368.189C243.805 367.588 244.349 366.781 244.63 365.87C245.003 364.658 244.883 363.347 244.295 362.224C243.707 361.1 242.699 360.254 241.49 359.87ZM244.07 365.73C243.818 366.525 243.335 367.228 242.683 367.749C242.032 368.27 241.24 368.587 240.409 368.658C239.577 368.73 238.743 368.553 238.012 368.15C237.281 367.748 236.686 367.138 236.302 366.397C235.918 365.657 235.761 364.819 235.853 363.989C235.945 363.16 236.281 362.376 236.818 361.738C237.355 361.099 238.069 360.634 238.871 360.401C239.672 360.168 240.524 360.178 241.32 360.43C241.849 360.597 242.339 360.867 242.764 361.224C243.188 361.581 243.538 362.018 243.793 362.51C244.049 363.002 244.205 363.54 244.252 364.093C244.3 364.645 244.238 365.201 244.07 365.73ZM241.49 359.87C240.582 359.581 239.608 359.569 238.693 359.835C237.777 360.1 236.961 360.632 236.349 361.362C235.736 362.092 235.354 362.988 235.251 363.935C235.148 364.883 235.329 365.84 235.771 366.684C236.213 367.529 236.896 368.223 237.733 368.679C238.571 369.134 239.524 369.331 240.473 369.244C241.423 369.157 242.324 368.789 243.064 368.189C243.805 367.588 244.349 366.781 244.63 365.87C245.003 364.658 244.883 363.347 244.295 362.224C243.707 361.1 242.699 360.254 241.49 359.87ZM244.07 365.73C243.818 366.525 243.335 367.228 242.683 367.749C242.032 368.27 241.24 368.587 240.409 368.658C239.577 368.73 238.743 368.553 238.012 368.15C237.281 367.748 236.686 367.138 236.302 366.397C235.918 365.657 235.761 364.819 235.853 363.989C235.945 363.16 236.281 362.376 236.818 361.738C237.355 361.099 238.069 360.634 238.871 360.401C239.672 360.168 240.524 360.178 241.32 360.43C241.849 360.597 242.339 360.867 242.764 361.224C243.188 361.581 243.538 362.018 243.793 362.51C244.049 363.002 244.205 363.54 244.252 364.093C244.3 364.645 244.238 365.201 244.07 365.73ZM243.07 354.79C241.159 354.187 239.113 354.164 237.189 354.724C235.266 355.283 233.551 356.401 232.263 357.935C230.974 359.47 230.17 361.352 229.951 363.343C229.732 365.335 230.108 367.346 231.033 369.124C231.957 370.901 233.388 372.365 235.144 373.329C236.9 374.294 238.903 374.716 240.899 374.542C242.895 374.368 244.795 373.606 246.358 372.353C247.921 371.099 249.077 369.411 249.68 367.5C250.487 364.942 250.248 362.168 249.015 359.786C247.782 357.404 245.655 355.607 243.1 354.79H243.07ZM245.32 366.13C244.985 367.176 244.348 368.099 243.489 368.784C242.63 369.468 241.587 369.883 240.493 369.975C239.398 370.068 238.301 369.834 237.339 369.303C236.378 368.773 235.595 367.969 235.089 366.994C234.583 366.019 234.378 364.916 234.498 363.825C234.619 362.733 235.06 361.701 235.766 360.86C236.472 360.019 237.412 359.406 238.466 359.098C239.52 358.79 240.642 358.801 241.69 359.13C242.391 359.348 243.042 359.701 243.606 360.172C244.17 360.642 244.635 361.218 244.975 361.869C245.316 362.52 245.524 363.231 245.588 363.962C245.652 364.693 245.571 365.43 245.35 366.13H245.32ZM244.6 365.9C244.889 364.992 244.901 364.018 244.635 363.103C244.37 362.187 243.838 361.371 243.108 360.759C242.378 360.146 241.482 359.764 240.535 359.661C239.587 359.558 238.63 359.74 237.786 360.181C236.941 360.623 236.247 361.306 235.791 362.143C235.336 362.981 235.139 363.934 235.226 364.883C235.313 365.833 235.681 366.734 236.281 367.475C236.882 368.215 237.689 368.759 238.6 369.04C239.202 369.231 239.836 369.301 240.465 369.246C241.094 369.192 241.707 369.013 242.267 368.722C242.827 368.43 243.324 368.03 243.73 367.546C244.135 367.062 244.441 366.503 244.63 365.9H244.6ZM244.04 365.73C243.788 366.525 243.305 367.228 242.653 367.749C242.002 368.27 241.21 368.587 240.379 368.658C239.547 368.73 238.713 368.5Line truncated
|
||||
<path d="M238.99 374.31L235.27 373.13L234.65 375.83L237.95 376.87L238.99 374.31Z" fill="#55E6A5"/>
|
||||
<path d="M232.31 370.82L230.51 367.37L228.16 368.83L229.76 371.91L232.31 370.82Z" fill="#55E6A5"/>
|
||||
<path d="M230.05 363.64L231.22 359.93L228.53 359.3L227.48 362.61L230.05 363.64Z" fill="#55E6A5"/>
|
||||
<path d="M233.53 356.96L236.99 355.17L235.52 352.82L232.45 354.42L233.53 356.96Z" fill="#55E6A5"/>
|
||||
<path d="M240.71 354.7L244.43 355.88L245.05 353.18L241.75 352.14L240.71 354.7Z" fill="#55E6A5"/>
|
||||
<path d="M247.39 358.18L249.19 361.64L251.54 360.18L249.94 357.1L247.39 358.18Z" fill="#55E6A5"/>
|
||||
<path d="M249.65 365.37L248.48 369.08L251.18 369.71L252.22 366.4L249.65 365.37Z" fill="#55E6A5"/>
|
||||
<path d="M246.17 372.04L242.72 373.84L244.18 376.19L247.25 374.59L246.17 372.04Z" fill="#55E6A5"/>
|
||||
<path d="M257.84 374C257.304 373.649 256.675 373.465 256.034 373.471C255.393 373.477 254.768 373.674 254.239 374.035C253.709 374.397 253.299 374.907 253.06 375.502C252.82 376.096 252.763 376.749 252.895 377.376C253.026 378.004 253.341 378.578 253.799 379.026C254.257 379.475 254.838 379.777 255.468 379.895C256.098 380.014 256.749 379.942 257.339 379.69C257.928 379.438 258.43 379.017 258.78 378.48C259.249 377.761 259.413 376.886 259.237 376.046C259.06 375.206 258.558 374.47 257.84 374ZM258.45 378.26C258.143 378.731 257.704 379.1 257.188 379.321C256.671 379.542 256.101 379.605 255.549 379.502C254.997 379.399 254.488 379.134 254.086 378.742C253.684 378.349 253.408 377.846 253.292 377.297C253.176 376.747 253.225 376.176 253.434 375.654C253.643 375.133 254.001 374.685 254.465 374.367C254.928 374.05 255.475 373.877 256.037 373.87C256.598 373.864 257.149 374.024 257.62 374.33C257.934 374.534 258.205 374.797 258.416 375.106C258.628 375.414 258.777 375.761 258.854 376.128C258.931 376.494 258.935 376.871 258.866 377.239C258.796 377.607 258.655 377.957 258.45 378.27V378.26ZM257.84 374C257.304 373.649 256.675 373.465 256.034 373.471C255.393 373.477 254.768 373.674 254.239 374.035C253.709 374.397 253.299 374.907 253.06 375.502C252.82 376.096 252.763 376.749 252.895 377.376C253.026 378.004 253.341 378.578 253.799 379.026C254.257 379.475 254.838 379.777 255.468 379.895C256.098 380.014 256.749 379.942 257.339 379.69C257.928 379.438 258.43 379.017 258.78 378.48C259.249 377.761 259.413 376.886 259.237 376.046C259.06 375.206 258.558 374.47 257.84 374ZM258.45 378.26C258.143 378.731 257.704 379.1 257.188 379.321C256.671 379.542 256.101 379.605 255.549 379.502C254.997 379.399 254.488 379.134 254.086 378.742C253.684 378.349 253.408 377.846 253.292 377.297C253.176 376.747 253.225 376.176 253.434 375.654C253.643 375.133 254.001 374.685 254.465 374.367C254.928 374.05 255.475 373.877 256.037 373.87C256.598 373.864 257.149 374.024 257.62 374.33C257.934 374.534 258.205 374.797 258.416 375.106C258.628 375.414 258.777 375.761 258.854 376.128C258.931 376.494 258.935 376.871 258.866 377.239C258.796 377.607 258.655 377.957 258.45 378.27V378.26ZM257.84 374C257.304 373.649 256.675 373.465 256.034 373.471C255.393 373.477 254.768 373.674 254.239 374.035C253.709 374.397 253.299 374.907 253.06 375.502C252.82 376.096 252.763 376.749 252.895 377.376C253.026 378.004 253.341 378.578 253.799 379.026C254.257 379.475 254.838 379.777 255.468 379.895C256.098 380.014 256.749 379.942 257.339 379.69C257.928 379.438 258.43 379.017 258.78 378.48C259.249 377.761 259.413 376.886 259.237 376.046C259.06 375.206 258.558 374.47 257.84 374ZM258.45 378.26C258.143 378.731 257.704 379.1 257.188 379.321C256.671 379.542 256.101 379.605 255.549 379.502C254.997 379.399 254.488 379.134 254.086 378.742C253.684 378.349 253.408 377.846 253.292 377.297C253.176 376.747 253.225 376.176 253.434 375.654C253.643 375.133 254.001 374.685 254.465 374.367C254.928 374.05 255.475 373.877 256.037 373.87C256.598 373.864 257.149 374.024 257.62 374.33C257.934 374.534 258.205 374.797 258.416 375.106C258.628 375.414 258.777 375.761 258.854 376.128C258.931 376.494 258.935 376.871 258.866 377.239C258.796 377.607 258.655 377.957 258.45 378.27V378.26ZM259.79 371C258.659 370.265 257.336 369.882 255.987 369.9C254.639 369.917 253.326 370.333 252.214 371.097C251.102 371.86 250.242 372.936 249.741 374.188C249.241 375.441 249.123 376.813 249.403 378.133C249.682 379.452 250.346 380.659 251.312 381.601C252.277 382.542 253.5 383.177 254.826 383.424C256.151 383.671 257.521 383.519 258.76 382.988C260 382.457 261.054 381.57 261.79 380.44C262.279 379.689 262.615 378.849 262.779 377.968C262.943 377.087 262.932 376.182 262.746 375.306C262.561 374.429 262.204 373.597 261.697 372.859C261.189 372.12 260.542 371.488 259.79 371ZM259.2 378.75C258.797 379.37 258.218 379.857 257.538 380.149C256.858 380.44 256.106 380.523 255.379 380.388C254.651 380.252 253.981 379.904 253.451 379.386C252.922 378.869 252.558 378.207 252.405 377.483C252.252 376.759 252.318 376.005 252.594 375.319C252.869 374.632 253.342 374.042 253.953 373.624C254.564 373.206 255.285 372.979 256.025 372.971C256.765 372.963 257.49 373.175 258.11 373.58C258.522 373.848 258.877 374.195 259.155 374.601C259.433 375.006 259.628 375.463 259.729 375.944C259.83 376.425 259.836 376.921 259.745 377.405C259.654 377.888 259.469 378.348 259.2 378.76V378.75ZM258.78 378.48C259.126 377.944 259.306 377.318 259.297 376.68C259.288 376.041 259.09 375.42 258.728 374.895C258.366 374.369 257.857 373.963 257.264 373.726C256.671 373.49 256.022 373.434 255.397 373.567C254.773 373.699 254.202 374.013 253.756 374.47C253.311 374.927 253.01 375.505 252.893 376.132C252.775 376.759 252.846 377.407 253.097 377.994C253.347 378.581 253.766 379.081 254.3 379.43C255.02 379.896 255.894 380.059 256.734 379.883C257.573 379.706 258.308 379.206 258.78 378.49V378.48ZM258.45 378.26C258.143 378.731 257.704 379.1 257.188 379.321C256.671 379.542 256.101 379.605 255.549 379.502C254.997 379.399 254.488 379Line truncated
|
||||
<path d="M253.6 382.92L251.4 381.49L250.51 383.12L252.47 384.39L253.6 382.92Z" fill="#DBDBDB"/>
|
||||
<path d="M249.9 379.45L249.36 376.89L247.57 377.41L248.05 379.7L249.9 379.45Z" fill="#DBDBDB"/>
|
||||
<path d="M249.73 374.39L251.16 372.19L249.53 371.3L248.25 373.25L249.73 374.39Z" fill="#DBDBDB"/>
|
||||
<path d="M253.2 370.69L255.76 370.14L255.24 368.36L252.95 368.84L253.2 370.69Z" fill="#DBDBDB"/>
|
||||
<path d="M258.26 370.52L260.46 371.95L261.35 370.31L259.4 369.04L258.26 370.52Z" fill="#DBDBDB"/>
|
||||
<path d="M261.96 373.98L262.51 376.55L264.29 376.02L263.81 373.74L261.96 373.98Z" fill="#DBDBDB"/>
|
||||
<path d="M262.13 379.05L260.7 381.25L262.33 382.14L263.61 380.18L262.13 379.05Z" fill="#DBDBDB"/>
|
||||
<path d="M258.67 382.75L256.1 383.29L256.63 385.08L258.91 384.6L258.67 382.75Z" fill="#DBDBDB"/>
|
||||
<path d="M305.59 401.41L308.78 402.01L317.88 340.38L314.25 339.71L305.59 401.41Z" fill="#55E6A5"/>
|
||||
<path d="M277.72 391.65L282.45 350.47L314.25 339.71C314.25 339.71 305.59 402.08 305.59 401.41L277.72 391.65Z" fill="#55E6A5"/>
|
||||
<path opacity="0.4" d="M277.72 391.65L282.45 350.47L314.25 339.71C314.25 339.71 305.59 402.08 305.59 401.41L277.72 391.65Z" fill="white"/>
|
||||
<path d="M200.64 352.14C200.12 348.73 199.84 345.29 199.64 341.85C199.54 340.13 199.5 338.4 199.46 336.68C199.42 334.96 199.4 333.23 199.46 331.5V331.05H199.9C206.22 330.71 212.53 330.29 218.9 330.05C225.27 329.81 231.54 329.45 237.9 329.25C231.59 329.82 225.29 330.31 218.98 330.77C212.67 331.23 206.35 331.61 200.04 332.04L200.5 331.57V336.72L200.56 341.87C200.56 343.59 200.56 345.31 200.65 347.02L200.64 352.14Z" fill="white"/>
|
||||
<path d="M286.88 351.08C288.88 350.14 290.88 349.27 292.88 348.47C294.88 347.67 296.92 346.897 299 346.15C301.06 345.45 303.13 344.76 305.24 344.15C307.34 343.532 309.473 343.035 311.63 342.66L312.16 342.57L312.07 343.08C311.57 345.75 311.07 348.41 310.43 351.08C310.66 348.37 310.99 345.67 311.33 342.98L311.77 343.41C309.67 343.91 307.59 344.49 305.51 345.11C303.43 345.73 301.36 346.38 299.3 347.05L286.88 351.08Z" fill="white"/>
|
||||
<path opacity="0.1" d="M214.4 328.12L214.94 338.42L215.4 348.72L216.19 369.33L216.81 389.94L217.06 400.25L217.23 410.57L216.69 400.27L216.24 389.96L215.44 369.36L214.82 348.74L214.57 338.43L214.4 328.12Z" fill="black"/>
|
||||
<path opacity="0.1" d="M211.45 334.33C211.526 334.694 211.496 335.073 211.362 335.42C211.228 335.768 210.997 336.069 210.695 336.288C210.394 336.507 210.036 336.634 209.664 336.654C209.292 336.673 208.923 336.585 208.6 336.4C208.361 336.259 208.154 336.069 207.992 335.844C207.83 335.618 207.717 335.362 207.66 335.09C207.609 334.819 207.615 334.541 207.677 334.272C207.739 334.004 207.856 333.751 208.02 333.53C208.183 333.323 208.385 333.15 208.615 333.021C208.845 332.893 209.098 332.811 209.36 332.78C209.839 332.733 210.317 332.866 210.703 333.153C211.09 333.439 211.356 333.859 211.45 334.33ZM211.45 334.33C211.378 333.982 211.189 333.669 210.915 333.443C210.641 333.217 210.298 333.092 209.942 333.087C209.587 333.083 209.241 333.2 208.961 333.419C208.682 333.637 208.485 333.945 208.404 334.291C208.323 334.637 208.362 335 208.515 335.321C208.669 335.641 208.927 335.9 209.247 336.053C209.568 336.207 209.931 336.247 210.277 336.166C210.623 336.086 210.931 335.889 211.15 335.61C211.29 335.431 211.39 335.224 211.441 335.003C211.493 334.782 211.496 334.552 211.45 334.33Z" fill="black"/>
|
||||
<path opacity="0.1" d="M212.16 346.68C212.242 347.151 212.154 347.635 211.91 348.046C211.666 348.457 211.283 348.767 210.83 348.92C210.571 348.999 210.298 349.023 210.03 348.99C209.761 348.957 209.502 348.868 209.27 348.728C209.038 348.589 208.838 348.402 208.683 348.18C208.528 347.958 208.421 347.706 208.37 347.44C208.319 347.169 208.325 346.891 208.387 346.622C208.449 346.354 208.566 346.101 208.73 345.88C208.893 345.673 209.095 345.5 209.325 345.371C209.555 345.243 209.808 345.161 210.07 345.13C210.549 345.083 211.027 345.216 211.413 345.503C211.8 345.789 212.066 346.209 212.16 346.68ZM212.16 346.68C212.12 346.464 212.034 346.258 211.908 346.078C211.781 345.898 211.618 345.747 211.428 345.635C211.239 345.523 211.028 345.453 210.809 345.43C210.59 345.407 210.369 345.431 210.16 345.5C209.869 345.59 209.611 345.762 209.416 345.996C209.222 346.23 209.099 346.515 209.064 346.817C209.028 347.119 209.081 347.425 209.217 347.698C209.352 347.97 209.563 348.198 209.825 348.352C210.087 348.507 210.389 348.582 210.692 348.569C210.996 348.555 211.29 348.454 211.537 348.277C211.785 348.099 211.975 347.854 212.086 347.571C212.196 347.287 212.222 346.978 212.16 346.68Z" fill="black"/>
|
||||
<path opacity="0.1" d="M212.61 359.79C212.692 360.261 212.604 360.745 212.36 361.156C212.116 361.567 211.733 361.877 211.28 362.03C210.771 362.177 210.224 362.116 209.76 361.86C209.521 361.719 209.314 361.529 209.152 361.304C208.99 361.078 208.877 360.822 208.82 360.55C208.769 360.279 208.775 360.001 208.837 359.732C208.899 359.464 209.016 359.211 209.18 358.99C209.405 358.694 209.712 358.469 210.062 358.343C210.412 358.217 210.792 358.195 211.154 358.28C211.517 358.364 211.847 358.552 212.105 358.82C212.364 359.088 212.539 359.425 212.61 359.79ZM212.61 359.79C212.57 359.574 212.484 359.368 212.358 359.188C212.231 359.008 212.068 358.857 211.878 358.745C211.689 358.633 211.478 358.563 211.259 358.54C211.04 358.517 210.819 358.541 210.61 358.61C210.319 358.7 210.061 358.872 209.866 359.106C209.672 359.34 209.549 359.625 209.514 359.927C209.478 360.229 209.531 360.535 209.667 360.808C209.802 361.08 210.013 361.308 210.275 361.462C210.537 361.617 210.839 361.692 211.142 361.679C211.446 361.665 211.74 361.564 211.987 361.387C212.235 361.209 212.425 360.964 212.536 360.681C212.646 360.397 212.672 360.088 212.61 359.79Z" fill="black"/>
|
||||
<path opacity="0.1" d="M213.06 372.9C213.142 373.371 213.054 373.855 212.81 374.266C212.566 374.677 212.183 374.987 211.73 375.14C211.471 375.209 211.201 375.224 210.936 375.187C210.671 375.149 210.416 375.058 210.187 374.92C209.958 374.782 209.758 374.6 209.601 374.383C209.443 374.167 209.331 373.921 209.27 373.66C209.219 373.389 209.225 373.111 209.287 372.842C209.349 372.574 209.466 372.321 209.63 372.1C209.855 371.804 210.162 371.579 210.512 371.453C210.862 371.327 211.242 371.305 211.604 371.39C211.967 371.474 212.297 371.662 212.555 371.93C212.814 372.198 212.989 372.535 213.06 372.9ZM213.06 372.9C213.015 372.677 212.923 372.467 212.79 372.282C212.658 372.098 212.487 371.943 212.29 371.83C211.905 371.628 211.456 371.585 211.04 371.71C210.671 371.827 210.357 372.076 210.161 372.41C209.964 372.744 209.898 373.139 209.975 373.519C210.052 373.898 210.267 374.236 210.578 374.467C210.889 374.698 211.274 374.806 211.66 374.77C211.873 374.75 212.081 374.687 212.27 374.586C212.458 374.485 212.625 374.347 212.76 374.18C212.899 374.001 212.998 373.794 213.049 373.573C213.101 373.352 213.105 373.122 213.06 372.9Z" fill="black"/>
|
||||
<path opacity="0.1" d="M213.51 386C213.586 386.364 213.556 386.743 213.422 387.09C213.288 387.438 213.057 387.739 212.755 387.958C212.454 388.177 212.096 388.304 211.724 388.324C211.352 388.343 210.983 388.255 210.66 388.07C210.422 387.93 210.216 387.742 210.054 387.518C209.892 387.295 209.778 387.04 209.72 386.77C209.668 386.498 209.673 386.217 209.735 385.947C209.797 385.677 209.914 385.422 210.08 385.2C210.243 384.993 210.445 384.82 210.675 384.691C210.905 384.563 211.158 384.481 211.42 384.45C211.896 384.417 212.368 384.554 212.752 384.839C213.135 385.123 213.404 385.535 213.51 386ZM213.51 386C213.467 385.785 213.379 385.582 213.252 385.403C213.125 385.225 212.962 385.075 212.773 384.964C212.585 384.852 212.375 384.782 212.157 384.757C211.939 384.733 211.719 384.754 211.51 384.82C211.141 384.937 210.827 385.186 210.631 385.52C210.434 385.854 210.368 386.249 210.445 386.629C210.522 387.008 210.737 387.346 211.048 387.577C211.359 387.808 211.744 387.916 212.13 387.88C212.351 387.862 212.566 387.797 212.76 387.69C212.954 387.582 213.123 387.435 213.255 387.257C213.388 387.079 213.481 386.875 213.528 386.658C213.576 386.441 213.576 386.217 213.53 386H213.51Z" fill="black"/>
|
||||
<path opacity="0.1" d="M214 399.11C214.051 399.359 214.052 399.615 214.003 399.865C213.955 400.114 213.857 400.351 213.717 400.563C213.577 400.774 213.396 400.956 213.186 401.098C212.975 401.24 212.739 401.339 212.49 401.39C212.241 401.441 211.985 401.442 211.736 401.393C211.486 401.345 211.249 401.247 211.037 401.107C210.826 400.967 210.644 400.786 210.502 400.576C210.36 400.365 210.261 400.129 210.21 399.88C210.155 399.615 210.157 399.341 210.215 399.076C210.273 398.811 210.385 398.562 210.545 398.343C210.706 398.124 210.91 397.942 211.145 397.807C211.38 397.672 211.64 397.588 211.91 397.56C212.386 397.527 212.858 397.664 213.242 397.949C213.625 398.233 213.894 398.645 214 399.11ZM214 399.11C213.955 398.889 213.863 398.679 213.73 398.496C213.597 398.314 213.427 398.161 213.23 398.05C213.04 397.948 212.832 397.885 212.617 397.864C212.402 397.843 212.186 397.866 211.98 397.93C211.611 398.047 211.297 398.296 211.101 398.63C210.904 398.964 210.838 399.359 210.915 399.739C210.992 400.118 211.207 400.456 211.518 400.687C211.829 400.918 212.214 401.026 212.6 400.99C212.821 400.972 213.036 400.907 213.23 400.8C213.424 400.692 213.593 400.545 213.725 400.367C213.858 400.189 213.951 399.985 213.998 399.768C214.046 399.551 214.046 399.327 214 399.11Z" fill="black"/>
|
||||
<path d="M218.02 419.152L171.145 433.358L172.804 438.832L219.679 424.626L218.02 419.152Z" fill="#55E6A5"/>
|
||||
<path opacity="0.4" d="M218.02 419.152L171.145 433.358L172.804 438.832L219.679 424.626L218.02 419.152Z" fill="white"/>
|
||||
<path d="M195.552 424.103L190.101 425.836L192.676 433.937L198.127 432.203L195.552 424.103Z" fill="#55E6A5"/>
|
||||
<path d="M172.43 446.86L160.33 394.48L123.82 403.14L141.8 454.19L172.43 446.86Z" fill="#55E6A5"/>
|
||||
<path d="M180.53 444.2L172.43 446.86L160.33 394.48L171.98 397.26L180.53 444.2Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M180.53 444.2L172.43 446.86L160.33 394.48L171.98 397.26L180.53 444.2Z" fill="black"/>
|
||||
<path d="M218.86 428.1C222.29 428.1 225.07 425.32 225.07 421.89C225.07 418.46 222.29 415.68 218.86 415.68C215.43 415.68 212.65 418.46 212.65 421.89C212.65 425.32 215.43 428.1 218.86 428.1Z" fill="#55E6A5"/>
|
||||
<path d="M282.814 419.021L281.144 424.492L327.988 438.796L329.659 433.325L282.814 419.021Z" fill="#55E6A5"/>
|
||||
<path opacity="0.4" d="M282.814 419.021L281.144 424.492L327.988 438.796L329.659 433.325L282.814 419.021Z" fill="white"/>
|
||||
<path d="M305.251 423.971L302.657 432.066L308.104 433.811L310.698 425.717L305.251 423.971Z" fill="#55E6A5"/>
|
||||
<path d="M328.36 446.82L340.56 394.46L377.06 403.2L358.97 454.21L328.36 446.82Z" fill="#55E6A5"/>
|
||||
<path d="M320.26 444.14L328.36 446.82L340.56 394.46L328.91 397.21L320.26 444.14Z" fill="#55E6A5"/>
|
||||
<path opacity="0.2" d="M320.26 444.14L328.36 446.82L340.56 394.46L328.91 397.21L320.26 444.14Z" fill="black"/>
|
||||
<path d="M275.76 421.74C275.756 422.971 276.117 424.175 276.798 425.2C277.478 426.225 278.448 427.026 279.584 427.5C280.719 427.974 281.97 428.101 283.177 427.864C284.385 427.627 285.495 427.037 286.368 426.169C287.24 425.301 287.835 424.193 288.078 422.987C288.321 421.78 288.2 420.529 287.731 419.391C287.263 418.253 286.467 417.28 285.445 416.595C284.423 415.909 283.221 415.542 281.99 415.54C281.174 415.537 280.365 415.696 279.61 416.006C278.855 416.316 278.168 416.772 277.589 417.348C277.011 417.924 276.551 418.608 276.237 419.362C275.924 420.116 275.761 420.924 275.76 421.74Z" fill="#55E6A5"/>
|
||||
<path d="M322.66 357.13C322.81 356.99 337.87 343.03 355.58 347.81C373.69 352.69 388.64 379.97 388.79 380.25L393.79 377.53C393.13 376.32 377.53 347.8 357.03 342.28C336.17 336.66 319.38 352.28 318.68 352.98L322.66 357.13Z" fill="#55E6A5"/>
|
||||
<path opacity="0.4" d="M322.66 357.13C322.81 356.99 337.87 343.03 355.58 347.81C373.69 352.69 388.64 379.97 388.79 380.25L393.79 377.53C393.13 376.32 377.53 347.8 357.03 342.28C336.17 336.66 319.38 352.28 318.68 352.98L322.66 357.13Z" fill="white"/>
|
||||
<path d="M382.12 407.71L393 402C391.63 399.381 390.778 396.522 390.49 393.58C390.25 389.58 391.83 388.22 393.56 387.3C397.36 385.3 399.63 386.09 401.18 387C403.35 388.29 405.56 390.91 407.4 394.4L418.25 388.67C415.25 383.05 411.63 378.93 407.41 376.44C403.19 373.95 396.41 371.94 387.84 376.44C381.17 379.96 377.77 386.3 378.25 394.3C378.64 398.982 379.955 403.54 382.12 407.71Z" fill="#55E6A5"/>
|
||||
<path d="M325 338C327.35 336.38 329.76 334.85 332.17 333.33C334.58 331.81 337.03 330.33 339.48 328.89C341.93 327.45 344.4 326.02 346.9 324.65L350.66 322.6C351.93 321.95 353.18 321.27 354.47 320.6C353.3 321.42 352.09 322.19 350.91 322.98L347.29 325.27C344.88 326.8 342.44 328.27 339.99 329.71C337.54 331.15 335.06 332.58 332.56 333.95C330.06 335.32 327.51 336.75 325 338Z" fill="white" fill-opacity="0.8"/>
|
||||
<path d="M318.72 361.42C322.09 363.34 325.28 365.51 328.43 367.73C331.58 369.95 334.64 372.29 337.55 374.85C334.21 372.911 330.969 370.805 327.84 368.54C324.72 366.29 321.63 364 318.72 361.42Z" fill="white" fill-opacity="0.8"/>
|
||||
<path d="M324.25 358.54C326.85 359.33 329.41 360.23 331.96 361.13C334.51 362.03 337 363 339.57 364C342.14 365 344.57 366 347.09 367L350.83 368.6C352.06 369.17 353.3 369.71 354.52 370.3C353.22 369.92 351.94 369.47 350.65 369.06L346.82 367.72C344.26 366.82 341.73 365.85 339.21 364.88C336.69 363.91 334.21 362.88 331.68 361.88C329.15 360.88 326.7 359.72 324.25 358.54Z" fill="white" fill-opacity="0.8"/>
|
||||
<path d="M331.63 340.22C334.12 339.57 336.63 339.03 339.14 338.51C341.65 337.99 344.14 337.51 346.7 337.06C349.26 336.61 351.75 336.2 354.29 335.84L358.1 335.31C359.38 335.17 360.65 335 361.94 334.89C360.69 335.22 359.44 335.49 358.19 335.8L354.43 336.6C351.92 337.13 349.43 337.6 346.87 338.05C344.31 338.5 341.81 338.91 339.27 339.26C336.73 339.61 334.19 340 331.63 340.22Z" fill="white" fill-opacity="0.8"/>
|
||||
<path d="M179.22 381.7C180.196 379.881 181.562 378.3 183.22 377.07C184.879 375.792 186.786 374.876 188.82 374.38C190.879 373.873 193.034 373.918 195.07 374.51C197.104 375.143 198.943 376.286 200.41 377.83C201.87 379.365 203.005 381.177 203.75 383.16C204.532 385.139 204.873 387.265 204.75 389.39C204.713 390.528 204.305 391.624 203.59 392.51C203.149 392.976 202.541 393.249 201.9 393.27C201.304 393.281 200.714 393.147 200.18 392.88C199.633 392.588 199.198 392.124 198.94 391.56C198.703 391.031 198.574 390.46 198.56 389.88C198.546 388.794 198.726 387.714 199.09 386.69C199.789 384.692 200.824 382.829 202.15 381.18C203.444 379.521 204.97 378.056 206.68 376.83C210.096 374.27 214.355 373.099 218.6 373.55C220.692 373.799 222.714 374.458 224.55 375.49C226.373 376.531 227.979 377.913 229.28 379.56C230.552 381.201 231.589 383.012 232.36 384.94C233.148 386.849 233.699 388.847 234 390.89C233.223 386.859 231.464 383.081 228.88 379.89C227.597 378.326 226.021 377.029 224.24 376.07C222.463 375.124 220.515 374.539 218.51 374.35C214.477 373.981 210.451 375.129 207.22 377.57C203.948 379.937 201.446 383.218 200.03 387C199.691 387.912 199.518 388.877 199.52 389.85C199.49 390.282 199.576 390.713 199.77 391.1C199.963 391.487 200.257 391.815 200.62 392.05C201.005 392.252 201.435 392.352 201.87 392.34C202.069 392.336 202.266 392.293 202.448 392.212C202.63 392.132 202.794 392.015 202.93 391.87C203.502 391.137 203.824 390.24 203.85 389.31C203.947 387.314 203.605 385.32 202.85 383.47C202.147 381.591 201.088 379.866 199.73 378.39C198.366 376.907 196.644 375.799 194.73 375.17C192.814 374.564 190.772 374.475 188.81 374.91C184.841 375.816 181.393 378.257 179.22 381.7Z" fill="white"/>
|
||||
<path d="M133 140.21C132.959 136.083 131.967 132.021 130.1 128.34C129.192 126.527 127.853 124.964 126.2 123.79C124.517 122.708 122.498 122.278 120.52 122.58C118.574 122.924 116.833 123.997 115.65 125.58C115.042 126.357 114.565 127.229 114.24 128.16C113.894 129.061 113.771 130.031 113.88 130.99C113.928 131.412 114.102 131.809 114.38 132.13C114.51 132.272 114.67 132.382 114.85 132.45C114.944 132.486 115.041 132.513 115.14 132.53C115.22 132.535 115.3 132.535 115.38 132.53C116.06 132.4 116.73 131.53 117.18 130.67C118.072 128.884 118.685 126.972 119 125C119.786 121.013 119.59 116.895 118.43 113C117.83 111.077 116.843 109.297 115.53 107.77C114.209 106.249 112.552 105.058 110.69 104.29C109.777 103.867 108.826 103.532 107.85 103.29C106.865 103.044 105.862 102.877 104.85 102.79C102.831 102.658 100.803 102.861 98.85 103.39C94.8709 104.497 91.2019 106.509 88.13 109.27C89.6083 107.811 91.2568 106.535 93.04 105.47C94.8149 104.382 96.7199 103.522 98.71 102.91C100.728 102.321 102.83 102.067 104.93 102.16C105.979 102.238 107.022 102.388 108.05 102.61C109.079 102.85 110.083 103.185 111.05 103.61C113.044 104.379 114.822 105.622 116.23 107.23C117.634 108.834 118.692 110.709 119.34 112.74C120.586 116.785 120.823 121.073 120.03 125.23C119.681 127.322 119.006 129.347 118.03 131.23C117.766 131.713 117.451 132.165 117.09 132.58C116.695 133.082 116.142 133.435 115.52 133.58C115.179 133.612 114.836 133.56 114.52 133.43C114.219 133.312 113.949 133.127 113.73 132.89C113.324 132.43 113.066 131.859 112.99 131.25C112.869 130.145 113.013 129.028 113.41 127.99C113.777 126.971 114.307 126.019 114.98 125.17C116.294 123.409 118.248 122.235 120.42 121.9C122.575 121.615 124.76 122.131 126.56 123.35C128.275 124.605 129.65 126.269 130.56 128.19C131.486 130.066 132.158 132.057 132.56 134.11C132.944 136.119 133.092 138.166 133 140.21Z" fill="white"/>
|
||||
<path d="M353.77 192.37C349.75 191.436 345.57 191.436 341.55 192.37C339.576 192.834 337.746 193.775 336.22 195.11C334.769 196.485 333.879 198.348 333.72 200.34C333.608 202.321 334.256 204.27 335.53 205.79C336.147 206.571 336.886 207.247 337.72 207.79C338.516 208.327 339.427 208.67 340.38 208.79C340.804 208.837 341.232 208.757 341.61 208.56C341.779 208.469 341.923 208.339 342.03 208.18C342.09 208.11 342.12 208 342.18 207.92C342.24 207.84 342.18 207.76 342.23 207.69C342.23 207 341.55 206.14 340.84 205.5C339.303 204.199 337.576 203.14 335.72 202.36C332.022 200.659 327.964 199.887 323.9 200.11C321.891 200.245 319.931 200.789 318.14 201.71C316.353 202.637 314.809 203.969 313.63 205.6C312.993 206.386 312.43 207.23 311.95 208.12C311.701 208.562 311.487 209.024 311.31 209.5C311.092 209.955 310.911 210.426 310.77 210.91C310.166 212.851 309.886 214.878 309.94 216.91C310.092 221.035 311.194 225.07 313.16 228.7C312.087 226.926 311.231 225.029 310.61 223.05C309.969 221.067 309.579 219.011 309.45 216.93C309.346 214.832 309.586 212.731 310.16 210.71C310.302 210.202 310.479 209.704 310.69 209.22C310.868 208.725 311.082 208.244 311.33 207.78C311.803 206.838 312.366 205.944 313.01 205.11C314.226 203.353 315.849 201.915 317.74 200.92C319.629 199.936 321.697 199.345 323.82 199.18C328.042 198.913 332.266 199.685 336.12 201.43C338.074 202.259 339.886 203.39 341.49 204.78C341.898 205.152 342.266 205.564 342.59 206.01C342.969 206.514 343.17 207.13 343.16 207.76C343.117 208.096 342.99 208.416 342.79 208.69C342.603 208.959 342.357 209.181 342.07 209.34C341.531 209.627 340.917 209.742 340.31 209.67C339.207 209.532 338.154 209.131 337.24 208.5C336.335 207.906 335.531 207.17 334.86 206.32C333.47 204.643 332.786 202.492 332.95 200.32C333.174 198.156 334.184 196.149 335.79 194.68C337.418 193.32 339.355 192.379 341.43 191.94C343.468 191.497 345.557 191.325 347.64 191.43C349.713 191.507 351.77 191.822 353.77 192.37Z" fill="white"/>
|
||||
<path d="M291.86 127.67C291.195 125.278 291.062 122.769 291.47 120.32C291.825 117.832 292.701 115.447 294.04 113.32C295.369 111.168 297.246 109.407 299.48 108.22C301.743 107.071 304.263 106.52 306.8 106.62C309.323 106.714 311.802 107.313 314.09 108.38C316.414 109.403 318.486 110.922 320.16 112.83C321.074 113.818 321.636 115.08 321.76 116.42C321.773 117.163 321.493 117.882 320.98 118.42C320.487 118.919 319.879 119.29 319.21 119.5C318.519 119.701 317.781 119.67 317.11 119.41C316.476 119.155 315.899 118.778 315.41 118.3C314.496 117.388 313.752 116.322 313.21 115.15C312.136 112.865 311.46 110.413 311.21 107.9C310.931 105.405 311.009 102.883 311.44 100.41C312.222 95.3808 314.871 90.8315 318.86 87.67C320.854 86.1352 323.131 85.0071 325.56 84.35C327.983 83.7123 330.506 83.5493 332.99 83.87C335.453 84.1941 337.857 84.8676 340.13 85.87C342.405 86.8345 344.551 88.0773 346.52 89.57C342.505 86.7677 337.862 84.9988 333 84.42C330.58 84.1521 328.132 84.3558 325.79 85.02C321.124 86.4154 317.18 89.5664 314.79 93.81C313.63 95.9283 312.835 98.2272 312.44 100.61C311.606 105.394 312.208 110.318 314.17 114.76C314.662 115.833 315.339 116.811 316.17 117.65C316.517 118.059 316.967 118.367 317.474 118.543C317.98 118.719 318.524 118.756 319.05 118.65C319.564 118.488 320.031 118.203 320.41 117.82C320.584 117.642 320.721 117.431 320.812 117.199C320.903 116.967 320.947 116.719 320.94 116.47C320.815 115.348 320.331 114.296 319.56 113.47C317.98 111.66 316.025 110.217 313.83 109.24C311.632 108.211 309.254 107.62 306.83 107.5C304.415 107.372 302.007 107.857 299.83 108.91C297.67 110.003 295.837 111.649 294.52 113.68C293.169 115.718 292.238 118.005 291.781 120.407C291.324 122.809 291.351 125.278 291.86 127.67Z" fill="white"/>
|
||||
<path d="M175.87 381.92C175.068 381.669 174.21 381.661 173.404 381.897C172.598 382.133 171.88 382.602 171.341 383.246C170.801 383.89 170.465 384.68 170.374 385.515C170.283 386.35 170.441 387.193 170.829 387.938C171.217 388.683 171.817 389.296 172.553 389.701C173.289 390.105 174.129 390.282 174.966 390.21C175.803 390.137 176.599 389.818 177.255 389.293C177.911 388.768 178.396 388.061 178.65 387.26C178.989 386.183 178.886 385.016 178.365 384.015C177.844 383.014 176.946 382.26 175.87 381.92ZM178.16 387.1C177.938 387.803 177.513 388.425 176.938 388.887C176.363 389.349 175.664 389.63 174.929 389.694C174.194 389.759 173.457 389.604 172.81 389.25C172.163 388.895 171.636 388.357 171.295 387.703C170.954 387.049 170.815 386.309 170.894 385.575C170.974 384.842 171.269 384.149 171.743 383.584C172.217 383.018 172.847 382.606 173.555 382.399C174.263 382.192 175.016 382.199 175.72 382.42C176.663 382.719 177.449 383.379 177.906 384.256C178.364 385.133 178.455 386.156 178.16 387.1ZM175.87 381.92C175.068 381.669 174.21 381.661 173.404 381.897C172.598 382.133 171.88 382.602 171.341 383.246C170.801 383.89 170.465 384.68 170.374 385.515C170.283 386.35 170.441 387.193 170.829 387.938C171.217 388.683 171.817 389.296 172.553 389.701C173.289 390.105 174.129 390.282 174.966 390.21C175.803 390.137 176.599 389.818 177.255 389.293C177.911 388.768 178.396 388.061 178.65 387.26C178.989 386.183 178.886 385.016 178.365 384.015C177.844 383.014 176.946 382.26 175.87 381.92ZM178.16 387.1C177.938 387.803 177.513 388.425 176.938 388.887C176.363 389.349 175.664 389.63 174.929 389.694C174.194 389.759 173.457 389.604 172.81 389.25C172.163 388.895 171.636 388.357 171.295 387.703C170.954 387.049 170.815 386.309 170.894 385.575C170.974 384.842 171.269 384.149 171.743 383.584C172.217 383.018 172.847 382.606 173.555 382.399C174.263 382.192 175.016 382.199 175.72 382.42C176.663 382.719 177.449 383.379 177.906 384.256C178.364 385.133 178.455 386.156 178.16 387.1ZM175.87 381.92C175.068 381.669 174.21 381.661 173.404 381.897C172.598 382.133 171.88 382.602 171.341 383.246C170.801 383.89 170.465 384.68 170.374 385.515C170.283 386.35 170.441 387.193 170.829 387.938C171.217 388.683 171.817 389.296 172.553 389.701C173.289 390.105 174.129 390.282 174.966 390.21C175.803 390.137 176.599 389.818 177.255 389.293C177.911 388.768 178.396 388.061 178.65 387.26C178.989 386.183 178.886 385.016 178.365 384.015C177.844 383.014 176.946 382.26 175.87 381.92ZM178.16 387.1C177.938 387.803 177.513 388.425 176.938 388.887C176.363 389.349 175.664 389.63 174.929 389.694C174.194 389.759 173.457 389.604 172.81 389.25C172.163 388.895 171.636 388.357 171.295 387.703C170.954 387.049 170.815 386.309 170.894 385.575C170.974 384.842 171.269 384.149 171.743 383.584C172.217 383.018 172.847 382.606 173.555 382.399C174.263 382.192 175.016 382.199 175.72 382.42C176.663 382.719 177.449 383.379 177.906 384.256C178.364 385.133 178.455 386.156 178.16 387.1ZM177.29 377.43C175.592 376.886 173.77 376.859 172.056 377.352C170.342 377.845 168.813 378.837 167.664 380.2C166.514 381.564 165.796 383.238 165.6 385.011C165.403 386.783 165.738 388.574 166.561 390.156C167.385 391.738 168.66 393.04 170.224 393.896C171.789 394.752 173.572 395.124 175.348 394.965C177.125 394.806 178.814 394.123 180.201 393.002C181.588 391.881 182.611 390.373 183.14 388.67C183.844 386.404 183.624 383.951 182.528 381.846C181.433 379.741 179.55 378.154 177.29 377.43ZM179.29 387.43C178.998 388.356 178.438 389.175 177.681 389.783C176.924 390.39 176.004 390.76 175.036 390.845C174.069 390.93 173.098 390.726 172.247 390.259C171.396 389.793 170.702 389.084 170.253 388.223C169.804 387.362 169.621 386.387 169.726 385.422C169.831 384.457 170.22 383.544 170.844 382.8C171.468 382.056 172.298 381.513 173.23 381.241C174.162 380.969 175.154 380.979 176.08 381.27C176.697 381.464 177.269 381.779 177.764 382.195C178.259 382.611 178.667 383.121 178.964 383.695C179.261 384.269 179.442 384.897 179.497 385.541C179.551 386.185 179.477 386.834 179.28 387.45L179.29 387.43ZM178.66 387.24C178.914 386.438 178.924 385.58 178.69 384.772C178.456 383.965 177.987 383.245 177.343 382.704C176.7 382.163 175.91 381.825 175.075 381.732C174.239 381.64 173.395 381.798 172.649 382.186C171.902 382.573 171.288 383.174 170.883 383.911C170.479 384.648 170.301 385.488 170.374 386.326C170.447 387.163 170.767 387.96 171.293 388.616C171.819 389.272 172.528 389.757 173.33 390.01C174.4 390.344 175.559 390.242 176.555 389.728C177.551 389.213 178.303 388.326 178.65 387.26L178.66 387.24ZM178.17 387.08C177.948 387.783 177.523 388.405 176.948 388.867C176.373 389.329 175.674 389.61 174.939 389.674C174.204 389.739 173.467 389.584 172.82 389.23C172.173 388.875 171.646 388.337 171.305 387.683C170.964 387.029 170.825 386.289 170.904 385.555C170.984 384.822 171.279 384.129 171.753 383.564C172.227 382.998 172.857 382.586 173.565 382.379C174.273 382.172 175.026 382.179 175.73 382.4C176.198 382.549 176.633 382.789 177.008 383.105C177.384 383.422 177.693 383.81 177.919 384.246C178.145 384.683 178Line truncated
|
||||
<path d="M173.66 394.69L170.37 393.65L169.82 396.04L172.74 396.96L173.66 394.69Z" fill="white"/>
|
||||
<path d="M167.75 391.61L166.16 388.55L164.08 389.85L165.5 392.57L167.75 391.61Z" fill="white"/>
|
||||
<path d="M165.75 385.26L166.79 381.97L164.4 381.42L163.48 384.34L165.75 385.26Z" fill="white"/>
|
||||
<path d="M168.83 379.35L171.88 377.76L170.59 375.68L167.87 377.1L168.83 379.35Z" fill="white"/>
|
||||
<path d="M175.18 377.35L178.47 378.38L179.02 376L176.1 375.08L175.18 377.35Z" fill="white"/>
|
||||
<path d="M181.09 380.43L182.68 383.48L184.76 382.19L183.34 379.47L181.09 380.43Z" fill="white"/>
|
||||
<path d="M183.09 386.78L182.05 390.07L184.44 390.62L185.36 387.7L183.09 386.78Z" fill="white"/>
|
||||
<path d="M180.01 392.69L176.95 394.28L178.25 396.36L180.97 394.94L180.01 392.69Z" fill="white"/>
|
||||
<path d="M351.94 86.6C351.238 86.3792 350.487 86.3713 349.781 86.5773C349.075 86.7834 348.446 87.1941 347.973 87.7577C347.5 88.3212 347.205 89.0122 347.125 89.7434C347.045 90.4745 347.184 91.213 347.523 91.8655C347.863 92.518 348.388 93.0552 349.033 93.4092C349.677 93.7632 350.413 93.9181 351.145 93.8544C351.878 93.7907 352.576 93.5111 353.15 93.0511C353.724 92.5911 354.148 91.9713 354.37 91.27C354.519 90.8039 354.574 90.3129 354.532 89.8254C354.49 89.3379 354.353 88.8634 354.127 88.4293C353.901 87.9953 353.591 87.6102 353.216 87.2962C352.841 86.9823 352.407 86.7457 351.94 86.6ZM353.94 91.13C353.746 91.7471 353.372 92.2926 352.868 92.6975C352.363 93.1024 351.75 93.3485 351.105 93.4046C350.46 93.4608 349.814 93.3244 349.247 93.0129C348.68 92.7014 348.218 92.2286 347.92 91.6545C347.621 91.0803 347.5 90.4306 347.571 89.7875C347.642 89.1444 347.902 88.5369 348.319 88.0418C348.736 87.5467 349.29 87.1863 349.911 87.0062C350.532 86.8261 351.193 86.8344 351.81 87.03C352.636 87.2919 353.324 87.8707 353.723 88.6394C354.122 89.4081 354.2 90.3038 353.94 91.13ZM351.94 86.6C351.238 86.3792 350.487 86.3713 349.781 86.5773C349.075 86.7834 348.446 87.1941 347.973 87.7577C347.5 88.3212 347.205 89.0122 347.125 89.7434C347.045 90.4745 347.184 91.213 347.523 91.8655C347.863 92.518 348.388 93.0552 349.033 93.4092C349.677 93.7632 350.413 93.9181 351.145 93.8544C351.878 93.7907 352.576 93.5111 353.15 93.0511C353.724 92.5911 354.148 91.9713 354.37 91.27C354.519 90.8039 354.574 90.3129 354.532 89.8254C354.49 89.3379 354.353 88.8634 354.127 88.4293C353.901 87.9953 353.591 87.6102 353.216 87.2962C352.841 86.9823 352.407 86.7457 351.94 86.6ZM353.94 91.13C353.746 91.7471 353.372 92.2926 352.868 92.6975C352.363 93.1024 351.75 93.3485 351.105 93.4046C350.46 93.4608 349.814 93.3244 349.247 93.0129C348.68 92.7014 348.218 92.2286 347.92 91.6545C347.621 91.0803 347.5 90.4306 347.571 89.7875C347.642 89.1444 347.902 88.5369 348.319 88.0418C348.736 87.5467 349.29 87.1863 349.911 87.0062C350.532 86.8261 351.193 86.8344 351.81 87.03C352.636 87.2919 353.324 87.8707 353.723 88.6394C354.122 89.4081 354.2 90.3038 353.94 91.13ZM351.94 86.6C351.238 86.3792 350.487 86.3713 349.781 86.5773C349.075 86.7834 348.446 87.1941 347.973 87.7577C347.5 88.3212 347.205 89.0122 347.125 89.7434C347.045 90.4745 347.184 91.213 347.523 91.8655C347.863 92.518 348.388 93.0552 349.033 93.4092C349.677 93.7632 350.413 93.9181 351.145 93.8544C351.878 93.7907 352.576 93.5111 353.15 93.0511C353.724 92.5911 354.148 91.9713 354.37 91.27C354.519 90.8039 354.574 90.3129 354.532 89.8254C354.49 89.3379 354.353 88.8634 354.127 88.4293C353.901 87.9953 353.591 87.6102 353.216 87.2962C352.841 86.9823 352.407 86.7457 351.94 86.6ZM353.94 91.13C353.746 91.7471 353.372 92.2926 352.868 92.6975C352.363 93.1024 351.75 93.3485 351.105 93.4046C350.46 93.4608 349.814 93.3244 349.247 93.0129C348.68 92.7014 348.218 92.2286 347.92 91.6545C347.621 91.0803 347.5 90.4306 347.571 89.7875C347.642 89.1444 347.902 88.5369 348.319 88.0418C348.736 87.5467 349.29 87.1863 349.911 87.0062C350.532 86.8261 351.193 86.8344 351.81 87.03C352.636 87.2919 353.324 87.8707 353.723 88.6394C354.122 89.4081 354.2 90.3038 353.94 91.13ZM353.18 82.67C351.701 82.2042 350.118 82.1872 348.629 82.6213C347.141 83.0553 345.815 83.9208 344.818 85.1085C343.822 86.2961 343.2 87.7525 343.031 89.2936C342.862 90.8347 343.154 92.3912 343.87 93.7665C344.585 95.1418 345.692 96.2741 347.051 97.0201C348.41 97.7662 349.96 98.0927 351.504 97.9582C353.049 97.8237 354.519 97.2343 355.728 96.2646C356.938 95.2949 357.833 93.9883 358.3 92.51C358.924 90.5262 358.735 88.3758 357.776 86.5309C356.816 84.686 355.163 83.2974 353.18 82.67ZM354.92 91.44C354.664 92.2516 354.174 92.9691 353.51 93.5017C352.847 94.0344 352.04 94.3581 351.192 94.4321C350.345 94.506 349.494 94.3268 348.748 93.9171C348.002 93.5074 347.395 92.8857 347.003 92.1306C346.611 91.3755 346.451 90.521 346.545 89.6753C346.638 88.8296 346.981 88.0306 347.529 87.3796C348.076 86.7285 348.805 86.2547 349.623 86.018C350.44 85.7813 351.309 85.7925 352.12 86.05C353.205 86.3946 354.11 87.1556 354.634 88.1661C355.159 89.1765 355.262 90.3539 354.92 91.44ZM354.37 91.27C354.592 90.5681 354.6 89.8162 354.394 89.1095C354.188 88.4028 353.777 87.7731 353.213 87.3001C352.649 86.8271 351.958 86.532 351.226 86.4522C350.494 86.3724 349.755 86.5115 349.103 86.8518C348.45 87.1921 347.913 87.7184 347.559 88.3641C347.206 89.0098 347.052 89.7458 347.117 90.479C347.182 91.2122 347.463 91.9096 347.925 92.4829C348.386 93.0563 349.008 93.4799 349.71 93.7C350.65 93.9947 351.669 93.9043 352.543 93.4487C353.416 92.9932 354.073 92.2096 354.37 91.27ZM353.94 91.13C353.746 91.7471 353.372 92.2926 352.868 92.6975C352.363 93.1024 351.75 93.3485 351.105 93.4046C350.46 93.4608 349.814 93.3244 349.247 93.0129C348.68 92.7014 348.218 92.2286 347.92 91.6545C347.621 91.0803 347.5 90.4306 347.571 89.7875C347.642 89.1444 347.902 88.5369 348.319 88.0418C348.736 87.5467 349.29 87.1863 349.911 87.0062C350.532 86.8261 351.193 86.8344 351.81 Line truncated
|
||||
<path d="M350 97.77L347.13 96.87L346.64 98.95L349.2 99.76L350 97.77Z" fill="white"/>
|
||||
<path d="M344.83 95.08L343.44 92.4L341.63 93.54L342.86 95.92L344.83 95.08Z" fill="white"/>
|
||||
<path d="M343.08 89.52L343.99 86.64L341.9 86.16L341.1 88.72L343.08 89.52Z" fill="white"/>
|
||||
<path d="M345.78 84.35L348.45 82.96L347.32 81.14L344.94 82.38L345.78 84.35Z" fill="white"/>
|
||||
<path d="M351.34 82.6L354.21 83.5L354.7 81.42L352.14 80.61L351.34 82.6Z" fill="white"/>
|
||||
<path d="M356.51 85.29L357.9 87.97L359.72 86.83L358.48 84.45L356.51 85.29Z" fill="white"/>
|
||||
<path d="M358.26 90.85L357.35 93.73L359.44 94.21L360.24 91.65L358.26 90.85Z" fill="white"/>
|
||||
<path d="M355.56 96.02L352.89 97.42L354.02 99.23L356.4 97.99L355.56 96.02Z" fill="white"/>
|
||||
<path d="M313.73 229.47C313.028 229.248 312.276 229.24 311.57 229.446C310.863 229.652 310.233 230.063 309.76 230.627C309.287 231.191 308.992 231.882 308.912 232.614C308.832 233.346 308.971 234.085 309.312 234.737C309.652 235.39 310.178 235.927 310.824 236.281C311.47 236.634 312.206 236.788 312.939 236.723C313.672 236.658 314.37 236.377 314.943 235.915C315.516 235.454 315.94 234.832 316.16 234.13C316.455 233.19 316.364 232.171 315.909 231.297C315.453 230.424 314.67 229.767 313.73 229.47ZM315.73 234C315.536 234.617 315.162 235.163 314.658 235.567C314.153 235.972 313.54 236.218 312.895 236.275C312.251 236.331 311.604 236.194 311.037 235.883C310.47 235.571 310.008 235.099 309.71 234.524C309.411 233.95 309.29 233.301 309.361 232.658C309.432 232.014 309.693 231.407 310.109 230.912C310.526 230.417 311.08 230.056 311.701 229.876C312.322 229.696 312.983 229.704 313.6 229.9C314.009 230.03 314.388 230.238 314.716 230.515C315.043 230.791 315.314 231.129 315.511 231.51C315.707 231.891 315.827 232.307 315.863 232.734C315.899 233.161 315.851 233.592 315.72 234H315.73ZM313.73 229.47C313.028 229.248 312.276 229.24 311.57 229.446C310.863 229.652 310.233 230.063 309.76 230.627C309.287 231.191 308.992 231.882 308.912 232.614C308.832 233.346 308.971 234.085 309.312 234.737C309.652 235.39 310.178 235.927 310.824 236.281C311.47 236.634 312.206 236.788 312.939 236.723C313.672 236.658 314.37 236.377 314.943 235.915C315.516 235.454 315.94 234.832 316.16 234.13C316.455 233.19 316.364 232.171 315.909 231.297C315.453 230.424 314.67 229.767 313.73 229.47ZM315.73 234C315.536 234.617 315.162 235.163 314.658 235.567C314.153 235.972 313.54 236.218 312.895 236.275C312.251 236.331 311.604 236.194 311.037 235.883C310.47 235.571 310.008 235.099 309.71 234.524C309.411 233.95 309.29 233.301 309.361 232.658C309.432 232.014 309.693 231.407 310.109 230.912C310.526 230.417 311.08 230.056 311.701 229.876C312.322 229.696 312.983 229.704 313.6 229.9C314.009 230.03 314.388 230.238 314.716 230.515C315.043 230.791 315.314 231.129 315.511 231.51C315.707 231.891 315.827 232.307 315.863 232.734C315.899 233.161 315.851 233.592 315.72 234H315.73ZM313.73 229.47C313.028 229.248 312.276 229.24 311.57 229.446C310.863 229.652 310.233 230.063 309.76 230.627C309.287 231.191 308.992 231.882 308.912 232.614C308.832 233.346 308.971 234.085 309.312 234.737C309.652 235.39 310.178 235.927 310.824 236.281C311.47 236.634 312.206 236.788 312.939 236.723C313.672 236.658 314.37 236.377 314.943 235.915C315.516 235.454 315.94 234.832 316.16 234.13C316.455 233.19 316.364 232.171 315.909 231.297C315.453 230.424 314.67 229.767 313.73 229.47ZM315.73 234C315.536 234.617 315.162 235.163 314.658 235.567C314.153 235.972 313.54 236.218 312.895 236.275C312.251 236.331 311.604 236.194 311.037 235.883C310.47 235.571 310.008 235.099 309.71 234.524C309.411 233.95 309.29 233.301 309.361 232.658C309.432 232.014 309.693 231.407 310.109 230.912C310.526 230.417 311.08 230.056 311.701 229.876C312.322 229.696 312.983 229.704 313.6 229.9C314.009 230.03 314.388 230.238 314.716 230.515C315.043 230.791 315.314 231.129 315.511 231.51C315.707 231.891 315.827 232.307 315.863 232.734C315.899 233.161 315.851 233.592 315.72 234H315.73ZM314.98 225.53C313.501 225.064 311.918 225.047 310.429 225.481C308.941 225.915 307.615 226.781 306.618 227.968C305.622 229.156 305 230.613 304.831 232.154C304.662 233.695 304.954 235.251 305.67 236.627C306.385 238.002 307.492 239.134 308.851 239.88C310.21 240.626 311.76 240.953 313.304 240.818C314.849 240.684 316.319 240.094 317.528 239.125C318.738 238.155 319.633 236.848 320.1 235.37C320.725 233.389 320.539 231.241 319.583 229.396C318.627 227.552 316.979 226.162 315 225.53H314.98ZM316.72 234.31C316.465 235.122 315.975 235.839 315.312 236.372C314.649 236.905 313.843 237.23 312.996 237.305C312.149 237.379 311.298 237.201 310.552 236.793C309.806 236.384 309.198 235.763 308.805 235.009C308.412 234.255 308.251 233.401 308.343 232.555C308.435 231.71 308.776 230.91 309.323 230.259C309.869 229.607 310.597 229.132 311.413 228.893C312.23 228.655 313.099 228.664 313.91 228.92C314.995 229.265 315.9 230.026 316.424 231.036C316.949 232.047 317.052 233.224 316.71 234.31H316.72ZM316.17 234.13C316.391 233.428 316.399 232.677 316.193 231.971C315.987 231.265 315.576 230.636 315.012 230.163C314.449 229.69 313.758 229.395 313.027 229.315C312.295 229.235 311.557 229.374 310.905 229.713C310.252 230.053 309.715 230.578 309.361 231.223C309.007 231.867 308.852 232.603 308.916 233.335C308.979 234.068 309.259 234.766 309.719 235.34C310.179 235.914 310.799 236.338 311.5 236.56C312.44 236.855 313.459 236.764 314.333 236.309C315.206 235.853 315.863 235.07 316.16 234.13H316.17ZM315.73 234C315.536 234.617 315.162 235.163 314.658 235.567C314.153 235.972 313.54 236.218 312.895 236.275C312.251 236.331 311.604 236.194 311.037 235.883C310.47 235.571 310.008 235.099 309.71 234.524C309.411 233.95 309.29 233.301 309.361 232.658C309.432 232.014 309.693 231.407 310.109 230.912C310.526 230.417 311.08 230.056 311.701 229.8Line truncated
|
||||
<path d="M311.79 240.64L308.91 239.73L308.43 241.82L310.99 242.62L311.79 240.64Z" fill="#263238"/>
|
||||
<path d="M306.62 237.94L305.23 235.27L303.41 236.4L304.65 238.78L306.62 237.94Z" fill="#263238"/>
|
||||
<path d="M304.87 232.38L305.77 229.51L303.69 229.03L302.88 231.58L304.87 232.38Z" fill="#263238"/>
|
||||
<path d="M307.56 227.21L310.24 225.82L309.1 224L306.72 225.24L307.56 227.21Z" fill="#263238"/>
|
||||
<path d="M313.12 225.46L316 226.37L316.48 224.28L313.92 223.48L313.12 225.46Z" fill="#263238"/>
|
||||
<path d="M318.29 228.16L319.68 230.83L321.5 229.7L320.26 227.32L318.29 228.16Z" fill="#263238"/>
|
||||
<path d="M320.04 233.72L319.13 236.59L321.22 237.08L322.03 234.52L320.04 233.72Z" fill="#263238"/>
|
||||
<path d="M317.35 238.89L314.67 240.28L315.81 242.1L318.19 240.86L317.35 238.89Z" fill="#263238"/>
|
||||
<path d="M95 117C95.5506 114.735 95.4171 112.357 94.6165 110.167C93.8159 107.977 92.384 106.074 90.502 104.698C88.6199 103.322 86.3721 102.535 84.0428 102.436C81.7134 102.338 79.4071 102.932 77.4153 104.143C75.4236 105.355 73.8358 107.13 72.8528 109.245C71.8697 111.359 71.5355 113.717 71.8925 116.021C72.2494 118.325 73.2813 120.471 74.8579 122.189C76.4345 123.906 78.485 125.118 80.75 125.67C83.7893 126.409 86.9975 125.91 89.6695 124.284C92.3415 122.659 94.2588 120.039 95 117ZM88.89 115.51C88.6307 116.57 88.0623 117.53 87.2568 118.267C86.4513 119.004 85.4451 119.485 84.3658 119.649C83.2865 119.813 82.1828 119.653 81.1947 119.189C80.2066 118.724 79.3787 117.977 78.816 117.042C78.2533 116.106 77.9812 115.024 78.0341 113.934C78.0871 112.844 78.4628 111.794 79.1136 110.917C79.7643 110.04 80.6608 109.377 81.6892 109.011C82.7177 108.645 83.8317 108.592 84.89 108.86C86.302 109.21 87.5178 110.105 88.2712 111.35C89.0246 112.594 89.2543 114.087 88.91 115.5L88.89 115.51Z" fill="white"/>
|
||||
<path d="M83.09 125.72L78.68 124.65L78.17 127.83L82.08 128.78L83.09 125.72Z" fill="white"/>
|
||||
<path d="M75.06 122.19L72.7 118.32L70.09 120.2L72.19 123.65L75.06 122.19Z" fill="white"/>
|
||||
<path d="M71.88 114.02L72.95 109.62L69.78 109.1L68.82 113.02L71.88 114.02Z" fill="white"/>
|
||||
<path d="M75.41 106L79.28 103.64L77.4 101.03L73.96 103.13L75.41 106Z" fill="white"/>
|
||||
<path d="M83.58 102.82L87.99 103.89L88.5 100.71L84.58 99.76L83.58 102.82Z" fill="white"/>
|
||||
<path d="M91.61 106.35L93.96 110.22L96.58 108.34L94.48 104.89L91.61 106.35Z" fill="white"/>
|
||||
<path d="M94.79 114.52L93.71 118.92L96.89 119.44L97.85 115.52L94.79 114.52Z" fill="white"/>
|
||||
<path d="M91.26 122.54L87.38 124.9L89.27 127.51L92.71 125.42L91.26 122.54Z" fill="white"/>
|
||||
<path d="M79.89 116.37L83.43 118.3L86.87 116.2L86.78 112.2L83.24 110.26L79.8 112.35L79.89 116.37ZM83.64 113C83.8857 113.061 84.1079 113.193 84.2785 113.379C84.4492 113.566 84.5607 113.799 84.599 114.049C84.6372 114.299 84.6005 114.555 84.4934 114.784C84.3864 115.014 84.2138 115.206 83.9974 115.337C83.7811 115.468 83.5307 115.533 83.278 115.522C83.0252 115.511 82.7814 115.425 82.5773 115.275C82.3732 115.126 82.2179 114.919 82.1312 114.682C82.0445 114.444 82.0302 114.186 82.09 113.94C82.1728 113.611 82.382 113.328 82.6721 113.152C82.9622 112.976 83.31 112.921 83.64 113Z" fill="white"/>
|
||||
<path d="M361.59 238.94C358.883 234.926 357.422 230.202 357.39 225.36C357.39 208.17 376.27 194.23 399.55 194.23C422.83 194.23 441.69 208.17 441.69 225.36C441.69 242.55 422.83 256.5 399.55 256.5C388.26 256.5 378.03 253.23 370.47 247.89L356 251.58L361.59 238.94Z" fill="#1A1A1A"/>
|
||||
<path d="M361.59 238.94C358.95 235.155 357.458 230.69 357.291 226.078C357.125 221.467 358.291 216.906 360.65 212.94C363.003 208.976 366.161 205.549 369.92 202.88C373.645 200.175 377.772 198.072 382.15 196.65C386.517 195.229 391.04 194.339 395.62 194C400.205 193.693 404.81 193.928 409.34 194.7C410.47 194.93 411.61 195.08 412.72 195.38L416.05 196.28L419.3 197.42C420.38 197.81 421.41 198.34 422.47 198.79C426.658 200.743 430.485 203.391 433.79 206.62C437.125 209.87 439.626 213.877 441.08 218.3C442.486 222.772 442.535 227.56 441.22 232.06C439.84 236.508 437.4 240.554 434.11 243.85C430.856 247.14 427.061 249.846 422.89 251.85C418.74 253.853 414.331 255.267 409.79 256.05C405.267 256.854 400.665 257.116 396.08 256.83C391.496 256.555 386.966 255.695 382.6 254.27C378.226 252.864 374.092 250.8 370.34 248.15H370.52L356 251.69L355.78 251.74L355.88 251.54L361.59 238.94ZM361.59 238.94L356.05 251.62L355.92 251.47L370.41 247.67H370.51L370.6 247.73C378.187 252.775 387.016 255.636 396.12 256C400.646 256.245 405.185 255.946 409.64 255.11C414.097 254.343 418.425 252.96 422.5 251C426.569 249.037 430.273 246.392 433.45 243.18C436.624 239.99 438.972 236.073 440.29 231.77C441.543 227.454 441.487 222.864 440.13 218.58C438.743 214.304 436.341 210.427 433.13 207.28C429.925 204.115 426.205 201.518 422.13 199.6C421.13 199.16 420.13 198.6 419.02 198.25L415.83 197.11L412.56 196.22C411.47 195.93 410.35 195.77 409.24 195.54C404.777 194.774 400.24 194.525 395.72 194.8C391.2 195.104 386.734 195.957 382.42 197.34C378.095 198.696 374.009 200.72 370.31 203.34C366.595 205.944 363.451 209.279 361.07 213.14C358.707 217.041 357.49 221.529 357.56 226.09C357.686 230.664 359.081 235.113 361.59 238.94Z" fill="white"/>
|
||||
<path d="M377.86 230.46V232.78H368.43V219.19H377.69V221.51H371.07V224.78H376.79V226.92H371.07V230.46H377.86Z" fill="white"/>
|
||||
<path d="M379.93 232.78V219.19H385.93C386.529 219.185 387.121 219.318 387.66 219.58C388.175 219.825 388.64 220.164 389.03 220.58C389.412 221.007 389.717 221.498 389.93 222.03C390.182 222.678 390.283 223.376 390.224 224.069C390.165 224.763 389.948 225.433 389.59 226.03C389.177 226.729 388.549 227.276 387.8 227.59L390.9 232.7H387.9L385.12 228.14H382.52V232.7L379.93 232.78ZM382.57 225.91H385.88C386.117 225.909 386.35 225.851 386.56 225.74C386.772 225.62 386.959 225.461 387.11 225.27C387.267 225.058 387.389 224.821 387.47 224.57C387.559 224.292 387.603 224.002 387.6 223.71C387.603 223.41 387.552 223.112 387.45 222.83C387.356 222.574 387.217 222.337 387.04 222.13C386.877 221.938 386.676 221.782 386.45 221.67C386.239 221.565 386.006 221.511 385.77 221.51H382.57V225.91Z" fill="white"/>
|
||||
<path d="M392.65 232.78V219.19H398.65C399.252 219.184 399.848 219.317 400.39 219.58C400.901 219.828 401.361 220.166 401.75 220.58C402.139 221.002 402.445 221.494 402.65 222.03C402.866 222.55 402.978 223.107 402.98 223.67C402.989 224.516 402.761 225.348 402.32 226.07C401.905 226.767 401.278 227.314 400.53 227.63L403.63 232.74H400.63L397.86 228.18H395.26V232.74L392.65 232.78ZM395.3 225.91H398.61C398.847 225.909 399.081 225.851 399.29 225.74C399.501 225.623 399.685 225.463 399.83 225.27C399.991 225.06 400.113 224.823 400.19 224.57C400.283 224.293 400.33 224.002 400.33 223.71C400.333 223.41 400.282 223.112 400.18 222.83C400.082 222.574 399.94 222.337 399.76 222.13C399.597 221.938 399.396 221.782 399.17 221.67C398.959 221.564 398.726 221.509 398.49 221.51H395.3V225.91Z" fill="white"/>
|
||||
<path d="M411.18 232.87C410.244 232.885 409.317 232.687 408.47 232.29C407.68 231.917 406.973 231.39 406.39 230.74C405.804 230.096 405.345 229.346 405.04 228.53C404.723 227.717 404.56 226.852 404.56 225.98C404.558 225.088 404.731 224.205 405.07 223.38C405.394 222.567 405.865 221.821 406.46 221.18C407.061 220.54 407.781 220.024 408.58 219.66C409.414 219.279 410.323 219.087 411.24 219.1C412.171 219.089 413.092 219.294 413.93 219.7C414.718 220.085 415.421 220.622 416 221.28C416.578 221.932 417.032 222.685 417.34 223.5C417.994 225.144 417.994 226.976 417.34 228.62C417.029 229.422 416.575 230.16 416 230.8C415.401 231.436 414.685 231.949 413.89 232.31C413.04 232.698 412.114 232.889 411.18 232.87ZM407.24 226C407.24 226.58 407.328 227.156 407.5 227.71C407.669 228.237 407.933 228.729 408.28 229.16C408.622 229.573 409.044 229.913 409.52 230.16C410.042 230.418 410.618 230.548 411.2 230.54C411.787 230.552 412.368 230.418 412.89 230.15C413.377 229.894 413.803 229.536 414.14 229.1C414.477 228.662 414.734 228.167 414.9 227.64C415.071 227.103 415.159 226.543 415.16 225.98C415.162 225.402 415.068 224.827 414.88 224.28C414.711 223.753 414.447 223.261 414.1 222.83C413.76 222.41 413.334 222.069 412.85 221.83C412.327 221.58 411.755 221.45 411.175 221.45C410.595 221.45 410.023 221.58 409.5 221.83C409.016 222.069 408.589 222.41 408.25 222.83C407.914 223.264 407.66 223.755 407.5 224.28C407.317 224.835 407.229 225.416 407.24 226Z" fill="white"/>
|
||||
<path d="M419.85 232.78V219.19H425.85C426.449 219.185 427.041 219.318 427.58 219.58C428.095 219.825 428.56 220.164 428.95 220.58C429.332 221.007 429.637 221.498 429.85 222.03C430.102 222.678 430.203 223.376 430.144 224.069C430.085 224.763 429.868 225.433 429.51 226.03C429.097 226.729 428.469 227.276 427.72 227.59L430.82 232.7H427.82L425.04 228.14H422.44V232.7L419.85 232.78ZM422.49 225.91H425.8C426.037 225.909 426.271 225.851 426.48 225.74C426.692 225.62 426.879 225.461 427.03 225.27C427.187 225.058 427.309 224.821 427.39 224.57C427.479 224.292 427.523 224.002 427.52 223.71C427.523 223.41 427.472 223.112 427.37 222.83C427.276 222.574 427.137 222.337 426.96 222.13C426.797 221.938 426.596 221.782 426.37 221.67C426.159 221.565 425.926 221.511 425.69 221.51H422.49V225.91Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TD - Drear</title>
|
||||
<meta name="description" content="Website for horror movie - DREAR." />
|
||||
<meta name="keywords" content="horror, movie, drear, chmur, td, tomas dvorak" />
|
||||
<meta name="author" content="Tomas Dvorak" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
|
||||
</head>
|
||||
<body class="loading">
|
||||
<main>
|
||||
<div class="frame">
|
||||
<div class="frame__title-wrap">
|
||||
</div>
|
||||
<div class="frame__indicator"></div>
|
||||
</div>
|
||||
<div class="strip-outer">
|
||||
<div class="strip-inner">
|
||||
<div class="draggable"></div>
|
||||
<div class="strip">
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-cover">
|
||||
<h2 class="strip-cover__title">DREAR</h2>
|
||||
<span class="strip-cover__subtitle">coming in 2028</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Assemblage</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Wherewithal</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Surreptitious</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Onomatopoeia</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Nemesis</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Penumbra</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Propinquity</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Lissome</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Moiety</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Mondegreen</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Gambol</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Forbearance</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Evanescent</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Embrocation</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Bucolic</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Eloquence</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="cursor">
|
||||
<div class="cursor__inner cursor__inner--circle">
|
||||
<div class="cursor__side cursor__side--left"></div>
|
||||
<div class="cursor__side cursor__side--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/TweenMax.min.js"></script>
|
||||
<script src="js/draggabilly.pkgd.min.js"></script>
|
||||
<script src="js/demo.js"></script>
|
||||
<script>
|
||||
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TD - Chmur</title>
|
||||
<meta name="description" content="Stránka pro horrorový film - CHMUR." />
|
||||
<meta name="keywords" content="horror, movie, drear, chmur, td, tomas dvorak" />
|
||||
<meta name="author" content="Tomas Dvorak" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
|
||||
</head>
|
||||
<body class="loading">
|
||||
<main>
|
||||
<div class="frame">
|
||||
<div class="frame__title-wrap">
|
||||
</div>
|
||||
<div class="frame__indicator"></div>
|
||||
</div>
|
||||
<div class="strip-outer">
|
||||
<div class="strip-inner">
|
||||
<div class="draggable"></div>
|
||||
<div class="strip">
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-cover">
|
||||
<h2 class="strip-cover__title">CHMUR</h2>
|
||||
<span class="strip-cover__subtitle">v kinech 2028</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Assemblage</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Wherewithal</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Surreptitious</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Onomatopoeia</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Nemesis</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Penumbra</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Propinquity</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Lissome</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Moiety</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Mondegreen</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Gambol</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Forbearance</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Evanescent</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Embrocation</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Bucolic</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Eloquence</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="cursor">
|
||||
<div class="cursor__inner cursor__inner--circle">
|
||||
<div class="cursor__side cursor__side--left"></div>
|
||||
<div class="cursor__side cursor__side--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/TweenMax.min.js"></script>
|
||||
<script src="js/draggabilly.pkgd.min.js"></script>
|
||||
<script src="js/demo.js"></script>
|
||||
<script>
|
||||
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
/*!
|
||||
* VERSION: 2.1.2
|
||||
* DATE: 2019-03-01
|
||||
* UPDATES AND DOCS AT: http://greensock.com
|
||||
*
|
||||
* Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
|
||||
*
|
||||
* @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
|
||||
* This work is subject to the terms at http://greensock.com/standard-license or for
|
||||
* Club GreenSock members, the software agreement that was issued with your membership.
|
||||
*
|
||||
* @author: Jack Doyle, [email protected]
|
||||
**/
|
||||
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("TweenMax",["core.Animation","core.SimpleTimeline","TweenLite"],function(a,b,c){var d=function(a){var b,c=[],d=a.length;for(b=0;b!==d;c.push(a[b++]));return c},e=function(a,b,c){var d,e,f=a.cycle;for(d in f)e=f[d],a[d]="function"==typeof e?e(c,b[c],b):e[c%e.length];delete a.cycle},f=function(a){if("function"==typeof a)return a;var b="object"==typeof a?a:{each:a},c=b.ease,d=b.from||0,e=b.base||0,f={},g=isNaN(d),h=b.axis,i={center:.5,end:1}[d]||0;return function(a,j,k){var l,m,n,o,p,q,r,s,t,u=(k||b).length,v=f[u];if(!v){if(t="auto"===b.grid?0:(b.grid||[1/0])[0],!t){for(r=-(1/0);r<(r=k[t++].getBoundingClientRect().left)&&u>t;);t--}for(v=f[u]=[],l=g?Math.min(t,u)*i-.5:d%t,m=g?u*i/t-.5:d/t|0,r=0,s=1/0,q=0;u>q;q++)n=q%t-l,o=m-(q/t|0),v[q]=p=h?Math.abs("y"===h?o:n):Math.sqrt(n*n+o*o),p>r&&(r=p),s>p&&(s=p);v.max=r-s,v.min=s,v.v=u=b.amount||b.each*(t>u?u:h?"y"===h?u/t:t:Math.max(t,u/t))||0,v.b=0>u?e-u:e}return u=(v[a]-v.min)/v.max,v.b+(c?c.getRatio(u):u)*v.v}},g=function(a,b,d){c.call(this,a,b,d),this._cycle=0,this._yoyo=this.vars.yoyo===!0||!!this.vars.yoyoEase,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._repeat&&this._uncache(!0),this.render=g.prototype.render},h=1e-8,i=c._internals,j=i.isSelector,k=i.isArray,l=g.prototype=c.to({},.1,{}),m=[];g.version="2.1.2",l.constructor=g,l.kill()._gc=!1,g.killTweensOf=g.killDelayedCallsTo=c.killTweensOf,g.getTweensOf=c.getTweensOf,g.lagSmoothing=c.lagSmoothing,g.ticker=c.ticker,g.render=c.render,g.distribute=f,l.invalidate=function(){return this._yoyo=this.vars.yoyo===!0||!!this.vars.yoyoEase,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._yoyoEase=null,this._uncache(!0),c.prototype.invalidate.call(this)},l.updateTo=function(a,b){var d,e=this,f=e.ratio,g=e.vars.immediateRender||a.immediateRender;b&&e._startTime<e._timeline._time&&(e._startTime=e._timeline._time,e._uncache(!1),e._gc?e._enabled(!0,!1):e._timeline.insert(e,e._startTime-e._delay));for(d in a)e.vars[d]=a[d];if(e._initted||g)if(b)e._initted=!1,g&&e.render(0,!0,!0);else if(e._gc&&e._enabled(!0,!1),e._notifyPluginsOfEnabled&&e._firstPT&&c._onPluginEvent("_onDisable",e),e._time/e._duration>.998){var h=e._totalTime;e.render(0,!0,!1),e._initted=!1,e.render(h,!0,!1)}else if(e._initted=!1,e._init(),e._time>0||g)for(var i,j=1/(1-f),k=e._firstPT;k;)i=k.s+k.c,k.c*=j,k.s=i-k.c,k=k._next;return e},l.render=function(a,b,d){this._initted||0===this._duration&&this.vars.repeat&&this.invalidate();var e,f,g,j,k,l,m,n,o,p=this,q=p._dirty?p.totalDuration():p._totalDuration,r=p._time,s=p._totalTime,t=p._cycle,u=p._duration,v=p._rawPrevTime;if(a>=q-h&&a>=0?(p._totalTime=q,p._cycle=p._repeat,p._yoyo&&0!==(1&p._cycle)?(p._time=0,p.ratio=p._ease._calcEnd?p._ease.getRatio(0):0):(p._time=u,p.ratio=p._ease._calcEnd?p._ease.getRatio(1):1),p._reversed||(e=!0,f="onComplete",d=d||p._timeline.autoRemoveChildren),0===u&&(p._initted||!p.vars.lazy||d)&&(p._startTime===p._timeline._duration&&(a=0),(0>v||0>=a&&a>=-h||v===h&&"isPause"!==p.data)&&v!==a&&(d=!0,v>h&&(f="onReverseComplete")),p._rawPrevTime=n=!b||a||v===a?a:h)):h>a?(p._totalTime=p._time=p._cycle=0,p.ratio=p._ease._calcEnd?p._ease.getRatio(0):0,(0!==s||0===u&&v>0)&&(f="onReverseComplete",e=p._reversed),a>-h?a=0:0>a&&(p._active=!1,0===u&&(p._initted||!p.vars.lazy||d)&&(v>=0&&(d=!0),p._rawPrevTime=n=!b||a||v===a?a:h)),p._initted||(d=!0)):(p._totalTime=p._time=a,0!==p._repeat&&(j=u+p._repeatDelay,p._cycle=p._totalTime/j>>0,0!==p._cycle&&p._cycle===p._totalTime/j&&a>=s&&p._cycle--,p._time=p._totalTime-p._cycle*j,p._yoyo&&0!==(1&p._cycle)&&(p._time=u-p._time,o=p._yoyoEase||p.vars.yoyoEase,o&&(p._yoyoEase||(o!==!0||p._initted?p._yoyoEase=o=o===!0?p._ease:o instanceof Ease?o:Ease.map[o]:(o=p.vars.ease,p._yoyoEase=o=o?o instanceof Ease?o:"function"==typeof o?new Ease(o,p.vars.easeParams):Ease.map[o]||c.defaultEase:c.defaultEase)),p.ratio=o?1-o.getRatio((u-p._time)/u):0)),p._time>u?p._time=u:p._time<0&&(p._time=0)),p._easeType&&!o?(k=p._time/u,l=p._easeType,m=p._easePower,(1===l||3===l&&k>=.5)&&(k=1-k),3===l&&(k*=2),1===m?k*=k:2===m?k*=k*k:3===m?k*=k*k*k:4===m&&(k*=k*k*k*k),p.ratio=1===l?1-k:2===l?k:p._time/u<.5?k/2:1-k/2):o||(p.ratio=p._ease.getRatio(p._time/u))),r===p._time&&!d&&t===p._cycle)return void(s!==p._totalTime&&p._onUpdate&&(b||p._callback("onUpdate")));if(!p._initted){if(p._init(),!p._initted||p._gc)return;if(!d&&p._firstPT&&(p.vars.lazy!==!1&&p._duration||p.vars.lazy&&!p._duration))return p._time=r,p._totalTime=s,p._rawPrevTime=v,p._cycle=t,i.lazyTweens.push(p),void(p._lazy=[a,b]);!p._time||e||o?e&&this._ease._calcEnd&&!o&&(p.ratio=p._ease.getRatio(0===p._time?0:1)):p.ratio=p._ease.getRatio(p._time/u)}for(p._lazy!==!1&&(p._lazy=!1),p._active||!p._paused&&p._time!==r&&a>=0&&(p._active=!0),0===s&&(2===p._initted&&a>0&&p._init(Line truncated
|
||||
}for(n=w.length,q=g?4:1;--n>-1;)o=w[n],p=v[o],j(p,f,g,i,e[o]),t&&(p.splice(0,q),p.splice(p.length-q,q));return v},m=function(a,b,c){b=b||"soft";var d,e,f,h,i,j,k,l,m,n,o,p={},q="cubic"===b?3:2,r="soft"===b,s=[];if(r&&c&&(a=[c].concat(a)),null==a||a.length<q+1)throw"invalid Bezier data";for(m in a[0])s.push(m);for(j=s.length;--j>-1;){for(m=s[j],p[m]=i=[],n=0,l=a.length,k=0;l>k;k++)d=null==c?a[k][m]:"string"==typeof(o=a[k][m])&&"="===o.charAt(1)?c[m]+Number(o.charAt(0)+o.substr(2)):Number(o),r&&k>1&&l-1>k&&(i[n++]=(d+i[n-2])/2),i[n++]=d;for(l=n-q+1,n=0,k=0;l>k;k+=q)d=i[k],e=i[k+1],f=i[k+2],h=2===q?0:i[k+3],i[n++]=o=3===q?new g(d,e,f,h):new g(d,(2*e+d)/3,(2*e+f)/3,f);i.length=n}return p},n=function(a,b,c){for(var d,e,f,g,h,i,j,k,l,m,n,o=1/c,p=a.length;--p>-1;)for(m=a[p],f=m.a,g=m.d-f,h=m.c-f,i=m.b-f,d=e=0,k=1;c>=k;k++)j=o*k,l=1-j,d=e-(e=(j*j*g+3*l*(j*h+l*i))*j),n=p*c+k-1,b[n]=(b[n]||0)+d*d},o=function(a,b){b=b>>0||6;var c,d,e,f,g=[],h=[],i=0,j=0,k=b-1,l=[],m=[];for(c in a)n(a[c],g,b);for(e=g.length,d=0;e>d;d++)i+=Math.sqrt(g[d]),f=d%b,m[f]=i,f===k&&(j+=i,f=d/b>>0,l[f]=m,h[f]=j,i=0,m=[]);return{length:j,lengths:h,segments:l}},p=_gsScope._gsDefine.plugin({propName:"bezier",priority:-1,version:"1.3.8",API:2,global:!0,init:function(a,b,c){this._target=a,b instanceof Array&&(b={values:b}),this._func={},this._mod={},this._props=[],this._timeRes=null==b.timeResolution?6:parseInt(b.timeResolution,10);var d,e,f,g,h,i=b.values||[],j={},k=i[0],n=b.autoRotate||c.vars.orientToBezier;this._autoRotate=n?n instanceof Array?n:[["x","y","rotation",n===!0?0:Number(n)||0]]:null;for(d in k)this._props.push(d);for(f=this._props.length;--f>-1;)d=this._props[f],this._overwriteProps.push(d),e=this._func[d]="function"==typeof a[d],j[d]=e?a[d.indexOf("set")||"function"!=typeof a["get"+d.substr(3)]?d:"get"+d.substr(3)]():parseFloat(a[d]),h||j[d]!==i[0][d]&&(h=j);if(this._beziers="cubic"!==b.type&&"quadratic"!==b.type&&"soft"!==b.type?l(i,isNaN(b.curviness)?1:b.curviness,!1,"thruBasic"===b.type,b.correlate,h):m(i,b.type,j),this._segCount=this._beziers[d].length,this._timeRes){var p=o(this._beziers,this._timeRes);this._length=p.length,this._lengths=p.lengths,this._segments=p.segments,this._l1=this._li=this._s1=this._si=0,this._l2=this._lengths[0],this._curSeg=this._segments[0],this._s2=this._curSeg[0],this._prec=1/this._curSeg.length}if(n=this._autoRotate)for(this._initialRotations=[],n[0]instanceof Array||(this._autoRotate=n=[n]),f=n.length;--f>-1;){for(g=0;3>g;g++)d=n[f][g],this._func[d]="function"==typeof a[d]?a[d.indexOf("set")||"function"!=typeof a["get"+d.substr(3)]?d:"get"+d.substr(3)]:!1;d=n[f][2],this._initialRotations[f]=(this._func[d]?this._func[d].call(this._target):this._target[d])||0,this._overwriteProps.push(d)}return this._startRatio=c.vars.runBackwards?1:0,!0},set:function(b){var c,d,e,f,g,h,i,j,k,l,m=this._segCount,n=this._func,o=this._target,p=b!==this._startRatio;if(this._timeRes){if(k=this._lengths,l=this._curSeg,b*=this._length,e=this._li,b>this._l2&&m-1>e){for(j=m-1;j>e&&(this._l2=k[++e])<=b;);this._l1=k[e-1],this._li=e,this._curSeg=l=this._segments[e],this._s2=l[this._s1=this._si=0]}else if(b<this._l1&&e>0){for(;e>0&&(this._l1=k[--e])>=b;);0===e&&b<this._l1?this._l1=0:e++,this._l2=k[e],this._li=e,this._curSeg=l=this._segments[e],this._s1=l[(this._si=l.length-1)-1]||0,this._s2=l[this._si]}if(c=e,b-=this._l1,e=this._si,b>this._s2&&e<l.length-1){for(j=l.length-1;j>e&&(this._s2=l[++e])<=b;);this._s1=l[e-1],this._si=e}else if(b<this._s1&&e>0){for(;e>0&&(this._s1=l[--e])>=b;);0===e&&b<this._s1?this._s1=0:e++,this._s2=l[e],this._si=e}h=(e+(b-this._s1)/(this._s2-this._s1))*this._prec||0}else c=0>b?0:b>=1?m-1:m*b>>0,h=(b-c*(1/m))*m;for(d=1-h,e=this._props.length;--e>-1;)f=this._props[e],g=this._beziers[f][c],i=(h*h*g.da+3*d*(h*g.ca+d*g.ba))*h+g.a,this._mod[f]&&(i=this._mod[f](i,o)),n[f]?o[f](i):o[f]=i;if(this._autoRotate){var q,r,s,t,u,v,w,x=this._autoRotate;for(e=x.length;--e>-1;)f=x[e][2],v=x[e][3]||0,w=x[e][4]===!0?1:a,g=this._beziers[x[e][0]],q=this._beziers[x[e][1]],g&&q&&(g=g[c],q=q[c],r=g.a+(g.b-g.a)*h,t=g.b+(g.c-g.b)*h,r+=(t-r)*h,t+=(g.c+(g.d-g.c)*h-t)*h,s=q.a+(q.b-q.a)*h,u=q.b+(q.c-q.b)*h,s+=(u-s)*h,u+=(q.c+(q.d-q.c)*h-u)*h,i=p?Math.atan2(u-s,t-r)*w+v:this._initialRotations[e],this._mod[f]&&(i=this._mod[f](i,o)),n[f]?o[f](i):o[f]=i)}}}),q=p.prototype;p.bezierThrough=l,p.cubicToQuadratic=i,p._autoCSS=!0,p.quadraticToCubic=function(a,b,c){return new g(a,(2*b+a)/3,(2*b+c)/3,c)},p._cssRegister=function(){var a=f.CSSPlugin;if(a){var b=a._internals,c=b._parseToProxy,d=b._setPluginRatio,e=b.CSSPropTween;b._registerComplexSpecialProp("bezier",{parser:function(a,b,f,g,h,i){b instanceof Array&&(b={values:b}),i=new p;var j,k,l,m=b.values,n=m.length-1,o=[],q={};if(0>n)return h;for(j=0;n>=j;j++)l=c(a,m[j],g,h,i,n!==j),o[j]=l.end;for(k in b)q[k]=b[k];return q.values=o,h=new e(a,"bezier",0,0,l.pt,2),h.data=l,h.plugin=i,h.setRatio=d,0===q.autoRotate&&(q.autoRotate=!0),!q.autoRotate||q.autoRotate instanceof Array||(j=q.autoRotate==Line truncated
|
||||
j.scaleX=j.scaleY=j.scaleZ=1,za("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,svgOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType,xPercent,yPercent,smoothOrigin",{parser:function(a,b,c,d,f,h,i){if(d._lastParsedTransform===i)return f;d._lastParsedTransform=i;var j=i.scale&&"function"==typeof i.scale?i.scale:0;j&&(i.scale=j(r,a));var k,l,m,n,o,p,s,t,u,v=a._gsTransform,w=a.style,x=1e-6,y=Ca.length,z=i,A={},B="transformOrigin",C=Sa(a,e,!0,z.parseTransform),D=z.transform&&("function"==typeof z.transform?z.transform(r,q):z.transform);if(C.skewType=z.skewType||C.skewType||g.defaultSkewType,d._transform=C,"rotationZ"in z&&(z.rotation=z.rotationZ),D&&"string"==typeof D&&Da)l=Q.style,l[Da]=D,l.display="block",l.position="absolute",-1!==D.indexOf("%")&&(l.width=aa(a,"width"),l.height=aa(a,"height")),O.body.appendChild(Q),k=Sa(Q,null,!1),"simple"===C.skewType&&(k.scaleY*=Math.cos(k.skewX*K)),C.svg&&(p=C.xOrigin,s=C.yOrigin,k.x-=C.xOffset,k.y-=C.yOffset,(z.transformOrigin||z.svgOrigin)&&(D={},Ma(a,ia(z.transformOrigin),D,z.svgOrigin,z.smoothOrigin,!0),p=D.xOrigin,s=D.yOrigin,k.x-=D.xOffset-C.xOffset,k.y-=D.yOffset-C.yOffset),(p||s)&&(t=Ra(Q,!0),k.x-=p-(p*t[0]+s*t[2]),k.y-=s-(p*t[1]+s*t[3]))),O.body.removeChild(Q),k.perspective||(k.perspective=C.perspective),null!=z.xPercent&&(k.xPercent=ka(z.xPercent,C.xPercent)),null!=z.yPercent&&(k.yPercent=ka(z.yPercent,C.yPercent));else if("object"==typeof z){if(k={scaleX:ka(null!=z.scaleX?z.scaleX:z.scale,C.scaleX),scaleY:ka(null!=z.scaleY?z.scaleY:z.scale,C.scaleY),scaleZ:ka(z.scaleZ,C.scaleZ),x:ka(z.x,C.x),y:ka(z.y,C.y),z:ka(z.z,C.z),xPercent:ka(z.xPercent,C.xPercent),yPercent:ka(z.yPercent,C.yPercent),perspective:ka(z.transformPerspective,C.perspective)},o=z.directionalRotation,null!=o)if("object"==typeof o)for(l in o)z[l]=o[l];else z.rotation=o;"string"==typeof z.x&&-1!==z.x.indexOf("%")&&(k.x=0,k.xPercent=ka(z.x,C.xPercent)),"string"==typeof z.y&&-1!==z.y.indexOf("%")&&(k.y=0,k.yPercent=ka(z.y,C.yPercent)),k.rotation=la("rotation"in z?z.rotation:"shortRotation"in z?z.shortRotation+"_short":C.rotation,C.rotation,"rotation",A),Ga&&(k.rotationX=la("rotationX"in z?z.rotationX:"shortRotationX"in z?z.shortRotationX+"_short":C.rotationX||0,C.rotationX,"rotationX",A),k.rotationY=la("rotationY"in z?z.rotationY:"shortRotationY"in z?z.shortRotationY+"_short":C.rotationY||0,C.rotationY,"rotationY",A)),k.skewX=la(z.skewX,C.skewX),k.skewY=la(z.skewY,C.skewY)}for(Ga&&null!=z.force3D&&(C.force3D=z.force3D,n=!0),m=C.force3D||C.z||C.rotationX||C.rotationY||k.z||k.rotationX||k.rotationY||k.perspective,m||null==z.scale||(k.scaleZ=1);--y>-1;)u=Ca[y],D=k[u]-C[u],(D>x||-x>D||null!=z[u]||null!=M[u])&&(n=!0,f=new ua(C,u,C[u],D,f),u in A&&(f.e=A[u]),f.xs0=0,f.plugin=h,d._overwriteProps.push(f.n));return D="function"==typeof z.transformOrigin?z.transformOrigin(r,q):z.transformOrigin,C.svg&&(D||z.svgOrigin)&&(p=C.xOffset,s=C.yOffset,Ma(a,ia(D),k,z.svgOrigin,z.smoothOrigin),f=va(C,"xOrigin",(v?C:k).xOrigin,k.xOrigin,f,B),f=va(C,"yOrigin",(v?C:k).yOrigin,k.yOrigin,f,B),(p!==C.xOffset||s!==C.yOffset)&&(f=va(C,"xOffset",v?p:C.xOffset,C.xOffset,f,B),f=va(C,"yOffset",v?s:C.yOffset,C.yOffset,f,B)),D="0px 0px"),(D||Ga&&m&&C.zOrigin)&&(Da?(n=!0,u=Fa,D||(D=(aa(a,u,e,!1,"50% 50%")+"").split(" "),D=D[0]+" "+D[1]+" "+C.zOrigin+"px"),D+="",f=new ua(w,u,0,0,f,-1,B),f.b=w[u],f.plugin=h,Ga?(l=C.zOrigin,D=D.split(" "),C.zOrigin=(D.length>2?parseFloat(D[2]):l)||0,f.xs0=f.e=D[0]+" "+(D[1]||"50%")+" 0px",f=new ua(C,"zOrigin",0,0,f,-1,f.n),f.b=l,f.xs0=f.e=C.zOrigin):f.xs0=f.e=D):ia(D+"",C)),n&&(d._transformType=C.svg&&Ba||!m&&3!==this._transformType?2:3),j&&(i.scale=j),f},allowFunc:!0,prefix:!0}),za("boxShadow",{defaultValue:"0px 0px 0px 0px #999",prefix:!0,color:!0,multi:!0,keyword:"inset"}),za("clipPath",{defaultValue:"inset(0px)",prefix:!0,multi:!0,formatter:ra("inset(0px 0px 0px 0px)",!1,!0)}),za("borderRadius",{defaultValue:"0px",parser:function(a,b,c,f,g,h){b=this.format(b);var i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y=["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"],z=a.style;for(q=parseFloat(a.offsetWidth),r=parseFloat(a.offsetHeight),i=b.split(" "),j=0;j<y.length;j++)this.p.indexOf("border")&&(y[j]=Z(y[j])),m=l=aa(a,y[j],e,!1,"0px"),-1!==m.indexOf(" ")&&(l=m.split(" "),m=l[0],l=l[1]),n=k=i[j],o=parseFloat(m),t=m.substr((o+"").length),u="="===n.charAt(1),u?(p=parseInt(n.charAt(0)+"1",10),n=n.substr(2),p*=parseFloat(n),s=n.substr((p+"").length-(0>p?1:0))||""):(p=parseFloat(n),s=n.substr((p+"").length)),""===s&&(s=d[c]||t),s!==t&&(v=ba(a,"borderLeft",o,t),w=ba(a,"borderTop",o,t),"%"===s?(m=v/q*100+"%",l=w/r*100+"%"):"em"===s?(x=ba(a,"borderLeft",1,"em"),m=v/x+"em",l=w/x+"em"):(m=v+"px",l=w+"px"),u&&(n=parseFloat(m)+p+s,k=parseFloat(l)+p+s)),g=wa(z,y[j],m+" "+l,n+" "+k,!1,"0px",g);return g},prefix:!0,formatter:ra("0px 0px 0px 0Line truncated
|
||||
},i.startTime=function(a){return arguments.length?(a!==this._startTime&&(this._startTime=a,this.timeline&&this.timeline._sortChildren&&this.timeline.add(this,a-this._delay)),this):this._startTime},i.endTime=function(a){return this._startTime+(0!=a?this.totalDuration():this.duration())/this._timeScale},i.timeScale=function(a){if(!arguments.length)return this._timeScale;var b,c;for(a=a||n,this._timeline&&this._timeline.smoothChildTiming&&(b=this._pauseTime,c=b||0===b?b:this._timeline.totalTime(),this._startTime=c-(c-this._startTime)*this._timeScale/a),this._timeScale=a,c=this.timeline;c&&c.timeline;)c._dirty=!0,c.totalDuration(),c=c.timeline;return this},i.reversed=function(a){return arguments.length?(a!=this._reversed&&(this._reversed=a,this.totalTime(this._timeline&&!this._timeline.smoothChildTiming?this.totalDuration()-this._totalTime:this._totalTime,!0)),this):this._reversed},i.paused=function(a){if(!arguments.length)return this._paused;var b,c,d=this._timeline;return a!=this._paused&&d&&(k||a||j.wake(),b=d.rawTime(),c=b-this._pauseTime,!a&&d.smoothChildTiming&&(this._startTime+=c,this._uncache(!1)),this._pauseTime=a?b:null,this._paused=a,this._active=this.isActive(),!a&&0!==c&&this._initted&&this.duration()&&(b=d.smoothChildTiming?this._totalTime:(b-this._startTime)/this._timeScale,this.render(b,b===this._totalTime,!0))),this._gc&&!a&&this._enabled(!0,!1),this};var G=u("core.SimpleTimeline",function(a){E.call(this,0,a),this.autoRemoveChildren=this.smoothChildTiming=!0});i=G.prototype=new E,i.constructor=G,i.kill()._gc=!1,i._first=i._last=i._recent=null,i._sortChildren=!1,i.add=i.insert=function(a,b,c,d){var e,f;if(a._startTime=Number(b||0)+a._delay,a._paused&&this!==a._timeline&&(a._pauseTime=this.rawTime()-(a._timeline.rawTime()-a._pauseTime)),a.timeline&&a.timeline._remove(a,!0),a.timeline=a._timeline=this,a._gc&&a._enabled(!0,!0),e=this._last,this._sortChildren)for(f=a._startTime;e&&e._startTime>f;)e=e._prev;return e?(a._next=e._next,e._next=a):(a._next=this._first,this._first=a),a._next?a._next._prev=a:this._last=a,a._prev=e,this._recent=a,this._timeline&&this._uncache(!0),this},i._remove=function(a,b){return a.timeline===this&&(b||a._enabled(!1,!0),a._prev?a._prev._next=a._next:this._first===a&&(this._first=a._next),a._next?a._next._prev=a._prev:this._last===a&&(this._last=a._prev),a._next=a._prev=a.timeline=null,a===this._recent&&(this._recent=this._last),this._timeline&&this._uncache(!0)),this},i.render=function(a,b,c){var d,e=this._first;for(this._totalTime=this._time=this._rawPrevTime=a;e;)d=e._next,(e._active||a>=e._startTime&&!e._paused&&!e._gc)&&(e._reversed?e.render((e._dirty?e.totalDuration():e._totalDuration)-(a-e._startTime)*e._timeScale,b,c):e.render((a-e._startTime)*e._timeScale,b,c)),e=d},i.rawTime=function(){return k||j.wake(),this._totalTime};var H=u("TweenLite",function(b,c,d){if(E.call(this,c,d),this.render=H.prototype.render,null==b)throw"Cannot tween a null target.";this.target=b="string"!=typeof b?b:H.selector(b)||b;var e,f,g,h=b.jquery||b.length&&b!==a&&b[0]&&(b[0]===a||b[0].nodeType&&b[0].style&&!b.nodeType),i=this.vars.overwrite;if(this._overwrite=i=null==i?X[H.defaultOverwrite]:"number"==typeof i?i>>0:X[i],(h||b instanceof Array||b.push&&q(b))&&"number"!=typeof b[0])for(this._targets=g=o(b),this._propLookup=[],this._siblings=[],e=0;e<g.length;e++)f=g[e],f?"string"!=typeof f?f.length&&f!==a&&f[0]&&(f[0]===a||f[0].nodeType&&f[0].style&&!f.nodeType)?(g.splice(e--,1),this._targets=g=g.concat(o(f))):(this._siblings[e]=aa(f,this,!1),1===i&&this._siblings[e].length>1&&ca(f,this,null,1,this._siblings[e])):(f=g[e--]=H.selector(f),"string"==typeof f&&g.splice(e+1,1)):g.splice(e--,1);else this._propLookup={},this._siblings=aa(b,this,!1),1===i&&this._siblings.length>1&&ca(b,this,null,1,this._siblings);(this.vars.immediateRender||0===c&&0===this._delay&&this.vars.immediateRender!==!1)&&(this._time=-n,this.render(Math.min(0,-this._delay)))},!0),I=function(b){return b&&b.length&&b!==a&&b[0]&&(b[0]===a||b[0].nodeType&&b[0].style&&!b.nodeType)},J=function(a,b){var c,d={};for(c in a)W[c]||c in b&&"transform"!==c&&"x"!==c&&"y"!==c&&"width"!==c&&"height"!==c&&"className"!==c&&"border"!==c||!(!T[c]||T[c]&&T[c]._autoCSS)||(d[c]=a[c],delete a[c]);a.css=d};i=H.prototype=new E,i.constructor=H,i.kill()._gc=!1,i.ratio=0,i._firstPT=i._targets=i._overwrittenProps=i._startAt=null,i._notifyPluginsOfEnabled=i._lazy=!1,H.version="2.1.2",H.defaultEase=i._ease=new w(null,null,1,1),H.defaultOverwrite="auto",H.ticker=j,H.autoSleep=120,H.lagSmoothing=function(a,b){j.lagSmoothing(a,b)},H.selector=a.$||a.jQuery||function(b){var c=a.$||a.jQuery;return c?(H.selector=c,c(b)):(d||(d=a.document),d?d.querySelectorAll?d.querySelectorAll(b):d.getElementById("#"===b.charAt(0)?b.substr(1):b):b)};var K=[],L={},M=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,N=/[\+-]=-?[\.\d]/,O=function(a){for(var b,c=this._firstPT,d=1e-6;c;)b=c.blob?1===a&&null!=this.end?this.end:a?this.join(""):this.start:c.c*a+c.s,c.m?b=c.m.call(this.Line truncated
|
||||
@@ -0,0 +1,425 @@
|
||||
/**
|
||||
* demo.js
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2019, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
{
|
||||
const body = document.body;
|
||||
|
||||
const MathUtils = {
|
||||
lineEq: (y2, y1, x2, x1, currentVal) => {
|
||||
// y = mx + b
|
||||
var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
|
||||
return m * currentVal + b;
|
||||
},
|
||||
lerp: (a, b, n) => (1 - n) * a + n * b,
|
||||
getRandomFloat: (min, max) => (Math.random() * (max - min) + min).toFixed(2)
|
||||
};
|
||||
|
||||
const getMousePos = (e) => {
|
||||
let posx = 0;
|
||||
let posy = 0;
|
||||
if (!e) e = window.event;
|
||||
if (e.pageX || e.pageY) {
|
||||
posx = e.pageX;
|
||||
posy = e.pageY;
|
||||
}
|
||||
else if (e.clientX || e.clientY) {
|
||||
posx = e.clientX + body.scrollLeft + document.documentElement.scrollLeft;
|
||||
posy = e.clientY + body.scrollTop + document.documentElement.scrollTop;
|
||||
}
|
||||
return { x : posx, y : posy }
|
||||
};
|
||||
|
||||
let winsize;
|
||||
const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight};
|
||||
calcWinsize();
|
||||
window.addEventListener('resize', calcWinsize);
|
||||
|
||||
let mousepos = {x: winsize.width/2, y: winsize.height/2};
|
||||
window.addEventListener('mousemove', ev => mousepos = getMousePos(ev));
|
||||
|
||||
// Custom cursor
|
||||
class Cursor {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.circle = this.DOM.el.querySelector('.cursor__inner--circle');
|
||||
this.DOM.arrows = {
|
||||
right: this.DOM.el.querySelector('.cursor__side--right'),
|
||||
left: this.DOM.el.querySelector('.cursor__side--left')
|
||||
};
|
||||
this.bounds = this.DOM.circle.getBoundingClientRect();
|
||||
this.lastMousePos = {x:0, y:0};
|
||||
this.scale = 1;
|
||||
this.lastScale = 1;
|
||||
requestAnimationFrame(() => this.render());
|
||||
}
|
||||
render() {
|
||||
this.lastMousePos.x = MathUtils.lerp(this.lastMousePos.x, mousepos.x - this.bounds.width/2, 0.2);
|
||||
this.lastMousePos.y = MathUtils.lerp(this.lastMousePos.y, mousepos.y - this.bounds.height/2, 0.2);
|
||||
this.lastScale = MathUtils.lerp(this.lastScale, this.scale, 0.15);
|
||||
this.DOM.circle.style.transform = `translateX(${(this.lastMousePos.x)}px) translateY(${this.lastMousePos.y}px) scale(${this.lastScale})`;
|
||||
requestAnimationFrame(() => this.render());
|
||||
}
|
||||
enter() {
|
||||
this.scale = 1.9;
|
||||
}
|
||||
leave() {
|
||||
this.scale = 1;
|
||||
}
|
||||
click() {
|
||||
this.lastScale = .4;
|
||||
}
|
||||
showArrows() {
|
||||
TweenMax.to(Object.values(this.DOM.arrows), 1, {
|
||||
ease: Expo.easeOut,
|
||||
startAt: {x: i => i ? 10 : -10 },
|
||||
opacity: 1,
|
||||
x: 0
|
||||
});
|
||||
}
|
||||
hideArrows() {
|
||||
TweenMax.to(Object.values(this.DOM.arrows), 1, {
|
||||
ease: Expo.easeOut,
|
||||
x: i => i ? 10 : -10,
|
||||
opacity: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Strip Item
|
||||
class StripItem {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.image = this.DOM.el.querySelector('.img-inner');
|
||||
this.DOM.number = this.DOM.el.querySelector('.strip__item-link');
|
||||
|
||||
this.initEvents();
|
||||
}
|
||||
initEvents() {
|
||||
// Hovering the number makes it slide out/in
|
||||
this.DOM.number.addEventListener('mouseenter', () => {
|
||||
const inner = this.DOM.number.querySelector('span');
|
||||
new TimelineMax()
|
||||
.to(inner, 0.2, {
|
||||
ease: Quad.easeOut,
|
||||
y: '-100%',
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(inner, 0.5, {
|
||||
ease: Expo.easeOut,
|
||||
startAt: {y: '100%', opacity: 0, scale: 1.3},
|
||||
y: '0%',
|
||||
opacity: 1
|
||||
}, 0.2)
|
||||
});
|
||||
|
||||
this.DOM.number.addEventListener('mouseleave', () => {
|
||||
const inner = this.DOM.number.querySelector('span');
|
||||
TweenMax.killTweensOf(inner);
|
||||
TweenMax.set(inner, {
|
||||
scale: 1,
|
||||
y: '0%',
|
||||
opacity: 1
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Content Item
|
||||
class ContentItem {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.image = this.DOM.el.querySelector('.img-outer');
|
||||
this.DOM.title = this.DOM.el.querySelector('.content__item-title');
|
||||
this.DOM.text = this.DOM.el.querySelector('.content__item-text');
|
||||
}
|
||||
}
|
||||
|
||||
// Images strip
|
||||
class Strip {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.strip = this.DOM.el.querySelector('.strip');
|
||||
this.items = [];
|
||||
[...this.DOM.strip.querySelectorAll('.strip__item')].forEach(item => this.items.push(new StripItem(item)));
|
||||
// The draggable container
|
||||
this.DOM.draggable = this.DOM.el.querySelector('.draggable');
|
||||
// the extra indicator element (scales down when we start dragging)
|
||||
this.DOM.indicator = document.querySelector('.frame__indicator');
|
||||
// the cover (name + year elements) that appear when we start to drag
|
||||
this.DOM.cover = this.DOM.el.querySelector('.strip-cover');
|
||||
// The width of the draggable container (also the strip container)
|
||||
this.draggableWidth = this.DOM.draggable.offsetWidth;
|
||||
// The total amount that we can drag the draggable container, so that both the first and last image stay next to the viewport boundary (left and right respectively)
|
||||
this.maxDrag = this.draggableWidth < winsize.width ? 0 : this.draggableWidth - winsize.width;
|
||||
// The current amount (in pixels) that was dragged
|
||||
this.dragPosition = 0;
|
||||
// Initialize the Draggabilly
|
||||
this.draggie = new Draggabilly(this.DOM.draggable, { axis: 'x' });
|
||||
|
||||
this.init();
|
||||
this.initEvents();
|
||||
}
|
||||
init() {
|
||||
this.renderedStyles = {
|
||||
position: {previous: 0, current: this.dragPosition},
|
||||
scale: {previous: 1, current: 1},
|
||||
imgScale: {previous: 1, current: 1},
|
||||
opacity: {previous: 1, current: 1},
|
||||
coverScale: {previous: 0.75, current: 0.75},
|
||||
coverOpacity: {previous: 0, current: 0},
|
||||
indicatorScale: {previous: 1, current: 1},
|
||||
};
|
||||
|
||||
this.render = () => {
|
||||
this.renderId = undefined;
|
||||
|
||||
for (const key in this.renderedStyles ) {
|
||||
this.renderedStyles[key].previous = MathUtils.lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, 0.1);
|
||||
}
|
||||
|
||||
TweenMax.set(this.DOM.strip, {x: this.renderedStyles.position.previous});
|
||||
for (const item of this.items) {
|
||||
TweenMax.set(item.DOM.el, {scale: this.renderedStyles.scale.previous, opacity: this.renderedStyles.opacity.previous});
|
||||
TweenMax.set(item.DOM.image, {scale: this.renderedStyles.imgScale.previous});
|
||||
}
|
||||
TweenMax.set(this.DOM.cover, {scale: this.renderedStyles.coverScale.previous, opacity: this.renderedStyles.coverOpacity.previous});
|
||||
TweenMax.set(this.DOM.indicator, {scaleX: this.renderedStyles.indicatorScale.previous});
|
||||
|
||||
if ( !this.renderId ) {
|
||||
this.renderId = requestAnimationFrame(() => this.render());
|
||||
}
|
||||
};
|
||||
this.renderId = requestAnimationFrame(() => this.render());
|
||||
}
|
||||
initEvents() {
|
||||
this.onDragStart = () => {
|
||||
this.renderedStyles.scale.current = 0.8;
|
||||
this.renderedStyles.imgScale.current = 1.6;
|
||||
this.renderedStyles.opacity.current = 0.3;
|
||||
this.renderedStyles.coverScale.current = 1;
|
||||
this.renderedStyles.coverOpacity.current = 1;
|
||||
this.renderedStyles.indicatorScale.current = 0;
|
||||
|
||||
cursor.scale = 1.5;
|
||||
cursor.showArrows();
|
||||
};
|
||||
|
||||
this.onDragMove = (event, pointer, moveVector) => {
|
||||
// The possible range for the drag is draggie.position.x = [-maxDrag,0 ]
|
||||
if ( this.draggie.position.x >= 0 ) {
|
||||
// the max we will be able to drag is winsize.width/2
|
||||
this.dragPosition = MathUtils.lineEq(0.5*winsize.width,0, winsize.width, 0, this.draggie.position.x);
|
||||
}
|
||||
else if ( this.draggie.position.x < -1*this.maxDrag ) {
|
||||
// the max we will be able to drag is winsize.width/2
|
||||
this.dragPosition = MathUtils.lineEq(0.5*winsize.width,0, this.maxDrag+winsize.width, this.maxDrag, this.draggie.position.x);
|
||||
}
|
||||
else {
|
||||
this.dragPosition = this.draggie.position.x;
|
||||
}
|
||||
this.renderedStyles.position.current = this.dragPosition;
|
||||
|
||||
mousepos = getMousePos(event);
|
||||
};
|
||||
|
||||
this.onDragEnd = () => {
|
||||
// reset draggable if out of bounds.
|
||||
if ( this.draggie.position.x > 0 ) {
|
||||
this.dragPosition = 0;
|
||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
||||
}
|
||||
else if ( this.draggie.position.x < -1*this.maxDrag ) {
|
||||
this.dragPosition = -1*this.maxDrag;
|
||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
||||
}
|
||||
this.renderedStyles.position.current = this.dragPosition;
|
||||
this.renderedStyles.scale.current = 1;
|
||||
this.renderedStyles.imgScale.current = 1;
|
||||
this.renderedStyles.opacity.current = 1;
|
||||
this.renderedStyles.coverScale.current = 0.75;
|
||||
this.renderedStyles.coverOpacity.current = 0;
|
||||
this.renderedStyles.indicatorScale.current = 1;
|
||||
|
||||
cursor.scale = 1;
|
||||
cursor.hideArrows();
|
||||
};
|
||||
|
||||
this.draggie.on('pointerDown', this.onDragStart);
|
||||
this.draggie.on('dragMove', this.onDragMove);
|
||||
this.draggie.on('pointerUp', this.onDragEnd);
|
||||
|
||||
for (const item of this.items) {
|
||||
item.DOM.number.addEventListener('click', (ev) => {
|
||||
ev.preventDefault();
|
||||
this.showItem(item);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.maxDrag = this.draggableWidth < winsize.width ? 0 : this.draggableWidth - winsize.width;
|
||||
if ( Math.abs(this.dragPosition) + winsize.width > this.draggableWidth ) {
|
||||
const diff = Math.abs(this.dragPosition) + winsize.width - this.draggableWidth;
|
||||
// reset dragPosition
|
||||
this.dragPosition = this.dragPosition+diff;
|
||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
||||
}
|
||||
});
|
||||
}
|
||||
showItem(item) {
|
||||
if ( this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( this.renderId ) {
|
||||
window.cancelAnimationFrame(this.renderId);
|
||||
this.renderId = undefined;
|
||||
}
|
||||
|
||||
this.isAnimating = true;
|
||||
|
||||
this.current = this.items.indexOf(item);
|
||||
const contentItem = contentItems[this.current];
|
||||
contentItem.DOM.el.classList.add('content__item--current');
|
||||
|
||||
// Fix for mobile (make sure the cover is not visible when clicking the numbers)
|
||||
TweenMax.set(this.DOM.cover, {scale: 0, opacity: 0});
|
||||
|
||||
this.contentToggleTimeline = new TimelineMax({
|
||||
onComplete: () => this.isAnimating = false
|
||||
})
|
||||
.set([contentItem.DOM.image, contentItem.DOM.title, contentItem.DOM.text, closeContentCtrl], {
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(this.items.map(item => item.DOM.el), 0.8, {
|
||||
ease: Cubic.easeOut,
|
||||
scale: 0.8,
|
||||
opacity: 0.4
|
||||
}, 0)
|
||||
.to(this.items.map(item => item.DOM.image), 0.8, {
|
||||
ease: Cubic.easeOut,
|
||||
scale: 1.6
|
||||
}, 0)
|
||||
.to(this.DOM.indicator, 0.8, {
|
||||
ease: Cubic.easeOut,
|
||||
scaleX: 0
|
||||
}, 0);
|
||||
|
||||
for (const item of this.items) {
|
||||
this.contentToggleTimeline.to(item.DOM.el, 1, {
|
||||
ease: Expo.easeInOut,
|
||||
y: winsize.height*-1
|
||||
}, MathUtils.getRandomFloat(0.2,0.4));
|
||||
}
|
||||
|
||||
this.contentToggleTimeline
|
||||
.to(contentItem.DOM.image, 1, {
|
||||
ease: Expo.easeInOut,
|
||||
startAt: {y: winsize.height*1.3, opacity: 1},
|
||||
y: 0
|
||||
}, 0.6)
|
||||
.to(contentItem.DOM.title, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
startAt: {y: 100},
|
||||
y: 0,
|
||||
opacity: 1
|
||||
}, 1)
|
||||
.to(contentItem.DOM.text, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
startAt: {y: 200},
|
||||
y: 0,
|
||||
opacity: 1
|
||||
}, 1)
|
||||
.to(closeContentCtrl, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
startAt: {y: 50},
|
||||
y: 0,
|
||||
opacity: 1
|
||||
}, 1);
|
||||
}
|
||||
closeContent() {
|
||||
if ( this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
this.isAnimating = true;
|
||||
|
||||
const contentItem = contentItems[this.current];
|
||||
this.contentToggleTimeline = new TimelineMax({
|
||||
onComplete: () => {
|
||||
contentItem.DOM.el.classList.remove('content__item--current');
|
||||
this.isAnimating = false
|
||||
this.renderId = requestAnimationFrame(() => this.render());
|
||||
}
|
||||
})
|
||||
.set(this.items.map(item => item.DOM.el), {
|
||||
scale: 1,
|
||||
opacity: 1
|
||||
}, 0)
|
||||
.set(this.items.map(item => item.DOM.image), {
|
||||
scale: 1
|
||||
}, 0)
|
||||
.to(contentItem.DOM.text, 0.8, {
|
||||
ease: Quint.easeIn,
|
||||
y: 200,
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(contentItem.DOM.title, 0.8, {
|
||||
ease: Quint.easeIn,
|
||||
y: 100,
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(closeContentCtrl, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
y: 50,
|
||||
opacity: 0
|
||||
}, 0.2)
|
||||
.to(contentItem.DOM.image, 1, {
|
||||
ease: Expo.easeInOut,
|
||||
y: winsize.height*1.3,
|
||||
opacity: 1
|
||||
}, 0.2);
|
||||
|
||||
for (const item of this.items) {
|
||||
this.contentToggleTimeline.to(item.DOM.el, MathUtils.getRandomFloat(0.6,0.9), {
|
||||
ease: Expo.easeInOut,
|
||||
y: 0
|
||||
}, MathUtils.getRandomFloat(0.4,0.6));
|
||||
}
|
||||
|
||||
this.contentToggleTimeline
|
||||
.to(this.DOM.indicator, 1.2, {
|
||||
ease: Expo.easeOut,
|
||||
scaleX: 1
|
||||
}, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// The images strip
|
||||
const strip = new Strip(document.querySelector('.strip-outer'));
|
||||
|
||||
// Custom mouse cursor
|
||||
const cursor = new Cursor(document.querySelector('.cursor'));
|
||||
|
||||
// The content elements
|
||||
const contentItems = [];
|
||||
[...document.querySelectorAll('.content__item')].forEach(item => contentItems.push(new ContentItem(item)));
|
||||
|
||||
// The close content ctrl
|
||||
const closeContentCtrl = document.querySelector('.content__close');
|
||||
// On click, close the content view
|
||||
closeContentCtrl.addEventListener('click', () => {
|
||||
strip.closeContent();
|
||||
});
|
||||
|
||||
// Activate the enter/leave/click methods of the custom cursor when hovering in/out on every <a> (and the close content ctrl)
|
||||
[...document.querySelectorAll('a'), closeContentCtrl].forEach((link) => {
|
||||
link.addEventListener('mouseenter', () => cursor.enter());
|
||||
link.addEventListener('mouseleave', () => cursor.leave());
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* Draggabilly PACKAGED v2.2.0
|
||||
* Make that shiz draggable
|
||||
* https://draggabilly.desandro.com
|
||||
* MIT license
|
||||
*/
|
||||
|
||||
!function(i,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("jquery")):i.jQueryBridget=e(i,i.jQuery)}(window,function(t,i){"use strict";var c=Array.prototype.slice,e=t.console,p=void 0===e?function(){}:function(t){e.error(t)};function n(d,o,u){(u=u||i||t.jQuery)&&(o.prototype.option||(o.prototype.option=function(t){u.isPlainObject(t)&&(this.options=u.extend(!0,this.options,t))}),u.fn[d]=function(t){if("string"==typeof t){var i=c.call(arguments,1);return s=i,a="$()."+d+'("'+(r=t)+'")',(e=this).each(function(t,i){var e=u.data(i,d);if(e){var n=e[r];if(n&&"_"!=r.charAt(0)){var o=n.apply(e,s);h=void 0===h?o:h}else p(a+" is not a valid method")}else p(d+" not initialized. Cannot call methods, i.e. "+a)}),void 0!==h?h:e}var e,r,s,h,a,n;return n=t,this.each(function(t,i){var e=u.data(i,d);e?(e.option(n),e._init()):(e=new o(i,n),u.data(i,d,e))}),this},r(u))}function r(t){!t||t&&t.bridget||(t.bridget=n)}return r(i||t.jQuery),n}),function(t,i){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return i()}):"object"==typeof module&&module.exports?module.exports=i():t.getSize=i()}(window,function(){"use strict";function m(t){var i=parseFloat(t);return-1==t.indexOf("%")&&!isNaN(i)&&i}var e="undefined"==typeof console?function(){}:function(t){console.error(t)},y=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],b=y.length;function E(t){var i=getComputedStyle(t);return i||e("Style returned "+i+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),i}var _,x=!1;function P(t){if(function(){if(!x){x=!0;var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(t);var e=E(t);P.isBoxSizeOuter=_=200==m(e.width),i.removeChild(t)}}(),"string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var i=E(t);if("none"==i.display)return function(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},i=0;i<b;i++)t[y[i]]=0;return t}();var e={};e.width=t.offsetWidth,e.height=t.offsetHeight;for(var n=e.isBorderBox="border-box"==i.boxSizing,o=0;o<b;o++){var r=y[o],s=i[r],h=parseFloat(s);e[r]=isNaN(h)?0:h}var a=e.paddingLeft+e.paddingRight,d=e.paddingTop+e.paddingBottom,u=e.marginLeft+e.marginRight,c=e.marginTop+e.marginBottom,p=e.borderLeftWidth+e.borderRightWidth,f=e.borderTopWidth+e.borderBottomWidth,g=n&&_,l=m(i.width);!1!==l&&(e.width=l+(g?0:a+p));var v=m(i.height);return!1!==v&&(e.height=v+(g?0:d+f)),e.innerWidth=e.width-(a+p),e.innerHeight=e.height-(d+f),e.outerWidth=e.width+u,e.outerHeight=e.height+c,e}}return P}),function(t,i){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",i):"object"==typeof module&&module.exports?module.exports=i():t.EvEmitter=i()}("undefined"!=typeof window?window:this,function(){function t(){}var i=t.prototype;return i.on=function(t,i){if(t&&i){var e=this._events=this._events||{},n=e[t]=e[t]||[];return-1==n.indexOf(i)&&n.push(i),this}},i.once=function(t,i){if(t&&i){this.on(t,i);var e=this._onceEvents=this._onceEvents||{};return(e[t]=e[t]||{})[i]=!0,this}},i.off=function(t,i){var e=this._events&&this._events[t];if(e&&e.length){var n=e.indexOf(i);return-1!=n&&e.splice(n,1),this}},i.emitEvent=function(t,i){var e=this._events&&this._events[t];if(e&&e.length){e=e.slice(0),i=i||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;o<e.length;o++){var r=e[o];n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,i)}return this}},i.allOff=function(){delete this._events,delete this._onceEvents},t}),function(i,e){"function"==typeof define&&define.amd?define("unipointer/unipointer",["ev-emitter/ev-emitter"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("ev-emitter")):i.Unipointer=e(i,i.EvEmitter)}(window,function(o,t){function i(){}var e=i.prototype=Object.create(t.prototype);e.bindStartEvent=function(t){this._bindStartEvent(t,!0)},e.unbindStartEvent=function(t){this._bindStartEvent(t,!1)},e._bindStartEvent=function(t,i){var e=(i=void 0===i||i)?"addEventListener":"removeEventListener",n="mousedown";o.PointerEvent?n="pointerdown":"ontouchstart"in o&&(n="touchstart"),t[e](n,this)},e.handleEvent=function(t){var i="on"+t.type;this[i]&&this[i](t)},e.getTouch=function(t){for(var i=0;i<t.length;i++){var e=t[i];if(e.identifier==this.pointerIdentifier)return e}},e.onmousedown=function(t){var i=t.button;i&&0!==i&&1!==i||this._pointerDown(t,t)},e.ontouchstart=function(t){this._pointerDown(t,t.changedTouches[0])},e.onpointerdown=function(t){this._pointerDown(t,t)},e._pointerDown=fuLine truncated
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* imagesLoaded PACKAGED v4.1.1
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
!function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i<t.length;i++)e.push(t[i]);else e.push(t);return e}function o(t,e,r){return this instanceof o?("string"==typeof t&&(t=document.querySelectorAll(t)),this.elements=n(t),this.options=i({},this.options),"function"==typeof e?r=e:i(this.options,e),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(function(){this.check()}.bind(this))):new o(t,e,r)}function r(t){this.img=t}function s(t,e){this.url=t,this.element=e,this.img=new Image}var h=t.jQuery,a=t.console;o.prototype=Object.create(e.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),this.options.background===!0&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&d[e]){for(var i=t.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=t.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var d={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(e.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,t),n=i.exec(e.backgroundImage)}},o.prototype.addImage=function(t){var e=new r(t);this.images.push(e)},o.prototype.addBackground=function(t,e){var i=new s(t,e);this.images.push(i)},o.prototype.check=function(){function t(t,i,n){setTimeout(function(){e.progress(t,i,n)})}var e=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(e){e.once("progress",t),e.check()}):void this.complete()},o.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,t,e)},o.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},r.prototype=Object.create(e.prototype),r.prototype.check=function(){var t=this.getIsImageComplete();return t?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},r.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.img,e])},r.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var t=this.getIsImageComplete();t&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("loaLine truncated
|
||||
@@ -0,0 +1,574 @@
|
||||
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&display=swap');
|
||||
|
||||
:root {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
--color-text: #e7e7e7;
|
||||
--color-bg: #090909;
|
||||
--color-link: #ff0000;
|
||||
--color-link-hover: #fff;
|
||||
--color-cover: #ff0000;
|
||||
--color-copy: #e7e7e7;
|
||||
--color-content-title: #ff0000;
|
||||
--color-indicator: #1b1b1b;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-family: ff-more-web-pro, serif;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Page Loader */
|
||||
.js .loading::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.js .loading::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 25px);
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
background: var(--color-link);
|
||||
animation: loaderAnim 0.7s linear infinite alternate forwards;
|
||||
}
|
||||
|
||||
@keyframes loaderAnim {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5,0.5,1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-link);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--color-link-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message {
|
||||
background: var(--color-text);
|
||||
color: var(--color-bg);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frame {
|
||||
padding: 1.5rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.frame a {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.frame__title {
|
||||
font-size: 1rem;
|
||||
margin: 0 0 0.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.frame__links {
|
||||
display: flex;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.frame__links a {
|
||||
margin: 0 0.35rem;
|
||||
padding: 0 0.35rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.frame__links a:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.frame__links a:not(:last-child)::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 1rem;
|
||||
background: var(--color-link);
|
||||
position: absolute;
|
||||
left: calc(100% + 0.35rem);
|
||||
top: calc(50% - 0.5rem);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.frame__indicator {
|
||||
background: var(--color-indicator);
|
||||
width: 3rem;
|
||||
height: 0.5rem;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
.strip-outer {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 750px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.strip-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
height: 500px;
|
||||
top: calc(50% - 250px);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.draggable:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: 100%;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.strip__item {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
font-family: "helpme";
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.img-outer {
|
||||
--imgheight: 450px;
|
||||
height: var(--imgheight);
|
||||
width: calc(var(--imgheight) * 0.7);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.img-outer--size-s {
|
||||
--imgheight: 300px;
|
||||
}
|
||||
|
||||
.img-outer--size-m {
|
||||
--imgheight: 360px;
|
||||
}
|
||||
|
||||
.img-outer--size-l {
|
||||
--imgheight: 390px;
|
||||
}
|
||||
|
||||
.img-outer--size-xl {
|
||||
--imgheight: 420px;
|
||||
}
|
||||
|
||||
.img-inner {
|
||||
width: calc(100% + 40px);
|
||||
height: calc(100% + 40px);
|
||||
left: -20px;
|
||||
top: -20px;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.strip__item-number {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.strip__item-link {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.strip__item-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 160%;
|
||||
height: 120%;
|
||||
left: -30%;
|
||||
top: -10%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.strip__item-link span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.strip__item-plus {
|
||||
display: none;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 6h6v1H7v6H6V7H0V6h6V0h1v6z' fill='%23505050'/%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.strip__item-link:hover + .strip__item-plus {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.strip-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--color-cover);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.strip-cover__title {
|
||||
font-family: fleisch-wolf, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 25vw;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
-webkit-text-stroke: 1px var(--color-cover);
|
||||
text-stroke: 1px var(--color-cover);
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-fill-color: transparent;
|
||||
color: transparent;
|
||||
filter: drop-shadow(0 0 100px #ff0000);
|
||||
text-shadow: -18px -10px 0 #ff0000;
|
||||
}
|
||||
|
||||
.strip-cover__subtitle {
|
||||
font-size: 5vw;
|
||||
margin: 0;
|
||||
font-family: "helpme";
|
||||
color: #fff;
|
||||
letter-spacing: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.js .content {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content__item {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-rows: 50% 40% 10%;
|
||||
grid-column-gap: 0;
|
||||
grid-template-areas: 'content-img' 'content-copy' '...';
|
||||
display: none;
|
||||
}
|
||||
|
||||
.js .content__item {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.js .content__item--current {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.img-outer--content {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
grid-area: content-img;
|
||||
}
|
||||
|
||||
.img-inner--content {
|
||||
background-position: 50% 35%;
|
||||
}
|
||||
|
||||
.content__item-title {
|
||||
font-weight: normal;
|
||||
color: var(--color-content-title);
|
||||
font-family: "helpme";
|
||||
}
|
||||
|
||||
.content__item-copy {
|
||||
grid-area: content-copy;
|
||||
padding: 1.5rem 2rem;
|
||||
color: var(--color-copy);
|
||||
}
|
||||
|
||||
.content__item-text {
|
||||
margin: 0;
|
||||
font-family: "freedoka";
|
||||
}
|
||||
|
||||
.content__close {
|
||||
display: block;
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 3rem;
|
||||
}
|
||||
|
||||
.content__item--current ~ .content__close {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.content__close svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.content__close:focus,
|
||||
.content__close:hover {
|
||||
outline: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Will-change */
|
||||
.strip,
|
||||
.strip__item,
|
||||
.cursor__side,
|
||||
.content__close,
|
||||
.content__item-title,
|
||||
.content__item-copy {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 53em) {
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame {
|
||||
position: fixed;
|
||||
text-align: left;
|
||||
z-index: 10000;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100vh;
|
||||
padding: 1.25rem 3rem;
|
||||
pointer-events: none;
|
||||
grid-template-columns: 80% 20%;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas: 'page-title links'
|
||||
'... ...'
|
||||
'indicator sub-title';
|
||||
}
|
||||
.frame__title-wrap{
|
||||
grid-area: page-title;
|
||||
display: flex;
|
||||
}
|
||||
.frame__title {
|
||||
margin: 0;
|
||||
}
|
||||
.frame__subtitle {
|
||||
grid-area: sub-title;
|
||||
justify-self: end;
|
||||
margin: 0;
|
||||
}
|
||||
.frame__links {
|
||||
padding: 0;
|
||||
margin: 0 0 0 2rem;
|
||||
}
|
||||
.frame__indicator {
|
||||
grid-area: indicator;
|
||||
margin: 0;
|
||||
}
|
||||
.content__item {
|
||||
top: 0;
|
||||
grid-template-columns: 40% 45% 15%;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-areas: 'content-copy content-img ... ';
|
||||
}
|
||||
.content__item-copy {
|
||||
max-width: 240px;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
.strip-cover__title {
|
||||
font-size: 15vw;
|
||||
-webkit-text-stroke: 2px var(--color-cover);
|
||||
text-stroke: 2px var(--color-cover);
|
||||
}
|
||||
.strip-cover__subtitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-pointer: fine) {
|
||||
.cursor {
|
||||
display: block;
|
||||
}
|
||||
.cursor__inner {
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mix-blend-mode: difference;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cursor__side {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
opacity: 0;
|
||||
}
|
||||
.cursor__side--left {
|
||||
right: calc(100% + 5px);
|
||||
}
|
||||
.cursor__side--right {
|
||||
left: calc(100% + 5px);
|
||||
}
|
||||
.cursor__inner--circle {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@import url("https://p.typekit.net/p.css?s=1&k=ugp0unb&ht=tk&f=10052.10053.35816&a=1494256&app=typekit&e=css");
|
||||
|
||||
@font-face {
|
||||
font-family:"ff-more-web-pro";
|
||||
src:url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
|
||||
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"ff-more-web-pro";
|
||||
src:url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
|
||||
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"fleisch-wolf";
|
||||
src:url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
|
||||
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
|
||||
}
|
||||
|
||||
.tk-ff-more-web-pro { font-family: "ff-more-web-pro",serif; }
|
||||
.tk-fleisch-wolf { font-family: "fleisch-wolf",sans-serif; }
|
||||
|
||||
@font-face {
|
||||
font-family: helpme;
|
||||
src: url(HelpMe.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: avang;
|
||||
src: url(Nightcore\ Demo.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: freedoka;
|
||||
src: url(Fredoka-VariableFont_wdth\,wght.ttf);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
|
||||
.strip-cover__title {
|
||||
filter: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
.strip-cover__subtitle {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,875 @@
|
||||
|
||||
:root {
|
||||
--background: hsla(220, 17%, 7%, 1);
|
||||
--banner-background: hsla(250, 6%, 20%, 1);
|
||||
--white-alpha-20: hsla(0, 0%, 100%, 0.2);
|
||||
--on-background: hsla(220, 100%, 95%, 1);
|
||||
--on-surface: hsla(250, 100%, 95%, 1);
|
||||
--on-surface-variant: hsla(250, 1%, 44%, 1);
|
||||
--primary: rgb(4, 146, 211);
|
||||
--primary-variant: hsla(349, 69%, 51%, 1);
|
||||
--rating-color: hsla(44, 100%, 49%, 1);
|
||||
--surface: hsla(250, 13%, 11%, 1);
|
||||
--text-color: hsla(250, 2%, 59%, 1);
|
||||
--white: hsla(0, 0%, 100%, 1);
|
||||
--banner-overlay: 90deg, hsl(220, 17%, 7%) 0%, hsla(220, 17%, 7%, 0.5) 100%;
|
||||
--bottom-overlay: 180deg, hsla(250, 13%, 11%, 0), hsla(250, 13%, 11%, 1);
|
||||
--ff-dm-sans: 'DM Sans', sans-serif;
|
||||
--fs-heading: 4rem;
|
||||
--fs-title-lg: 2.6rem;
|
||||
--fs-title: 2rem;
|
||||
--fs-body: 1.8rem;
|
||||
--fs-button: 1.5rem;
|
||||
--fs-label: 1.4rem;
|
||||
--weight-bold: 700;
|
||||
--shadow-1: 0 1px 4px hsla(0, 0%, 0%, 0.75);
|
||||
--shadow-2: 0 2px 4px hsla(202, 100%, 50%, 0.3);
|
||||
--radius-4: 4px;
|
||||
--radius-8: 8px;
|
||||
--radius-16: 16px;
|
||||
--radius-24: 24px;
|
||||
--radius-36: 36px;
|
||||
|
||||
|
||||
|
||||
--transition-short: 250ms ease;
|
||||
--transition-long: 500ms ease;
|
||||
|
||||
}
|
||||
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
li { list-style: none; }
|
||||
|
||||
a,
|
||||
img,
|
||||
span,
|
||||
iframe,
|
||||
button { display: block; }
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img { height: auto; }
|
||||
|
||||
input,
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input { width: 100%; }
|
||||
|
||||
button {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--ff-dm-sans);
|
||||
font-size: 10px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--on-background);
|
||||
font-size: var(--fs-body);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:focus-visible { outline-color: var(--primary-variant); }
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--banner-background);
|
||||
border-radius: var(--radius-8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.search-wrapper::before,
|
||||
.load-more::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid var(--white);
|
||||
border-radius: var(--radius-24);
|
||||
border-inline-end-color: transparent;
|
||||
animation: loading 500ms linear infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-wrapper::before {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.search-wrapper.searching::before { display: block; }
|
||||
|
||||
.load-more {
|
||||
background-color: var(--primary-variant);
|
||||
margin-inline: auto;
|
||||
margin-block: 36px 60px;
|
||||
}
|
||||
|
||||
.load-more:is(:hover, :focus-visible) {
|
||||
--primary-variant: hsla(350, 67%, 39%, 1);
|
||||
}
|
||||
|
||||
.load-more.loading::before { display: block; }
|
||||
|
||||
@keyframes loading {
|
||||
0% { transform: rotate(0); }
|
||||
100% { transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
.heading,
|
||||
.title-large,
|
||||
.title {
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.title { font-size: var(--fs-title); }
|
||||
|
||||
.heading {
|
||||
color: var(--white);
|
||||
font-size: var(--fs-heading);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.title-large { font-size: var(--fs-title-lg); }
|
||||
|
||||
.img-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.meta-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: var(--white);
|
||||
font-size: var(--fs-button);
|
||||
font-weight: var(--weight-bold);
|
||||
max-width: max-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-block: 12px;
|
||||
padding-inline: 20px 24px;
|
||||
border-radius: var(--radius-8);
|
||||
transition: var(--transition-short);
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
background-color: var(--banner-background);
|
||||
color: var(--white);
|
||||
font-size: var(--fs-label);
|
||||
font-weight: var(--weight-bold);
|
||||
padding-inline: 6px;
|
||||
border-radius: var(--radius-4);
|
||||
}
|
||||
|
||||
.poster-box {
|
||||
background-image: url('../images/poster-bg-icon.png');
|
||||
aspect-ratio: 2 / 3;
|
||||
}
|
||||
|
||||
.poster-box,
|
||||
.video-card {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 50px;
|
||||
background-position: center;
|
||||
background-color: var(--banner-background);
|
||||
border-radius: var(--radius-16);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title-wrapper { margin-block-end: 24px; }
|
||||
|
||||
.slider-list {
|
||||
margin-inline: -20px;
|
||||
overflow-x: overlay;
|
||||
padding-block-end: 16px;
|
||||
margin-block-end: -16px;
|
||||
}
|
||||
|
||||
.slider-list::-webkit-scrollbar-thumb { background-color: transparent; }
|
||||
|
||||
.slider-list:is(:hover, :focus-within)::-webkit-scrollbar-thumb {
|
||||
background-color: var(--banner-background);
|
||||
}
|
||||
|
||||
.slider-list::-webkit-scrollbar-button { width: 20px; }
|
||||
|
||||
.slider-list .slider-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.slider-list .slider-inner::before,
|
||||
.slider-list .slider-inner::after {
|
||||
content: "";
|
||||
min-width: 4px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: var(--white-alpha-20);
|
||||
border-radius: var(--radius-8);
|
||||
}
|
||||
|
||||
.video-card {
|
||||
background-image: url('../images/video-bg-icon.png');
|
||||
aspect-ratio: 16 / 9;
|
||||
flex-shrink: 0;
|
||||
max-width: 500px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
/* .container::after, */
|
||||
.search-modal::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-image: linear-gradient(var(--bottom-overlay));
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
padding-block: 24px;
|
||||
padding-inline: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header .logo { margin-inline-end: auto; }
|
||||
|
||||
.search-btn,
|
||||
.menu-btn { padding: 12px; }
|
||||
|
||||
.search-btn {
|
||||
background-color: var(--banner-background);
|
||||
border-radius: var(--radius-8);
|
||||
}
|
||||
|
||||
.search-btn img {
|
||||
opacity: 0.5;
|
||||
transition: var(--transition-short);
|
||||
}
|
||||
|
||||
.search-btn:is(:hover, :focus-visible) img { opacity: 1; }
|
||||
|
||||
.menu-btn.active .menu,
|
||||
.menu-btn .close { display: none; }
|
||||
|
||||
.menu-btn .menu,
|
||||
.menu-btn.active .close { display: block; }
|
||||
|
||||
.search-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--background);
|
||||
padding: 24px 16px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-box.active { display: flex; }
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
background-color: var(--banner-background);
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding-inline: 44px 16px;
|
||||
outline: none;
|
||||
border-radius: var(--radius-8);
|
||||
transition: var(--transition-short);
|
||||
}
|
||||
|
||||
.search-field::placeholder { color: var(--on-surface-variant); }
|
||||
|
||||
.search-field:hover { box-shadow: 0 0 0 2px var(--on-surface-variant); }
|
||||
|
||||
.search-field:focus {
|
||||
box-shadow: 0 0 0 2px var(--on-surface);
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
|
||||
.search-wrapper .leading-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 12px;
|
||||
opacity: 0.5;
|
||||
transition: var(--transition-short);
|
||||
}
|
||||
|
||||
.search-wrapper:focus-within .leading-icon { opacity: 0; }
|
||||
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
background-color: var(--background);
|
||||
top: 96px;
|
||||
bottom: 0;
|
||||
left: -340px;
|
||||
max-width: 340px;
|
||||
width: 100%;
|
||||
border-block-start: 1px solid var(--banner-background);
|
||||
overflow-y: overlay;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
transition: var(--transition-long);
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
transform: translateX(340px);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
padding-block: 36px;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb { background-color: transparent; }
|
||||
|
||||
.sidebar:is(:hover, :focus-within)::-webkit-scrollbar-thumb {
|
||||
background-color: var(--banner-background);
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-button { height: 16px; }
|
||||
|
||||
.sidebar-list,
|
||||
.sidebar-footer { padding-inline: 36px; }
|
||||
|
||||
.sidebar-link {
|
||||
color: var(--on-surface-variant);
|
||||
transition: var(--transition-short);
|
||||
}
|
||||
|
||||
.sidebar-link:is(:hover, :focus-visible) { color: var(--on-background); }
|
||||
|
||||
.sidebar-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sidebar-list .title { margin-block-end: 8px; }
|
||||
|
||||
.sidebar-footer {
|
||||
border-block-start: 1px solid var(--banner-background);
|
||||
padding-block-start: 28px;
|
||||
margin-block-start: 16px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: white;
|
||||
margin-block-end: 20px;
|
||||
}
|
||||
|
||||
.copyright a { display: inline-block; }
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 96px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: var(--background);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: var(--transition-short);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.overlay.active {
|
||||
opacity: 0.5;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#HOME PAGE
|
||||
\*-----------------------------------*/
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
background-color: var(--surface);
|
||||
color: var(--on-surface);
|
||||
padding: 24px 20px 48px;
|
||||
height: calc(100vh - 96px);
|
||||
overflow-y: overlay;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* BANNER
|
||||
*/
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
height: 700px;
|
||||
border-radius: var(--radius-24);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner-slider .slider-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 120%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--banner-background);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition-long);
|
||||
}
|
||||
|
||||
.banner-slider .slider-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(var(--banner-overlay));
|
||||
}
|
||||
|
||||
.banner-slider .active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 206px;
|
||||
z-index: 1;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.banner :is(.heading, .banner-text) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner .heading {
|
||||
-webkit-line-clamp: 3;
|
||||
margin-block-end: 16px;
|
||||
}
|
||||
|
||||
.banner .genre { margin-block: 12px; }
|
||||
|
||||
.banner-text {
|
||||
-webkit-line-clamp: 2;
|
||||
margin-block-end: 24px;
|
||||
}
|
||||
|
||||
.banner .btn { background-color: var(--primary); }
|
||||
|
||||
.banner .btn:is(:hover, :focus-visible) { box-shadow: var(--shadow-2); }
|
||||
|
||||
.slider-control {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
right: 0;
|
||||
border-radius: var(--radius-16) 0 0 var(--radius-16);
|
||||
user-select: none;
|
||||
padding: 4px 0 4px 4px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.slider-control::-webkit-scrollbar { display: none; }
|
||||
|
||||
.control-inner {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.control-inner::after {
|
||||
content: "";
|
||||
min-width: 12px;
|
||||
}
|
||||
|
||||
.slider-control .slider-item {
|
||||
width: 100px;
|
||||
border-radius: var(--radius-8);
|
||||
flex-shrink: 0;
|
||||
filter: brightness(0.4);
|
||||
}
|
||||
|
||||
.slider-control .active {
|
||||
filter: brightness(1);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* MOVIE LIST
|
||||
*/
|
||||
|
||||
.movie-list { padding-block-start: 32px; }
|
||||
|
||||
.movie-card {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.movie-card .card-banner { width: 200px; }
|
||||
|
||||
.movie-card .title {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-block: 8px 4px;
|
||||
}
|
||||
|
||||
.movie-card .meta-list { justify-content: space-between; }
|
||||
|
||||
.movie-card .card-btn {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#DETAIL PAGE
|
||||
\*-----------------------------------*/
|
||||
|
||||
.backdrop-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.backdrop-image::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(0deg, hsla(250, 13%, 11%, 1), hsla(250, 13%, 11%, 0.9));
|
||||
}
|
||||
|
||||
.movie-detail .movie-poster {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.movie-detail .heading { margin-block: 24px 12px; }
|
||||
|
||||
.movie-detail :is(.meta-list, .genre) { color: var(--text-color); }
|
||||
|
||||
.movie-detail .genre { margin-block: 12px 16px; }
|
||||
|
||||
.detail-list { margin-block: 24px 32px; }
|
||||
|
||||
.movie-detail .list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-block-end: 12px;
|
||||
}
|
||||
|
||||
.movie-detail .list-name {
|
||||
color: var(--text-color);
|
||||
min-width: 112px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#MOVIE LIST PAGE
|
||||
\*-----------------------------------*/
|
||||
|
||||
.genre-list .title-wrapper { margin-block-end: 56px; }
|
||||
|
||||
.grid-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
column-gap: 16px;
|
||||
row-gap: 20px;
|
||||
}
|
||||
|
||||
:is(.genre-list, .search-modal) :is(.movie-card, .card-banner) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#SEARCH MODAL
|
||||
\*-----------------------------------*/
|
||||
|
||||
.search-modal {
|
||||
position: fixed;
|
||||
top: 96px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: var(--surface);
|
||||
padding: 50px 24px;
|
||||
overflow-y: overlay;
|
||||
z-index: 4;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-modal.active { display: block; }
|
||||
|
||||
.search-modal .label {
|
||||
color: var(--primary-variant);
|
||||
font-weight: var(--weight-bold);
|
||||
margin-block-end: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#MEDIA QUERIES
|
||||
\*-----------------------------------*/
|
||||
|
||||
|
||||
/**
|
||||
* responsive for larger than 575px screen
|
||||
*/
|
||||
|
||||
@media (min-width: 575px) {
|
||||
|
||||
/**
|
||||
* HOME PAGE
|
||||
*/
|
||||
|
||||
.banner-content {
|
||||
right: auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.slider-control { left: calc(100% - 400px); }
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* DETAIL PAGE
|
||||
*/
|
||||
|
||||
.detail-content { max-width: 750px; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* responsive for larger than 768px screen
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
/**
|
||||
* CUSTOM PROPERTY
|
||||
*/
|
||||
|
||||
:root {
|
||||
|
||||
/* gradient color */
|
||||
--banner-overlay: 90deg, hsl(220, 17%, 7%) 0%, hsla(220, 17%, 7%, 0) 100%;
|
||||
|
||||
/* font size */
|
||||
--fs-heading: 5.4rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* HOME PAGE
|
||||
*/
|
||||
|
||||
.container { padding-inline: 24px; }
|
||||
|
||||
.slider-list { margin-inline: -24px; }
|
||||
|
||||
.search-btn { display: none; }
|
||||
|
||||
.search-box {
|
||||
all: unset;
|
||||
display: block;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.banner { height: 500px; }
|
||||
|
||||
.banner-content {
|
||||
bottom: 50%;
|
||||
transform: translateY(50%);
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* MOVIE DETAIL PAGE
|
||||
*/
|
||||
|
||||
.movie-detail {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.movie-detail .detail-box { flex-grow: 1; }
|
||||
|
||||
.movie-detail .movie-poster {
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.movie-detail .slider-list {
|
||||
margin-inline-start: 0;
|
||||
border-radius: var(--radius-16) 0 0 var(--radius-16);
|
||||
}
|
||||
|
||||
.movie-detail .slider-inner::before { display: none; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* responsive for larger than 1200px screen
|
||||
*/
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
/**
|
||||
* HOME PAGE
|
||||
*/
|
||||
|
||||
.header { padding: 28px 56px; }
|
||||
|
||||
.logo img { width: 160px; }
|
||||
|
||||
.menu-btn,
|
||||
.overlay { display: none; }
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
border-block-start: 0;
|
||||
height: calc(100vh - 104px);
|
||||
}
|
||||
|
||||
.sidebar.active { transform: none; }
|
||||
|
||||
.sidebar-list,
|
||||
.sidebar-footer { padding-inline: 56px; }
|
||||
|
||||
.container {
|
||||
height: calc(100vh - 104px);
|
||||
border-top-left-radius: var(--radius-36);
|
||||
}
|
||||
|
||||
.banner-content { left: 100px; }
|
||||
|
||||
.search-modal {
|
||||
top: 104px;
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* MOVIE DETAIL PAGE
|
||||
*/
|
||||
|
||||
.backdrop-image { border-top-left-radius: var(--radius-36); }
|
||||
|
||||
}
|
||||
|
After Width: | Height: | Size: 366 B |
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg width="200" height="53" viewBox="0 0 200 53" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect width="200" height="53" fill="url(#pattern0)"/>
|
||||
<defs>
|
||||
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
||||
<use xlink:href="#image0_88_569" transform="matrix(0.00182149 0 0 0.00687356 0 0.0669657)"/>
|
||||
</pattern>
|
||||
<image id="image0_88_569" width="549" height="126" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiUAAAB+CAYAAAD7u2H2AAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAFKrSURBVHgB7b37c2VXdh621r7oJjUvghI56hlypi9ocoaa2CJ6IkWeTNkNpFJOJYpq2HKSisrlNNqupJJSJd2dP8AA/A90cxx5lDgVoJVKHP8ikk4kOQ8Jl5KtSZxEDUoaD4fksG/z4aHIkdh0lSU+Gmd577PX61y8gX0BNLC/mUvcx3nsfW4D6zvf+tbaCGPAP/rs1FMN0ixieCogTSPBZECYzD8RMG4TH8MAYdjrhTtNwBeoWVv9S2++OoAjjmcn+5MT98N0j2C6nR810z3ESUwPgPSAONf34txux6neCQCrBPjiBODNn3nr5RehoqKioqKiYkMgFMKzD/VneqG5GCnHNzDggzEYQ3xQDNwYiCieKMZthPb9/JPS6/R2AErPMeTXz/WQnvup11++AUcEiYjAfTDXA/pGHN90D+CBgHn07TzimzyndEHbuWRyEuJrgjzvtBUMJwAGROHGT7/50gAqKioqKioqFPsiJUsxWH/mdHM5HuRyDLpZJYjRuSUhbWBmEtIG6hi4CZR8ZDqi5ATTT/CfAdzqQVRQerjw1VvfvQ2HgL9/pt8/vbZ2OZKLi3FYD2YS0hkzMDERotVC5sA/eVukdl5B5ziM/1n814cvLUNFRUVFRUXF3knJP/jsF+djEL6SUhYpUCNKgMaUvoBEQAJLBkpGmKwIAemxWsIEpUNW0AX2XgjX15q1Z84NXxrCAWBpcnLyU6c+Mx8HcEXGIPNSEpIVknbm7XxBlRIZO4makl+7axSvAB8rzf92fLXw1PA7R0YZqqioqKioOAzsmpT8jw89OjOBuBQDbr8NwilgU/7ZkozMNzLhAAnaKMGcAqdxXPAGn9Zp31NFJR0jR/b4n2GM5Ys/+f1/tgxjxP/y8Bcvx0EtBPaHeKIlz1uiJc/bn0Qyz0xOKF8EIzOW0kmzixv3EIkvhSgvtyeAZr5ySKpQRUVFRUXFYWNXpOR/iupI3GFBfRSZZAA6f0XgQNujTEqyT6TdVr0kwOqCqiGiIqg6EpisuH1yCiS9t/xxc+rqueHqHSiIpI6cOvXpZ+O4ZjopGhLC4QgKrE9POZWkJWQ5FWWeEklVtSkeVAJD6UmiJyBqC9LCv/baP1uEioqKioqKE4YdkZIUsHunPvVsDJozbTC1NExOSwCoktDLyonzkGS1RAM1qDKAktIIPl0D3neCSk6QFYeQPxli8/HsTxRK5yxNnumfOnVqJZ7mbEu2QqvWqE8kkzBOxcRp9KDjGQG+Jp2Uk6Z3Att3RW0xIkYsprTKUI8nGbeO+4VnvvLaH1yFioqKioqKE4RtSUkK2CEG7Bhk+20Qdr4QDthtpO21HpL8IhMQaN+zShQjM+uDd0tONN2hRAXEdxHEt0F8ihS8h7C2f2Ky9PAj04HCSipZdsZV84OMeklcuiqMXos85jy/+Fn7OpESIWktEck6UWCihdgxzwoxSWrR6p/dDbOlFaGKioqKioqjirDVh4mQQCQk8Wk/PihlGTg70yYcUmwmDt4JbayOm+Wf7bbA27ZBmmuAhWwY3PuUN89PUHQSe0uOHZ/1sXdq5bv9J/uwRyRCEsP/SmQND8gpkBUdzqiQ/B9lxGSjsfHnD4mnlebaHiM9iETpIRDOQkT+GO280B2qfaN56kfC3ZWb/elJqKioqKioOAHYlJSklA21hIT67RscRzmeComg9g1i4wQAh+AMctyDVHnIx0BOb1DOXuh5MYfvHMAbUkIjn3H4J+YBUcU5HYnJdB92iUS4opaxEg/1gBszOuJEOn50ZEmmCezClUvC+xFISRGrSrKxDT5LQwTu8MrJoHMtEJ/65MTas1BRUVFRUXECsGn65r9/6NFk+nxaK0wkVWGGTzG7aoojb9t6Ljhd0RpfszwA4qeIn4uRFXLrtPReCCH7OEK3Mienc5yHo5PawWykRRj+y4/DuZ2mOr4VCcnpU72VuHc/j9c8I96Q682rOk8w/wyXPefUUxx7r51D11sCMm5O1fRcP5augbc7x/w8c8YAdP2JV6vHpKLipCP+GU7KaXr0t9l0mCoWoex5p2FvWI1jOfQ0dJxDH/K1E/U5jWl4FMZWYZjY6M2/99DnU4+Op9vMBWcd1BxiiQx5RYh2lx9YxpC7/ywi5A+ZZEhqRNI7YAkhPTAxkdFUELJaIfU7Km7kAN7/1EQzH1/tKHD3JiauxWMkQsJjdzMSoYJI1B0SfQeBzSRkbVrTAAPPreVtOsx2ayUm7blSbY3Omk+ZtCa+hJr64tmnV5l0hSvf//JPDv/c937/GaioqDgR4CD6dHw8BZkQpNc7TufG/a/HP1P7vpmJx0nnXtnNuUcwjMe4EMeyCgeMeN6Z+OMi5Os4uck2aVzpb+ugJJGr2BvWKSVJRYhB+1ZWPkQdIFhX/soGz5arEID2JZEKG1ZFrIQ2oDe6ao+TdhSuTwmgr7bh112VAc0Ymo/F20GDFx7//upzW034l3/00cu9Hly3PiM2tzT+HvtgTAWyKhxVhGikFDqnanKjN6sy4usRUMysrIBQCNkS7HuYgFT7qGIipdM8HsT3w90w/ditm7ehoqLiWIIJwDfiYw62V0N2gkvxb8cy7ANxTLcKjCWpEVMHpUowoVuKj5ld7DaMj+U4xkWoODSsIyX/7cOP3Iokoy8VISN9SFz/Dq0okSC6wefStTXLI76JGlelaLrGr4Uj1TuoQXokfcO2DC4lFmKQ9rn9Lz7CTdM4TLhuxng/6cad+5AAOGIEsK4XS0ikyky667q4gicveX7Wdl47uAqx6TRT414lWiK8Pp3D30XAF6a+tzoLJwwsHT8NFduh3undo+A7+qT2zkBZpCB7CfYIHtcKlMG5g1BL4piTMnId9q7spBvbSzWtczjopG++9fAjcymtkZ4jEwPJqqBkUlALa/R9SexoRodAD0FSbdL2ZyVwPliQnA2RGmFzGoTLYtXw2hkKSgUOkXufWgKB/c+chivx9cJGk8VTvflkbNUzc24miIsXpXjIjLlcYZTzNJzpQSsCAvG4sqk1zzsfxx2mzdG0+wbgepz2xO1mKA1g9dj5yGjnyxJT/O/5W4+fOz/16s0X4ISA73huwt7/wJwoxOu1UO/07h0w4U539CeBdI/9dzhez3Qdl2F/SMfox2PNVmJy8OhW3zQ0L08JR1UU9LUmXDXDP4kZiFaogDhB1CnKhMRKS0ipBTdYk6jPlS0Em8I+zb3aqTuhy7c2KKNNKgk0bW4RVCDiCVB7HMRMjpRUdEbQqQTG7PjQK9StTJLypEwk3BEyyWHyhXIN5NrZSfhKkbCiltnkKqfUKncBThZS9VElJDvHAge6iiMODqC3oKqAReBSNiWQ0mjzUHHgUKXkl37skbkYA8+m51yjiyCltypHNFnxYKDZQNtPeiKGAIgeIDf8UbLD1fjWbV6N72xKEcX3Z0h9sGKjBdDQDWjBGYWwsByjiktHLUkM6QE4jevVkqSSNKaMiI8D0agCsyxucOY+AGdIZX6ViUM72/fT/Ci0svnt1twK+FSDTUqBTQdHY0AmaLNgZcTJRyytEI+PlRJbuZBg5o2olnzh5Kgle3X8n2SUuFusGCPin44U8BagoiTSNS1JyK/E7+n5+Kd3ABUHBiUlMd5d1JxE4IDIhMQ2zwqCpmu4SRiMJGVaIhHw/YbomQ8+oOsX7gw3lMBWJvuT93/y9DeS5BwDft/X4pAL1dzNjLSUxVfwuOEJW4nc6L+Kasn1KfaWXGt7ksCcGE1JhA53JkmRYOYaxJkqJQZgFUUiAqXc6PKf/hnd2HR+Z57sh97afBzsTDzQWeFdegGJ277yNcur9XHGaqQcSZ4kkrPWa/+YzUJFRcU9h0pIyoNVkjkoj/RdDaDiwNCSkhS0k2qhgRIsAGtM9g1ZpWMpcM5DtmYho4Hmm3f/LCxsFqwFs+nzO3AjPr3x7UcfX4gH/FuqIKjCwKNAqUfpOlNQ6mZ53GwUmYT72zvsQdrmdK83406L4oMRlUKZliamlDSAJz3txw3doR4u/uwPhtdhG8y+/dIw/rj07UhO4NTafDzAxTwATsXwnIAXDJb58TA7ZCT7bbRMeSalqKZqC/qKinsK8S/NHFRCMg7MwHhQldoDRuspORXwad+ZteMPaZG7hMkiNda/w2+R0JayLP7cH71+ZTtCMoqvvfnqQjz2z8fH+2JRoZQUIlE32tyK96SwkxQ66SQ2bGCvCRftfbjox0ngO7074ymK9kIE6g3pnPO9NcLZf38HhKQzt0hO/uIbr1yKTxdBMl6apeEZGs2SYiMvUfFG7DVJlTj32ZwqKiqOPvhufh4qxoFxkYdJLtOuOCBkoyuGVBePXXOrtVFvb9AbdXMKRcB1R6Nm4RtvDxdgj/iZN15+bi3gBUmxtOIFosshoZhq1UcLEuXFyJKdt8n/0ZrHrsUUEa1j0eor5YyPvJ2pT8PaBZ9ScygBwuyFd4d7Lmn7mTdfXozXccHeQTuPXF4ViET68UAxGCfmUs1xFRX3FhIh6UPFOPAUjA99qDgwhBS0YyicyYFQ6m/V56A1r2a8REnXkFo+2kiJy9945/VF2Ce+NnxpEH980wiHLFfHvtN8yixvtB8RqfoBUkzbjn/y1hPT0xO9tRkhK2IsRRN2MhpZNU96s1jRjKzTE9+4+nPv3HoR9omfTsREjVNebBKVRuaMuNkx2HFS2XtFxT2CMXoeKiqOFcLExAdtcCP9n3eOoqZH9M1WhKBuNMVU3IILUAi98OECpu56auzQ1AaX7Ab0aRDxwnDaielHJBcTIRKSZgaE3WR6g1Jrg7Y4r84tfd6IeMJtWeLine truncated
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 397 B |
|
After Width: | Height: | Size: 355 B |
|
After Width: | Height: | Size: 823 B |
|
After Width: | Height: | Size: 825 B |
|
After Width: | Height: | Size: 569 B |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 925 KiB |
|
After Width: | Height: | Size: 605 B |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg width="130" height="17" viewBox="0 0 130 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_88_1285)">
|
||||
<path d="M91.2168 16.817H121.599C122.702 16.817 123.794 16.5997 124.814 16.1775C125.833 15.7553 126.759 15.1364 127.539 14.3563C128.319 13.5761 128.938 12.65 129.36 11.6307C129.783 10.6114 130 9.51891 130 8.41562C130.002 7.31114 129.786 6.21713 129.365 5.19618C128.943 4.17524 128.325 3.24739 127.544 2.46574C126.764 1.68409 125.837 1.06398 124.817 0.640877C123.797 0.217778 122.703 -1.59183e-06 121.599 0L91.2168 0C90.1123 -1.59183e-06 89.0187 0.217778 87.9985 0.640877C86.9782 1.06398 86.0514 1.68409 85.2711 2.46574C84.4908 3.24739 83.8722 4.17524 83.4509 5.19618C83.0295 6.21713 82.8136 7.31114 82.8154 8.41562C82.8154 10.6438 83.7006 12.7807 85.2761 14.3563C86.8517 15.9318 88.9886 16.817 91.2168 16.817ZM4.80214 16.8408H8.51072V3.29018H13.3129V0H0V3.28067H4.80214V16.8408ZM18.1625 16.8408H21.8711V3.92254H21.9187L26.174 16.8312H29.0268L33.4248 3.92254H33.4723V16.8312H37.1809V0H31.5942L27.6955 10.9831H27.6479L23.7729 0H18.1625V16.8408ZM42.3824 0.0570551H47.9453C49.2404 0.0590456 50.5305 0.218707 51.787 0.532514C52.9313 0.803976 54.0096 1.30191 54.9583 1.99693C55.8759 2.68686 56.6145 3.5869 57.1121 4.62146C57.6747 5.85059 57.9464 7.19284 57.9062 8.544C57.9319 9.78876 57.6682 11.0225 57.1359 12.148C56.6402 13.1608 55.9295 14.0532 55.0534 14.763C54.1566 15.482 53.1323 16.0256 52.0342 16.3653C50.8735 16.7338 49.6623 16.9183 48.4445 16.9121H42.3824V0.0570551ZM46.091 13.465H47.9928C48.7927 13.4705 49.5905 13.3827 50.3701 13.2035C51.0657 13.0623 51.7236 12.7755 52.3005 12.3619C52.8511 11.9453 53.2891 11.3978 53.5747 10.7691C53.9086 10.0087 54.0709 9.18406 54.0502 8.35381C54.0643 7.60989 53.9013 6.87328 53.5747 6.20474C53.2782 5.61229 52.8505 5.09521 52.3243 4.69278C51.7773 4.28658 51.1599 3.98513 50.5033 3.80367C49.779 3.60116 49.0301 3.50035 48.2781 3.50413H46.091V13.465ZM63.2788 0.0570551H69.5549C70.2915 0.0574142 71.0271 0.109845 71.7563 0.213957C72.448 0.303562 73.1188 0.512707 73.7389 0.832053C74.3182 1.13261 74.8096 1.57818 75.1653 2.1253C75.5598 2.79294 75.7499 3.56161 75.7121 4.33619C75.7447 5.19872 75.4625 6.04366 74.9181 6.71348C74.3624 7.35704 73.63 7.82326 72.8118 8.05428V8.0828C73.3383 8.15797 73.849 8.31857 74.3238 8.55826C74.7622 8.77842 75.1569 9.07647 75.4886 9.43786C75.8172 9.79977 76.0709 10.2231 76.2351 10.6836C76.4122 11.1711 76.5007 11.6863 76.4966 12.205C76.5251 12.9863 76.327 13.7591 75.926 14.4302C75.553 15.0144 75.0482 15.5029 74.4521 15.8566C73.8255 16.2327 73.1387 16.4981 72.4219 16.6411C71.6828 16.7995 70.9289 16.8792 70.173 16.8788H63.2788V0.0570551ZM66.9874 6.7848H69.6738C69.9586 6.78635 70.2427 6.75444 70.5201 6.68971C70.7854 6.6321 71.0382 6.52743 71.2665 6.38066C71.4893 6.23697 71.6738 6.04114 71.8038 5.81011C71.9431 5.54684 72.0119 5.25201 72.0035 4.95428C72.0188 4.65169 71.9461 4.35114 71.7943 4.08895C71.6468 3.86428 71.4458 3.67968 71.2095 3.55168C70.9446 3.41865 70.6607 3.32724 70.3679 3.28067C70.0781 3.22462 69.7836 3.19596 69.4883 3.19508H66.9684L66.9874 6.7848ZM66.9874 13.7503H70.3156C70.6083 13.7511 70.9001 13.7192 71.1857 13.6552C71.4696 13.5971 71.7393 13.484 71.9797 13.3224C72.2196 13.164 72.4197 12.9525 72.5645 12.7043C72.7207 12.4208 72.7979 12.1006 72.788 11.7771C72.8007 11.4359 72.6967 11.1005 72.4932 10.8262C72.2936 10.5794 72.0353 10.3865 71.742 10.2652C71.4373 10.1382 71.1178 10.0504 70.7911 10.0037C70.4682 9.9578 70.1425 9.93397 69.8164 9.93234H67.0112L66.9874 13.7503Z" fill="url(#paint0_linear_88_1285)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_88_1285" x1="0" y1="8.44415" x2="130" y2="8.44415" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#90CEA1"/>
|
||||
<stop offset="0.56" stop-color="#3CBEC9"/>
|
||||
<stop offset="1" stop-color="#00B3E5"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_88_1285">
|
||||
<rect width="130" height="16.8883" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 718 B |
@@ -0,0 +1,12 @@
|
||||
'use strict';
|
||||
|
||||
const api_key = '054582e9ee66adcbe911e0008aa482a8';
|
||||
const imageBaseURL = 'https://image.tmdb.org/t/p/';
|
||||
|
||||
const fetchDataFromServer = function (url, callback, optionalParam) {
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => callback(data, optionalParam));
|
||||
}
|
||||
|
||||
export { imageBaseURL, api_key, fetchDataFromServer };
|
||||
@@ -0,0 +1,179 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, imageBaseURL, fetchDataFromServer } from "./api.js";
|
||||
import { sidebar } from "./sidebar.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
import { search } from "./search.js";
|
||||
|
||||
|
||||
const movieId = window.localStorage.getItem("movieId");
|
||||
const pageContent = document.querySelector("[page-content]");
|
||||
|
||||
|
||||
|
||||
sidebar();
|
||||
|
||||
|
||||
|
||||
const getGenres = function (genreList) {
|
||||
const newGenreList = [];
|
||||
|
||||
for (const { name } of genreList) newGenreList.push(name);
|
||||
|
||||
return newGenreList.join(", ");
|
||||
}
|
||||
|
||||
const getCasts = function (castList) {
|
||||
const newCastList = [];
|
||||
|
||||
for (let i = 0, len = castList.length; i < len && i < 10; i++) {
|
||||
const { name } = castList[i];
|
||||
newCastList.push(name);
|
||||
}
|
||||
|
||||
return newCastList.join(", ");
|
||||
}
|
||||
|
||||
const getDirectors = function (crewList) {
|
||||
const directors = crewList.filter(({ job }) => job === "Director");
|
||||
|
||||
const directorList = [];
|
||||
for (const { name } of directors) directorList.push(name);
|
||||
|
||||
return directorList.join(", ");
|
||||
}
|
||||
|
||||
const filterVideos = function (videoList) {
|
||||
return videoList.filter(({ type, site }) => (type === "Trailer" || type === "Teaser") && site === "YouTube");
|
||||
}
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${api_key}&append_to_response=casts,videos,images,releases`, function (movie) {
|
||||
|
||||
const {
|
||||
backdrop_path,
|
||||
poster_path,
|
||||
title,
|
||||
release_date,
|
||||
runtime,
|
||||
vote_average,
|
||||
releases: { countries: [{ certification } = { certification: "N/A" }] },
|
||||
genres,
|
||||
overview,
|
||||
casts: { cast, crew },
|
||||
videos: { results: videos }
|
||||
} = movie;
|
||||
|
||||
document.title = `${title} - TD`;
|
||||
|
||||
const movieDetail = document.createElement("div");
|
||||
movieDetail.classList.add("movie-detail");
|
||||
|
||||
movieDetail.innerHTML = `
|
||||
<div class="backdrop-image" style="background-image: url('${imageBaseURL}${"w1280" || "original"}${backdrop_path || poster_path}')"></div>
|
||||
|
||||
<figure class="poster-box movie-poster">
|
||||
<img src="${imageBaseURL}w342${poster_path}" alt="${title} poster" class="img-cover">
|
||||
</figure>
|
||||
|
||||
<div class="detail-box">
|
||||
|
||||
<div class="detail-content">
|
||||
<h1 class="heading">${title}</h1>
|
||||
|
||||
<div class="meta-list">
|
||||
|
||||
<div class="meta-item">
|
||||
<img src="./assets/images/star.png" width="20" height="20" alt="rating">
|
||||
|
||||
<span class="span">${vote_average.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="meta-item">${runtime}m</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="meta-item">${release_date?.split("-")[0] ?? "Not Released"}</div>
|
||||
|
||||
<div class="meta-item card-badge">${certification}</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="genre">${getGenres(genres)}</p>
|
||||
|
||||
<p class="overview">${overview}</p>
|
||||
|
||||
<ul class="detail-list">
|
||||
|
||||
<div class="list-item">
|
||||
<p class="list-name">Starring</p>
|
||||
|
||||
<p>${getCasts(cast)}</p>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<p class="list-name">Directed By</p>
|
||||
|
||||
<p>${getDirectors(crew)}</p>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="title-wrapper">
|
||||
<h3 class="title-large">Trailers and Clips</h3>
|
||||
</div>
|
||||
|
||||
<div class="slider-list">
|
||||
<div class="slider-inner"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
for (const { key, name } of filterVideos(videos)) {
|
||||
const videoCard = document.createElement("div");
|
||||
videoCard.classList.add("video-card");
|
||||
|
||||
videoCard.innerHTML = `
|
||||
<iframe width="500" height="294" src="https://www.youtube.com/embed/${key}?&theme=dark&color=white&rel=0"
|
||||
frameborder="0" allowfullscreen="1" title="${name}" class="img-cover" loading="lazy"></iframe>
|
||||
`;
|
||||
|
||||
movieDetail.querySelector(".slider-inner").appendChild(videoCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieDetail);
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/${movieId}/recommendations?api_key=${api_key}&page=1`, addSuggestedMovies);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
const addSuggestedMovies = function ({ results: movieList }, title) {
|
||||
|
||||
const movieListElem = document.createElement("section");
|
||||
movieListElem.classList.add("movie-list");
|
||||
movieListElem.ariaLabel = "You May Also Like";
|
||||
|
||||
movieListElem.innerHTML = `
|
||||
|
||||
|
||||
`;
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
movieListElem.querySelector(".slider-inner").appendChild(movieCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieListElem);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
search();
|
||||
@@ -0,0 +1,29 @@
|
||||
'use strict';
|
||||
|
||||
|
||||
|
||||
const addEventOnElements = function (elements, eventType, callback) {
|
||||
for (const elem of elements) elem.addEventListener(eventType, callback);
|
||||
}
|
||||
|
||||
|
||||
const searchBox = document.querySelector("[search-box]");
|
||||
const searchTogglers = document.querySelectorAll("[search-toggler]");
|
||||
|
||||
addEventOnElements(searchTogglers, "click", function () {
|
||||
searchBox.classList.toggle("active");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const getMovieDetail = function (movieId) {
|
||||
window.localStorage.setItem("movieId", String(movieId));
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getMovieList = function (urlParam, genreName) {
|
||||
window.localStorage.setItem("urlParam", urlParam);
|
||||
window.localStorage.setItem("genreName", genreName);
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
'use strict';
|
||||
|
||||
|
||||
import { sidebar } from "./sidebar.js";
|
||||
import { api_key, imageBaseURL, fetchDataFromServer } from "./api.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
import { search } from "./search.js";
|
||||
|
||||
const pageContent = document.querySelector("[page-content]");
|
||||
|
||||
|
||||
|
||||
sidebar();
|
||||
|
||||
|
||||
|
||||
|
||||
const homePageSections = [
|
||||
{
|
||||
title: "Upcoming Movies",
|
||||
path: "/movie/upcoming"
|
||||
},
|
||||
{
|
||||
title: "Weekly Trending Movies",
|
||||
path: "/trending/movie/week"
|
||||
},
|
||||
{
|
||||
title: "Top Rated Movies",
|
||||
path: "/movie/top_rated"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
const genreList = {
|
||||
|
||||
|
||||
asString(genreIdList) {
|
||||
let newGenreList = [];
|
||||
|
||||
for (const genreId of genreIdList) {
|
||||
this[genreId] && newGenreList.push(this[genreId]);
|
||||
}
|
||||
|
||||
return newGenreList.join(", ");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/genre/movie/list?api_key=${api_key}`, function ({ genres }) {
|
||||
for (const { id, name } of genres) {
|
||||
genreList[id] = name;
|
||||
}
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/movie/popular?api_key=${api_key}&page=1`, heroBanner);
|
||||
});
|
||||
|
||||
|
||||
|
||||
const heroBanner = function ({ results: movieList }) {
|
||||
|
||||
const banner = document.createElement("section");
|
||||
banner.classList.add("banner");
|
||||
banner.ariaLabel = "Popular Movies";
|
||||
|
||||
banner.innerHTML = `
|
||||
<div class="banner-slider"></div>
|
||||
|
||||
<div class="slider-control">
|
||||
<div class="control-inner"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let controlItemIndex = 0;
|
||||
|
||||
for (const [index, movie] of movieList.entries()) {
|
||||
|
||||
const {
|
||||
backdrop_path,
|
||||
title,
|
||||
release_date,
|
||||
genre_ids,
|
||||
overview,
|
||||
poster_path,
|
||||
vote_average,
|
||||
id
|
||||
} = movie;
|
||||
|
||||
const sliderItem = document.createElement("div");
|
||||
sliderItem.classList.add("slider-item");
|
||||
sliderItem.setAttribute("slider-item", "");
|
||||
|
||||
sliderItem.innerHTML = `
|
||||
<img src="${imageBaseURL}w1280${backdrop_path}" alt="${title}" class="img-cover" loading=${index === 0 ? "eager" : "lazy"
|
||||
}>
|
||||
|
||||
<div class="banner-content">
|
||||
|
||||
<h2 class="heading">${title}</h2>
|
||||
|
||||
<div class="meta-list">
|
||||
<div class="meta-item">${release_date?.split("-")[0] ?? "Not Released"}</div>
|
||||
|
||||
<div class="meta-item card-badge">${vote_average.toFixed(1)}</div>
|
||||
</div>
|
||||
|
||||
<p class="genre">${genreList.asString(genre_ids)}</p>
|
||||
|
||||
<p class="banner-text">${overview}</p>
|
||||
|
||||
<a href="./detail.html" class="btn" onclick="getMovieDetail(${id})">
|
||||
<img src="./assets/images/play_circle.png" width="24" height="24" aria-hidden="true" alt="play circle">
|
||||
|
||||
<span class="span">Watch Now</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
`;
|
||||
banner.querySelector(".banner-slider").appendChild(sliderItem);
|
||||
|
||||
|
||||
const controlItem = document.createElement("button");
|
||||
controlItem.classList.add("poster-box", "slider-item");
|
||||
controlItem.setAttribute("slider-control", `${controlItemIndex}`);
|
||||
|
||||
controlItemIndex++;
|
||||
|
||||
controlItem.innerHTML = `
|
||||
<img src="${imageBaseURL}w154${poster_path}" alt="Slide to ${title}" loading="lazy" draggable="false" class="img-cover">
|
||||
`;
|
||||
banner.querySelector(".control-inner").appendChild(controlItem);
|
||||
|
||||
}
|
||||
|
||||
pageContent.appendChild(banner);
|
||||
|
||||
addHeroSlide();
|
||||
|
||||
|
||||
for (const { title, path } of homePageSections) {
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3${path}?api_key=${api_key}&page=1`, createMovieList, title);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const addHeroSlide = function () {
|
||||
|
||||
const sliderItems = document.querySelectorAll("[slider-item]");
|
||||
const sliderControls = document.querySelectorAll("[slider-control]");
|
||||
|
||||
let lastSliderItem = sliderItems[0];
|
||||
let lastSliderControl = sliderControls[0];
|
||||
|
||||
lastSliderItem.classList.add("active");
|
||||
lastSliderControl.classList.add("active");
|
||||
|
||||
const sliderStart = function () {
|
||||
lastSliderItem.classList.remove("active");
|
||||
lastSliderControl.classList.remove("active");
|
||||
|
||||
// `this` == slider-control
|
||||
sliderItems[Number(this.getAttribute("slider-control"))].classList.add("active");
|
||||
this.classList.add("active");
|
||||
|
||||
lastSliderItem = sliderItems[Number(this.getAttribute("slider-control"))];
|
||||
lastSliderControl = this;
|
||||
}
|
||||
|
||||
addEventOnElements(sliderControls, "click", sliderStart);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const createMovieList = function ({ results: movieList }, title) {
|
||||
|
||||
const movieListElem = document.createElement("section");
|
||||
movieListElem.classList.add("movie-list");
|
||||
movieListElem.ariaLabel = `${title}`;
|
||||
|
||||
movieListElem.innerHTML = `
|
||||
<div class="title-wrapper">
|
||||
<h3 class="title-large">${title}</h3>
|
||||
</div>
|
||||
|
||||
<div class="slider-list">
|
||||
<div class="slider-inner"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie); // called from movie_card.js
|
||||
|
||||
movieListElem.querySelector(".slider-inner").appendChild(movieCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieListElem);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
search();
|
||||
@@ -0,0 +1,44 @@
|
||||
'use strict';
|
||||
|
||||
import { imageBaseURL } from "./api.js";
|
||||
|
||||
|
||||
/**
|
||||
* movie card
|
||||
*/
|
||||
|
||||
export function createMovieCard(movie) {
|
||||
|
||||
const {
|
||||
poster_path,
|
||||
title,
|
||||
vote_average,
|
||||
release_date,
|
||||
id
|
||||
} = movie;
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.classList.add("movie-card");
|
||||
|
||||
card.innerHTML = `
|
||||
<figure class="poster-box card-banner">
|
||||
<img src="${imageBaseURL}w342${poster_path}" alt="${title}" class="img-cover" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h4 class="title">${title}</h4>
|
||||
|
||||
<div class="meta-list">
|
||||
<div class="meta-item">
|
||||
<img src="./assets/images/star.png" width="20" height="20" loading="lazy" alt="rating">
|
||||
|
||||
<span class="span">${vote_average.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<div class="card-badge">${release_date.split("-")[0]}</div>
|
||||
</div>
|
||||
|
||||
<a href="./detail.html" class="card-btn" title="${title}" onclick="getMovieDetail(${id})"></a>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, fetchDataFromServer } from "./api.js";
|
||||
import { sidebar } from "./sidebar.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
import { search } from "./search.js";
|
||||
|
||||
// collectc genre name & url parameter from local storage
|
||||
const genreName = window.localStorage.getItem("genreName");
|
||||
const urlParam = window.localStorage.getItem("urlParam");
|
||||
|
||||
const pageContent = document.querySelector("[page-content]");
|
||||
|
||||
|
||||
|
||||
sidebar();
|
||||
|
||||
|
||||
|
||||
let currentPage = 1;
|
||||
let totalPages = 0;
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/discover/movie?api_key=${api_key}&sort_by=popularity.desc&include_adult=false&page=${currentPage}&${urlParam}`, function ({ results: movieList, total_pages }) {
|
||||
|
||||
totalPages = total_pages;
|
||||
|
||||
document.title = `${genreName} Movies - Tvflix`;
|
||||
|
||||
const movieListElem = document.createElement("section");
|
||||
movieListElem.classList.add("movie-list", "genre-list");
|
||||
movieListElem.ariaLabel = `${genreName} Movies`;
|
||||
|
||||
movieListElem.innerHTML = `
|
||||
<div class="title-wrapper">
|
||||
<h1 class="heading">All ${genreName} Movies</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid-list"></div>
|
||||
|
||||
<button class="btn load-more" load-more>Load More</button>
|
||||
`;
|
||||
|
||||
/**
|
||||
* add movie card based on fetched item
|
||||
*/
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
movieListElem.querySelector(".grid-list").appendChild(movieCard);
|
||||
}
|
||||
|
||||
pageContent.appendChild(movieListElem);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* load more button functionality
|
||||
*/
|
||||
document.querySelector("[load-more]").addEventListener("click", function () {
|
||||
|
||||
if (currentPage >= totalPages) {
|
||||
this.style.display = "none"; // this == loading-btn
|
||||
return;
|
||||
}
|
||||
|
||||
currentPage++;
|
||||
this.classList.add("loading"); // this == loading-btn
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/discover/movie?api_key=${api_key}&sort_by=popularity.desc&include_adult=false&page=${currentPage}&${urlParam}`, ({ results: movieList }) => {
|
||||
this.classList.remove("loading"); // this == loading-btn
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
movieListElem.querySelector(".grid-list").appendChild(movieCard);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
search();
|
||||
@@ -0,0 +1,60 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, fetchDataFromServer } from "./api.js";
|
||||
import { createMovieCard } from "./movie-card.js";
|
||||
|
||||
|
||||
export function search() {
|
||||
|
||||
const searchWrapper = document.querySelector("[search-wrapper]");
|
||||
const searchField = document.querySelector("[search-field]");
|
||||
|
||||
const searchResultModal = document.createElement("div");
|
||||
searchResultModal.classList.add("search-modal");
|
||||
document.querySelector("main").appendChild(searchResultModal);
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
searchField.addEventListener("input", function () {
|
||||
|
||||
if (!searchField.value.trim()) {
|
||||
searchResultModal.classList.remove("active");
|
||||
searchWrapper.classList.remove("searching");
|
||||
clearTimeout(searchTimeout);
|
||||
return;
|
||||
}
|
||||
|
||||
searchWrapper.classList.add("searching");
|
||||
clearTimeout(searchTimeout);
|
||||
|
||||
searchTimeout = setTimeout(function () {
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/search/movie?api_key=${api_key}&query=${searchField.value}&page=1&include_adult=false`, function ({ results: movieList }) {
|
||||
|
||||
searchWrapper.classList.remove("searching");
|
||||
searchResultModal.classList.add("active");
|
||||
searchResultModal.innerHTML = ""; // remove old results
|
||||
|
||||
searchResultModal.innerHTML = `
|
||||
<p class="label">Results for</p>
|
||||
|
||||
<h1 class="heading">${searchField.value}</h1>
|
||||
|
||||
<div class="movie-list">
|
||||
<div class="grid-list"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
for (const movie of movieList) {
|
||||
const movieCard = createMovieCard(movie);
|
||||
|
||||
searchResultModal.querySelector(".grid-list").appendChild(movieCard);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}, 500);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
'use strict';
|
||||
|
||||
import { api_key, fetchDataFromServer } from "./api.js";
|
||||
|
||||
|
||||
export function sidebar() {
|
||||
|
||||
const excludedGenres = ["Drama", "Romance"];
|
||||
const genreList = {};
|
||||
|
||||
fetchDataFromServer(`https://api.themoviedb.org/3/genre/movie/list?api_key=${api_key}`, function ({ genres }) {
|
||||
const filteredGenres = genres.filter(genre => !excludedGenres.includes(genre.name));
|
||||
|
||||
for (const { id, name } of filteredGenres) {
|
||||
genreList[id] = name;
|
||||
}
|
||||
|
||||
genreLink();
|
||||
});
|
||||
|
||||
const sidebarInner = document.createElement("div");
|
||||
sidebarInner.classList.add("sidebar-inner");
|
||||
|
||||
sidebarInner.innerHTML = `
|
||||
<div class="sidebar-list">
|
||||
<p class="title">Genre</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<p class="copyright">
|
||||
<h6>All Rights Reserved.</h6>
|
||||
Copyright 2024 <a href="https://tdvorak.site" target="_blank">Tomas Dvorak </a>
|
||||
</p>
|
||||
|
||||
<p>Powered by
|
||||
<img src="./assets/images/tmdb-logo.svg" width="130" height="17" alt="the movie database logo">
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
const genreLink = function () {
|
||||
|
||||
for (const [genreId, genreName] of Object.entries(genreList)) {
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.classList.add("sidebar-link");
|
||||
link.setAttribute("href", "./movie-list.html");
|
||||
link.setAttribute("menu-close", "");
|
||||
link.setAttribute("onclick", `getMovieList("with_genres=${genreId}", "${genreName}")`);
|
||||
link.textContent = genreName;
|
||||
|
||||
sidebarInner.querySelectorAll(".sidebar-list")[0].appendChild(link);
|
||||
|
||||
}
|
||||
|
||||
const sidebar = document.querySelector("[sidebar]");
|
||||
sidebar.appendChild(sidebarInner);
|
||||
toggleSidebar(sidebar);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const toggleSidebar = function (sidebar) {
|
||||
|
||||
|
||||
const sidebarBtn = document.querySelector("[menu-btn]");
|
||||
const sidebarTogglers = document.querySelectorAll("[menu-toggler]");
|
||||
const sidebarClose = document.querySelectorAll("[menu-close]");
|
||||
const overlay = document.querySelector("[overlay]");
|
||||
|
||||
addEventOnElements(sidebarTogglers, "click", function () {
|
||||
sidebar.classList.toggle("active");
|
||||
sidebarBtn.classList.toggle("active");
|
||||
overlay.classList.toggle("active");
|
||||
});
|
||||
|
||||
addEventOnElements(sidebarClose, "click", function () {
|
||||
sidebar.classList.remove("active");
|
||||
sidebarBtn.classList.remove("active");
|
||||
overlay.classList.remove("active");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="https://tdvorak.site/icon.png" sizes="any" type="image/svg+xml">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<script src="./assets/js/global.js" defer></script>
|
||||
<script src="./assets/js/detail.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="./index.html" class="logo">
|
||||
Back to Homepage
|
||||
</a>
|
||||
<div class="search-box" search-box>
|
||||
<div class="search-wrapper" search-wrapper>
|
||||
<input type="text" name="search" aria-label="search movies" placeholder="Search any movies..."
|
||||
class="search-field" autocomplete="off" search-field>
|
||||
<img src="./assets/images/search.png" width="24" height="24" alt="search" class="leading-icon">
|
||||
</div>
|
||||
<button class="search-btn" search-toggler>
|
||||
<img src="./assets/images/close.png" width="24" height="24" alt="close search box">
|
||||
</button>
|
||||
</div>
|
||||
<button class="search-btn" search-toggler menu-close>
|
||||
<img src="./assets/images/search.png" width="24" height="24" alt="open search box">
|
||||
</button>
|
||||
<button class="menu-btn" menu-btn menu-toggler>
|
||||
<img src="./assets/images/menu.png" width="24" height="24" alt="open menu" class="menu">
|
||||
<img src="./assets/images/menu-close.png" width="24" height="24" alt="close menu" class="close">
|
||||
</button>
|
||||
</header>
|
||||
<main>
|
||||
<nav class="sidebar" sidebar></nav>
|
||||
<div class="overlay" overlay menu-toggler></div>
|
||||
<article class="container" page-content></article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="50" height="50" rx="8" fill="#0F1115"/>
|
||||
<path d="M19.2067 16.8071C19.2067 19.3639 17.1341 21.4365 14.5774 21.4365C12.0207 21.4365 9.94803 19.3639 9.94803 16.8071C9.94803 14.2504 12.0207 12.1778 14.5774 12.1778C17.1341 12.1778 19.2067 14.2504 19.2067 16.8071Z" stroke="url(#paint0_linear_86_64)" stroke-width="3.89607"/>
|
||||
<path d="M32.3724 16.8147C32.3724 19.3744 30.2974 21.4495 27.7376 21.4495C25.1779 21.4495 23.1028 19.3744 23.1028 16.8147C23.1028 14.255 25.1779 12.1799 27.7376 12.1799C30.2974 12.1799 32.3724 14.255 32.3724 16.8147Z" stroke="url(#paint1_linear_86_64)" stroke-width="3.89607"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8256 23.3458C17.6035 24.1415 16.1444 24.6038 14.5774 24.6038C13.3718 24.6038 12.2301 24.3301 11.2111 23.8416C10.1731 24.4591 9.47754 25.5922 9.47754 26.8877V36.2284C9.47754 38.1845 11.0633 39.7702 13.0194 39.7702H29.3412C31.2974 39.7702 32.8831 38.1845 32.8831 36.2284V26.8877C32.8831 25.5833 32.1781 24.4437 31.1283 23.829C30.1032 24.3254 28.9529 24.6038 27.7376 24.6038C26.1713 24.6038 24.713 24.1414 23.4916 23.3458L18.8256 23.3458ZM24.3425 30.9983C24.8147 31.271 24.8147 31.9526 24.3425 32.2253L20.0922 34.6792C19.6199 34.9518 19.0296 34.611 19.0296 34.0657V29.1579C19.0296 28.6126 19.6199 28.2718 20.0922 28.5445L24.3425 30.9983Z" fill="url(#paint2_linear_86_64)"/>
|
||||
<path d="M34.0456 31.3341L34.0456 28.3758L39.8719 24.9928C40.8164 24.4444 42 25.1258 42 26.218L42 37.0029C42 38.0957 40.8152 38.777 39.8707 38.2274L34.0456 34.8377L34.0456 31.3341Z" fill="url(#paint3_linear_86_64)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_86_64" x1="8" y1="16.8072" x2="21.1548" y2="16.8072" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#92131A"/>
|
||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
||||
<stop offset="1" stop-color="#E32832"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_86_64" x1="21.1548" y1="16.8147" x2="34.3205" y2="16.8147" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#92131A"/>
|
||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
||||
<stop offset="1" stop-color="#E32832"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_86_64" x1="9.47754" y1="31.558" x2="32.8831" y2="31.558" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#92131A"/>
|
||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
||||
<stop offset="1" stop-color="#E32832"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_86_64" x1="34.0456" y1="31.6118" x2="42" y2="31.6118" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#92131A"/>
|
||||
<stop offset="0.505208" stop-color="#BF1922"/>
|
||||
<stop offset="1" stop-color="#E32832"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TD - Movie Website</title>
|
||||
<link rel="shortcut icon" href="https://tdvorak.site/icon.png" sizes="any" type="image/svg+xml">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<script src="./assets/js/global.js" defer></script>
|
||||
<script src="./assets/js/index.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="search-box" search-box>
|
||||
<div class="search-wrapper" search-wrapper>
|
||||
<input type="text" name="search" aria-label="search movies" placeholder="Search any movies..."
|
||||
class="search-field" autocomplete="off" search-field>
|
||||
<img src="./assets/images/search.png" width="24" height="24" alt="search" class="leading-icon">
|
||||
</div>
|
||||
<button class="search-btn" search-toggler>
|
||||
<img src="./assets/images/close.png" width="24" height="24" alt="close search box">
|
||||
</button>
|
||||
</div>
|
||||
<button class="search-btn" search-toggler menu-close>
|
||||
<img src="./assets/images/search.png" width="24" height="24" alt="open search box">
|
||||
</button>
|
||||
<button class="menu-btn" menu-btn menu-toggler>
|
||||
<img src="./assets/images/menu.png" width="24" height="24" alt="open menu" class="menu">
|
||||
<img src="./assets/images/menu-close.png" width="24" height="24" alt="close menu" class="close">
|
||||
</button>
|
||||
</header>
|
||||
<main>
|
||||
<nav class="sidebar" sidebar></nav>
|
||||
<div class="overlay" overlay menu-toggler></div>
|
||||
<article class="container" page-content></article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="https://tdvorak.site/icon.png" sizes="any" type="image/svg+xml">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<script src="./assets/js/global.js" defer></script>
|
||||
<script src="./assets/js/movie-list.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<a href="./index.html" class="logo">
|
||||
Back to Homepage
|
||||
</a>
|
||||
<div class="search-box" search-box>
|
||||
<div class="search-wrapper" search-wrapper>
|
||||
<input type="text" name="search" aria-label="search movies" placeholder="Search any movies..."
|
||||
class="search-field" autocomplete="off" search-field>
|
||||
<img src="./assets/images/search.png" width="24" height="24" alt="search" class="leading-icon">
|
||||
</div>
|
||||
<button class="search-btn" search-toggler>
|
||||
<img src="./assets/images/close.png" width="24" height="24" alt="close search box">
|
||||
</button>
|
||||
</div>
|
||||
<button class="search-btn" search-toggler menu-close>
|
||||
<img src="./assets/images/search.png" width="24" height="24" alt="open search box">
|
||||
</button>
|
||||
<button class="menu-btn" menu-btn menu-toggler>
|
||||
<img src="./assets/images/menu.png" width="24" height="24" alt="open menu" class="menu">
|
||||
<img src="./assets/images/menu-close.png" width="24" height="24" alt="close menu" class="close">
|
||||
</button>
|
||||
</header>
|
||||
<main>
|
||||
<nav class="sidebar" sidebar></nav>
|
||||
<div class="overlay" overlay menu-toggler></div>
|
||||
<article class="container" page-content></article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 754 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 492 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 31 KiB |