//- Preloader
.preloader
svg.preloader__word(width="387" height="99" viewBox="0 0 387 143" fill="none" xmlns="http://www.w3.org/2000/svg")
path.path(d="M41.5552 63.2048C35.0272 61.4384 31.7632 57.7136 31.7632 52.0304C31.7632 49.8032 32.3392 48.1136 33.4912 46.9616C34.72 45.7328 35.7568 45.1184 36.6016 45.1184C37.984 45.1184 38.7904 45.5408 39.0208 46.3856L39.136 46.8464C37.1392 46.8464 35.7568 47.96 34.9888 50.1872C34.7584 50.9552 34.6432 51.7232 34.6432 52.4912C34.6432 54.488 35.4112 56.1392 36.9472 57.4448C38.56 58.7504 40.288 59.672 42.1312 60.2096C44.7424 44.696 46.432 35.3264 47.2 32.1008C50.1184 20.2736 54.2656 13.7456 59.6416 12.5168C60.3328 12.3632 61.024 12.2864 61.7152 12.2864C62.8672 12.2864 63.6352 12.7472 64.0192 13.6688L64.1344 14.2448C60.9088 14.2448 58.4128 16.0112 56.6464 19.544C54.9568 23.0768 53.7664 26.9936 53.0752 31.2944C52.4608 35.5952 52 38.9744 51.6928 41.432C51.3856 43.8896 51.0016 47.1536 50.5408 51.224C50.1568 55.2176 49.8112 58.4816 49.504 61.016C58.9504 60.7088 66.7456 56.5232 72.8896 48.4592C78.0352 41.7008 80.608 34.3664 80.608 26.456C80.608 17.5472 77.4592 11.1344 71.1616 7.21759C67.4752 4.99039 62.9824 3.87679 57.6832 3.87679C42.784 3.87679 31.456 9.17599 23.6992 19.7744C18.3232 26.9936 15.6352 35.0576 15.6352 43.9664C15.6352 52.7216 17.9392 58.904 22.5472 62.5136C24.6208 64.2032 27.0016 65.048 29.6896 65.048C28.9984 66.8144 27.808 67.6976 26.1184 67.6976C19.6672 67.6976 15.0976 64.3952 12.4096 57.7904C10.9504 54.2576 10.2208 50.456 10.2208 46.3856C10.2208 42.3152 10.912 38.0144 12.2944 33.4832C15.5968 22.7312 21.7792 14.3984 30.8416 8.48479C38.4448 3.49279 47.392 0.996796 57.6832 0.996796C70.6624 0.996796 79.5328 5.1824 84.2944 13.5536C86.5216 17.3936 87.6352 21.3104 87.6352 25.304C87.6352 29.2976 86.9824 33.2528 85.6768 37.1696C82.7584 45.9248 77.4592 52.8368 69.7792 57.9056C63.5584 61.8992 56.6848 63.9344 49.1584 64.0112C46.8544 80.2928 43.0528 91.6976 37.7536 98.2256C35.68 100.837 33.0304 102.949 29.8048 104.562C26.5792 106.174 23.008 106.981 19.0912 106.981C15.1744 106.981 11.8336 106.29 9.06881 104.907C6.30401 103.525 4.34561 101.758 3.19361 99.608C1.42721 96.4592 0.544006 93.5792 0.544006 90.968C0.544006 88.3568 0.928006 85.9376 1.69601 83.7104C2.46401 81.4064 3.57761 79.1792 5.03681 77.0288C6.49601 74.8016 8.41601 72.9968 10.7968 71.6144C13.1776 70.232 15.7504 69.5408 18.5152 69.5408C20.128 69.5408 21.1648 70.0784 21.6256 71.1536L21.9712 71.7296C15.2896 71.7296 10.2208 74.5712 6.76481 80.2544C4.69121 83.5568 3.65441 86.8592 3.65441 90.1616C3.65441 91.7744 3.88481 93.3488 4.34561 94.8848C5.95841 100.875 10.144 103.87 16.9024 103.87C19.8976 103.87 22.624 103.102 25.0816 101.566C27.5392 100.03 29.5744 98.072 31.1872 95.6912C32.8768 93.3872 34.4128 90.3152 35.7952 86.4752C37.8688 80.7152 39.7888 72.9584 41.5552 63.2048Z")
path.path(d="M90.7434 79.7936C90.7434 87.8576 92.8938 91.8896 97.1946 91.8896C100.113 91.8896 102.839 90.0848 105.374 86.4752C110.212 79.7168 113.169 70.808 114.244 59.7488C111.556 58.5968 109.675 56.7152 108.599 54.104C107.908 52.4912 107.563 51.1472 107.563 50.072C107.563 48.92 107.716 47.9216 108.023 47.0768C108.715 45.0032 109.982 43.9664 111.825 43.9664C113.668 43.9664 115.051 45.1568 115.972 47.5376C116.971 49.8416 117.47 52.7984 117.47 56.408C117.47 56.6384 117.47 56.9072 117.47 57.2144C118.391 57.5216 119.735 57.6752 121.502 57.6752C123.345 57.6752 124.958 56.9456 126.34 55.4864C127.723 54.0272 128.414 52.6832 128.414 51.4544C128.414 51.1472 128.606 50.9552 128.99 50.8784C129.374 50.7248 129.719 50.7248 130.027 50.8784C130.411 51.032 130.603 51.2624 130.603 51.5696C130.603 53.7968 129.643 55.9088 127.723 57.9056C125.879 59.9024 123.383 60.9008 120.235 60.9008C119.467 60.9008 118.468 60.824 117.239 60.6704C116.779 65.8928 115.665 71.0768 113.899 76.2224C112.209 81.2912 109.828 85.7072 106.756 89.4704C103.684 93.1568 100.382 95 96.849 95C90.1674 95 86.0586 91.4288 84.5226 84.2864C84.1386 82.2128 83.9466 80.1008 83.9466 77.9504C83.9466 73.112 85.0602 67.928 87.2874 62.3984C90.2058 55.1792 93.8154 50.6864 98.1162 48.92C100.343 48.152 101.879 48.0368 102.724 48.5744C103.569 49.112 104.107 49.7264 104.337 50.4176C100.804 50.4176 97.6554 53.72 94.8906 60.3248C92.1258 66.9296 90.7434 73.4192 90.7434 79.7936Z")
path.path(d="M131.762 95C129.612 95 128.537 93.3488 128.537 90.0464C128.537 88.28 130.687 75.416 134.988 51.4544C135.295 49.8416 135.986 49.0352 137.061 49.0352C138.444 49.0352 139.481 50.0336 140.172 52.0304C140.556 53.1056 140.748 54.296 140.748 55.6016C140.748 56.8304 140.594 58.1744 140.287 59.6336L138.444 69.08H139.02C145.625 53.72 151.692 46.04 157.221 46.04C160.293 46.04 162.329 47.5376 163.327 50.5328C163.711 51.6848 163.903 53.0288 163.903 54.5648C163.903 56.024 163.481 57.6368 162.636 59.4032C161.177 62.3984 158.988 63.896 156.069 63.896C155.455 63.896 154.956 63.7424 154.572 63.4352C154.265 63.128 154.073 62.7056 153.996 62.168C154.61 62.168 155.417 61.0544 156.415 58.8272C157.413 56.5232 157.989 54.4112 158.143 52.4912C158.297 50.5712 157.644 49.4576 156.185 49.1504C153.497 49.1504 150.309 52.6448 146.623 59.6336C142.937 66.6224 139.98 73.304 137.753 79.6784C135.525 86.0528 134.22 90.2 133.836 92.12C133.452 94.04 132.761 95 131.762 95Z")
path.path(d="M167.274 44.6576C167.274 43.8128 167.812 43.3904 168.887 43.3904H174.878C175.262 41.8544 175.761 39.9344 176.375 37.6304L177.988 31.64C178.449 29.8736 178.833 28.2608 179.14 26.8016C179.524 25.3424 180.215 24.6128 181.214 24.6128C182.519 24.6128 183.441 25.6112 183.978 27.608C184.209 28.4528 184.324 29.4896 184.324 30.7184C184.324 31.9472 184.094 33.5216 183.633 35.4416L181.444 43.3904H188.586C189.278 43.3904 189.738 43.6208 189.969 44.0816C190.276 44.5424 190.276 45.0032 189.969 45.464C189.738 45.848 189.278 46.04 188.586 46.04H180.753C175.991 63.9344 173.61 76.6064 173.61 84.056C173.61 89.5088 174.839 92.2352 177.297 92.2352C179.294 92.2352 182.097 89.5856 185.706 84.2864C189.316 78.9872 192.426 73.688 195.038 68.3888L198.954 60.44H202.065C201.604 61.3616 200.99 62.6288 200.222 64.2416C199.53 65.7776 198.11 68.5808 195.959 72.6512C193.809 76.6448 191.735 80.1776 189.738 83.2496C187.818 86.3216 185.63 89.1248 183.172 91.6592C180.791 94.1168 178.564 95.3456 176.49 95.3456C174.417 95.3456 172.612 94.6928 171.076 93.3872C169.617 92.0048 168.695 90.0848 168.311 87.6272C167.85 85.0928 167.62 82.52 167.62 79.9088C167.62 73.8416 169.77 62.552 174.071 46.04H168.887C168.273 46.04 167.85 45.8864 167.62 45.5792C167.39 45.1952 167.274 44.888 167.274 44.6576Z")
path.path(d="M218.26 63.896C218.26 70.7312 219.335 74.1488 221.485 74.1488C221.409 75.0704 220.756 75.5312 219.527 75.5312C217.607 75.5312 216.148 74.3792 215.149 72.0752C214.228 69.6944 213.767 66.7376 213.767 63.2048C210.695 64.5104 207.508 65.2784 204.205 65.5088C200.058 91.3904 196.525 109.093 193.607 118.616C189.153 133.592 183.815 141.08 177.594 141.08C173.447 141.08 171.373 138.93 171.373 134.629C171.373 132.709 171.796 130.328 172.641 127.486C175.021 119.499 179.437 111.166 185.889 102.488C188.884 98.4944 191.495 95.6144 193.722 93.848C194.183 90.9296 194.913 86.3216 195.911 80.024C196.909 73.6496 197.677 68.8112 198.215 65.5088H195.105C194.721 65.5088 194.529 65.1632 194.529 64.472C194.529 63.704 194.721 63.32 195.105 63.32H198.561C202.324 39.2816 206.317 22.7312 210.541 13.6688C212.154 10.0592 214.074 7.06399 216.301 4.68319C218.529 2.30239 220.948 1.11199 223.559 1.11199C228.397 1.11199 230.817 4.64479 230.817 11.7104C230.817 17.4704 229.05 23.6912 225.517 30.3728C221.217 38.4368 216.071 43.3904 210.081 45.2336L207.431 45.8096C206.74 49.5728 205.78 55.3712 204.551 63.2048C207.777 62.9744 210.887 62.1296 213.882 60.6704C214.266 56.6 215.188 53.144 216.647 50.3024C218.183 47.384 220.103 45.9248 222.407 45.9248C224.25 45.9248 225.172 47 225.172 49.1504C225.172 53.2208 222.906 56.984 218.375 60.44C218.298 61.592 218.26 62.744 218.26 63.896ZM222.522 28.76C225.978 22.0784 227.706 16.2416 227.706 11.2496C227.706 6.25759 226.477 3.76159 224.02 3.76159C220.564 3.76159 217.607 7.14079 215.149 13.8992C212.692 20.5808 210.311 30.2192 208.007 42.8144C213.537 41.5856 218.375 36.9008 222.522 28.76ZM193.146 97.1888C188.769 101.72 184.583 108.21 180.589 116.658C176.596 125.106 174.599 130.75 174.599 133.592C174.599 136.51 175.444 137.97 177.133 137.97C180.666 137.97 183.661 134.437 186.119 127.371C188.577 120.306 190.919 110.245 193.146 97.1888ZM218.721 57.3296C220.103 56.024 221.14 54.6416 221.831 53.1824C222.599 51.7232 222.983 50.5712 222.983 49.7264C222.983 48.8048 222.753 48.2672 222.292 48.1136C220.602 48.1136 219.412 51.1856 218.721 57.3296Z")
path.path(d="M234.04 79.7936C234.04 87.8576 236.191 91.8896 240.491 91.8896C243.41 91.8896 246.136 90.0848 248.671 86.4752C253.509 79.7168 256.466 70.808 257.541 59.7488C254.853 58.5968 252.971 56.7152 251.896 54.104C251.205 52.4912 250.859 51.1472 250.859 50.072C250.859 48.92 251.013 47.9216 251.32 47.0768C252.011 45.0032 253.279 43.9664 255.122 43.9664C256.965 43.9664 258.347 45.1568 259.269 47.5376C260.267 49.8416 260.767 52.7984 260.767 56.408C260.767 56.6384 260.767 56.9072 260.767 57.2144C261.688 57.5216 263.032 57.6752 264.799 57.6752C266.642 57.6752 268.255 56.9456 269.637 55.4864C271.019 54.0272 271.711 52.6832 271.711 51.4544C271.711 51.1472 271.903 50.9552 272.287 50.8784C272.671 50.7248 273.016 50.7248 273.323 50.8784C273.707 51.032 273.899 51.2624 273.899 51.5696C273.899 53.7968 272.939 55.9088 271.019 57.9056C269.176 59.9024 266.68 60.9008 263.531 60.9008C262.763 60.9008 261.765 60.824 260.536 60.6704C260.075 65.8928 258.962 71.0768 257.195 76.2224C255.506 81.2912 253.125 85.7072 250.053 89.4704C246.981 93.1568 243.679 95 240.146 95C233.464 95 229.355 91.4288 227.819 84.2864C227.435 82.2128 227.243 80.1008 227.243 77.9504C227.243 73.112 228.357 67.928 230.584 62.3984C233.503 55.1792 237.112 50.6864 241.413 48.92C243.64 48.152 245.176 48.0368 246.021 48.5744C246.866 49.112 247.403 49.7264 247.634 50.4176C244.101 50.4176 240.952 53.72 238.187 60.3248C235.423 66.9296 234.04 73.4192 234.04 79.7936Z")
path.path(d="M301.901 22.7696C304.665 15.5504 306.048 10.6352 306.048 8.02399C306.048 5.41279 305.395 4.0304 304.089 3.87679C300.48 3.87679 296.717 9.67519 292.8 21.272C288.96 32.792 285.926 44.7728 283.699 57.2144C281.549 69.5792 280.473 78.3344 280.473 83.48C280.473 92.1584 282.624 96.4976 286.925 96.4976C286.925 97.0352 286.579 97.5728 285.888 98.1104C285.197 98.648 284.39 98.9168 283.469 98.9168C277.171 98.9168 274.022 93.272 274.022 81.9824C274.022 77.8352 274.79 71.4992 276.326 62.9744C277.862 54.3728 279.859 45.3872 282.317 36.0176C284.774 26.648 287.961 18.5072 291.878 11.5952C295.795 4.60639 299.789 1.11199 303.859 1.11199C307.085 1.11199 308.697 3.14719 308.697 7.21759C308.697 10.2896 307.737 14.5904 305.817 20.12C302.131 30.872 296.832 41.624 289.92 52.376C288.077 55.2176 286.425 57.5216 284.966 59.288C284.582 59.7488 284.39 59.5952 284.39 58.8272C284.313 57.368 284.659 56.1008 285.427 55.0256C291.725 45.5792 297.216 34.8272 301.901 22.7696Z")
path.path(d="M316.28 25.9952C318.046 25.9952 318.929 27.1856 318.929 29.5664C318.929 31.9472 317.777 33.8672 315.473 35.3264C314.321 36.0944 313.323 36.4784 312.478 36.4784C311.249 36.4784 310.52 36.0944 310.289 35.3264L310.174 34.9808C310.865 34.9808 311.364 34.2512 311.672 32.792C311.979 31.256 312.44 29.7584 313.054 28.2992C313.745 26.7632 314.82 25.9952 316.28 25.9952ZM308.907 92.2352C310.904 92.2352 313.707 89.5856 317.316 84.2864C320.926 78.9872 324.036 73.688 326.648 68.3888L330.564 60.44H333.675C333.214 61.3616 332.6 62.6288 331.832 64.2416C331.14 65.7776 329.72 68.5808 327.569 72.6512C325.419 76.6448 323.345 80.1776 321.348 83.2496C319.428 86.3216 317.24 89.1248 314.782 91.6592C312.401 94.1168 310.328 95.3456 308.561 95.3456C302.878 95.3456 300.036 91.6592 300.036 84.2864C300.036 78.7568 301.611 69.7712 304.76 57.3296C305.067 56.024 305.297 55.0256 305.451 54.3344C305.681 53.6432 305.912 52.76 306.142 51.6848C306.372 50.5328 306.603 49.496 306.833 48.5744C307.217 46.9616 307.908 46.1552 308.907 46.1552C310.289 46.1552 311.288 47.1536 311.902 49.1504C312.209 50.072 312.363 51.1856 312.363 52.4912C312.363 53.7968 312.209 55.1792 311.902 56.6384C311.595 58.0208 311.096 60.0944 310.404 62.8592C309.713 65.624 309.176 67.8896 308.792 69.656C308.408 71.4224 307.985 73.5728 307.524 76.1072C306.68 80.3312 306.257 84.0944 306.257 87.3968C306.257 90.6224 307.14 92.2352 308.907 92.2352Z")
path.path(d="M333.04 79.7936C333.04 87.8576 335.191 91.8896 339.491 91.8896C342.41 91.8896 345.136 90.0848 347.671 86.4752C352.509 79.7168 355.466 70.808 356.541 59.7488C353.853 58.5968 351.971 56.7152 350.896 54.104C350.205 52.4912 349.859 51.1472 349.859 50.072C349.859 48.92 350.013 47.9216 350.32 47.0768C351.011 45.0032 352.279 43.9664 354.122 43.9664C355.965 43.9664 357.347 45.1568 358.269 47.5376C359.267 49.8416 359.767 52.7984 359.767 56.408C359.767 56.6384 359.767 56.9072 359.767 57.2144C360.688 57.5216 362.032 57.6752 363.799 57.6752C365.642 57.6752 367.255 56.9456 368.637 55.4864C370.019 54.0272 370.711 52.6832 370.711 51.4544C370.711 51.1472 370.903 50.9552 371.287 50.8784C371.671 50.7248 372.016 50.7248 372.323 50.8784C372.707 51.032 372.899 51.2624 372.899 51.5696C372.899 53.7968 371.939 55.9088 370.019 57.9056C368.176 59.9024 365.68 60.9008 362.531 60.9008C361.763 60.9008 360.765 60.824 359.536 60.6704C359.075 65.8928 357.962 71.0768 356.195 76.2224C354.506 81.2912 352.125 85.7072 349.053 89.4704C345.981 93.1568 342.679 95 339.146 95C332.464 95 328.355 91.4288 326.819 84.2864C326.435 82.2128 326.243 80.1008 326.243 77.9504C326.243 73.112 327.357 67.928 329.584 62.3984C332.503 55.1792 336.112 50.6864 340.413 48.92C342.64 48.152 344.176 48.0368 345.021 48.5744C345.866 49.112 346.403 49.7264 346.634 50.4176C343.101 50.4176 339.952 53.72 337.187 60.3248C334.423 66.9296 333.04 73.4192 333.04 79.7936Z")
//- Container
.container
//-- Popup menu
section.popupMenu
nav.popupMenu__nav
each val, key in {'index.html': 'HOME', 'portfolio.html': 'PORTFOLIO', 'https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05': 'GITHUB', 'https://codepen.io/RodenKerthin': 'CODEPEN', 'https://twitter.com/BelichenkoRoden': 'TWITTER'}
a.popupMenu__link(href=`${key}`)= val
//-- Burger
.burgerWrap.js-burgerWrap_close
label.burgerWrap__box
input.burgerInput(type="checkbox")
svg.strokeWrap(viewBox="30 28 40 40" xmlns="http://www.w3.org/2000/svg")
path.strokeWrap__stroke.strokeWrap__stroke_first(d="M0 40h62c13 0 6 28-4 18L35 35")
path.strokeWrap__stroke.strokeWrap__stroke_second(d="M0 50h70")
path.strokeWrap__stroke.strokeWrap__stroke_third(d="M0 60h62c13 0 6-28-4-18L35 65")
//-- Navigation
nav.navigation
a.logo(href="index.html") R
ul.navigation__links
each val, key in {index: 'Home', portfolio: 'Portfolio'}
li.navigation__item
a.navigation__link(href=`${key}.html`)= val
//-- Developer Links
.devLinks
//--- Social links
.social
ul.socialList
li.socialList__item
a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
li.socialList__item
a.socialList__link(href="https://codepen.io/RodenKerthin" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
line(x1="12" y1="22" x2="12" y2="15.5")
polyline(points="22 8.5 12 15.5 2 8.5")
polyline(points="2 15.5 12 8.5 22 15.5")
line(x1="12" y1="2" x2="12" y2="8.5")
li.socialList__item
a.socialList__link(href="https://twitter.com/BelichenkoRoden" target="_blank")
svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
path(d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z")
//--- Social links
.gmail
.gmail__name
a.gmail__link(href="mailto:belichenko.roden.dev@gmail.com") belichenko.roden.dev@gmail.com
//-- Home section
section.home
section.developerWrap
//--- Illustration
.illustration
//---- Illustration Blob Circle
svg#blob-js.illustrationBlob(viewBox="0 0 1000 1000")
path#blob__path-js.illustrationBlob__path
//---- Illustration Bubbles Wrap
ul.illustrationBubblesWrap
- for (var n = 0; n < 12; n++)
li.illustrationBubble
//---- Illustration Dashed Frame
- var n = 1;
while n <= 3
.illustrationDashedFrame(class=`dashedFrame_type${n++}`)
//---- Illustration Circle Charts
- var n = 1;
while n <= 2
.illustrationCircleChart(class=`illustrationCircleChart_type${n++}`)
//---- Illustration Stickers
- var n = 1;
while n <= 2
.illustrationSticker(class=`illustrationSticker_type${n++}`)
ul.illustrationSticker__lineWrap
- for (var j = 0; j < 3; j++)
li.illustrationSticker__line
//---- Illustration Site Layout
.illustrationSiteLayout
.illustrationSiteLayout__codeWrap
.illustrationSiteLayout__scrollBox
ul.illustrationSiteLayout__codeList
- for (var n = 0; n < 4; n++)
li.illustrationSiteLayout__codeItem
- for (var j = 0; j < 7; j++)
.illustrationSiteLayout__codeLine
//---- Illustration Dialog
ul.illustrationDialog
- for (var n = 0; n < 5; n++)
li.illustrationDialog__line
//---- Illustration Folder
.illustrationFolder
ul.illustrationFolder__file
- for (var n = 0; n < 5; n++)
li.illustrationFolder__line
//---- Illustration Books
.illustrationBooks
.illustrationBooks__book
.illustrationBooks__book
.illustrationBooks__book
- for (var n = 0; n < 4; n++)
.illustrationBooks__binding
//---- Illustration Analytics
.illustrationAnalytics
.illustrationAnalyticsPanel
.illustrationAnalyticsPanel__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.illustrationAnalyticsPanel__button(class=`__button_${val}`)
//----- Illustration Analytics Page
.illustrationAnalyticsPage
.illustrationAnalyticsPage__container
//------ Illustration Analytics Diagram
ul.illustrationAnalyticsPage__diagramWrap
- for (var n = 0; n < 4; n++)
li.illustrationAnalyticsPage__diagram
//------ Illustration Analytics Banner
.illustrationAnalyticsPage__banner
//------- Illustration Analytics Description
ul.illustrationAnalyticsPage__lineWrap
- for (var n = 0; n < 8; n++)
li.illustrationAnalyticsPage__line
//------- Illustration Analytics Product List
ul.illustrationAnalyticsPage__productList
- for (var n = 0; n < 4; n++)
li.illustrationAnalyticsPage__productItem
.illustrationAnalyticsPage__productImg
ul.illustrationAnalyticsPage__productLineWrap
- for (var j = 0; j < 3; j++)
li.illustrationAnalyticsPage__productLine
//---- Illustration Imac
.illustrationImac
//----- Illustration Imac Display
.illustrationImac__display
//------ Illustration Imac Editor
.illustrationImacEditor
.illustrationImacEditorPanel
//------- Illustration Imac Editor Code
.illustrationImacEditorCodeWrap
.illustrationImacEditorCodeWrap__scrollBox
- for (var n = 0; n < 2; n++)
ul.illustrationImacEditorCodeWrap__codeList
- for (var j = 0; j < 6; j++)
li.illustrationImacEditorCodeWrap__codeItem
- for (var x = 0; x < 10; x++)
.illustrationImacEditorCodeWrap__codeLine
//------ Illustration Imac Browser
.illustrationImacBrowser
//------- Illustration Imac Browser Panel
.illustrationImacBrowserPanel
.illustrationImacBrowserPanel__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.illustrationImacBrowserPanel__button(class=`__button_${val}`)
//------- Illustration Imac Browser Page
.illustrationImacBrowserPage
.illustrationImacBrowserPage__container
//-------- Illustration Imac Browser Header
header.illustrationImacBrowserPage__header
ul.illustrationImacBrowserPage__nav
- for (var n = 0; n < 4; n++)
li.illustrationImacBrowserPage__navItem
//-------- Illustration Imac Browser Main
section.illustrationImacBrowserPage__main
.illustrationImacBrowserPage__banner
.illustrationImacBrowserPage__img
ul.illustrationImacBrowserPage__lineWrap
- for (var n = 0; n < 4; n++)
li.illustrationImacBrowserPage__line
//-------- Illustration Imac Browser Footer
footer.illustrationImacBrowserPage__footer
ul.illustrationImacBrowserPage__productList
- for (var n = 0; n < 3; n++)
li.illustrationImacBrowserPage__productItem
.illustrationImacBrowserPage__productImg
ul.illustrationImacBrowserPage__productLineWrap
- for (var j = 0; j < 2; j++)
li.illustrationImacBrowserPage__productLine
//------ Picture
.picture
.picture__dayWrap
.picture__sun
.picture__moon
.picture__mountainsWrap
- for (var n = 0; n < 3; n++)
.picture__mountain
//------ Avatar
.avatarWrap
.avatar
//------- Head
.headWrap
//-------- Hair
.hair
.hair__leftSide
- for (var n = 0; n < 3; n++)
.blink
.hair__rightSide
//-------- Ears
.ears
.ear
.ear
//-------- Face
.face
//--------- Top Face
.eyebrows
.eyebrows__brow
.eyebrows__brow
.eyebrows__shadow
//--------- Middle Face
.eyes
.glasses
each val, index in ['left', 'right']
div(class=`${val}`)
.lens
.shine
//--------- Bottom Face
.nose
.arm
each val, index in ['pharynx', 'tooth', 'tongue']
div(class=`arm__${val}`)
//-------- Neck
.neck
//------- Body
.bodyWrap
.bodyWrap__body
.collar
.shirt
.button
.button
//-------- Bow
.bowWrap
each val, index in ['bowShadow', 'bow', 'crease']
div(class=`bowWrap__${val}`)
//----- Illustration Imac Panel
.illustrationImac__panel
.illustrationImac__panelButton
//----- Illustration Imac Stand
.illustrationImac__stand
.illustrationImac__standShadow
.illustrationImac__standBase
//---- Illustration Presentation
.illustrationPresentation
//----- Illustration Presentation Panel
.illustrationPresentationPanel
.illustrationPresentationPanel__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.illustrationPresentationPanel__button(class=`__button_${val}`)
//----- Illustration Presentation Page
.illustrationPresentationPage
.illustrationPresentationPage__container
//------ Illustration Presentation Banner
.illustrationPresentationPage__banner
.illustrationPresentationPage__img
//------- Picture
.picture
.picture__dayWrap
.picture__sun
.picture__moon
.picture__mountainsWrap
- for (var n = 0; n < 3; n++)
.picture__mountain
ul.illustrationPresentationPage__lineWrap
- for (var n = 0; n < 6; n++)
li.illustrationPresentationPage__line
//------ Illustration Presentation Form
.illustrationPresentationPage__form
.illustrationPresentationPage__input
.illustrationPresentationPage__input
//---- Illustration Settings
.illustrationSettings
.illustrationSettings__container
//----- Illustration Settings Gear
.illustrationSettings__gearWrap
.illustrationSettings__gear
svg(viewBox="-208 -208 300 300")
defs
line#tooth(x1="-2" x2="26")
g.teeth
- var n = 0;
- var angle = 45;
while n < 8
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#tooth" x="85")
.illustrationSettings__gearCircle
//----- Illustration Settings Line
ul.illustrationSettings__lineWrap
- for (var n = 0; n < 4; n++)
li.illustrationSettings__line
//---- Illustration Curtain
.illustration__curtain
//--- Developer Info
article.developerInfo
h1.developerInfo__title
span.developerInfo__greeting Hello, I'm
span.developerInfo__name Roden
h2.developerInfo__subtitle Frontend developer
p.developerInfo__paragraph I live in Russia and specialize in developing user interfaces. Most of all in my work, I love the visualization of elements and animations.
span.developerInfo__paragraphPost I also write posts on the site Dev.to.
a.developerInfo__link(href="https://dev.to/kerthin" target="_blank") My Posts
.mouse
.mouse__scroller
//-- About section
section.about
//--- Card Wrap
.cardWrap.clearfix
//---- Learnability Icon
.iconCard
.iconWrap
.learnabilityIcon
//----- Learnability Editor
.learnabilityEditor
//------ Learnability Editor Panel
.learnabilityEditor__panel
.learnabilityEditor__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.learnabilityEditor__button(class=`__button_${val}`)
//------ Learnability Editor Code
.learnabilityEditor__codeWrap
.learnabilityEditor__scrollBox
ul.learnabilityEditor__codeList
- for (var n = 0; n < 7; n++)
li.learnabilityEditor__codeItem
- for (var j = 0; j < 5; j++)
.learnabilityEditor__codeLine
//----- Learnability Keyboard
.learnabilityKeyboard
each val, index in [14, 14, 13, 12, 10]
ul.learnabilityKeyboard__line
- for (var n = 0; n < val; n++)
li.learnabilityKeyboard__button
//----- Learnability Gear
.learnabilityGear
.learnabilityGear__gear
svg(viewBox="-208 -208 300 300")
defs
line#learnabilityGearTooth(x1="-2" x2="22")
g.teeth
- var n = 0;
- var angle = 30;
while n < 12
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#learnabilityGearTooth" x="85")
.learnabilityGear__gearCircle
h2.iconTitle Learnobility
p.iconInfo Able to continuously and purposefully learn new knowledge to improve their working skills.
//---- Fast Icon
.iconCard
.iconWrap
.fastIcon
//----- Fast Browser
.fastBrowser
//------ Fast Browser Panel
.fastBrowser__panel
.fastBrowser__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.fastBrowser__button(class=`__button_${val}`)
.fastBrowser__input
//------ Fast Browser Page
.fastBrowser__page
ul.fastBrowser__lineWrap
- for (var n = 0; n < 6; n++)
li.fastBrowser__line
//----- Fast Clock Wrap
.fastClockWrap
//------ Fast Clock Gear
.fastClockWrap__gear
svg(viewBox="-208 -208 300 300")
defs
line#clockGearTooth(x1="-2" x2="18")
g.teeth
- var n = 0;
- var angle = 30;
while n < 12
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#clockGearTooth" x="85")
//------ Fast Clock
.fastClockWrap__clock
.clockFaceContainer
.clockFaceContainer__clockHand
.clockFaceContainer__clockCircle
svg(viewBox="-208 -208 300 300")
defs
line#clockDealTooth(x1="-2" x2="10")
g.teeth
- var n = 0;
- var angle = 9;
while n < 40
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#clockDealTooth" x="85")
h2.iconTitle Fast
p.iconInfo I am able to quickly and efficiently perform tasks in the right time.
//---- Dynamic Icon
.iconCard
.iconWrap
.dynamicIcon
//----- Dynamic Browser
.dynamicBrowser
//------ Dynamic Browser Panel
.dynamicBrowser__panel
.dynamicBrowser__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.dynamicBrowser__button(class=`__button_${val}`)
//------ Dynamic Browser Header
header.dynamicBrowser__header
ul.dynamicBrowser__lineWrap
- for (var n = 0; n < 4; n++)
li.dynamicBrowser__line
.dynamicBrowser__title
.dynamicBrowser__subtitle
//------ Dynamic Browser Main
section.dynamicBrowser__main
.landscape
.landscapePicture
.landscapePicture__bg
.landscapePicture__dayWrap
.landscapePicture__sun
.landscapePicture__moon
.landscapePicture__mountainsWrap
.landscapePicture__mountain
.landscapePicture__mountain
//------ Dynamic Browser Footer
footer.dynamicBrowser__footer
ul.dynamicBrowser__productList
- for (var n = 0; n < 3; n++)
li.dynamicBrowser__product
.dynamicBrowser__productImg
.dynamicBrowser__productLineWrap
- for (var j = 0; j < 3; j++)
.dynamicBrowser__productLine
//----- Dynamic Dialog
mixin dynamicDialogMix(side, lineIteration)
ul.dynamicDialog(class=`dynamicDialog_${side}`)
- for (var n = 0; n < lineIteration; n++)
li.dynamicDialog__line
+dynamicDialogMix('left', '4')
+dynamicDialogMix('right', '3')
//----- Dynamic Dashed Frame
.dynamicDashedFrame
//----- Dynamic Chart
ul.dynamicChart
- for (var n = 0; n < 5; n++)
li.dynamicChart__line
h2.iconTitle Dynamic
p.iconInfo I believe that dynamics is one of the most important foundations for high-quality and modern websites.
//---- Responsive Icon
.iconCard
.iconWrap
.responsiveIcon
//----- Responsive Imac
.respImac
//------ Responsive Imac Display
.respImac__display
//------- Responsive Browser
.respBrowser
//-------- Responsive Browser Panel
.respBrowser__panel
.respBrowser__buttonsWrap
each val, index in ['exit', 'minimize', 'screen']
.respBrowser__button(class=`__button_${val}`)
//-------- Responsive Browser Page
.respBrowser__page
.respBrowser__pageLayout
//--------- Responsive Browser Nav
.respBrowser__nav
//--------- Responsive Browser Banner
.respBrowser__banner
//--------- Responsive Browser Product List
ul.respBrowser__productList
- for (var n = 0; n < 3; n++)
li.respBrowser__product
.respBrowser__productImg
.respBrowser__productLineWrap
- for (var j = 0; j < 2; j++)
.respBrowser__productLine
//------ Responsive Imac Panel
.respImac__panel
//------ Responsive Imac Stand
.respImac__stand
.respImac__standShadow
.respImac__standBase
//----- Responsive Ipad
.respIpad
//------ Responsive Ipad Display
.respIpad__display
//------- Ipad Browser
.ipadBrowser
//-------- Ipad Browser Nav
.ipadBrowser__nav
//-------- Ipad Browser Banner
.ipadBrowser__banner
//-------- Responsive Ipad Product List
ul.ipadBrowser__productList
- for (var n = 0; n < 3; n++)
li.ipadBrowser__product
.ipadBrowser__productImg
.ipadBrowser__productLineWrap
- for (var j = 0; j < 3; j++)
.ipadBrowser__productLine
//------ Responsive Ipad Camera
.respIpad__camera
//------ Responsive Ipad Button
.respIpad__button
//----- Responsive Iphone
.respIphone
//------ Responsive Iphone Display
.respIphone__display
//------- Iphone Browser
.iphoneBrowser
//-------- Iphone Browser Nav
.iphoneBrowser__nav
//-------- Responsive Iphone Product List
ul.iphoneBrowser__productList
- for (var n = 0; n < 2; n++)
li.iphoneBrowser__product
.iphoneBrowser__productImg
.iphoneBrowser__productLineWrap
- for (var j = 0; j < 2; j++)
.iphoneBrowser__productLine
//------ Responsive Iphone Camera
.respIphone__camera
//------ Responsive Iphone Button
.respIphone__button
h2.iconTitle Responsive
p.iconInfo I always try to make the website display perfectly on all screens.
//---- Sociable Icon
.iconCard
.iconWrap
.sociableIcon
//----- Sociable Link
mixin sociableLinkMix(position, name)
.sociableLink(class=`sociableLink_${position}`)
.sociableLink__figure(class=`sociableLink__figure_${name}`)
+sociableLinkMix('posLC', 'mail')
+sociableLinkMix('posLT', 'money')
+sociableLinkMix('posCT', 'tag')
+sociableLinkMix('posRT', 'percent')
+sociableLinkMix('posRC', 'and')
//----- Sociable Display
.sociableDisplay
//------ Sociable Panel
mixin sociableDisplayPanelMix(side, lineIteration)
ul.sociableDisplay__panel(class=`sociableDisplay_${side}Side`)
- for (var n = 0; n < lineIteration; n++)
li.sociableDisplay__line
+sociableDisplayPanelMix('left', '6')
+sociableDisplayPanelMix('right', '4')
//------ Sociable Avatar
.sociableDisplay__avatar
//------ Sociable Buttons Wrap
ul.sociableDisplay__buttonsWrap
- for (var n = 0; n < 2; n++)
li.sociableDisplay__button
//----- Sociable Keyboard
.sociableKeyboard
h2.iconTitle Sociable
p.iconInfo I easily connect with new people and can be sociable and easily adaptable in society.
//---- Intuitive Icon
.iconCard
.iconWrap
.intuitiveIcon
//----- Intuitive Rays
.intuitiveRays
svg(viewBox="-208 -208 300 300")
defs
line#ray(x1="-2" x2="15")
g.teeth
- var n = 0;
- var angle = 15;
while n < 24
g(transform=`rotate(${n++ * angle})`)
use(xlink:href="#ray" x="85")
//----- Intuitive Lamp
svg.intuitiveLightBulb(viewBox="0 0 571 678" fill="none" xmlns="http://www.w3.org/2000/svg")
path.intuitiveLightBulb__silhouette(d="M556.239 285.043C556.239 206.755 523.045 136.22 469.964 86.744C416.883 37.268 343.914 8.85098 264.363 14.8C197.061 19.833 136.478 49.868 91.794 95.492C47.11 141.116 18.323 202.329 14.612 269.717C12.344 310.898 19.279 350.212 33.545 385.795C47.811 421.378 69.409 453.23 96.469 479.488C120.498 502.805 138.92 530.743 151.334 561.222C163.748 591.701 170.157 624.721 170.157 658.203V660.98V663.757H285.215H400.273V660.972V658.187C400.273 623.899 407.426 590.554 420.628 559.706C433.83 528.858 453.081 500.51 477.276 476.215C501.674 451.716 521.415 422.578 535.056 390.238C548.697 357.895 556.239 322.352 556.239 285.043Z")
path.intuitiveLightBulb__silhouette(d="M400.273 677.601H285.216H170.158C166.334 677.601 162.873 676.052 160.368 673.546C157.863 671.04 156.313 667.579 156.313 663.756V660.979V658.202C156.313 625.996 149.981 594.513 138.13 565.726C126.279 536.939 108.907 510.846 86.828 489.422C57.215 460.688 34.568 426.232 19.893 388.629C5.21797 351.026 -1.48604 310.276 0.787958 268.955C4.70096 197.877 34.875 133.538 81.802 85.642C128.729 37.746 192.408 6.29501 263.332 0.992007C303.488 -2.01999 342.71 3.155 379.233 15.896C415.756 28.636 449.581 48.942 478.942 76.189C507.903 103.065 530.688 135.534 546.233 171.156C561.778 206.778 570.082 245.554 570.082 285.045C570.082 322.962 562.713 359.761 548.655 393.799C534.596 427.836 513.848 459.112 487.087 485.983C463.558 509.606 445.316 536.707 432.957 565.877C420.597 595.047 414.119 626.286 414.119 658.187V660.972V663.757C414.119 667.581 412.57 671.042 410.064 673.547C407.558 676.052 404.097 677.601 400.273 677.601ZM183.879 649.911H285.219H386.559C387.63 615.828 395.3 582.569 408.981 551.526C422.662 520.483 442.353 491.657 467.466 466.441C491.625 442.182 510.356 413.947 523.048 383.22C535.74 352.492 542.392 319.272 542.392 285.043C542.392 249.392 534.893 214.384 520.858 182.223C506.823 150.062 486.251 120.748 460.105 96.484C433.599 71.887 403.057 53.555 370.075 42.053C337.092 30.551 301.668 25.88 265.398 28.605C201.386 33.391 143.911 61.781 101.556 105.013C59.201 148.245 31.967 206.32 28.435 270.478C26.383 307.792 32.434 344.589 45.683 378.542C58.932 412.496 79.378 443.607 106.113 469.55C129.909 492.643 148.827 520.525 162.058 551.238C175.289 581.952 182.832 615.495 183.879 649.911Z")
//----- Intuitive Lamp Circle
.intuitiveLightBulbCircle
//----- Intuitive Brain
.intuitiveBrain
//----- Intuitive Play
svg.intuitivePlay(viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg")
path(d="M19.982 14.438L13.742 9.902C13.513 9.736 13.209 9.711 12.958 9.84C12.705 9.968 12.547 10.228 12.547 10.509V19.578C12.547 19.862 12.705 20.121 12.958 20.249C13.065 20.303 13.182 20.33 13.3 20.33C13.454 20.33 13.61 20.281 13.742 20.184L19.982 15.652C20.179 15.507 20.294 15.283 20.294 15.045C20.295 14.803 20.177 14.58 19.982 14.438Z")
path(d="M15.026 0.0019989C6.726 0.0019989 0 6.728 0 15.028C0 23.325 6.726 30.049 15.026 30.049C23.324 30.049 30.051 23.324 30.051 15.028C30.052 6.728 23.324 0.0019989 15.026 0.0019989ZM15.026 27.542C8.114 27.542 2.51 21.941 2.51 15.028C2.51 8.118 8.114 2.51 15.026 2.51C21.937 2.51 27.54 8.117 27.54 15.028C27.541 21.941 21.937 27.542 15.026 27.542Z")
//----- Intuitive Figures
each val, index in ['sm', 'lg']
.intuitiveBubble(class=`intuitiveBubble_${val}`)
.intuitiveRectangle
//----- Intuitive Dialog
.intuitiveDialog
.intuitiveDialog__cloud
ul.intuitiveDialog__lineWrap
- for (var n = 0; n < 2; n++)
li.intuitiveDialog__line
//----- Intuitive Landscape
.landscape
.landscapeShadow
.landscapePicture
.landscapePicture__bg
.landscapePicture__dayWrap
.landscapePicture__sun
.landscapePicture__moon
.landscapePicture__mountainsWrap
.landscapePicture__mountain
.landscapePicture__mountain
//----- Intuitive Neck
.intuitiveNeck
//----- Intuitive Base Housing
ul.intuitiveBaseHousing
- for (var n = 0; n < 4; n++)
li.intuitiveBaseHousing__line
li.intuitiveBaseHousing__contact
h2.iconTitle Intuitive
p.iconInfo I can understand, delve into and form the meaning of events and situations./*____________________________________________________________
# Reset.scss
# Variables
# Fonts
# Auxiliary styles
____________________________________________________________*/
/*____________________________________________________________
# Reset.scss
____________________________________________________________*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
// HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*____________________________________________________________
# Variables
____________________________________________________________*/
/*____________________________________________________________
## Regular color variables
____________________________________________________________*/
// First number color
$x-color-black: #000;
$x-color-dark-blue: #01243a;
$x-color-dark-greenish-blue: #0b3442;
$x-color-blackish-blue: #171b25;
$x-color-dark-grey-blue: #272f3a;
$x-color-signal-black: #292c2c;
$x-color-lime-green: #29c740;
$x-color-granite: #2a333c;
$x-color-dark-cyanide: #2c8291;
$x-color-cyanide: #37a4b8;
$x-color-space:#37404a;
$x-color-slate-grey: #3e4955;
$x-color-graphite-grey: #4c5259;
$x-color-wet-asphalt: #626a73;
$x-color-aquamarine: #7dcbd8;
$x-color-deep-red-brown: #480a16;
$x-color-flea-belly: #4d160e;
$x-color-marengo: #4d5c68;
$x-color-trefoil-crayola: #56c299;
$x-color-moderate-turquoise: #57c2cb;
$x-color-falun-red: #5f140e;
$x-color-dark-red: #732124;
$x-color-pearl-ruby: #7a1635;
$x-color-manatee: #889ea6;
$x-color-coral-red: #8c250e;
$x-color-vinous: #9b2d30;
// First letter color
$x-color-snow-blue: #a3d9e3;
$x-color-cadet-blue: #a4b4ba;
$x-color-niagara: #b0b7c6;
$x-color-silver: #c0c0c0;
$x-color-grideperlevy: #c3cdd1;
$x-color-grey-silk: #c6b69d;
$x-color-deep-orange: #c74b16;
$x-color-light-cyanide: #cceaf0;
$x-color-periwinkle: #cfdce5;
$x-color-light-cherry: #dd3e62;
$x-color-terracotta: #dd4f5b;
$x-color-gainsborough: #e1e6e8;
$x-color-light-gray: #e6e5e5;
$x-color-tomato: #ee6648;
$x-color-smoky-white: #f2eaf1;
$x-color-beige: #f7e0b5;
$x-color-dandelion: #facf6f;
$x-color-lemon-cream: #fafac3;
$x-color-shiny-orange: #febc2e;
$x-color-amber: #fec712;
$x-color-orange-dawn: #ff5f56;
$x-color-white: #fff;
/*____________________________________________________________
## Compound color variables
____________________________________________________________*/
$palette-primary: $x-color-vinous;
$palette-secondary: $x-color-beige;
$palette-tertiary: $x-color-aquamarine;
$palette-button-exit: $x-color-orange-dawn;
$palette-button-minimize: $x-color-shiny-orange;
$palette-button-screen: $x-color-lime-green;
$palette-bubble-type-1: $x-color-aquamarine;
$palette-bubble-type-2: $x-color-granite;
$palette-bubble-type-3: $x-color-tomato;
$palette-chart-type-1: $x-color-tomato;
$palette-chart-type-2: $x-color-granite;
$palette-window-line: $x-color-light-cyanide;
$palette-folder-shadow: $x-color-dark-cyanide;
$palette-settings-elements: $x-color-dark-cyanide;
$palette-analytics-elements: $x-color-snow-blue;
$palette-dialog: $x-color-snow-blue;
$palette-site-layout: $x-color-snow-blue;
$palette-imac-display-gradient: $x-color-snow-blue;
$palette-imac-browser-elements: $x-color-silver;
$palette-imac-browser-line: $x-color-granite;
$palette-program-panel: $x-color-granite;
$palette-skin: $x-color-deep-orange;
$palette-skin-shadow: $x-color-falun-red;
$palette-hair-blink: $x-color-dark-greenish-blue;
$palette-hair-shadow: $x-color-dark-blue;
$palette-costume-elements: $x-color-marengo;
$palette-bow-elements: $x-color-dark-red;
$palette-responsive-nav: $x-color-tomato;
$palette-responsive-banner: $x-color-aquamarine;
$palette-card-font: $x-color-signal-black;
$palette-present-font: $x-color-signal-black;
$palette-present-border: $x-color-signal-black;
$palette-present-primary: $x-color-dandelion;
$palette-detail-rect-border: $x-color-terracotta;
$palette-social-link: $x-color-white;
$palette-social-link-hover: $x-color-aquamarine;
/*____________________________________________________________
# Extends
____________________________________________________________*/
/*____________________________________________________________
## Position centering extends
____________________________________________________________*/
%verticalCentering {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
%horizontalCentering {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
%centering {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*____________________________________________________________
# Mixin
____________________________________________________________*/
/*____________________________________________________________
## Animation delay mixin
____________________________________________________________*/
@mixin animDelayChild($nthChild, $delay) {
&:nth-child(#{$nthChild}) {
&:after {
animation-delay: #{$delay}s;
}
}
}
/*____________________________________________________________
# Fonts
____________________________________________________________*/
@import 'https://rawcdn.githack.com/Kerthin/links/e23c46b4fa25b5672245c51fca29213232d5e883/css/fontLinks.css';
/*____________________________________________________________
# Auxiliary styles
____________________________________________________________*/
::scrollbar {
width: 0;
}
a {
text-decoration: none;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/*____________________________________________________________
# Preloader
____________________________________________________________*/
.preloader {
position: fixed;
width: 100%;
height: 100vh;
background: #f7e0b5;
z-index: 2;
}
.preloader__word {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
padding-top: 5px;
width: 90%;
height: 100px;
animation: fillColor .4s ease forwards .4s;
}
.path {
stroke: #9b2d30;
stroke-width: 3;
}
.preloader__loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 40vh;
background: #9b2d30;
z-index: 2;
}
@keyframes fillColor {
from {
fill: transparent;
}
to {
fill: #9b2d30;
}
}
/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
width: 100%;
}
/*____________________________________________________________
# Buttons Style
____________________________________________________________*/
.__button_exit {
background-color: $palette-button-exit;
}
.__button_minimize {
background-color: $palette-button-minimize;
}
.__button_screen {
background-color: $palette-button-screen;
}
/*____________________________________________________________
## Popup menu
____________________________________________________________*/
.blockRevealer__element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
}
.popupMenu {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
z-index: 3;
}
.popupMenu__nav {
position: absolute;
background: #13334c;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
}
.popupMenu__link {
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 25px;
letter-spacing: 3px;
color: #f6f6e9;
position: relative;
margin-bottom: 30px;
overflow: hidden;
cursor: pointer;
&:last-child {
margin-bottom: 0px;
}
&:before {
content: "";
position: absolute;
top: 0px;
left: -101%;
width: 100%;
height: 100%;
background: #e1646a;
z-index: 2;
transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
&:after {
content: "";
position: absolute;
top: 50%;
margin-top: -2px;
left: 101%;
width: 100%;
height: 4px;
background: #e1646a;
transition: all .3s;
transition-delay: .4s;
}
&:hover {
&:before {
left: 100%;
}
&:after {
left: 0;
}
}
}
.popupMenu__link {
transform: translate3d(0, 50px, 0);
opacity: 0;
transition: transform 0s 0.6s, opacity 0s 0.6s;
}
.js-popupMenu_open {
pointer-events: visible;
.popupMenu__link {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: transform 1s 0.3s, opacity 1s 0.3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1);
&:nth-child(2) {
transition-delay: .35s;
}
&:nth-child(3) {
transition-delay: .4s;
}
&:nth-child(4) {
transition-delay: .45s;
}
&:nth-child(5) {
transition-delay: .5s;
}
&:nth-child(6) {
transition-delay: .55s;
}
}
}
//-- Burger
.burgerWrap {
display: none;
position: fixed;
top: 3px;
right: 30px;
width: 30px;
height: 50px;
z-index: 3;
}
.burgerWrap__box {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.strokeWrap__stroke {
fill: none;
stroke: #f7e0b5;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
--length: 24;
--offset: -38;
stroke-dasharray: var(--length) var(--total-length);
stroke-dashoffset: var(--offset);
transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.strokeWrap__stroke_first,
.strokeWrap__stroke_third {
--total-length: 126.64183044433594;
}
.strokeWrap__stroke_second {
--total-length: 70;
}
.burgerInput {
display: none;
&:checked {
+ .strokeWrap {
.strokeWrap__stroke_first,
.strokeWrap__stroke_third {
--length: 22.627416998;
--offset: -94.1149185097;
}
.strokeWrap__stroke_second {
--length: 0;
--offset: -50;
}
}
}
}
/*____________________________________________________________
## Navigation
____________________________________________________________*/
.navigation {
@extend %horizontalCentering;
top: 30px;
width: 1700px;
height: 50px;
z-index: 2;
}
.logo {
position: relative;
float: left;
font-family: Galeria;
font-size: 44px;
color: $palette-secondary;
transition: color 0.2s;
&:after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background-color: $palette-secondary;
transition: background 0.2s;
}
&:hover {
color: $palette-social-link-hover;
&:after {
background-color: $palette-social-link-hover;
}
}
}
.navigation__links {
float: right;
height: 100%;
padding-top: 16px;
}
.navigation__item {
float: left;
margin-right: 30px;
counter-increment: item 1;
&:last-child {
margin-right: 0;
}
}
.navigation__link {
font-family: Galeria-Medium;
font-size: 18px;
color: $palette-secondary;
cursor: pointer;
transition: color 0.2s;
&:before {
content: "0" counter(item) ".";
margin-right: 5px;
}
&:hover {
color: $palette-social-link-hover;
}
}
/*____________________________________________________________
## Developer Links
____________________________________________________________*/
.devLinks {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1700px;
z-index: 2;
}
.social {
position: absolute;
bottom: 0;
}
.socialList {
&:after {
content: '';
display: block;
margin: 0 auto;
width: 1px;
height: 40px;
background: #f7e0b5;
}
}
.socialList__item {
margin-bottom: 10px;
width: 20px;
height: 20px;
transition: transform .2s;
&:hover {
transform: translateY(-3px);
.socialList__icon {
stroke: #7dcbd8;
}
}
}
.socialList__icon {
fill: none;
stroke: #f7e0b5;
}
.gmail {
position: absolute;
right: 0;
bottom: 0;
}
.gmail__name {
&:after {
content: '';
display: block;
margin: 0 auto;
width: 1px;
height: 40px;
background: #f7e0b5;
}
}
.gmail__link {
margin-bottom: 10px;
writing-mode: vertical-rl;
font-family: Galeria-Medium;
font-size: 14px;
color: $palette-secondary;
transition: transform .2s;
&:hover {
transform: translateY(-3px);
color: $palette-social-link-hover;
}
}
/*____________________________________________________________
## Home section
____________________________________________________________*/
.home {
position: relative;
width: 100%;
height: 100vh;
background-color: $palette-primary;
}
.developerWrap {
@extend %centering;
width: 1700px;
height: 600px;
}
/*____________________________________________________________
### Illustration
____________________________________________________________*/
.illustration {
position: absolute;
width: 893px;
height: 600px;
overflow: hidden;
&:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 3px;
border-radius: 3px;
background-color: $x-color-granite;
}
}
.illustration__curtain {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: $palette-primary;
}
/*____________________________________________________________
#### Illustration Blob Circle
____________________________________________________________*/
.illustrationBlob {
position: absolute;
width: 893px;
height: 893px;
}
.illustrationBlob__path {
position: absolute;
fill: $palette-secondary;
}
/*____________________________________________________________
#### Illustration Bubbles Wrap
____________________________________________________________*/
.illustrationBubblesWrap {
width: 100%;
height: 100%;
}
.illustrationBubble {
position: absolute;
border-radius: 50%;
background-color: $palette-tertiary;
animation: levitation 5s linear infinite;
@mixin bubbleChild($nthChild, $top, $left, $width, $height, $bg, $delay) {
&:nth-child(#{$nthChild}) {
top: #{$top}px;
left: #{$left}px;
width: #{$width}px;
height: #{$height}px;
background-color: #{$bg};
animation-delay: #{$delay}s;
}
}
@include bubbleChild(1, 535, 310, 16, 16, $palette-bubble-type-1, 0);
@include bubbleChild(2, 370, 150, 12, 12, $palette-bubble-type-1, .3);
@include bubbleChild(3, 240, 50, 16, 16, $palette-bubble-type-2, .6);
@include bubbleChild(4, 180, 2, 10, 2, $palette-bubble-type-1, 0);
@include bubbleChild(5, 140, 275, 20, 20, transparent, 1.2);
@include bubbleChild(6, 50, 420, 12, 12, $palette-bubble-type-1, 1.5);
@include bubbleChild(7, 10, 510, 10, 10, $palette-bubble-type-1, 1.8);
@include bubbleChild(8, 30, 640, 6, 6, $palette-bubble-type-2, 2.1);
@include bubbleChild(9, 75, 700, 10, 2, $palette-bubble-type-1, 2.4);
@include bubbleChild(10, 220, 780, 16, 16, $palette-bubble-type-1, 2.7);
@include bubbleChild(11, 300, 730, 6, 6, $palette-bubble-type-3, 3);
@include bubbleChild(12, 550, 630, 10, 2, $palette-bubble-type-2, 3.3);
&:nth-child(4) {
animation: none;
}
&:nth-child(4),
&:nth-child(9),
&:nth-child(12) {
border-radius: 1px;
}
&:nth-child(4):before,
&:nth-child(9):before,
&:nth-child(12):before {
content: '';
position: absolute;
top: -4px;
left: 4px;
width: 2px;
height: 10px;
border-radius: 1px;
background-color: $palette-bubble-type-1;
}
&:nth-child(5) {
border: 3px solid $palette-bubble-type-1;
}
&:nth-child(12):before {
background-color: $palette-bubble-type-2;
}
}
/*____________________________________________________________
#### Illustration Dashed Frame
____________________________________________________________*/
.illustrationDashedFrame {
position: absolute;
border: 2px dashed $x-color-cyanide;
border-radius: 5px;
}
@mixin dashedFrameType($nthType, $top, $left, $width, $height) {
.dashedFrame_type#{$nthType} {
top: #{$top}px;
left: #{$left}px;
width: #{$width}px;
height: #{$height}px;
}
}
@include dashedFrameType(1, 292, 130, 116, 243);
@include dashedFrameType(2, 100, 210, 130, 130);
@include dashedFrameType(3, 210, 673, 170, 210);
/*____________________________________________________________
#### Illustration Circle Charts
____________________________________________________________*/
.illustrationCircleChart,
.illustrationCircleChart_type1:before,
.illustrationCircleChart_type2,
.illustrationCircleChart_type2:before,
.illustrationCircleChart_type2:after {
position: absolute;
border-radius: 50%;
}
.illustrationCircleChart_type1 {
top: 250px;
left: 90px;
border-right: 30px solid transparent;
border-top: 30px solid $palette-tertiary;
border-left: 30px solid $palette-tertiary;
border-bottom: 30px solid $palette-tertiary;
animation: rotateRays 7s linear infinite;
&:before {
content: '';
top: -30px;
left: -24px;
border-right: 30px solid $palette-chart-type-1;
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid transparent;
}
}
.illustrationCircleChart_type2 {
top: 280px;
right: 30px;
border-right: 35px solid transparent;
border-top: 35px solid $x-color-tomato;
border-left: 35px solid transparent;
border-bottom: 35px solid $x-color-tomato;
animation: rotateRays 7s linear infinite;
&:before {
content: '';
top: -35px;
left: -30px;
border-right: 35px solid $palette-chart-type-2;
border-top: 35px solid transparent;
border-left: 35px solid transparent;
border-bottom: 35px solid transparent;
}
&:after {
content: '';
top: -35px;
right: -30px;
border-right: 35px solid transparent;
border-top: 35px solid transparent;
border-left: 35px solid $palette-chart-type-2;
border-bottom: 35px solid transparent;
}
}
/*____________________________________________________________
#### Illustration Stickers
____________________________________________________________*/
.illustrationSticker {
position: absolute;
padding: 10px 7px;
width: 60px;
height: 35px;
overflow: hidden;
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
display: block;
width: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
-1px 1px 1px rgba(0, 0, 0, 0.2);
}
}
@mixin stickerType($nthType, $top, $left, $bg) {
.illustrationSticker_type#{$nthType} {
top: #{$top}px;
left: #{$left}px;
background-color: #{$bg};
&:before {
border-color: $palette-secondary $palette-secondary #{$bg} #{$bg};
}
}
}
@include stickerType(1, 125, 320, $palette-tertiary);
@include stickerType(2, 75, 300, $x-color-tomato);
.illustrationSticker_type1 {
transform: rotate(10deg);
}
.illustrationSticker__lineWrap {
width: 28px;
height: 15px;
}
.illustrationSticker__line {
position: relative;
margin-bottom: 3px;
width: 100%;
height: 3px;
overflow: hidden;
&:nth-child(2) {
&:after {
animation-delay: .1s;
}
}
&:nth-child(3) {
&:after {
animation-delay: .2s;
}
}
&:last-child {
margin-bottom: 0;
width: 70%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-white;
animation: slide 3.5s ease infinite;
}
}
/*____________________________________________________________
#### Illustration Site Layout
____________________________________________________________*/
.illustrationSiteLayout {
position: absolute;
top: 20px;
right: 20px;
width: 90px;
height: 85px;
border: 2px solid $palette-site-layout;
border-radius: 5px;
animation: levitation 5s linear infinite 3.2s;
&:before,
&:after {
content: '';
position: absolute;
border: solid $palette-site-layout;
}
&:before {
width: 100%;
height: 20px;
border-width: 0 0 2px 0;
}
&:after {
top: 20px;
width: 20px;
height: calc(100% - 20px);
border-width: 0 2px 0 0;
}
}
.illustrationSiteLayout__codeWrap {
position: absolute;
bottom: 0;
right: 0;
padding: 3px 6px 3px 8px;
width: calc(100% - 20px);
height: calc(100% - 22px);
}
.illustrationSiteLayout__scrollBox {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.illustrationSiteLayout__codeList {
position: absolute;
width: 100%;
animation: scrollCode .9s linear infinite;
}
.illustrationSiteLayout__codeItem {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 18px;
}
.illustrationSiteLayout__codeLine {
position: absolute;
height: 2px;
background-color: $palette-site-layout;
overflow: hidden;
@mixin siteLayoutLineChild($nthChild, $top, $left, $width) {
&:nth-child(#{$nthChild}) {
top: #{$top}px;
left: #{$left};
width: #{$width};
}
}
@include siteLayoutLineChild(1, 0, 0, 90%);
@include siteLayoutLineChild(2, 4, 0, 70%);
@include siteLayoutLineChild(3, 8, 0, 50%);
@include siteLayoutLineChild(4, 12, 0, 20%);
@include siteLayoutLineChild(5, 12, 30%, 60%);
@include siteLayoutLineChild(6, 16, 0, 50%);
@include siteLayoutLineChild(7, 16, 60%, 15%);
}
/*____________________________________________________________
#### Illustration Dialog
____________________________________________________________*/
.illustrationDialog {
position: absolute;
top: 90px;
right: 170px;
padding: 8px 14px;
width: 78px;
height: 45px;
background-color: $palette-dialog;
animation: levitation 5s linear infinite .8s;
&:before {
content: '';
position: absolute;
left: 10px;
bottom: -10px;
width: 0;
height: 0;
border-top: 10px solid $palette-dialog;
border-right: 10px solid transparent;
}
}
.illustrationDialog__line {
position: relative;
margin-bottom: 3px;
width: 100%;
height: 3px;
overflow: hidden;
&:nth-child(2) {
width: 70%;
}
&:nth-child(4) {
width: 60%;
}
&:nth-child(5) {
width: 90%;
}
&:last-child {
margin-bottom: 0;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-white;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .1);
@include animDelayChild(3, .2);
@include animDelayChild(4, .3);
@include animDelayChild(5, .35);
}
/*____________________________________________________________
#### Illustration Folder
____________________________________________________________*/
.illustrationFolder {
position: absolute;
top: 350px;
left: 50px;
width: 47px;
height: 31px;
border-radius: 1px 0 1px 1px;
background-color: $palette-folder-shadow;
animation: levitation 5s linear infinite 1.4s;
&:before {
content: '';
position: absolute;
top: -4px;
right: 0;
width: 10px;
height: 4px;
border-radius: 1px 1px 0 0;
background-color: $palette-folder-shadow;
}
&:after {
content: '';
position: absolute;
left: -5px;
bottom: 0;
width: 47px;
height: 31px;
border-radius: 1px;
background-color: $palette-tertiary;
animation: openFolder 3.5s ease infinite;
}
}
.illustrationFolder__file {
position: absolute;
left: 4px;
bottom: 0;
padding: 4px 2px;
width: 29px;
height: 35px;
border-radius: 1px;
background-color: $x-color-white;
animation: openFile 3.5s ease infinite;
}
.illustrationFolder__line {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 1px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .1);
@include animDelayChild(3, .2);
@include animDelayChild(4, .3);
@include animDelayChild(5, .4);
}
/*____________________________________________________________
#### Illustration Books
____________________________________________________________*/
.illustrationBooks {
position: absolute;
left: 70px;
bottom: 0;
width: 164px;
height: 86px;
}
.illustrationBooks__book {
position: absolute;
&:nth-child(1) {
left: 5px;
width: 132px;
height: 28px;
border: solid $x-color-tomato;
border-width: 4px 0 4px 4px;
border-radius: 20px 0 0 20px;
background: repeating-linear-gradient(0deg, $x-color-white, $x-color-white 4px, #e6e6e6 4px, #e6e6e6 5px);
}
&:nth-child(2) {
top: 28px;
right: 0;
width: 146px;
height: 31px;
border: solid $palette-tertiary;
border-width: 4px 4px 4px 0;
border-radius: 0 20px 20px 0;
background: repeating-linear-gradient(0deg, $x-color-white, $x-color-white 4px, #e6e6e6 4px, #e6e6e6 5px);
}
&:nth-child(3) {
bottom: 0;
width: 132px;
height: 27px;
background-color: $x-color-tomato;
}
}
.illustrationBooks__binding {
position: absolute;
width: 6px;
height: 100%;
background-color: $x-color-coral-red;
&:nth-child(1) {
left: 10px;
}
&:nth-child(2) {
left: 20px;
}
&:nth-child(3) {
right: 20px;
}
&:nth-child(4) {
right: 10px;
}
}
/*____________________________________________________________
#### Illustration Analytics
____________________________________________________________*/
.illustrationAnalytics {
position: absolute;
bottom: 25px;
right: 10px;
width: 215px;
height: 180px;
border-radius: 2px;
background-color: $x-color-white;
overflow: hidden;
animation: levitation 5s linear infinite;
}
.illustrationAnalyticsPanel {
position: relative;
width: 100%;
height: 20px;
background-color: $palette-program-panel;
}
.illustrationAnalyticsPanel__buttonsWrap {
position: absolute;
top: 6px;
left: 10px;
height: 8px;
}
.illustrationAnalyticsPanel__button {
float: left;
margin-right: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
}
/*____________________________________________________________
##### Illustration Analytics Page
____________________________________________________________*/
.illustrationAnalyticsPage {
padding: 8px;
width: 100%;
height: calc(100% - 20px);
}
.illustrationAnalyticsPage__container {
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Illustration Analytics Diagram
____________________________________________________________*/
.illustrationAnalyticsPage__diagramWrap {
float: left;
padding-top: 20%;
margin-right: 10px;
width: 90px;
height: 100%;
}
.illustrationAnalyticsPage__diagram {
position: relative;
float: left;
margin-right: 10px;
width: 15px;
height: 100%;
border-radius: 1px;
overflow: hidden;
&:last-child {
margin-right: 0;
}
&:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 10%;
background-color: $palette-analytics-elements;
animation: lineDiagram 2.8s ease infinite;
}
@include animDelayChild(2, .6);
@include animDelayChild(3, .3);
@include animDelayChild(4, .9);
}
/*____________________________________________________________
###### Illustration Analytics Banner
____________________________________________________________*/
.illustrationAnalyticsPage__banner {
float: left;
width: calc(100% - 100px);
height: 100%;
}
/*____________________________________________________________
####### Illustration Analytics Description
____________________________________________________________*/
.illustrationAnalyticsPage__lineWrap {
margin-bottom: 17px;
width: 100%;
height: 87px;
}
.illustrationAnalyticsPage__line {
position: relative;
margin-bottom: 5px;
width: 100%;
height: 3px;
border-radius: 3px;
overflow: hidden;
&:first-child {
width: 60%;
height: 6px;
margin-bottom: 8px;
}
&:nth-child(5),
&:nth-child(6),
&:nth-child(7) {
width: 70%;
}
&:last-child {
height: 27px;
margin-bottom: 0;
border-radius: 1px;
background-color: $palette-window-line;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $palette-window-line;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .1);
@include animDelayChild(2, .2);
@include animDelayChild(3, .3);
@include animDelayChild(4, .35);
@include animDelayChild(5, .4);
@include animDelayChild(6, .45);
@include animDelayChild(7, .5);
&:last-child {
&:after {
animation: none;
}
}
}
/*____________________________________________________________
####### Illustration Analytics Product List
____________________________________________________________*/
.illustrationAnalyticsPage__productList {
width: 100%;
height: calc(100% - 104px);
}
.illustrationAnalyticsPage__productItem {
float: left;
margin-bottom: 10px;
margin-right: 5px;
width: 47px;
height: 15px;
&:nth-child(2n) {
margin-right: 0;
}
&:nth-child(3),
&:nth-child(4) {
.illustrationAnalyticsPage__productImg {
background-color: $palette-analytics-elements;
}
}
}
.illustrationAnalyticsPage__productImg {
float: left;
margin-right: 5px;
width: 15px;
height: 15px;
border-radius: 1px;
background-color: $palette-window-line;
}
.illustrationAnalyticsPage__productLineWrap {
float: left;
width: calc(100% - 20px);
height: 15px;
}
.illustrationAnalyticsPage__productLine {
position: relative;
margin-bottom: 3px;
width: 100%;
height: 3px;
border-radius: 3px;
overflow: hidden;
&:nth-child(2),
&:last-child {
width: 70%;
}
&:last-child {
margin-bottom: 0;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $palette-window-line;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .1);
@include animDelayChild(2, .2);
@include animDelayChild(3, .3);
}
/*____________________________________________________________
#### Illustration Imac
____________________________________________________________*/
.illustrationImac {
@extend %horizontalCentering;
bottom: 147px;
width: 482px;
height: 266px;
}
/*____________________________________________________________
##### Illustration Imac Display
____________________________________________________________*/
.illustrationImac__display {
position: relative;
width: 100%;
height: 100%;
border: 9px solid $x-color-granite;
border-radius: 10px 10px 0 0;
background: repeating-linear-gradient(90deg, $palette-tertiary, $palette-tertiary 24px, $palette-imac-display-gradient 24px, $palette-imac-display-gradient 34px);
}
/*____________________________________________________________
###### Illustration Imac Editor
____________________________________________________________*/
.illustrationImacEditor {
position: absolute;
bottom: 9px;
left: 30px;
width: 180px;
height: 116px;
background-color: $x-color-white;
}
.illustrationImacEditorPanel {
width: 100%;
height: 10px;
background-color: $palette-program-panel;
}
/*____________________________________________________________
####### Illustration Imac Editor Code
____________________________________________________________*/
.illustrationImacEditorCodeWrap {
position: relative;
padding: 6px;
width: 100%;
height: calc(100% - 10px);
background-color: $x-color-graphite-grey;
}
.illustrationImacEditorCodeWrap__scrollBox {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
@mixin editorCodeLineChild($nthChild, $top, $side, $sideInent, $width, $bg) {
&:nth-child(#{$nthChild}) {
top: #{$top}px;
#{$side}: #{$sideInent}px;
width: #{$width}px;
background-color: #{$bg};
}
}
.illustrationImacEditorCodeWrap__codeList {
position: absolute;
width: 50%;
animation: scrollCode .9s linear infinite;
&:first-child {
border-right: 1px solid $x-color-wet-asphalt;
.illustrationImacEditorCodeWrap__codeLine {
@include editorCodeLineChild(1, 0, left, 0, 20, $x-color-tomato);
@include editorCodeLineChild(2, 0, left, 24, 45, $x-color-tomato);
@include editorCodeLineChild(3, 4, left, 10, 21, $x-color-white);
@include editorCodeLineChild(4, 4, left, 35, 25, $x-color-white);
@include editorCodeLineChild(5, 8, left, 0, 22, #78dbe2);
@include editorCodeLineChild(6, 8, left, 26, 14, #78dbe2);
@include editorCodeLineChild(7, 12, right, 40, 22, #ADFF2F);
@include editorCodeLineChild(8, 12, right, 16, 20, #ADFF2F);
@include editorCodeLineChild(9, 16, right, 18, 30, $x-color-white);
@include editorCodeLineChild(10, 16, right, 6, 8, $x-color-white);
}
}
&:last-child {
right: 0;
animation-duration: 1.3s;
.illustrationImacEditorCodeWrap__codeLine {
@include editorCodeLineChild(1, 0, left, 6, 36, $x-color-white);
@include editorCodeLineChild(2, 0, left, 46, 20, #ff4765);
@include editorCodeLineChild(3, 4, left, 12, 30, #29b87d);
@include editorCodeLineChild(4, 4, left, 46, 18, #ff4765);
@include editorCodeLineChild(5, 8, left, 18, 24, transparent);
@include editorCodeLineChild(6, 8, left, 46, 16, #ff4765);
@include editorCodeLineChild(7, 12, right, 35, 15, #feb021);
@include editorCodeLineChild(8, 12, right, 6, 25, #feb021);
@include editorCodeLineChild(9, 16, right, 10, 30, #78dbe2);
@include editorCodeLineChild(10, 16, right, 0, 6, #78dbe2);
}
}
}
.illustrationImacEditorCodeWrap__codeItem {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 18px;
}
.illustrationImacEditorCodeWrap__codeLine {
position: absolute;
height: 2px;
background-color: $x-color-tomato;
overflow: hidden;
}
/*____________________________________________________________
###### Illustration Imac Browser
____________________________________________________________*/
.illustrationImacBrowser {
position: absolute;
top: 12px;
left: 16px;
width: 180px;
height: 116px;
background-color: $x-color-white;
}
/*____________________________________________________________
####### Illustration Imac Browser Panel
____________________________________________________________*/
.illustrationImacBrowserPanel {
width: 100%;
height: 10px;
background-color: $palette-program-panel;
}
.illustrationImacBrowserPanel__buttonsWrap {
position: absolute;
top: 3px;
left: 6px;
height: 4px;
}
.illustrationImacBrowserPanel__button {
float: left;
margin-right: 2px;
width: 4px;
height: 4px;
border-radius: 50%;
}
/*____________________________________________________________
####### Illustration Imac Browser Page
____________________________________________________________*/
.illustrationImacBrowserPage {
width: 100%;
height: calc(100% - 10px);
}
.illustrationImacBrowserPage__container {
width: 100%;
height: 100%;
}
/*____________________________________________________________
######## Illustration Imac Browser Header
____________________________________________________________*/
.illustrationImacBrowserPage__header {
position: relative;
padding-top: 9px;
width: 100%;
height: 27px;
}
.illustrationImacBrowserPage__nav {
position: relative;
padding-top: 4px;
margin: 0 auto;
width: 100px;
height: 10px;
background-color: $palette-imac-browser-elements;
}
.illustrationImacBrowserPage__navItem {
position: relative;
float: left;
margin-left: 10px;
width: 15px;
height: 2px;
overflow: hidden;
&:first-child {
margin-left: calc(10px / 2);
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $palette-imac-browser-line;
animation: slide 3.5s ease infinite;
}
&:nth-child(2) {
&:after {
animation-delay: .1s;
}
}
&:nth-child(3) {
&:after {
animation-delay: .2s;
}
}
&:nth-child(4) {
&:after {
animation-delay: .3s;
}
}
}
/*____________________________________________________________
######## Illustration Imac Browser Main
____________________________________________________________*/
.illustrationImacBrowserPage__main {
position: relative;
padding: 8px;
width: 100%;
height: 37px;
background-color: $x-color-tomato;
}
.illustrationImacBrowserPage__banner {
width: 100%;
height: 100%;
}
.illustrationImacBrowserPage__img {
position: relative;
float: left;
margin-right: 10px;
width: 44px;
height: 22px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-white;
animation: slide 3.5s ease infinite;
}
}
.illustrationImacBrowserPage__lineWrap {
float: left;
width: calc(100% - 54px);
height: 20px;
}
.illustrationImacBrowserPage__line {
position: relative;
margin-bottom: 3px;
width: 100%;
height: 2px;
overflow: hidden;
&:last-child {
width: calc(100% / 2);
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $palette-imac-browser-line;
animation: slide 3.5s ease infinite;
}
&:nth-child(1) {
&:after {
animation-delay: .1s;
}
}
&:nth-child(2) {
&:after {
animation-delay: .2s;
}
}
&:nth-child(3) {
&:after {
animation-delay: .3s;
}
}
&:nth-child(4) {
&:after {
animation-delay: .35s;
}
}
}
/*____________________________________________________________
######## Illustration Imac Browser Footer
____________________________________________________________*/
.illustrationImacBrowserPage__footer {
position: relative;
padding: 7px 8px;
width: 100%;
height: 42px;
}
.illustrationImacBrowserPage__productList {
width: 100%;
height: 100%;
}
.illustrationImacBrowserPage__productItem {
position: relative;
float: left;
margin-right: 16px;
width: 44px;
height: 100%;
&:last-child {
margin-right: 0;
}
}
.illustrationImacBrowserPage__productImg {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 22px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $palette-imac-browser-elements;
animation: slide 3.5s ease infinite;
}
}
.illustrationImacBrowserPage__productLineWrap {
width: 100%;
height: 6px;
}
.illustrationImacBrowserPage__productLine {
position: relative;
float: left;
margin-bottom: 2px;
width: 100%;
height: 2px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $palette-imac-browser-line;
animation: slide 3.5s ease infinite;
}
&:nth-child(1) {
&:after {
animation-delay: .1s;
}
}
&:nth-child(2) {
&:after {
animation-delay: .2s;
}
}
}
/*____________________________________________________________
###### Avatar
____________________________________________________________*/
.avatarWrap {
position: absolute;
bottom: 0;
right: 30px;
width: 250px;
height: 356px;
}
/*____________________________________________________________
####### Head
____________________________________________________________*/
.headWrap {
position: relative;
width: 100%;
height: 249px;
}
/*____________________________________________________________
######## Hair
____________________________________________________________*/
.hair {
@extend %horizontalCentering;
width: 140px;
height: 44px;
}
.hair__leftSide {
position: absolute;
width: 120px;
height: 44px;
border-radius: 60px 0 30px 0;
background-color: $x-color-black;
z-index: 3;
.blink {
position: absolute;
height: 5.5px;
border-radius: 5px;
background-color: $palette-hair-blink;
&:nth-child(1) {
top: 29px;
left: 25px;
width: 26px;
}
&:nth-child(2) {
top: 12px;
left: 40px;
width: 63px;
}
&:nth-child(3) {
top: 26px;
right: 10px;
width: 26px;
}
}
&:after {
content: '';
position: absolute;
bottom: -40px;
width: 40px;
height: 40px;
background-color: $x-color-black;
}
}
.hair__rightSide {
overflow: hidden;
content: '';
position: absolute;
top: 25px;
right: 0;
width: 40px;
height: 55px;
background-color: $x-color-black;
&:after {
content: '';
position: absolute;
top: -16px;
left: -16px;
width: 50px;
height: 40px;
border-radius: 0 0 30px 0;
background-color: $palette-hair-shadow;
}
}
/*____________________________________________________________
######## Ears
____________________________________________________________*/
.ears {
@extend %horizontalCentering;
top: 115px;
width: 186px;
height: 40px;
}
.ear {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: $palette-skin;
&:nth-child(2) {
right: 0;
}
&:after {
content: '';
@extend %centering;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #180812;
}
}
/*____________________________________________________________
######## Face
____________________________________________________________*/
.face {
@extend %horizontalCentering;
top: 44px;
width: 140px;
height: 181px;
border-radius: 60px 60px 100px 100px;
background-color: $palette-skin;
z-index: 2;
}
/*____________________________________________________________
######### Top Face
____________________________________________________________*/
.eyebrows {
@extend %horizontalCentering;
top: 29px;
width: 90px;
height: 10px;
}
.eyebrows__brow {
overflow: hidden;
position: absolute;
width: 30px;
height: 10px;
border-radius: 10px;
background-color: $x-color-black;
z-index: 3;
&:nth-child(2) {
right: 0;
}
&:before {
content: '';
position: absolute;
top: -4px;
width: 100%;
height: 100%;
border-radius: 10px;
background-color: $palette-hair-shadow;
}
&:after {
content: '';
@extend %horizontalCentering;
top: 2px;
width: 12px;
height: 2px;
border-radius: 15px;
background-color: $x-color-white;
opacity: .2;
}
}
.eyebrows__shadow {
position: absolute;
top: 4px;
width: 100%;
height: 100%;
&:before,
&:after {
content: '';
position: absolute;
width: 30px;
height: 10px;
border-radius: 10px;
background-color: $palette-skin-shadow;
}
&:after {
right: 0;
}
}
/*____________________________________________________________
######### Middle Face
____________________________________________________________*/
.eyes {
@extend %horizontalCentering;
bottom: 100px;
width: 70px;
height: 22px;
&:before,
&:after {
content: '';
position: absolute;
width: 12px;
height: 22px;
border-radius: 6px;
background-color: $x-color-black;
animation: blink 3s ease-in-out infinite;
}
&:after {
right: 0;
}
}
.glasses {
@extend %horizontalCentering;
top: 70px;
width: 4px;
height: 4px;
background-color: $x-color-black;
.left,
.right {
position: absolute;
width: 56px;
height: 56px;
background-color: transparent;
border-radius: 100%;
border: 5px solid $x-color-black;
left: -56px;
top: -26px;
z-index: 2;
&:before {
content: '';
@extend %verticalCentering;
width: 20px;
height: 4px;
border-radius: 5px;
background-color: $x-color-black;
}
&:after {
content: '';
@extend %verticalCentering;
width: 8px;
height: 2px;
border-radius: 15px;
background-color: $x-color-white;
opacity: .4;
}
}
.left {
&:before {
left: -20px;
}
&:after {
left: -17px;
}
}
.right {
left: 4px;
&:before {
right: -20px;
}
&:after {
right: -17px;
}
}
}
.lens {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
.shine {
&:before,
&:after {
content: "";
position: absolute;
top: -21px;
left: 5px;
width: 20px;
height: 100px;
background-color: $x-color-white;
transform: rotate(30deg);
opacity: 0.3;
}
&:after {
width: 5px;
left: 30px;
}
}
}
/*____________________________________________________________
######### Bottom Face
____________________________________________________________*/
.nose {
@extend %horizontalCentering;
bottom: 72px;
width: 30px;
height: 8px;
&:before,
&:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: $x-color-flea-belly;
}
&:after {
right: 0;
}
}
.arm {
overflow: hidden;
@extend %horizontalCentering;
bottom: 28px;
width: calc(81px - 10px);
height: calc(30px - 0px);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
background-color: $x-color-pearl-ruby;
}
.arm__pharynx {
@extend %horizontalCentering;
top: 6px;
width: calc(57px - 10px);
height: calc(11px - 0px);
border-radius: 20px;
background-color: $x-color-deep-red-brown;
}
.arm__tooth {
position: absolute;
left: 6px;
width: calc(69px - 10px);
height: calc(9px - 0px);
background-color: $x-color-white;
border-radius: 0 0 5px 5px;
z-index: 1;
&:before {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: $x-color-periwinkle;
}
}
.arm__tongue {
position: absolute;
bottom: 0;
right: 3px;
width: calc(58px - 10px);
height: calc(16px - 0px);
border-radius: 15px 0 0 0;
background-color: $x-color-light-cherry;
&:before {
content: '';
position: absolute;
top: 4px;
left: 12px;
width: 22px;
height: 3px;
border-radius: 15px;
background-color: $x-color-white;
opacity: .2;
}
}
/*____________________________________________________________
######## Neck
____________________________________________________________*/
.neck {
overflow: hidden;
@extend %horizontalCentering;
bottom: 0;
width: 58px;
height: 31px;
background-color: $palette-skin;
&:after {
content: '';
position: absolute;
width: 58px;
height: 18px;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
background-color: $palette-skin-shadow;
}
}
/*____________________________________________________________
####### Body
____________________________________________________________*/
.bodyWrap {
position: relative;
width: 100%;
height: 107px;
}
.bodyWrap__body {
position: relative;
width: 100%;
height: 100%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
background-color: $x-color-grey-silk;
background-image: linear-gradient(90deg, transparent 20%, rgba(166, 152, 134,.5) 20%);
background-size: 20px 20px;
overflow: hidden;
}
.collar {
@extend %horizontalCentering;
top: -50px;
width: 120px;
height: 170px;
border-radius: 100%;
background-color: $palette-costume-elements;
}
.shirt {
@extend %horizontalCentering;
top: 50px;
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 200px solid $x-color-lemon-cream;
}
.button {
@extend %horizontalCentering;
top: 82px;
border-radius: 50%;
width: 8px;
height: 8px;
background-color: $palette-costume-elements;
&:nth-child(2) {
top: 102px;
}
}
/*____________________________________________________________
######## Bow
____________________________________________________________*/
.bowWrap {
position: absolute;
top: -17px;
left: 85px;
width: 80px;
height: 46px;
}
.bowWrap__bowShadow {
&:before {
content: "";
position: absolute;
top: 5px;
width: 0;
height: 5px;
border-width: 23px 40px;
border-style: solid;
border-color: transparent #bce1be transparent #bce1be;
border-radius: 25px;
opacity: .8;
z-index: 1;
}
}
.bowWrap__bowShadow {
&:after {
content: "";
position: absolute;
top: 16px;
left: 31.5px;
width: 17px;
height: 19px;
border-radius: 2px;
background-color: #bce1be;
opacity: .8;
z-index: 2;
}
}
.bowWrap__bow {
&:before {
content: "";
position: absolute;
width: 0;
height: 5px;
border-width: 23px 40px;
border-style: solid;
border-color: transparent $x-color-vinous transparent $x-color-vinous;
border-radius: 25px;
z-index: 1;
}
}
.bowWrap__bow {
&:after {
content: "";
position: absolute;
top: 16px;
left: 31.5px;
width: 17px;
height: 19px;
border-radius: 2px;
background-color: $palette-bow-elements;
z-index: 2;
}
}
.bowWrap__crease {
position: absolute;
top: 21px;
left: 17.5px;
width: 45px;
height: 4px;
border-radius: 2px;
background-color: $palette-bow-elements;
z-index: 1;
}
@keyframes blink {
0% {
transform: scaleY(1);
}
18% {
transform: scaleY(1);
}
20% {
transform: scaleY(0);
}
25% {
transform: scaleY(1);
}
38% {
transform: scaleY(1);
}
40% {
transform: scaleY(0);
}
45% {
transform: scaleY(1);
}
80% {
transform: scaleY(1);
}
}
/*____________________________________________________________
##### Illustration Imac Panel
____________________________________________________________*/
.illustrationImac__panel {
position: absolute;
bottom: -45px;
width: 100%;
height: 45px;
border-radius: 0 0 10px 10px;
background-color: $x-color-grideperlevy;
}
.illustrationImac__panelButton {
@extend %centering;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: $x-color-manatee;
}
/*____________________________________________________________
##### Illustration Imac Stand
____________________________________________________________*/
.illustrationImac__stand {
@extend %horizontalCentering;
bottom: -127px;
width: 154px;
height: 0;
border-bottom: 82px solid $x-color-cadet-blue;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
}
.illustrationImac__standShadow {
position: absolute;
top: 5px;
left: -5px;
height: 0;
width: 122px;
border-bottom: 16px solid $x-color-manatee;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.illustrationImac__standBase {
@extend %horizontalCentering;
top: 82px;
width: 284px;
height: 20px;
border-radius: 15px;
background-color: $x-color-niagara;
}
/*____________________________________________________________
#### Illustration Presentation
____________________________________________________________*/
.illustrationPresentation {
position: absolute;
top: 25px;
left: 20px;
width: 215px;
height: 179px;
background-color: $x-color-snow-blue;
border-radius: 2px;
overflow: hidden;
animation: levitation 5s linear infinite;
}
/*____________________________________________________________
##### Illustration Presentation Panel
____________________________________________________________*/
.illustrationPresentationPanel {
position: relative;
width: 100%;
height: 20px;
background-color: $palette-program-panel;
}
.illustrationPresentationPanel__buttonsWrap {
position: absolute;
top: 6px;
left: 10px;
height: 8px;
}
.illustrationPresentationPanel__button {
float: left;
margin-right: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
}
/*____________________________________________________________
##### Illustration Presentation Page
____________________________________________________________*/
.illustrationPresentationPage {
padding: 8px;
width: 100%;
height: calc(100% - 20px);
}
.illustrationPresentationPage__container {
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Illustration Presentation Banner
____________________________________________________________*/
.illustrationPresentationPage__banner {
position: relative;
width: 100%;
height: 72px;
margin-bottom: 6px;
}
.illustrationPresentationPage__img {
position: relative;
float: right;
margin-left: 10px;
width: 93px;
height: 72px;
background-color: $x-color-white;
overflow: hidden;
}
/*____________________________________________________________
####### Picture
____________________________________________________________*/
.picture {
position: absolute;
width: 93px;
height: 72px;
border: 6px solid $x-color-gainsborough;
background-color: $x-color-moderate-turquoise;
overflow: hidden;
animation: changeDay 10s linear infinite;
}
.illustrationImac__display {
.picture {
top: 50px;
right: 10px;
animation-delay: 3s;
}
.picture__dayWrap {
animation-delay: 3s;
}
}
.picture__mountain {
position: absolute;
bottom: 0;
@mixin pictureMountainChild($nthChild, $side, $sideInent, $borderWidth, $borderHeight, $bg) {
&:nth-child(#{$nthChild}) {
#{$side}: #{$sideInent}px;
border-left: #{$borderWidth}px solid transparent;
border-right: #{$borderWidth}px solid transparent;
border-bottom: #{$borderHeight}px solid #{$bg};
}
}
@include pictureMountainChild(1, left, 0, 22.5, 24, $x-color-blackish-blue);
@include pictureMountainChild(2, right, -20, 36, 39, $x-color-dark-grey-blue);
@include pictureMountainChild(3, left, 26, 10, 10, $x-color-slate-grey);
}
.picture__dayWrap {
position: absolute;
top: 15px;
left: 8px;
width: 70px;
height: 70px;
animation: rotateRays 10s linear infinite;
}
.picture__dayWrap,
.picture__sun,
.picture__moon {
border-radius: 50%;
}
.picture__sun,
.picture__moon {
@extend %horizontalCentering;
}
.picture__sun {
top: -5px;
width: 15px;
height: 15px;
background-color: $x-color-white;
}
.picture__moon {
bottom: -4px;
width: 17px;
height: 17px;
box-shadow: 4px 4px 0 0 $x-color-amber;
transform: rotate(120deg);
}
.illustrationPresentationPage__lineWrap {
float: right;
width: calc(100% - 103px);
height: 20px;
}
.illustrationPresentationPage__line {
position: relative;
margin-bottom: 6px;
width: 100%;
height: 6px;
border-radius: 3px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
width: 80%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $palette-window-line;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .1);
@include animDelayChild(2, .2);
@include animDelayChild(3, .3);
@include animDelayChild(4, .35);
@include animDelayChild(5, .4);
@include animDelayChild(6, .45);
}
/*____________________________________________________________
###### Illustration Presentation Form
____________________________________________________________*/
.illustrationPresentationPage__form {
position: relative;
width: 100%;
height: calc(100% - 78px);
}
.illustrationPresentationPage__input {
margin-bottom: 6px;
width: 100%;
height: 16px;
border-radius: 3px;
background-color: $x-color-white;
&:last-child {
height: calc(100% - 22px);
}
}
/*____________________________________________________________
#### Illustration Settings
____________________________________________________________*/
.illustrationSettings {
position: absolute;
bottom: 115px;
left: 5px;
padding: 8px 14px;
width: 206px;
height: 56px;
border-radius: 5px;
background-color: $palette-settings-elements;
animation: levitation 5s linear infinite 3s;
}
.illustrationSettings__container {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
##### Illustration Settings Gear
____________________________________________________________*/
.illustrationSettings__gearWrap {
position: relative;
float: left;
margin-right: 12px;
width: 40px;
height: 40px;
}
.illustrationSettings__gear {
@extend %centering;
width: 50px;
height: 50px;
}
.illustrationSettings__gear svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $x-color-white;
stroke-width: 35px;
animation: rotateRays 7s linear infinite;
}
.illustrationSettings__gear .teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
.illustrationSettings__gearCircle {
@extend %centering;
width: 29px;
height: 29px;
border: 8px solid $x-color-white;
background-color: $palette-settings-elements;
border-radius: 50%;
}
/*____________________________________________________________
##### Illustration Settings Line
____________________________________________________________*/
.illustrationSettings__lineWrap {
position: relative;
float: left;
padding-top: 6.5px;
width: calc(100% - 52px);
height: 40px;
}
.illustrationSettings__line {
position: relative;
width: 100%;
height: 3px;
margin-bottom: 5px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
width: 60%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-white;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .1);
@include animDelayChild(2, .2);
@include animDelayChild(3, .3);
@include animDelayChild(4, .35);
}
/*____________________________________________________________
### Developer Info
____________________________________________________________*/
.developerInfo {
position: absolute;
right: 0;
width: 757px;
}
.developerInfo__title,
.developerInfo__subtitle {
font-family: Galeria;
font-size: 70px;
color: $palette-secondary;
}
.developerInfo__title {
margin-bottom: 10px;
}
.developerInfo__subtitle {
margin-bottom: 40px;
font-size: 67px;
}
.developerInfo__name {
color: $x-color-granite;
}
.developerInfo__paragraph {
margin-bottom: 40px;
font-family: Galeria-Medium;
font-size: 24px;
word-spacing: 8px;
text-align: justify;
line-height: 45px;
color: $palette-secondary;
}
.developerInfo__link {
display: block;
width: 150px;
height: 50px;
text-align: center;
font-family: Galeria-Medium;
font-size: 18px;
word-spacing: 6px;
line-height: 46px;
border: 2px solid $palette-secondary;
border-radius: 4px;
background-color: transparent;
color: $palette-secondary;
transition: all 0.2s;
&:hover {
background-color: $palette-secondary;
color: $palette-primary;
}
}
/*____________________________________________________________
## Mouse Scroll Icon
____________________________________________________________*/
.mouse {
@extend %horizontalCentering;
bottom: 50px;
width: 30px;
height: 50px;
border: 2px solid $palette-secondary;
border-radius: 25px;
}
.mouse__scroller {
position: relative;
margin: 8px auto 0;
width: 3px;
height: 10px;
border-radius: 25%;
background-color: $palette-secondary;
animation: mouseScroll 2.2s linear infinite;
animation-timing-function: cubic-bezier(.15, .41, .69, .94);
}
@keyframes mouseScroll {
0% {
opacity: 0;
}
10% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(15px);
opacity: 0;
}
}
/*____________________________________________________________
## About section
____________________________________________________________*/
.about {
position: relative;
width: 100%;
height: 100vh;
background-color: $palette-primary;
overflow: hidden;
}
/*____________________________________________________________
### Card wrap
____________________________________________________________*/
.cardWrap {
@extend %centering;
width: 835px;
height: 666px;
}
.iconCard {
float: left;
position: relative;
width: 265px;
height: 323px;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
background-color: #9b2d30;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);
overflow: hidden;
&:nth-child(3n) {
margin-right: 0;
}
}
.iconWrap {
position: relative;
margin-bottom: 10px;
width: 100%;
height: 110px;
}
.iconTitle {
margin-bottom: 20px;
text-align: center;
font-family: Galeria;
font-size: 18px;
color: $palette-secondary;
}
.iconInfo {
font-family: Galeria-Medium;
font-size: 14px;
text-align: justify;
line-height: 25px;
color: $palette-secondary;
}
/*____________________________________________________________
#### Learnability Icon
____________________________________________________________*/
.learnabilityIcon {
@extend %centering;
width: 81px;
height: 61px;
}
/*____________________________________________________________
##### Learnability Editor
____________________________________________________________*/
.learnabilityEditor {
position: absolute;
right: 0;
width: 41px;
height: 100%;
}
/*____________________________________________________________
###### Learnability Editor Panel
____________________________________________________________*/
.learnabilityEditor__panel {
position: relative;
width: 100%;
height: 5px;
background-color: $palette-program-panel;
}
.learnabilityEditor__buttonsWrap {
position: absolute;
top: 1px;
left: 2px;
height: 2px;
}
.learnabilityEditor__button {
float: left;
margin-right: 1px;
width: 2px;
height: 2px;
border-radius: 50%;
}
/*____________________________________________________________
###### Learnability Editor Code
____________________________________________________________*/
.learnabilityEditor__codeWrap {
position: relative;
padding: 6px;
width: 100%;
height: calc(100% - 5px);
background-color: $x-color-tomato;
}
.learnabilityEditor__scrollBox {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.learnabilityEditor__codeList {
position: absolute;
width: 100%;
animation: learnabilityScrollCode .9s linear infinite;
}
.learnabilityEditor__codeItem {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 7px;
}
.learnabilityEditor__codeLine {
position: absolute;
height: 1px;
overflow: hidden;
@mixin learnabilityEditorCodeLineChild($nthChild, $vSide, $vSideInent, $hSide, $hSideInent, $width) {
&:nth-child(#{$nthChild}) {
#{$vSide}: #{$vSideInent}px;
#{$hSide}: #{$hSideInent}px;
width: #{$width}px;
}
}
@include learnabilityEditorCodeLineChild(1, top, 0, left, 0, 7);
@include learnabilityEditorCodeLineChild(2, top, 0, left, 9, 11);
@include learnabilityEditorCodeLineChild(3, top, 3, left, 4, 21);
@include learnabilityEditorCodeLineChild(4, bottom, 0, right, 7, 14);
@include learnabilityEditorCodeLineChild(5, bottom, 0, right, 0, 5);
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
@include animDelayChild(5, .7);
&:nth-child(3),
&:nth-child(4),
&:nth-child(5) {
&:after {
background-color: $x-color-white;
}
}
}
/*____________________________________________________________
##### Learnability Keyboard
____________________________________________________________*/
.learnabilityKeyboard {
position: absolute;
bottom: 0;
padding: 2px;
width: 66px;
height: 26px;
background-color: $x-color-light-gray;
}
.learnabilityKeyboard__line {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 3.4px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
@mixin keyboardButtonChild($nthChildLine, $nthChildButton, $width) {
&:nth-child(#{$nthChildLine}) {
.learnabilityKeyboard__button {
&:nth-child(#{$nthChildButton}) {
width: #{$width}px;
}
}
}
}
@include keyboardButtonChild(1, 14, 4.5);
@include keyboardButtonChild(2, 1, 4.5);
@include keyboardButtonChild(3, 1, 6.3);
@include keyboardButtonChild(3, 13, 6.3);
@include keyboardButtonChild(4, 1, 8.5);
@include keyboardButtonChild(4, 12, 8.5);
@include keyboardButtonChild(5, 5, 22);
@mixin keyboardButtonAnimDelayChild($nthChildLine, $nthChildButton, $delay) {
&:nth-child(#{$nthChildLine}) {
.learnabilityKeyboard__button {
&:nth-child(#{$nthChildButton}) {
animation: keyboardClick 4s linear infinite #{$delay}s;
}
}
}
}
@include keyboardButtonAnimDelayChild(2, 4, .4);
@include keyboardButtonAnimDelayChild(3, 10, .8);
@include keyboardButtonAnimDelayChild(2, 10, 1.2);
@include keyboardButtonAnimDelayChild(5, 5, 1.6);
@include keyboardButtonAnimDelayChild(2, 3, 2);
@include keyboardButtonAnimDelayChild(1, 11, 2.4);
@include keyboardButtonAnimDelayChild(2, 5, 2.8);
@include keyboardButtonAnimDelayChild(4, 12, 3.2);
@include keyboardButtonAnimDelayChild(3, 4, 3.6);
}
.learnabilityKeyboard__button {
position: relative;
margin-right: 1px;
float: left;
width: 3.4px;
height: 3.4px;
background-color: $x-color-white;
&:last-child {
margin-right: 0;
}
}
/*____________________________________________________________
##### Learnability Gear
____________________________________________________________*/
.learnabilityGear {
position: absolute;
top: 4px;
left: 5px;
width: 30px;
height: 26px;
&:before,
&:after {
content: '';
position: absolute;
border: solid $x-color-granite;
width: 3px;
height: 100%;
box-sizing: border-box;
}
&:before {
border-width: 1px 0 1px 1px;
}
&:after {
right: 0;
border-width: 1px 1px 1px 0;
}
}
.learnabilityGear__gear {
@extend %centering;
width: 30px;
height: 30px;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $x-color-space;
stroke-width: 24px;
animation: rotateRays 7s linear infinite;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
.learnabilityGear__gearCircle {
@extend %centering;
width: 17px;
height: 17px;
border: 4px solid $x-color-granite;
background-color: $x-color-white;
border-radius: 50%;
}
/*____________________________________________________________
#### Fast Icon
____________________________________________________________*/
.fastIcon {
@extend %centering;
width: 69px;
height: 69px;
}
/*____________________________________________________________
##### Fast Browser
____________________________________________________________*/
.fastBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Fast Browser Panel
____________________________________________________________*/
.fastBrowser__panel {
position: relative;
padding: 3px 5px;
width: 100%;
height: 11px;
background-color: $x-color-granite;
}
.fastBrowser__buttonsWrap {
float: left;
margin-right: 5px;
width: 18px;
height: 4px;
}
.fastBrowser__button {
float: left;
margin-right: 3px;
width: 4px;
height: 4px;
&:last-child {
margin-right: 0;
}
}
.fastBrowser__input {
position: relative;
float: left;
width: calc(100% - 23px);
height: 4px;
background-color: $x-color-white;
&:after {
content: '';
position: absolute;
right: 0;
width: 7px;
height: 100%;
background-color: $x-color-tomato;
}
}
/*____________________________________________________________
###### Fast Browser Page
____________________________________________________________*/
.fastBrowser__page {
position: relative;
padding: 5px;
width: 100%;
height: calc(100% - 11px);
border: 4px solid $x-color-light-gray;
background-color: $x-color-white;
}
.fastBrowser__lineWrap {
width: 100%;
height: 100%;
}
.fastBrowser__line {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 2px;
overflow: hidden;
&:first-child {
height: 20px;
}
&:last-child {
margin-bottom: 0;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-tomato;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .1);
@include animDelayChild(3, .2);
@include animDelayChild(4, .3);
@include animDelayChild(5, .4);
@include animDelayChild(6, .45);
}
/*____________________________________________________________
##### Fast Clock Wrap
____________________________________________________________*/
.fastClockWrap {
position: absolute;
top: 30px;
right: -30px;
width: 68px;
height: 68px;
}
/*____________________________________________________________
###### Fast Clock Gear
____________________________________________________________*/
.fastClockWrap__gear {
position: absolute;
width: 100%;
height: 100%;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $x-color-space;
stroke-width: 24px;
animation: rotateRays 7s linear infinite;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
/*____________________________________________________________
###### Fast Clock
____________________________________________________________*/
.fastClockWrap__clock {
@extend %centering;
width: 38px;
height: 38px;
overflow: hidden;
border: 4px solid $x-color-granite;
border-radius: 50%;
}
.clockFaceContainer {
position: absolute;
top: -5px;
left: -5px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: $x-color-white;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $x-color-granite;
stroke-width: 4px;
stroke-linecap: round;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
.clockFaceContainer__clockHand {
position: absolute;
top: calc(50% - 4px);
left: 50%;
transform: translate(-50%, -50%);
width: 1px;
height: 12px;
transform-origin: 50% 4px;
background-color: $x-color-granite;
animation: rotateRays 12s linear infinite;
}
.clockFaceContainer__clockCircle {
@extend %centering;
width: 5px;
height: 5px;
border: 1px solid $x-color-granite;
border-radius: 50%;
background-color: $x-color-white;
}
/*____________________________________________________________
#### Dynamic Icon
____________________________________________________________*/
.dynamicIcon {
@extend %centering;
width: 47px;
height: 68px;
}
/*____________________________________________________________
##### Dynamic Browser
____________________________________________________________*/
.dynamicBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Dynamic Browser Panel
____________________________________________________________*/
.dynamicBrowser__panel {
width: 100%;
height: 5px;
background-color: $palette-program-panel;
}
.dynamicBrowser__buttonsWrap {
position: absolute;
top: 1px;
left: 2px;
height: 2px;
}
.dynamicBrowser__button {
float: left;
margin-right: 1px;
width: 2px;
height: 2px;
border-radius: 50%;
}
/*____________________________________________________________
###### Dynamic Browser Header
____________________________________________________________*/
.dynamicBrowser__header {
position: relative;
padding: 4px;
width: 100%;
height: 24px;
background-color: $x-color-light-gray;
}
.dynamicBrowser__lineWrap {
position: relative;
padding-top: 2px;
margin-bottom: 3px;
width: 100%;
height: 5px;
background-color: $palette-tertiary;
}
.dynamicBrowser__line {
position: relative;
float: left;
margin-left: 3px;
width: 6px;
height: 1px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
}
.dynamicBrowser__title {
position: relative;
margin-bottom: 3px;
width: 100%;
height: 3px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-tomato;
animation: slide 3.5s ease infinite;
animation-delay: .2s;
}
}
.dynamicBrowser__subtitle {
position: relative;
margin: 0 auto;
width: 60%;
height: 2px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
animation-delay: .2s;
}
}
/*____________________________________________________________
###### Dynamic Browser Main
____________________________________________________________*/
.dynamicBrowser__main {
position: relative;
width: 100%;
height: 22px;
background-color: $palette-tertiary;
animation: changeDay 10s linear infinite;
.landscape {
position: absolute;
top: 0;
left: 7px;
transform: scale(.8);
animation: none;
}
.landscapePicture__bg {
width: 100%;
height: 100%;
background: $palette-tertiary;
opacity: 1;
animation: changeDay 10s linear infinite;
}
}
/*____________________________________________________________
###### Dynamic Browser Footer
____________________________________________________________*/
.dynamicBrowser__footer {
position: relative;
padding: 2px 4px;
width: 100%;
height: 17px;
background-color: $x-color-light-gray;
}
.dynamicBrowser__productList {
width: 100%;
height: 100%;
}
.dynamicBrowser__product {
position: relative;
float: left;
margin-right: 5%;
width: 30%;
height: 100%;
&:last-child {
margin-right: 0;
}
}
.dynamicBrowser__productImg {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 7px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-tomato;
animation: slide 3.5s ease infinite;
}
}
.dynamicBrowser__productLineWrap {
width: 100%;
height: 5px;
}
.dynamicBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:nth-child(3) {
width: 50%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
@include animDelayChild(3, .6);
}
/*____________________________________________________________
##### Dynamic Dialog
____________________________________________________________*/
.dynamicDialog {
position: absolute;
padding: 2px;
animation: levitation 5s linear infinite;
&.dynamicDialog_left {
top: 18px;
left: -18px;
width: 14px;
background-color: $palette-tertiary;
.dynamicDialog__line {
&:last-child {
width: 50%;
}
&:after {
background-color: $x-color-white;
}
}
}
&.dynamicDialog_right {
top: 16px;
right: -20px;
width: 18px;
animation-delay: 2s;
.dynamicDialog__line {
&:first-child {
width: 50%;
}
}
}
}
.dynamicDialog__line {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:last-child {
width: 50%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
}
/*____________________________________________________________
##### Dynamic Dashed Frame
____________________________________________________________*/
.dynamicDashedFrame {
position: absolute;
top: 36px;
left: -13px;
width: 22px;
height: 18px;
border: 1px dashed $palette-secondary;
animation: levitation 3.5s linear infinite 2.5s;
}
/*____________________________________________________________
##### Dynamic Chart
____________________________________________________________*/
.dynamicChart {
position: absolute;
padding: 2px;
top: 31px;
right: -13px;
width: 18px;
height: 12px;
background-color: $x-color-light-gray;
animation: levitation 5s linear infinite 1s;
}
.dynamicChart__line {
position: relative;
bottom: 0;
float: left;
margin-right: 1px;
width: 2px;
height: 100%;
overflow: hidden;
&:last-child {
margin-right: 0;
}
&:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 10%;
background-color: $x-color-cadet-blue;
animation: lineDiagram 2.5s ease infinite;
}
&:nth-child(1) {
&:after {
background-color: $x-color-granite;
}
}
&:nth-child(4) {
&:after {
background-color: $x-color-tomato;
}
}
@include animDelayChild(1, .8);
@include animDelayChild(2, 1.4);
@include animDelayChild(3, .4);
@include animDelayChild(4, 1.2);
@include animDelayChild(5, 1.6);
}
/*____________________________________________________________
#### Responsive Icon
____________________________________________________________*/
.responsiveIcon {
@extend %centering;
width: 69px;
height: 46px;
}
/*____________________________________________________________
##### Responsive Imac
____________________________________________________________*/
.respImac {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
###### Responsive Imac Display
____________________________________________________________*/
.respImac__display {
position: relative;
width: 100%;
height: 100%;
border: 3.2px solid $x-color-granite;
border-radius: 2px 2px 0 0;
background-color: $palette-tertiary;
}
/*____________________________________________________________
####### Responsive Browser
____________________________________________________________*/
.respBrowser {
@extend %centering;
width: 60%;
height: 70%;
background-color: $x-color-white;
}
/*____________________________________________________________
######## Responsive Browser Panel
____________________________________________________________*/
.respBrowser__panel {
width: 100%;
height: 4px;
background-color: $palette-program-panel;
}
.respBrowser__buttonsWrap {
position: absolute;
top: 0.5px;
left: 2px;
height: 2px;
}
.respBrowser__button {
float: left;
margin-right: 1px;
width: 2px;
height: 2px;
border-radius: 50%;
}
/*____________________________________________________________
######## Responsive Browser Page
____________________________________________________________*/
.respBrowser__page {
padding: 1.5px 2.5px 2.5px;
width: 100%;
height: calc(100% - 4px);
}
.respBrowser__pageLayout {
width: 100%;
height: 100%;
}
/*____________________________________________________________
######### Responsive Browser Nav
____________________________________________________________*/
.respBrowser__nav {
margin-bottom: 1px;
width: 60%;
height: 3px;
background-color: $palette-responsive-nav;
}
/*____________________________________________________________
######### Responsive Browser Banner
____________________________________________________________*/
.respBrowser__banner {
margin-bottom: 1px;
width: 100%;
height: 5px;
background-color: $palette-responsive-banner;
}
/*____________________________________________________________
######### Responsive Browser Product List
____________________________________________________________*/
.respBrowser__productList {
width: 100%;
height: 9px;
}
.respBrowser__product {
position: relative;
float: left;
margin-right: 5%;
width: 30%;
height: 100%;
&:last-child {
margin-right: 0;
}
}
.respBrowser__productImg {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 5px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-grideperlevy;
animation: slide 3.5s ease infinite;
}
}
.respBrowser__productLineWrap {
width: 100%;
height: 3px;
}
.respBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
}
/*____________________________________________________________
###### Responsive Imac Panel
____________________________________________________________*/
.respImac__panel {
position: absolute;
bottom: -6px;
width: 100%;
height: 6px;
border-radius: 0 0 2px 2px;
background-color: $x-color-grideperlevy;
}
/*____________________________________________________________
###### Responsive Imac Stand
____________________________________________________________*/
.respImac__stand {
@extend %horizontalCentering;
bottom: -17px;
height: 0;
width: 23px;
border-bottom: 11px solid $x-color-grideperlevy;
border-left: 5.5px solid transparent;
border-right: 5.5px solid transparent;
}
.respImac__standShadow {
position: absolute;
left: 3px;
width: 0;
height: 0;
border-top: 11px solid $x-color-cadet-blue;
border-left: 12px solid transparent;
transform: skew(26deg, 0deg);
}
.respImac__standBase {
@extend %horizontalCentering;
top: 11px;
width: 36px;
height: 2px;
border-radius: 3px 3px 0 0;
background-color: $x-color-cadet-blue;
}
/*____________________________________________________________
##### Responsive Ipad
____________________________________________________________*/
.respIpad {
position: absolute;
bottom: -19px;
left: -14px;
width: 29px;
height: 42px;
}
/*____________________________________________________________
###### Responsive Ipad Display
____________________________________________________________*/
.respIpad__display {
position: relative;
padding: 2px 2px 2px 1px;
width: 100%;
height: 100%;
border: solid $x-color-granite;
border-width: 4px 2.5px;
border-radius: 2px;
background-color: $x-color-white;
}
/*____________________________________________________________
####### Ipad Browser
____________________________________________________________*/
.ipadBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
######## Ipad Browser Nav
____________________________________________________________*/
.ipadBrowser__nav {
margin-bottom: 1px;
width: 60%;
height: 3px;
background-color: $palette-responsive-nav;
}
/*____________________________________________________________
######## Ipad Browser Banner
____________________________________________________________*/
.ipadBrowser__banner {
margin-bottom: 1px;
width: 100%;
height: 5px;
background-color: $palette-responsive-banner;
}
/*____________________________________________________________
######## Responsive Ipad Product List
____________________________________________________________*/
.ipadBrowser__productList {
width: 100%;
height: calc(100% - 10px);
}
.ipadBrowser__product {
position: relative;
margin-bottom: 2px;
width: 100%;
height: 5px;
&:last-child {
margin-bottom: 0;
}
}
.ipadBrowser__productImg {
float: left;
position: relative;
margin-right: 2px;
width: 5px;
height: 5px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-grideperlevy;
animation: slide 3.5s ease infinite;
}
}
.ipadBrowser__productLineWrap {
float: left;
width: calc(100% - 7px);
height: 5px;
}
.ipadBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:nth-child(3) {
margin-bottom: 0;
width: 50%;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
@include animDelayChild(3, .5);
}
/*____________________________________________________________
###### Responsive Ipad Camera
____________________________________________________________*/
.respIpad__camera,
.respIphone__camera,
.respIpad__button,
.respIphone__button {
position: absolute;
height: 2px;
background-color: $x-color-grideperlevy;
}
.respIpad__camera,
.respIphone__camera {
top: 1px;
width: 2px;
border-radius: 50%;
}
.respIpad__camera {
left: 13.5px;
}
/*____________________________________________________________
###### Responsive Ipad Button
____________________________________________________________*/
.respIpad__button,
.respIphone__button {
bottom: 1px;
border-radius: 1px;
}
.respIpad__button {
left: 10.5px;
width: 8px;
}
/*____________________________________________________________
##### Responsive Iphone
____________________________________________________________*/
.respIphone {
position: absolute;
bottom: -19px;
right: -6px;
width: 17px;
height: 31px;
}
/*____________________________________________________________
###### Responsive Iphone Display
____________________________________________________________*/
.respIphone__display {
position: relative;
padding: 1px;
width: 100%;
height: 100%;
border: solid $x-color-granite;
border-width: 4px 2px;
border-radius: 2px;
background-color: $x-color-white;
}
/*____________________________________________________________
####### Iphone Browser
____________________________________________________________*/
.iphoneBrowser {
position: relative;
width: 100%;
height: 100%;
}
/*____________________________________________________________
######## Iphone Browser Nav
____________________________________________________________*/
.iphoneBrowser__nav {
margin-bottom: 1px;
width: 100%;
height: 3px;
background-color: $palette-responsive-nav;
}
/*____________________________________________________________
######## Responsive Iphone Product List
____________________________________________________________*/
.iphoneBrowser__productList {
width: 100%;
height: calc(100% - 7px);
}
.iphoneBrowser__product {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 8px;
&:last-child {
margin-bottom: 0;
}
}
.iphoneBrowser__productImg {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 4px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-grideperlevy;
animation: slide 3.5s ease infinite;
}
}
.iphoneBrowser__productLineWrap {
width: 100%;
height: 3px;
}
.iphoneBrowser__productLine {
position: relative;
float: left;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:nth-child(2) {
margin-bottom: 0;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(1, .2);
@include animDelayChild(2, .4);
}
/*____________________________________________________________
###### Responsive Iphone Camera
____________________________________________________________*/
.respIphone__camera {
left: 7.5px;
}
/*____________________________________________________________
###### Responsive Iphone Button
____________________________________________________________*/
.respIphone__button {
left: 5.5px;
width: 6px;
}
/*____________________________________________________________
#### Sociable Icon
____________________________________________________________*/
.sociableIcon {
@extend %horizontalCentering;
top: 50px;
width: 50px;
height: 32px;
}
/*____________________________________________________________
##### Sociable Link
____________________________________________________________*/
.sociableLink {
position: absolute;
width: 10px;
height: 10px;
border: dashed $x-color-granite;
animation: levitation 5s linear infinite;
@mixin sociableLinkPos($figureName, $top, $side, $sideInent, $borderWidth, $delay, $topFigure, $sideFigure, $sideInentFigure) {
&.sociableLink_pos#{$figureName} {
top: #{$top};
#{$side}: #{$sideInent};
border-width: #{$borderWidth};
animation-delay: #{$delay}s;
.sociableLink__figure {
top: #{$topFigure};
#{$sideFigure}: #{$sideInentFigure};
}
}
}
@include sociableLinkPos(LC, 50%, left, -10px, '1px 0 0 0', 0, -7px, left, -12px);
@include sociableLinkPos(LT, -10px, left, -1px, '1px 1px 0 0', .8, -7px, left, -12px);
@include sociableLinkPos(CT, -10px, left, 50%, '0 0 0 1px', 1.5, -12px, left, -7px);
@include sociableLinkPos(RT, -10px, right, -1px, '1px 0 0 1px', 2.2, -7px, right, -12px);
@include sociableLinkPos(RC, 50%, right, -10px, '1px 0 0 0', 2.9, -7px, right, -12px);
&:nth-child(2),
&:nth-child(4) {
.sociableLink__figure {
border-radius: 50%;
background-color: $x-color-tomato;
&:before {
border-radius: 50%;
}
}
}
}
.sociableLink__figure {
position: absolute;
width: 12px;
height: 12px;
background-color: $x-color-grideperlevy;
@mixin sociableLinkType($figureName, $content) {
&.sociableLink__figure_#{$figureName} {
&:after {
content: '#{$content}';
}
}
}
@include sociableLinkType(mail, '@');
@include sociableLinkType(money, '$');
@include sociableLinkType(tag, '#');
@include sociableLinkType(percent, '%');
@include sociableLinkType(and, '&');
&:after {
margin-top: .5px;
}
&:before,
&:after {
@extend %centering;
font-size: 9px;
}
&:before {
content: '';
width: 9px;
height: 9px;
border: 1px solid $x-color-granite;
}
}
/*____________________________________________________________
##### Sociable Display
____________________________________________________________*/
.sociableDisplay {
position: relative;
width: 100%;
height: 100%;
border: 3.2px solid $x-color-granite;
border-radius: 1px;
background-color: $x-color-white;
}
/*____________________________________________________________
###### Sociable Panel
____________________________________________________________*/
.sociableDisplay__panel {
position: absolute;
top: 2.2px;
width: 9px;
&.sociableDisplay_leftSide {
left: 1.8px;
.sociableDisplay__line {
&:nth-child(1) {
margin-top: 6px;
}
}
&:before {
content: '';
position: absolute;
margin-bottom: 2px;
width: 100%;
height: 4px;
background-color: $x-color-tomato;
}
}
&.sociableDisplay_rightSide {
right: 1.8px;
.sociableDisplay__line {
&:nth-child(1) {
width: 50%;
}
}
}
}
.sociableDisplay__line {
position: relative;
margin-bottom: 1px;
width: 100%;
height: 1px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
&:nth-child(6) {
width: 50%;
}
@include animDelayChild(2, .2);
@include animDelayChild(3, .4);
@include animDelayChild(4, .6);
@include animDelayChild(5, .8);
@include animDelayChild(6, 1);
}
/*____________________________________________________________
###### Sociable Avatar
____________________________________________________________*/
.sociableDisplay__avatar {
@extend %horizontalCentering;
top: 2.2px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: $palette-tertiary;
background-image: url('https://i.pinimg.com/originals/05/d9/93/05d99321de948f7f4c24164eec708a15.png');
background-repeat: no-repeat;
background-position: center 2px;
background-size: contain;
}
/*____________________________________________________________
###### Sociable Buttons Wrap
____________________________________________________________*/
.sociableDisplay__buttonsWrap {
@extend %horizontalCentering;
bottom: 2.2px;
width: 16px;
height: 2px;
}
.sociableDisplay__button {
float: left;
width: 7px;
height: 2px;
&:nth-child(1) {
margin-right: 2px;
background-color: $x-color-granite;
}
&:nth-child(2) {
background-color: $x-color-tomato;
}
}
/*____________________________________________________________
##### Sociable Keyboard
____________________________________________________________*/
.sociableKeyboard {
position: relative;
margin-left: -8%;
width: calc(100% + 16%);
height: 10%;
border-radius: 0 0 3px 3px;
background-color: $x-color-grideperlevy;
overflow: hidden;
}
/*____________________________________________________________
#### Intuitive Icon
____________________________________________________________*/
.intuitiveIcon {
@extend %centering;
width: 50px;
height: 59px;
}
/*____________________________________________________________
##### Intuitive Rays
____________________________________________________________*/
.intuitiveRays {
position: absolute;
top: -30px;
left: -30px;
width: 110px;
height: 110px;
svg {
position: absolute;
max-width: 100%;
max-height: 100%;
fill: none;
stroke: $palette-secondary;
stroke-width: 5px;
stroke-linecap: round;
animation: rotateRays 3s linear infinite;
}
.teeth {
position: absolute;
top: 19.32%;
left: 19.32%;
transform: translate(-19.32%, -19.32%);
}
}
/*____________________________________________________________
##### Intuitive Lamp
____________________________________________________________*/
.intuitiveLightBulb {
position: absolute;
width: 50px;
}
.intuitiveLightBulb__silhouette {
fill: $palette-secondary;
}
/*____________________________________________________________
##### Intuitive Lamp Circle
____________________________________________________________*/
.intuitiveLightBulbCircle {
@extend %horizontalCentering;
top: 8px;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: $x-color-white;
}
/*____________________________________________________________
##### Intuitive Brain
____________________________________________________________*/
.intuitiveBrain {
position: absolute;
top: 9px;
left: 9px;
width: 34px;
height: 34px;
opacity: .9;
background-image: url('https://i.pinimg.com/originals/56/68/37/566837724bf672f1f538df597d55604a.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/*____________________________________________________________
##### Intuitive Play
____________________________________________________________*/
.intuitivePlay {
position: absolute;
top: 35px;
left: -20px;
width: 20px;
height: 20px;
z-index: 1;
animation: levitation 5s linear infinite;
path {
fill: $palette-secondary;
}
}
/*____________________________________________________________
##### Intuitive Figures
____________________________________________________________*/
.intuitiveBubble {
position: absolute;
border-radius: 50%;
animation: levitation 5s linear infinite;
}
.intuitiveBubble_sm {
top: 50px;
left: 3px;
width: 7px;
height: 7px;
background-color: $x-color-grideperlevy;
animation-delay: 1.6s;
}
.intuitiveBubble_lg {
top: -12px;
left: 12px;
width: 13px;
height: 13px;
background-color: $x-color-aquamarine;
opacity: .8;
animation-delay: 2s;
}
.intuitiveRectangle {
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 12px;
border: 3px solid $x-color-granite;
animation: levitation 5s linear infinite .5s;
}
/*____________________________________________________________
##### Intuitive Dialog
____________________________________________________________*/
.intuitiveDialog {
position: absolute;
top: 2px;
left: -15px;
width: 25px;
height: 20px;
animation: levitation 5s linear infinite .8s;
}
.intuitiveDialog__cloud {
position: absolute;
width: 25px;
height: 15px;
background-color: $x-color-grideperlevy;
opacity: .8;
&:before {
content: "";
position: absolute;
bottom: -5px;
left: 5px;
width: 0;
height: 0;
border-top: 5px solid $x-color-grideperlevy;
border-right: 5px solid transparent;
}
}
.intuitiveDialog__lineWrap {
position: absolute;
top: 4px;
right: 7px;
width: 23px;
height: 6px;
}
.intuitiveDialog__line {
position: absolute;
width: 100%;
height: 2px;
overflow: hidden;
&:nth-child(2) {
bottom: 0;
right: 0px;
width: 15px;
}
&:after {
content: '';
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: $x-color-granite;
animation: slide 3.5s ease infinite;
}
@include animDelayChild(2, .3);
}
/*____________________________________________________________
##### Intuitive Landscape
____________________________________________________________*/
.landscape {
position: absolute;
top: 35px;
right: -26px;
width: 35px;
height: 25px;
animation: levitation 5s linear infinite 1.4s;
}
.landscapeShadow {
position: absolute;
bottom: 0;
right: 0;
width: 32px;
height: 22px;
background-color: $x-color-granite;
}
.landscapePicture {
position: relative;
width: 32px;
height: 22px;
overflow: hidden;
}
.landscapePicture__bg {
width: 100%;
height: 100%;
background-color: $x-color-aquamarine;
opacity: .8;
animation: changeDay 10s linear infinite;
}
.landscapePicture__mountainsWrap {
position: absolute;
bottom: 3px;
right: 3px;
width: 25px;
height: 13px;
}
.landscapePicture__mountain {
position: absolute;
bottom: 0;
&:nth-child(1) {
border-left: 6.5px solid transparent;
border-right: 6.5px solid transparent;
border-bottom: 8px solid $x-color-white;
}
&:nth-child(2) {
right: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 13px solid $x-color-white;
}
}
.landscapePicture__dayWrap {
position: absolute;
top: 7px;
left: 1px;
width: 30px;
height: 30px;
animation: rotateRays 10s linear infinite;
}
.landscapePicture__dayWrap,
.landscapePicture__sun,
.landscapePicture__moon {
border-radius: 50%;
}
.landscapePicture__sun,
.landscapePicture__moon {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.landscapePicture__sun {
top: -5px;
width: 5px;
height: 5px;
background-color: $x-color-white;
}
.landscapePicture__moon {
bottom: -4px;
width: 7px;
height: 7px;
box-shadow: 2px 2px 0 0 $x-color-amber;
transform: rotate(120deg);
}
/*____________________________________________________________
##### Intuitive Neck
____________________________________________________________*/
.intuitiveNeck {
@extend %horizontalCentering;
bottom: -3px;
width: 22px;
height: 4px;
background-color: $palette-secondary;
}
/*____________________________________________________________
##### Intuitive Base Housing
____________________________________________________________*/
.intuitiveBaseHousing {
@extend %horizontalCentering;
bottom: -17px;
width: 22px;
height: 14px;
border: solid $x-color-granite;
border-width: 0 2px 0 2px;
}
.intuitiveBaseHousing__line {
position: absolute;
left: -5px;
width: 28px;
height: 2px;
background-color: $x-color-granite;
$x: 2;
$y: 4px;
@while $x < 5 {
&:nth-child(#{$x}) {
top: $y;
}
$x: $x + 1;
$y: $y + 4;
}
}
.intuitiveBaseHousing__contact {
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 2px;
background-color: $x-color-granite;
}
/*____________________________________________________________
# Animation Pack
____________________________________________________________*/
@keyframes slide {
0% {
left: -100%;
}
22% {
left: 0%;
}
78% {
left: 0%;
}
100% {
left: 100%;
}
}
@keyframes rotateRays {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes changeDay {
0% {
background-color: $palette-tertiary;
}
25% {
background-color: $x-color-granite;
}
60% {
background-color: $x-color-granite;
}
75% {
background-color: $palette-tertiary;
}
100% {
background-color: $palette-tertiary;
}
}
@keyframes lineDiagram {
0% {
height: 10%;
}
50% {
height: 100%;
}
100% {
left: 10%;
}
}
@keyframes levitation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(6px);
}
100% {
transform: translateY(0);
}
}
/*____________________________________________________________
## Animation Illustration
____________________________________________________________*/
@keyframes openFolder {
0% {
left: 0;
transform: skew(0);
}
20% {
left: -5px;
height: 26px;
transform: skew(20deg);
}
80% {
left: -5px;
height: 26px;
transform: skew(20deg);
}
100% {
left: 0;
height: 31px;
transform: skew(0);
}
}
@keyframes openFile {
0% {
bottom: 0;
}
20% {
bottom: 10px;
}
80% {
bottom: 10px;
}
100% {
bottom: 0;
}
}
@keyframes scrollCode {
0% {
top: 0;
}
100% {
top: -20px;
}
}
/*____________________________________________________________
## Animation Icons
____________________________________________________________*/
@keyframes learnabilityScrollCode {
0% {
top: 0;
}
100% {
top: -18px;
}
}
@keyframes keyboardClick {
0% {
background-color: $x-color-white;
}
95% {
background-color: $x-color-white;
}
100% {
background-color: $x-color-black;
}
}
/*____________________________________________________________
# @media
____________________________________________________________*/
/*____________________________________________________________
## @media 1728px
____________________________________________________________*/
@media only screen and (max-width: 1728px) {
// Navigation
.navigation {
width: 1525px;
}
// Developer
.developerWrap {
width: 1525px;
height: 540px;
}
.illustration {
top: calc((-600px / 100) * 5);;
left: calc((-893px / 100) * 5);
transform: scale(.9);
}
.developerInfo {
width: 682px;
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 63px;
}
.developerInfo__title {
margin-bottom: 9px;
}
.developerInfo__subtitle {
margin-bottom: 36px;
font-size: 60px;
}
.developerInfo__paragraph {
margin-bottom: 36px;
font-size: 22px;
word-spacing: 7px;
line-height: 40px;
}
.developerInfo__link {
width: 135px;
height: 45px;
font-size: 16px;
word-spacing: 5px;
line-height: 41px;
}
// Developer Links
.devLinks {
width: 1525px;
}
}
/*____________________________________________________________
## @media 1600px
____________________________________________________________*/
@media only screen and (max-width: 1600px) {
// Navigation
.navigation {
width: 1417px;
}
// Developer
.developerWrap {
width: 1417px;
height: 540px;
}
.illustration {
top: calc((-600px / 100) * 8.333);
left: calc((-893px / 100) * 8.333);
transform: scale(.83);
}
.developerInfo {
width: 630px;
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 58px;
}
.developerInfo__title {
margin-bottom: 8px;
}
.developerInfo__subtitle {
margin-bottom: 33px;
font-size: 56px;
}
.developerInfo__paragraph {
margin-bottom: 33px;
font-size: 20px;
word-spacing: 6px;
line-height: 37px;
}
// Developer Links
.devLinks {
width: 1417px;
}
.socialList {
&:after {
height: 33px;
}
}
.socialList__item {
margin-bottom: 8px;
width: 17px;
height: 17px;
}
.gmail__name {
&:after {
height: 33px;
}
}
.gmail__link {
margin-left: 1px;
margin-bottom: 8px;
font-size: 12px;
}
// Icon Cards
.cardWrap {
width: 694px;
height: 555px;
}
.iconCard {
width: 220px;
height: 269px;
margin-bottom: 17px;
margin-right: 17px;
padding: 17px;
}
.iconWrap {
margin-bottom: 8px;
height: 92px;
}
.learnabilityIcon,
.fastIcon,
.dynamicIcon,
.responsiveIcon,
.intuitiveIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.83);
}
.sociableIcon {
position: absolute;
top: 42px;
left: 50%;
transform: translateX(-50%) scale(.83);
}
.iconTitle {
margin-bottom: 17px;
font-size: 15px;
}
.iconInfo {
font-size: 12px;
line-height: 21px;
}
}
/*____________________________________________________________
## @media 1440px
____________________________________________________________*/
@media only screen and (max-width: 1440px) {
// Navigation
.navigation {
top: 23px;
width: 1275px;
height: 42px;
}
.logo {
font-size: 38px;
&:after {
bottom: -2px;
height: 2px;
}
}
.navigation__links {
padding-top: 13px;
}
.navigation__item {
margin-right: 25px;
}
.navigation__link {
font-size: 15px;
&:before {
margin-right: 4px;
}
}
// Developer
.developerWrap {
width: 1275px;
height: 450px;
}
.illustration {
top: calc((-600px / 100) * 12.5);
left: calc((-893px / 100) * 12.5);
transform: scale(.75);
}
.developerInfo {
width: 568px;
}
.developerInfo__title {
font-size: 52px;
}
.developerInfo__title {
margin-bottom: 7px;
}
.developerInfo__subtitle {
margin-bottom: 30px;
font-size: 50px;
}
.developerInfo__paragraph {
margin-bottom: 30px;
font-size: 18px;
line-height: 34px;
}
.developerInfo__link {
width: 112px;
height: 38px;
font-size: 14px;
word-spacing: 4px;
line-height: 34px;
}
// Developer Links
.devLinks {
width: 1275px;
}
.socialList {
&:after {
height: 28px;
}
}
.socialList__item {
margin-bottom: 7px;
width: 15px;
height: 15px;
}
.gmail__name {
&:after {
height: 28px;
}
}
.gmail__link {
margin-bottom: 7px;
}
// Mouse Scroll Icon
.mouse {
bottom: 35px;
width: 22px;
height: 38px;
border-radius: 25px;
}
.mouse__scroller {
margin: 6px auto 0;
width: 2px;
height: 8px;
}
}
/*____________________________________________________________
## @media 1300px
____________________________________________________________*/
@media only screen and (max-width: 1300px) {
// Navigation
.navigation {
width: 1134px;
}
// Developer
.developerWrap {
width: 1134px;
height: 396px;
}
.illustration {
top: calc((-600px / 100) * 16.7);
left: calc((-893px / 100) * 16.7);
transform: scale(.66);
}
.developerInfo {
width: 505px;
}
.developerInfo__title {
font-size: 47px;
}
.developerInfo__title {
margin-bottom: 6px;
}
.developerInfo__subtitle {
margin-bottom: 27px;
font-size: 45px;
}
.developerInfo__paragraph {
margin-bottom: 27px;
font-size: 16px;
line-height: 30px;
}
.developerInfo__link {
width: 100px;
height: 33px;
font-size: 12px;
word-spacing: 4px;
line-height: 28px;
border-radius: 3px;
}
// Developer Links
.devLinks {
width: 1134px;
}
}
/*____________________________________________________________
## @media 1180px
____________________________________________________________*/
@media only screen and (max-width: 1180px) {
// Navigation
.navigation {
top: 17px;
width: 1040px;
height: 30px;
}
.logo {
font-size: 26px;
&:after {
bottom: -2px;
height: 2px;
}
}
.navigation__links {
padding-top: 9.5px;
}
.navigation__item {
margin-right: 20px;
}
.navigation__link {
font-size: 11px;
&:before {
margin-right: 3px;
}
}
// Developer
.developerWrap {
width: 1040px;
height: 366px;
}
.illustration {
top: calc((-600px / 100) * 19.25);
left: calc((-893px / 100) * 19.25);
transform: scale(.61);
}
.developerInfo {
width: 466px;
}
.developerInfo__title {
font-size: 43px;
}
.developerInfo__subtitle {
font-size: 41px;
margin-bottom: 24px;
}
.developerInfo__paragraph {
margin-bottom: 24px;
font-size: 14px;
line-height: 27px;
}
.developerInfo__link {
width: 92px;
height: 30px;
font-size: 11px;
word-spacing: 3px;
line-height: 25px;
border-radius: 2px;
}
// Developer Links
.devLinks {
width: 1040px;
}
.socialList {
&:after {
height: 22px;
}
}
.socialList__item {
margin-bottom: 6px;
width: 12px;
height: 12px;
}
.gmail__name {
&:after {
height: 22px;
}
}
.gmail__link {
margin-bottom: 6px;
font-size: 10px;
}
// Mouse Scroll Icon
.mouse {
bottom: 28px;
width: 18px;
height: 30px;
border-radius: 25px;
}
.mouse__scroller {
margin: 5px auto 0;
width: 2px;
height: 6px;
}
// Icon Cards
.cardWrap {
width: 513px;
height: 410px;
}
.iconCard {
width: 163px;
height: 199px;
margin-bottom: 12px;
margin-right: 12px;
padding: 12px;
}
.iconWrap {
margin-bottom: 6px;
height: 68px;
}
.learnabilityIcon,
.fastIcon,
.dynamicIcon,
.responsiveIcon,
.intuitiveIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.61);
}
.sociableIcon {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%) scale(.61);
}
.iconTitle {
margin-bottom: 12px;
font-size: 11px;
}
.iconInfo {
font-size: 9px;
line-height: 15px;
}
}
/*____________________________________________________________
## @media 1080px
____________________________________________________________*/
@media only screen and (max-width: 1080px) {
// Navigation
.navigation {
top: 15px;
width: 920px;
}
// Developer
.developerWrap {
width: 920px;
height: 336px;
}
.illustration {
top: calc((-600px / 100) * 21.875);
left: calc((-893px / 100) * 21.875);
transform: scale(.56);
}
.developerInfo {
width: 409px;
}
.developerInfo__title {
font-size: 38px;
}
.developerInfo__subtitle {
font-size: 36px;
}
.developerInfo__subtitle {
margin-bottom: 21px;
}
.developerInfo__paragraph {
margin-bottom: 21px;
font-size: 13px;
line-height: 24px;
}
// Developer Links
.devLinks {
width: 920px;
}
}
/*____________________________________________________________
## @media 960px
____________________________________________________________*/
@media only screen and (max-width: 960px) {
// Navigation
.navigation {
width: 850px;
}
// Developer
.developerWrap {
width: 850px;
height: 300px;
}
.illustration {
top: calc((-600px / 100) * 25);
left: calc((-893px / 100) * 25);
transform: scale(.50);
}
.developerInfo {
width: 378px;
}
.developerInfo__title {
font-size: 35px;
}
.developerInfo__subtitle {
font-size: 33px;
}
.developerInfo__subtitle {
margin-bottom: 20px;
}
.developerInfo__paragraph {
margin-bottom: 20px;
font-size: 12px;
line-height: 22.5px;
}
// Developer Links
.devLinks {
width: 850px;
}
}
/*____________________________________________________________
## @media 890px
____________________________________________________________*/
@media only screen and (max-width: 890px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer
.developerWrap {
width: 787px;
height: 278px;
}
.illustration {
top: calc((-600px / 100) * 26.85);
left: calc((-893px / 100) * 26.85);
transform: scale(.463);
}
.developerInfo {
width: 350px;
}
.developerInfo__title {
font-size: 32px;
}
.developerInfo__subtitle {
font-size: 30px;
}
.developerInfo__subtitle {
margin-bottom: 18px;
}
.developerInfo__paragraph {
margin-bottom: 18px;
font-size: 12px;
line-height: 21px;
}
// Developer Links
.devLinks {
display: none;
}
}
/*____________________________________________________________
## @media 830px
____________________________________________________________*/
@media only screen and (max-width: 830px) {
// Developer
.illustration {
&:after {
bottom: -1px;
height: 6px;
}
}
.developerWrap {
width: 680px;
height: 240px;
}
.illustration {
top: calc((-600px / 100) * 30);
left: calc((-893px / 100) * 30);
transform: scale(.4);
}
.developerInfo {
width: 303px;
}
.developerInfo__title {
font-size: 28px;
}
.developerInfo__subtitle {
font-size: 26px;
}
.developerInfo__subtitle {
margin-bottom: 16px;
}
.developerInfo__paragraph {
margin-bottom: 16px;
font-size: 12px;
line-height: 18px;
}
.developerInfo__link {
width: 60px;
height: 20px;
font-size: 8px;
word-spacing: 3px;
line-height: 18px;
border-width: 1px;
border-radius: 2px;
}
}
/*____________________________________________________________
## @media 720px
____________________________________________________________*/
@media only screen and (max-width: 720px) {
// Developer
.developerWrap {
width: 600px;
height: 210px;
}
.illustration {
top: calc((-600px / 100) * 32.5);
left: calc((-893px / 100) * 32.5);
transform: scale(.35);
}
.developerInfo {
width: 267px;
}
.developerInfo__title {
font-size: 24px;
}
.developerInfo__subtitle {
font-size: 22px;
}
.developerInfo__subtitle {
margin-bottom: 14px;
}
.developerInfo__paragraph {
margin-bottom: 14px;
font-size: 12px;
line-height: 16px;
}
}
/*____________________________________________________________
## @media 642px
____________________________________________________________*/
@media only screen and (max-width: 642px) {
// Developer
.developerWrap {
width: 536px;
height: 189px;
}
.illustration {
top: calc((-600px / 100) * 34.3);
left: calc((-893px / 100) * 34.3);
transform: scale(.314);
}
.developerInfo {
width: 240px;
}
.developerInfo__title {
font-size: 22px;
}
.developerInfo__subtitle {
font-size: 20px;
}
.developerInfo__title {
margin-bottom: 4px;
}
.developerInfo__subtitle {
margin-bottom: 12px;
}
.developerInfo__paragraph {
margin-bottom: 12px;
}
.mouse {
bottom: 15px;
}
// Icon Cards
.about {
padding-top: 30px;
height: auto;
}
.cardWrap {
position: relative;
top: 0;
left: 0;
transform: translate(0);
margin: 0 auto;
width: 338px;
height: auto;
}
.iconCard {
&:nth-child(3n) {
margin-right: 12px;
}
&:nth-child(2n) {
margin-right: 0;
}
}
}
/*____________________________________________________________
## @media 576px
____________________________________________________________*/
@media only screen and (max-width: 576px) {
// Developer
.developerWrap {
width: 414px;
height: 536px;
}
.illustration {
top: calc((-600px / 100) * 26.85);
left: calc((-893px / 100) * 26.85);
transform: scale(.463);
}
.developerInfo {
bottom: 0;
width: 100%;
}
.developerInfo__title {
font-size: 32px;
}
.developerInfo__subtitle {
font-size: 30px;
}
.developerInfo__subtitle {
margin-bottom: 18px;
}
.developerInfo__paragraph {
margin-bottom: 18px;
font-size: 12px;
line-height: 21px;
}
.developerInfo__link {
width: 92px;
height: 30px;
font-size: 11px;
word-spacing: 3px;
line-height: 25px;
border-radius: 2px;
}
.about {
padding-top: 0;
height: 100vh;
}
.cardWrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: 338px;
height: auto;
}
}
/*____________________________________________________________
## @media iPad (min-width: 415px) and (max-width: 1025px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 415px) and (max-width: 1025px) and (orientation: portrait) {
// Navigation
.navigation {
top: 20px;
left: 30px;
transform: translate(0);
width: 40px;
height: 50px;
}
.logo {
font-size: 44px;
&:after {
bottom: -3px;
height: 3px;
}
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
top: 17px;
width: 50px;
}
// Developer
.developerWrap {
width: 893px;
height: 1045px;
}
.illustration {
top: 0;
left: 0;
transform: scale(1);
}
.developerInfo {
bottom: 0;
width: 100%;
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 70px;
}
.developerInfo__title{
margin-bottom: 10px;
}
.developerInfo__subtitle {
margin-bottom: 40px;
}
.developerInfo__paragraph {
margin-bottom: 40px;
font-size: 24px;
word-spacing: 8px;
line-height: 45px;
}
.developerInfo__link {
width: 150px;
height: 50px;
font-size: 18px;
word-spacing: 6px;
line-height: 46px;
border-radius: 4px;
}
// Developer Links
.devLinks {
display: none;
}
// Icons
.cardWrap {
width: 835px;
height: 666px;
}
.iconCard {
width: 265px;
height: 323px;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
}
.iconWrap {
margin-bottom: 10px;
height: 110px;
}
.sociableIcon {
top: 50px;
}
.iconTitle {
margin-bottom: 20px;
font-size: 18px;
}
.iconInfo {
font-size: 14px;
line-height: 25px;
}
}
/*____________________________________________________________
## @media iPad (min-width: 415px) and (max-width: 910px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 415px) and (max-width: 910px) and (orientation: portrait) {
// Developer
.developerWrap {
width: 795px;
height: 992px;
}
.illustration {
top: calc((-600px / 100) * 5.5);
left: calc((-893px / 100) * 5.5);
transform: scale(.89);
}
.developerInfo__title{
margin-bottom: 8px;
}
.developerInfo__subtitle {
margin-bottom: 35px;
}
.developerInfo__paragraph {
margin-bottom: 35px;
font-size: 22px;
word-spacing: 7px;
line-height: 40px;
}
// Icons
.cardWrap {
width: 550px;
height: auto;
}
.iconCard {
&:nth-child(2n) {
margin-right: 0;
}
&:nth-child(3n) {
margin-right: 20px;
}
&:nth-child(6n) {
margin-right: 0;
}
}
.learnabilityIcon,
.fastIcon,
.dynamicIcon,
.responsiveIcon,
.intuitiveIcon {
transform: translate(-50%, -50%) scale(1);
}
.sociableIcon {
transform: translateX(-50%) scale(1);
}
}
/*____________________________________________________________
## @media iPad (min-width: 415px) and (max-width: 834px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 415px) and (max-width: 834px) and (orientation: portrait) {
// Developer
.developerWrap {
width: 727px;
height: 917px;
}
.illustration {
top: calc((-600px / 100) * 9.3);
left: calc((-893px / 100) * 9.3);
transform: scale(.814);
border-bottom: 3px solid $x-color-granite;
&:after {
display: none;
}
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 60px;
}
.developerInfo__title{
margin-bottom: 8px;
}
.developerInfo__subtitle {
margin-bottom: 30px;
}
.developerInfo__paragraph {
margin-bottom: 30px;
font-size: 24px;
word-spacing: 8px;
}
.developerInfo__link {
width: 150px;
height: 50px;
font-size: 18px;
word-spacing: 6px;
line-height: 46px;
border-radius: 4px;
}
}
/*____________________________________________________________
## @media iPad (min-width: 415px) and (max-width: 768px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 415px) and (max-width: 768px) and (orientation: portrait) {
// Developer
.developerWrap {
width: 670px;
height: 877px;
}
.illustration {
top: calc((-600px / 100) * 12.5);
left: calc((-893px / 100) * 12.5);
transform: scale(.75);
}
.developerInfo__title{
margin-bottom: 7px;
}
.developerInfo__paragraph {
font-size: 22px;
word-spacing: 7px;
}
// Icon Cards
.cardWrap {
width: 338px;
}
.iconCard {
width: 163px;
height: 199px;
margin-bottom: 12px;
margin-right: 12px;
padding: 12px;
&:nth-child(3n) {
margin-right: 12px;
}
&:nth-child(6n) {
margin-right: 0;
}
}
.iconWrap {
margin-bottom: 6px;
height: 68px;
}
.learnabilityIcon,
.fastIcon,
.dynamicIcon,
.responsiveIcon,
.intuitiveIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.61);
}
.sociableIcon {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%) scale(.61);
}
.iconTitle {
margin-bottom: 12px;
font-size: 11px;
}
.iconInfo {
font-size: 9px;
line-height: 15px;
}
}
/*____________________________________________________________
## @media iPad (min-width: 415px) and (max-width: 685px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 415px) and (max-width: 685px) and (orientation: portrait) {
// Navigation
.navigation {
top: 20px;
left: 30px;
width: 30px;
height: 30px;
}
.logo {
font-size: 26px;
&:after {
bottom: -2px;
height: 2px;
}
}
// Burger
.burgerWrap {
display: block;
top: 9px;
width: 30px;
}
// Developer
.developerWrap {
width: 580px;
height: 734px;
}
.illustration {
top: calc((-600px / 100) * 17.5);
left: calc((-893px / 100) * 17.5);
transform: scale(.65);
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 45px;
}
.developerInfo__subtitle {
margin-bottom: 25px;
}
.developerInfo__paragraph {
margin-bottom: 20px;
font-size: 20px;
line-height: 35px;
}
.developerInfo__link {
width: 98px;
height: 32px;
font-size: 12px;
word-spacing: 6px;
line-height: 28px;
border-radius: 4px;
}
}
/*____________________________________________________________
## @media iPad (min-width: 415px) and (max-width: 595px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 415px) and (max-width: 595px) and (orientation: portrait) {
// Developer
.developerWrap {
width: 473px;
height: 650px;
}
.illustration {
top: calc((-600px / 100) * 23.5);
left: calc((-893px / 100) * 23.5);
transform: scale(.53);
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 40px;
}
.developerInfo__subtitle {
margin-bottom: 20px;
}
.developerInfo__paragraph {
font-size: 18px;
word-spacing: 4px;
line-height: 30px;
}
// Icons
.about {
height: 100vh;
}
.cardWrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/*____________________________________________________________
## @media iPad (min-width: 415px) and (max-width: 490px) (portrait)
____________________________________________________________*/
@media only screen and (min-width: 415px) and (max-width: 490px) and (orientation: portrait) {
// Navigation
.navigation {
top: 15px;
}
// Burger
.burgerWrap {
top: 4px;
}
// Developer
.developerWrap {
width: 402px;
height: 560px;
}
.illustration {
top: calc((-600px / 100) * 27.5);
left: calc((-893px / 100) * 27.5);
transform: scale(.45);
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 33px;
}
.developerInfo__subtitle {
margin-bottom: 12px;
}
.developerInfo__paragraph {
margin-bottom: 13px;
font-size: 16px;
word-spacing: 3px;
line-height: 28px;
}
}
/*____________________________________________________________
## @media 414px
____________________________________________________________*/
@media only screen and (max-width: 414px) and (orientation: portrait) {
// Developer
.developerWrap {
width: 358px;
height: 560px;
}
.illustration {
top: calc((-600px / 100) * 30);
left: calc((-893px / 100) * 30);
transform: scale(.4);
}
.developerInfo__paragraph {
margin-bottom: 18px;
font-size: 16px;
line-height: 26px;
}
}
/*____________________________________________________________
## @media 375px
____________________________________________________________*/
@media only screen and (max-width: 375px) and (orientation: portrait) {
// Developer
.developerWrap {
width: 327px;
height: 530px;
}
.illustration {
top: calc((-600px / 100) * 31.69);
left: calc((-893px / 100) * 31.69);
transform: scale(.3662);
}
.developerInfo__title{
font-size: 30px;
}
.developerInfo__subtitle {
font-size: 28px;
}
// Icon Cards
.about {
padding-top: 30px;
height: auto;
}
.cardWrap {
position: relative;
top: 0;
left: 0;
transform: translate(0);
margin: 0 auto;
width: 265px;
height: auto;
}
.iconCard {
width: 265px;
height: 323px;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
&:nth-child(3n) {
margin-right: 12px;
}
&:nth-child(2n) {
margin-right: 0;
}
}
.iconWrap {
margin-bottom: 10px;
height: 110px;
}
.learnabilityIcon,
.fastIcon,
.dynamicIcon,
.responsiveIcon,
.intuitiveIcon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
}
.sociableIcon {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%) scale(1);
}
.iconTitle {
margin-bottom: 20px;
font-size: 18px;
}
.iconInfo {
font-size: 14px;
line-height: 25px;
}
}
/*____________________________________________________________
## @media 320px
____________________________________________________________*/
@media only screen and (max-width: 320px) and (orientation: portrait) {
// Developer
.developerWrap {
width: 278px;
height: 445px;
}
.illustration {
top: calc((-600px / 100) * 34.45);
left: calc((-893px / 100) * 34.45);
transform: scale(.311);
}
.developerInfo__title,
.developerInfo__subtitle {
font-size: 26px;
}
.developerInfo__subtitle {
margin-bottom: 14px;
font-size: 24px;
}
.developerInfo__paragraph {
margin-bottom: 14px;
font-size: 14px;
line-height: 24px;
}
.developerInfo__paragraphPost {
display: none;
}
}
/*____________________________________________________________
## @media (min-width: 1601px) and (max-width: 5000px) and (max-height: 940px)
____________________________________________________________*/
@media only screen and (min-width: 1601px) and (max-width: 5000px) and (max-height: 940px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
height: 50px;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 1000px;
}
// Icons
.about {
height: 1000px;
}
}
/*____________________________________________________________
## @media (min-width: 1441px) and (max-width: 1600px) and (max-height: 700px)
____________________________________________________________*/
@media only screen and (min-width: 1441px) and (max-width: 1600px) and (max-height: 700px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
height: 50px;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 900px;
}
// Icons
.about {
height: 900px;
}
}
/*____________________________________________________________
## @media (min-width: 1301px) and (max-width: 1440px) and (max-height: 670px)
____________________________________________________________*/
@media only screen and (min-width: 1301px) and (max-width: 1440px) and (max-height: 670px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 720px;
}
// Icons
.about {
height: 720px;
}
}
/*____________________________________________________________
## @media (min-width: 1181px) and (max-width: 1300px) and (max-height: 615px)
____________________________________________________________*/
@media only screen and (min-width: 1181px) and (max-width: 1300px) and (max-height: 615px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 700px;
}
// Icons
.about {
height: 700px;
}
}
/*____________________________________________________________
## @media (min-width: 1081px) and (max-width: 1180px) and (max-height: 540px)
____________________________________________________________*/
@media only screen and (min-width: 1081px) and (max-width: 1180px) and (max-height: 540px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 600px;
}
// Icons
.about {
height: 600px;
}
}
/*____________________________________________________________
## @media (min-width: 961px) and (max-width: 1080px) and (max-height: 515px)
____________________________________________________________*/
@media only screen and (min-width: 961px) and (max-width: 1080px) and (max-height: 515px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 520px;
}
// Icons
.about {
height: 520px;
}
}
/*____________________________________________________________
## @media (min-width: 891px) and (max-width: 960px) and (max-height: 470px)
____________________________________________________________*/
@media only screen and (min-width: 891px) and (max-width: 960px) and (max-height: 470px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 500px;
}
// Icons
.about {
height: 500px;
}
}
/*____________________________________________________________
## (min-width: 720px) and (max-width: 890px) and (max-height: 425px)
____________________________________________________________*/
@media only screen and (min-width: 720px) and (max-width: 890px) and (max-height: 425px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 450px;
}
// Icons
.about {
height: 450px;
}
}
/*____________________________________________________________
## (min-width: 720px) and (max-width: 890px) and (max-height: 425px)
____________________________________________________________*/
@media only screen and (min-width: 720px) and (max-width: 890px) and (max-height: 425px) {
// Navigation
.navigation {
top: 15px;
left: 30px;
transform: translate(0);
width: 30px;
}
.navigation__links {
display: none;
}
// Burger
.burgerWrap {
display: block;
}
// Developer Links
.devLinks {
display: none;
}
// Developer
.home {
height: 450px;
}
// Icons
.about {
height: 450px;
}
}
/*____________________________________________________________
## (min-width: 376px) and (max-width: 414px) and (max-height: 730px)
____________________________________________________________*/
@media only screen and (min-width: 376px) and (max-width: 414px) and (max-height: 730px) {
// Developer
.home {
height: 736px;
}
// Icons
.about {
height: 736px;
}
}
/*____________________________________________________________
## (min-width: 321px) and (max-width: 375px) and (max-height: 660px)
____________________________________________________________*/
@media only screen and (min-width: 321px) and (max-width: 375px) and (max-height: 660px) {
// Developer
.home {
height: 667px;
}
}
/*____________________________________________________________
## (min-width: 321px) and (max-width: 375px) and (max-height: 660px)
____________________________________________________________*/
@media only screen and (max-width: 320px) and (max-height: 560px) {
// Developer
.home {
height: 568px;
}
}// Preloader
TweenMax.to(".preloader", 1.6, {
top: "-120%",
ease: Expo.easeInOut,
delay: .5
});
// Page
TweenMax.to(".illustration__curtain", 2, {
y: "-100%",
ease: Expo.easeInOut,
delay: .6
});
var navigationTl = new TweenMax.staggerFrom(".logo, .navigation__links", 2, {
opacity: 0,
y: 30,
ease: Expo.easeInOut,
delay: .6
}, 0.1);
var devLinkTl = new TweenMax.staggerFrom(".social, .mouse, .gmail", 2, {
opacity: 0,
y: 30,
ease: Expo.easeInOut,
delay: .7
}, 0.1);
// Title
function titleRise(targetsName) {
anime.timeline().add({
targets: targetsName,
translateY: [200,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 2000,
delay: (el, i) => { return 1200 + 50 * i }
});
}
var textWrapper = document.querySelector('.developerInfo__greeting');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
titleRise('.developerInfo__greeting .letter');
var textWrapper = document.querySelector('.developerInfo__name');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
titleRise('.developerInfo__name .letter');
var textWrapper = document.querySelector('.developerInfo__subtitle');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
titleRise('.developerInfo__subtitle .letter');
var paragraphTl = new TweenMax.staggerFrom(".developerInfo__paragraph, .developerInfo__link", 2, {
opacity: 0,
y: 30,
ease: Expo.easeInOut,
delay: .6
}, 0.1);
(function() {
var popupMenu = document.querySelector('.popupMenu'),
revealer = new RevealFx(popupMenu),
burger = document.querySelector('.burgerWrap');
burger.onclick = function() {
if (burger.classList.contains('js-burgerWrap_close') === true) {
revealer.reveal({
bgcolor: '#f7e0b5',
direction: 'tb',
duration: 700,
onCover: function(contentEl, revealerEl) {
popupMenu.classList.add('js-popupMenu_open');
contentEl.style.opacity = 1;
burger.classList.remove('js-burgerWrap_close');
}
});
} else {
popupMenu.classList.remove('js-popupMenu_open');
revealer.reveal({
bgcolor: '#f7e0b5',
direction: 'bt',
duration: 700,
onCover: function(contentEl, revealerEl) {
popupMenu.classList.remove('js-popupMenu_open');
contentEl.style.opacity = 0;
burger.classList.add('js-burgerWrap_close');
}
});
}
}
popupMenu.addEventListener('submit', function(ev) {ev.preventDefault();});
})();
function cardinal(data, closed, tension) {
if (data.length < 1) return "M0 0";
if (tension == null) tension = 1;
var size = data.length - (closed ? 0 : 1);
var path = "M" + data[0].x + " " + data[0].y + " C";
for (var i = 0; i < size; i++) {
var p0, p1, p2, p3;
if (closed) {
p0 = data[(i - 1 + size) % size];
p1 = data[i];
p2 = data[(i + 1) % size];
p3 = data[(i + 2) % size];
} else {
p0 = i == 0 ? data[0] : data[i - 1];
p1 = data[i];
p2 = data[i + 1];
p3 = i == size - 1 ? p2 : data[i + 2];
}
var x1 = p1.x + (p2.x - p0.x) / 6 * tension;
var y1 = p1.y + (p2.y - p0.y) / 6 * tension;
var x2 = p2.x - (p3.x - p1.x) / 6 * tension;
var y2 = p2.y - (p3.y - p1.y) / 6 * tension;
path += " " + x1 + " " + y1 + " " + x2 + " " + y2 + " " + p2.x + " " + p2.y;
}
return closed ? path + "z" : path;
}
function random(min, max) {
if (max == null) { max = min; min = 0; }
if (min > max) { var tmp = min; min = max; max = tmp; }
return min + (max - min) * Math.random();
}
function createBlob(options) {
var points = [];
var path = options.element;
var slice = (Math.PI * 2) / options.numPoints;
var startAngle = random(Math.PI * 2);
var tl = new TimelineMax({
onUpdate: update
});
for (var i = 0; i < options.numPoints; i++) {
var angle = startAngle + i * slice;
var duration = random(options.minDuration, options.maxDuration);
var point = {
x: options.centerX + Math.cos(angle) * options.minRadius,
y: options.centerY + Math.sin(angle) * options.minRadius
};
var tween = TweenMax.to(point, duration, {
x: options.centerX + Math.cos(angle) * options.maxRadius,
y: options.centerY + Math.sin(angle) * options.maxRadius,
repeat: -1,
yoyo: true,
ease: Sine.easeInOut
});
tl.add(tween, -random(duration));
points.push(point);
}
options.tl = tl;
options.points = points;
function update() {
path.setAttribute("d", cardinal(points, true, 1));
}
return options;
}
var illustrationBlob = createBlob({
element: document.querySelector("#blob__path-js"),
numPoints: 20,
centerX: 500,
centerY: 500,
minRadius: 450,
maxRadius: 475,
minDuration: 2,
maxDuration: 2
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
- https://rawcdn.githack.com/Kerthin/portfolio-templateSait/6b0b575aca809f315a176dcb531f9e2ac56a6783/bower_components/anime/TweenMax.min.js
- https://rawcdn.githack.com/Kerthin/portfolio-templateSait/6b0b575aca809f315a176dcb531f9e2ac56a6783/bower_components/anime/anime.2.0.2.min.js
- https://rawcdn.githack.com/Kerthin/portfolio-templateSait/6b0b575aca809f315a176dcb531f9e2ac56a6783/bower_components/revealer/revealer.js