basic animation
This commit is contained in:
parent
fce90d289d
commit
49df3568e3
64
assets/alcohol-cerebellum.svg
Normal file
64
assets/alcohol-cerebellum.svg
Normal file
@ -0,0 +1,64 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1562px" height="1089px" viewBox="0 0 1562 1089" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Alcohol-Cerebellum</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#FFF9D5" offset="0%"></stop>
|
||||
<stop stop-color="#FDBED2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Human-with-Brain" transform="translate(-7.000000, 26.000000)">
|
||||
<polygon id="brain-projection" fill-opacity="0.2" fill="#F489A8" points="323 421.284689 581.224434 159.576967 800.159533 276.683972"></polygon>
|
||||
<g id="human" transform="translate(0.000000, 354.000000)" fill-rule="nonzero">
|
||||
<g id="Head/Front/Pony" transform="translate(268.114447, 88.570247) rotate(15.000000) translate(-268.114447, -88.570247) translate(192.614447, 17.570247)">
|
||||
<g id="Head" transform="translate(79.547235, 18.873244)" fill="#D4A181">
|
||||
<path d="M13.8970375,57.9918034 C6.14659341,48.8975134 0.900930773,37.7523354 1.77748408,25.2638435 C4.30307823,-10.7189789 54.4098087,-2.80321638 64.1566052,15.3578224 C73.9034016,33.5188613 72.7452289,79.5858422 60.1483628,82.8317265 C55.1247501,84.1261807 44.4229613,80.9552864 33.5310371,74.3925099 L40.3676886,122.742421 L5.68434189e-14,122.742421 L13.8970375,57.9918034 Z" id="Shape"></path>
|
||||
</g>
|
||||
<path d="M107.415611,74.3348754 C102.409852,83.9401414 95.4866005,91.1735742 88.5699832,91.1735742 C75.4324609,91.1735742 66.0913396,73.6151524 66.0913396,54.7368454 C66.0913396,54.0735605 66.1044867,53.4146879 66.1304266,52.7607365 C52.2332711,62.2939735 41.5229044,81.085156 23.134645,81.085156 C-1.88241653,81.085156 -11.8177346,30.6430653 23.134645,30.6430653 C46.9049188,30.6430653 58.5973745,34.1075645 68.6739871,39.2307419 C70.661423,33.6298018 73.6919351,28.9207853 77.3976495,25.6323182 C78.2891382,24.629114 79.6558903,23.6692826 81.4191527,22.7794699 C82.4971418,22.1898839 83.6126695,21.7096897 84.7591669,21.3483264 C90.8362363,19.115849 99.6384939,17.5412192 109.470799,17.1979868 C111.306804,17.1338944 113.109977,17.1151391 114.869045,17.1387656 C114.897674,7.87704148 122.41718,0.377810901 131.688834,0.377810901 C140.978191,0.377810901 148.508704,7.90570865 148.508704,17.1918412 C148.508704,26.1723685 141.465691,33.5084833 132.600047,33.9816175 C127.528452,35.5459575 121.01236,36.6945269 113.78608,37.1788728 C114.487678,39.8163871 114.868963,42.8127028 114.868963,46.1986701 C114.868963,49.1884446 114.538856,52.3592635 113.931017,55.578795 C112.363722,53.7165414 110.268061,52.5013046 108.141015,52.5013046 C102.190875,52.5013046 98.0490931,57.3944382 98.0490931,62.5897228 C98.0490931,69.1833522 101.856924,73.9533609 107.415611,74.3348754 Z" id="hair" fill="#191847"></path>
|
||||
</g>
|
||||
<g id="Bottom/Standing/Jogging" transform="translate(6.451220, 306.465656)">
|
||||
<polygon id="Leg" fill="#BA8B72" points="220.271118 0 345.25354 208.8755 438.954399 385.46213 459.136733 385.46213 302.139629 8.55897865e-13"></polygon>
|
||||
<g id="Accessories/Shoe/Flat-Sneaker" transform="translate(423.722365, 366.844100)" fill="#E4E4E4">
|
||||
<path d="M2.89177806,10.4659743 C1.01004746,15.487462 0.0691821523,19.2446952 0.0691821523,21.737674 C0.0691821523,24.769725 0.574474937,29.1942412 1.58506052,35.0112229 L96.4521768,35.0112229 C98.9174368,26.8639968 97.4943458,22.4655716 92.1829036,21.8159472 C86.8714613,21.166323 82.4591561,20.5797642 78.9459877,20.0562711 L34.8526615,0.406071447 C34.0042182,0.0279624531 33.0097947,0.409005088 32.6315543,1.25715376 C32.6250838,1.27166316 32.6188192,1.28626365 32.6127624,1.30095056 L29.7784774,8.17383657 C24.8614711,10.4671982 20.8658929,11.613879 17.7917431,11.613879 C15.2940693,11.613879 11.8447606,10.6054991 7.44381711,8.58873941 L7.44382631,8.58871926 C5.75494204,7.81477754 3.75820917,8.55600971 2.98399862,10.2443076 C2.95062901,10.3170756 2.91986922,10.3910117 2.89177806,10.4659743 Z" id="shoe"></path>
|
||||
</g>
|
||||
<path d="M412.931054,357.185302 L451.852327,345.415481 C434.799857,294.455494 413.899632,238.375896 389.151654,177.176689 C364.403676,115.977481 337.825267,56.9185846 309.41643,0 L199.48861,0 C231.073129,71.9993958 264.556953,137.420089 299.940086,196.26208 C335.323217,255.10407 372.986873,308.745145 412.931054,357.185302 Z" id="Pant" fill="#DB2721"></path>
|
||||
<path d="M212.05735,0 C200.261356,73.4002851 177.510114,167.177646 175.363011,170.071643 C173.931608,172.000975 122.400753,189.262422 20.7704426,221.855984 L25.1300702,239.646906 C146.323976,222.166768 210.18283,208.604957 216.706629,198.961474 C226.492329,184.496252 275.353646,70.2206647 294.278547,0 L212.05735,0 Z" id="Leg" fill="#D4A181"></path>
|
||||
<path d="M56.4952135,206.477094 L64.1742228,235.130658 C154.820204,243.078115 210.360998,237.335579 230.796607,217.903049 C251.232214,198.47052 274.522776,125.83617 300.66829,-2.27373675e-13 L195.845548,-2.27373675e-13 C179.280366,103.042891 170.01935,156.72715 168.062503,161.052777 C166.105655,165.378403 128.916559,180.519842 56.4952135,206.477094 Z" id="Pant" fill="#FF4133"></path>
|
||||
<g id="Accessories/Shoe/Flat-Sneaker" transform="translate(26.332069, 261.144369) rotate(80.000000) translate(-26.332069, -261.144369) translate(-22.667931, 243.144369)" fill="#E4E4E4">
|
||||
<path d="M2.89177806,10.4659743 C1.01004746,15.487462 0.0691821523,19.2446952 0.0691821523,21.737674 C0.0691821523,24.769725 0.574474937,29.1942412 1.58506052,35.0112229 L96.4521768,35.0112229 C98.9174368,26.8639968 97.4943458,22.4655716 92.1829036,21.8159472 C86.8714613,21.166323 82.4591561,20.5797642 78.9459877,20.0562711 L34.8526615,0.406071447 C34.0042182,0.0279624531 33.0097947,0.409005088 32.6315543,1.25715376 C32.6250838,1.27166316 32.6188192,1.28626365 32.6127624,1.30095056 L29.7784774,8.17383657 C24.8614711,10.4671982 20.8658929,11.613879 17.7917431,11.613879 C15.2940693,11.613879 11.8447606,10.6054991 7.44381711,8.58873941 L7.44382631,8.58871926 C5.75494204,7.81477754 3.75820917,8.55600971 2.98399862,10.2443076 C2.95062901,10.3170756 2.91986922,10.3910117 2.89177806,10.4659743 Z" id="shoe"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Body/Trench-Coat" transform="translate(247.325447, 318.108624) rotate(10.000000) translate(-247.325447, -318.108624) translate(29.825447, 128.108624)">
|
||||
<path d="M342.193849,151.736936 L392.967353,194.766814 C407.209659,199.697172 418.996701,205.416651 428.328479,211.925253 C430.482512,214.181709 432.966159,218.620086 423.47622,217.219658 C413.986281,215.819228 403.941286,214.772837 402.397212,217.934051 C400.853137,221.095265 406.354835,225.389393 403.386555,229.592841 C401.4077,232.395138 393.539152,224.471598 379.780912,205.822218 L328.317158,180.14696 L342.193849,151.736936 Z M101.13455,118.441789 L130.310098,125.855951 C91.2549921,191.491634 70.3696947,226.179344 67.6542058,229.919085 C61.5443554,238.333502 65.9819693,254.573792 67.4896313,263.082596 C55.1173528,265.287249 60.9021852,247.144197 45.2326965,250.174661 C30.930314,252.940728 18.4877767,261.310541 5.95889725,248.486993 C4.41854514,246.910413 3.47813929,242.185444 9.12201219,240.082978 C23.1829578,234.844972 44.0802265,224.752351 47.6009616,220.593393 C52.4021131,214.921912 70.2466425,180.871377 101.13455,118.441789 Z" id="Skin" fill="#D4A181" transform="translate(217.547299, 190.855379) rotate(-4.000000) translate(-217.547299, -190.855379) "></path>
|
||||
<path d="M351.659196,147.421891 C358.562224,146.926484 366.071026,148.06965 374.121493,150.781215 C378.082885,152.115494 380.212205,156.407368 378.877462,160.367385 C378.102255,162.66733 376.329048,164.349498 374.202509,165.094269 C375.742916,166.217674 377.296972,167.334875 378.864837,168.445764 L365.329592,196.067774 C308.37258,167.678806 254.838436,146.275069 230.444114,99.407166 C222.256747,83.6770862 225.027938,30.2455147 224.246458,10.8073334 L242.235356,3.43249057 C267.311182,55.2479643 301.247637,104.958622 351.659196,147.421891 Z" id="Back-Arm" fill="#69A1AC"></path>
|
||||
<path d="M161.055661,191.52819 C213.934517,197.335206 255.555979,197.335206 285.920044,191.52819 C289.681947,190.808739 289.516744,174.597565 287.772165,170.17014 C260.604541,101.223613 242.73346,50.7515234 242.73346,2.86281957 C237.748541,5.46578716 229.024466,5.85587439 216.561233,4.03308125 C183.066484,53.3839305 167.670139,110.008383 161.055661,191.52819 Z" id="Shirt" fill="#191847"></path>
|
||||
<path d="M151.230463,199.679745 C149.434651,197.990659 148.498475,195.458624 148.95863,192.849857 L149.834853,187.88228 C150.428643,184.515894 153.16362,182.064537 156.3928,181.681035 C156.957304,179.15848 157.444016,176.65283 157.845988,174.165528 C161.241575,153.154507 155.440036,132.552519 155.712497,112.321262 C128.665971,135.389173 104.40311,175.221015 82.923914,231.816786 L51.1565841,222.47228 C52.3686876,217.970744 53.6242134,213.524497 54.9231618,209.133537 C51.2565668,207.051266 46.9721389,197.507648 50.0556257,195.910625 C53.2401859,194.261252 56.6138516,193.100367 60.1666851,192.417095 C89.2943389,104.716311 136.926917,40.5772795 203.06442,-8.10018719e-13 L212.149865,-8.01426951e-13 L222.19324,-1.82819745e-13 C216.561233,74.4537707 294.352531,237.001996 267.341419,375.824029 C217.415442,386.969507 146.13965,352.292211 76.7592031,379.997083 C79.340851,324.091965 131.054297,258.416171 151.230469,199.679731 L151.230463,199.679745 Z" id="Coat-Front" fill="#89C5CC"></path>
|
||||
<polygon id="Shade-Lapel" fill-opacity="0.1" fill="#000000" points="210.011169 1.68140303 201.333537 28.3576104 218.808362 48.3555427 203.015525 64.0707138 241.222948 129.468033 194.499596 64.201368 210.011169 48.3555427 194.499596 30.6830128"></polygon>
|
||||
<path d="M230.01713,154.689078 C226.301386,154.689078 223.289181,151.677919 223.289181,147.963466 C223.289181,144.249013 226.301386,141.237854 230.01713,141.237854 C233.732873,141.237854 236.745078,144.249013 236.745078,147.963466 C236.745078,151.677919 233.732873,154.689078 230.01713,154.689078 Z M238.427064,193.361348 C234.711321,193.361348 231.699116,190.350189 231.699116,186.635736 C231.699116,182.921282 234.711321,179.910123 238.427064,179.910123 C242.142807,179.910123 245.155012,182.921282 245.155012,186.635736 C245.155012,190.350189 242.142807,193.361348 238.427064,193.361348 Z M240.109052,232.033617 C236.393309,232.033617 233.381104,229.022457 233.381104,225.308005 C233.381104,221.593552 236.393309,218.582393 240.109052,218.582393 C243.824795,218.582393 246.837,221.593552 246.837,225.308005 C246.837,229.022457 243.824795,232.033617 240.109052,232.033617 Z" id="Buttons" fill-opacity="0.4" fill="#000000"></path>
|
||||
</g>
|
||||
</g>
|
||||
<text id="brain" font-family="AppleColorEmoji, Apple Color Emoji" font-size="300" font-weight="normal" fill="#000000">
|
||||
<tspan x="562" y="300">🧠</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<g id="Alcohol" transform="translate(1128.000000, 0.000000)">
|
||||
<circle id="Oval" fill="#FFF9D6" cx="217" cy="217" r="217"></circle>
|
||||
<text id="🍺" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="159" y="150">🍺</tspan>
|
||||
</text>
|
||||
<text id="🥃" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="278" y="257">🥃</tspan>
|
||||
</text>
|
||||
<text id="🍸" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="159" y="359">🍸</tspan>
|
||||
</text>
|
||||
<text id="🍷" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="38" y="257">🍷</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<rect id="connection-rectangle" fill="url(#linearGradient-1)" x="867" y="193" width="248" height="50"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
@ -13,3 +13,11 @@ header {
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
#Alcohol, #connection-rectangle, #brain, #brain-projection, #human {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
88
index.html
88
index.html
@ -1,5 +1,6 @@
|
||||
<head>
|
||||
<link rel='stylesheet' href='css/milligram.min.css' />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
||||
<link rel='stylesheet' href='css/style.css' />
|
||||
</head>
|
||||
|
||||
@ -7,13 +8,9 @@
|
||||
|
||||
<body class='container'>
|
||||
<header class='row'>
|
||||
|
||||
<a class='column' href='#Alcohol-and-the-Brain'>Alcohol and the Brain</a>
|
||||
|
||||
<a class='column' href='#What-does-Cerebellum-do?'>What does Cerebellum do?</a>
|
||||
|
||||
<a class='column' href='#Symptoms-of-Cerebellum-damage'>Symptoms of Cerebellum damage</a>
|
||||
|
||||
<a class='column' href='#section-1'>Alcohol and the Brain</a>
|
||||
<a class='column' href='#section-1'>What does Cerebellum do?</a>
|
||||
<a class='column' href='#section-1'>Symptoms of Cerebellum damage</a>
|
||||
</header>
|
||||
|
||||
<div class='row'>
|
||||
@ -22,12 +19,78 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='vertical-space'></div>
|
||||
<div class='row'>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1570px" height="1089px" viewBox="0 0 1570 1089" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Alcohol-Cerebellum</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#FFF9D5" offset="0%"></stop>
|
||||
<stop stop-color="#FDBED2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Human-with-Brain" transform="translate(1.000000, 26.000000)">
|
||||
<polygon id="brain-projection" fill-opacity="0.2" fill="#F489A8" points="323 421.284689 581.224434 159.576967 800.159533 276.683972"></polygon>
|
||||
<g id="human" transform="translate(0.000000, 354.000000)" fill-rule="nonzero">
|
||||
<g id="Head/Front/Pony" transform="translate(268.114447, 88.570247) rotate(15.000000) translate(-268.114447, -88.570247) translate(192.614447, 17.570247)">
|
||||
<g id="Head" transform="translate(79.547235, 18.873244)" fill="#D4A181">
|
||||
<path d="M13.8970375,57.9918034 C6.14659341,48.8975134 0.900930773,37.7523354 1.77748408,25.2638435 C4.30307823,-10.7189789 54.4098087,-2.80321638 64.1566052,15.3578224 C73.9034016,33.5188613 72.7452289,79.5858422 60.1483628,82.8317265 C55.1247501,84.1261807 44.4229613,80.9552864 33.5310371,74.3925099 L40.3676886,122.742421 L5.68434189e-14,122.742421 L13.8970375,57.9918034 Z" id="Shape"></path>
|
||||
</g>
|
||||
<path d="M107.415611,74.3348754 C102.409852,83.9401414 95.4866005,91.1735742 88.5699832,91.1735742 C75.4324609,91.1735742 66.0913396,73.6151524 66.0913396,54.7368454 C66.0913396,54.0735605 66.1044867,53.4146879 66.1304266,52.7607365 C52.2332711,62.2939735 41.5229044,81.085156 23.134645,81.085156 C-1.88241653,81.085156 -11.8177346,30.6430653 23.134645,30.6430653 C46.9049188,30.6430653 58.5973745,34.1075645 68.6739871,39.2307419 C70.661423,33.6298018 73.6919351,28.9207853 77.3976495,25.6323182 C78.2891382,24.629114 79.6558903,23.6692826 81.4191527,22.7794699 C82.4971418,22.1898839 83.6126695,21.7096897 84.7591669,21.3483264 C90.8362363,19.115849 99.6384939,17.5412192 109.470799,17.1979868 C111.306804,17.1338944 113.109977,17.1151391 114.869045,17.1387656 C114.897674,7.87704148 122.41718,0.377810901 131.688834,0.377810901 C140.978191,0.377810901 148.508704,7.90570865 148.508704,17.1918412 C148.508704,26.1723685 141.465691,33.5084833 132.600047,33.9816175 C127.528452,35.5459575 121.01236,36.6945269 113.78608,37.1788728 C114.487678,39.8163871 114.868963,42.8127028 114.868963,46.1986701 C114.868963,49.1884446 114.538856,52.3592635 113.931017,55.578795 C112.363722,53.7165414 110.268061,52.5013046 108.141015,52.5013046 C102.190875,52.5013046 98.0490931,57.3944382 98.0490931,62.5897228 C98.0490931,69.1833522 101.856924,73.9533609 107.415611,74.3348754 Z" id="hair" fill="#191847"></path>
|
||||
</g>
|
||||
<g id="Bottom/Standing/Jogging" transform="translate(6.451220, 306.465656)">
|
||||
<polygon id="Leg" fill="#BA8B72" points="220.271118 0 345.25354 208.8755 438.954399 385.46213 459.136733 385.46213 302.139629 8.55897865e-13"></polygon>
|
||||
<g id="Accessories/Shoe/Flat-Sneaker" transform="translate(423.722365, 366.844100)" fill="#E4E4E4">
|
||||
<path d="M2.89177806,10.4659743 C1.01004746,15.487462 0.0691821523,19.2446952 0.0691821523,21.737674 C0.0691821523,24.769725 0.574474937,29.1942412 1.58506052,35.0112229 L96.4521768,35.0112229 C98.9174368,26.8639968 97.4943458,22.4655716 92.1829036,21.8159472 C86.8714613,21.166323 82.4591561,20.5797642 78.9459877,20.0562711 L34.8526615,0.406071447 C34.0042182,0.0279624531 33.0097947,0.409005088 32.6315543,1.25715376 C32.6250838,1.27166316 32.6188192,1.28626365 32.6127624,1.30095056 L29.7784774,8.17383657 C24.8614711,10.4671982 20.8658929,11.613879 17.7917431,11.613879 C15.2940693,11.613879 11.8447606,10.6054991 7.44381711,8.58873941 L7.44382631,8.58871926 C5.75494204,7.81477754 3.75820917,8.55600971 2.98399862,10.2443076 C2.95062901,10.3170756 2.91986922,10.3910117 2.89177806,10.4659743 Z" id="shoe"></path>
|
||||
</g>
|
||||
<path d="M412.931054,357.185302 L451.852327,345.415481 C434.799857,294.455494 413.899632,238.375896 389.151654,177.176689 C364.403676,115.977481 337.825267,56.9185846 309.41643,0 L199.48861,0 C231.073129,71.9993958 264.556953,137.420089 299.940086,196.26208 C335.323217,255.10407 372.986873,308.745145 412.931054,357.185302 Z" id="Pant" fill="#DB2721"></path>
|
||||
<path d="M212.05735,0 C200.261356,73.4002851 177.510114,167.177646 175.363011,170.071643 C173.931608,172.000975 122.400753,189.262422 20.7704426,221.855984 L25.1300702,239.646906 C146.323976,222.166768 210.18283,208.604957 216.706629,198.961474 C226.492329,184.496252 275.353646,70.2206647 294.278547,0 L212.05735,0 Z" id="Leg" fill="#D4A181"></path>
|
||||
<path d="M56.4952135,206.477094 L64.1742228,235.130658 C154.820204,243.078115 210.360998,237.335579 230.796607,217.903049 C251.232214,198.47052 274.522776,125.83617 300.66829,-2.27373675e-13 L195.845548,-2.27373675e-13 C179.280366,103.042891 170.01935,156.72715 168.062503,161.052777 C166.105655,165.378403 128.916559,180.519842 56.4952135,206.477094 Z" id="Pant" fill="#FF4133"></path>
|
||||
<g id="Accessories/Shoe/Flat-Sneaker" transform="translate(26.332069, 261.144369) rotate(80.000000) translate(-26.332069, -261.144369) translate(-22.667931, 243.144369)" fill="#E4E4E4">
|
||||
<path d="M2.89177806,10.4659743 C1.01004746,15.487462 0.0691821523,19.2446952 0.0691821523,21.737674 C0.0691821523,24.769725 0.574474937,29.1942412 1.58506052,35.0112229 L96.4521768,35.0112229 C98.9174368,26.8639968 97.4943458,22.4655716 92.1829036,21.8159472 C86.8714613,21.166323 82.4591561,20.5797642 78.9459877,20.0562711 L34.8526615,0.406071447 C34.0042182,0.0279624531 33.0097947,0.409005088 32.6315543,1.25715376 C32.6250838,1.27166316 32.6188192,1.28626365 32.6127624,1.30095056 L29.7784774,8.17383657 C24.8614711,10.4671982 20.8658929,11.613879 17.7917431,11.613879 C15.2940693,11.613879 11.8447606,10.6054991 7.44381711,8.58873941 L7.44382631,8.58871926 C5.75494204,7.81477754 3.75820917,8.55600971 2.98399862,10.2443076 C2.95062901,10.3170756 2.91986922,10.3910117 2.89177806,10.4659743 Z" id="shoe"></path>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Body/Trench-Coat" transform="translate(247.325447, 318.108624) rotate(10.000000) translate(-247.325447, -318.108624) translate(29.825447, 128.108624)">
|
||||
<path d="M342.193849,151.736936 L392.967353,194.766814 C407.209659,199.697172 418.996701,205.416651 428.328479,211.925253 C430.482512,214.181709 432.966159,218.620086 423.47622,217.219658 C413.986281,215.819228 403.941286,214.772837 402.397212,217.934051 C400.853137,221.095265 406.354835,225.389393 403.386555,229.592841 C401.4077,232.395138 393.539152,224.471598 379.780912,205.822218 L328.317158,180.14696 L342.193849,151.736936 Z M101.13455,118.441789 L130.310098,125.855951 C91.2549921,191.491634 70.3696947,226.179344 67.6542058,229.919085 C61.5443554,238.333502 65.9819693,254.573792 67.4896313,263.082596 C55.1173528,265.287249 60.9021852,247.144197 45.2326965,250.174661 C30.930314,252.940728 18.4877767,261.310541 5.95889725,248.486993 C4.41854514,246.910413 3.47813929,242.185444 9.12201219,240.082978 C23.1829578,234.844972 44.0802265,224.752351 47.6009616,220.593393 C52.4021131,214.921912 70.2466425,180.871377 101.13455,118.441789 Z" id="Skin" fill="#D4A181" transform="translate(217.547299, 190.855379) rotate(-4.000000) translate(-217.547299, -190.855379) "></path>
|
||||
<path d="M351.659196,147.421891 C358.562224,146.926484 366.071026,148.06965 374.121493,150.781215 C378.082885,152.115494 380.212205,156.407368 378.877462,160.367385 C378.102255,162.66733 376.329048,164.349498 374.202509,165.094269 C375.742916,166.217674 377.296972,167.334875 378.864837,168.445764 L365.329592,196.067774 C308.37258,167.678806 254.838436,146.275069 230.444114,99.407166 C222.256747,83.6770862 225.027938,30.2455147 224.246458,10.8073334 L242.235356,3.43249057 C267.311182,55.2479643 301.247637,104.958622 351.659196,147.421891 Z" id="Back-Arm" fill="#69A1AC"></path>
|
||||
<path d="M161.055661,191.52819 C213.934517,197.335206 255.555979,197.335206 285.920044,191.52819 C289.681947,190.808739 289.516744,174.597565 287.772165,170.17014 C260.604541,101.223613 242.73346,50.7515234 242.73346,2.86281957 C237.748541,5.46578716 229.024466,5.85587439 216.561233,4.03308125 C183.066484,53.3839305 167.670139,110.008383 161.055661,191.52819 Z" id="Shirt" fill="#191847"></path>
|
||||
<path d="M151.230463,199.679745 C149.434651,197.990659 148.498475,195.458624 148.95863,192.849857 L149.834853,187.88228 C150.428643,184.515894 153.16362,182.064537 156.3928,181.681035 C156.957304,179.15848 157.444016,176.65283 157.845988,174.165528 C161.241575,153.154507 155.440036,132.552519 155.712497,112.321262 C128.665971,135.389173 104.40311,175.221015 82.923914,231.816786 L51.1565841,222.47228 C52.3686876,217.970744 53.6242134,213.524497 54.9231618,209.133537 C51.2565668,207.051266 46.9721389,197.507648 50.0556257,195.910625 C53.2401859,194.261252 56.6138516,193.100367 60.1666851,192.417095 C89.2943389,104.716311 136.926917,40.5772795 203.06442,-8.10018719e-13 L212.149865,-8.01426951e-13 L222.19324,-1.82819745e-13 C216.561233,74.4537707 294.352531,237.001996 267.341419,375.824029 C217.415442,386.969507 146.13965,352.292211 76.7592031,379.997083 C79.340851,324.091965 131.054297,258.416171 151.230469,199.679731 L151.230463,199.679745 Z" id="Coat-Front" fill="#89C5CC"></path>
|
||||
<polygon id="Shade-Lapel" fill-opacity="0.1" fill="#000000" points="210.011169 1.68140303 201.333537 28.3576104 218.808362 48.3555427 203.015525 64.0707138 241.222948 129.468033 194.499596 64.201368 210.011169 48.3555427 194.499596 30.6830128"></polygon>
|
||||
<path d="M230.01713,154.689078 C226.301386,154.689078 223.289181,151.677919 223.289181,147.963466 C223.289181,144.249013 226.301386,141.237854 230.01713,141.237854 C233.732873,141.237854 236.745078,144.249013 236.745078,147.963466 C236.745078,151.677919 233.732873,154.689078 230.01713,154.689078 Z M238.427064,193.361348 C234.711321,193.361348 231.699116,190.350189 231.699116,186.635736 C231.699116,182.921282 234.711321,179.910123 238.427064,179.910123 C242.142807,179.910123 245.155012,182.921282 245.155012,186.635736 C245.155012,190.350189 242.142807,193.361348 238.427064,193.361348 Z M240.109052,232.033617 C236.393309,232.033617 233.381104,229.022457 233.381104,225.308005 C233.381104,221.593552 236.393309,218.582393 240.109052,218.582393 C243.824795,218.582393 246.837,221.593552 246.837,225.308005 C246.837,229.022457 243.824795,232.033617 240.109052,232.033617 Z" id="Buttons" fill-opacity="0.4" fill="#000000"></path>
|
||||
</g>
|
||||
</g>
|
||||
<text id="brain" font-family="AppleColorEmoji, Apple Color Emoji" font-size="300" font-weight="normal" fill="#000000">
|
||||
<tspan x="562" y="300">🧠</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<g id="Alcohol" transform="translate(1136.000000, 0.000000)">
|
||||
<circle id="Oval" fill="#FFF9D6" cx="217" cy="217" r="217"></circle>
|
||||
<text id="🍺" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="159" y="150">🍺</tspan>
|
||||
</text>
|
||||
<text id="🥃" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="278" y="257">🥃</tspan>
|
||||
</text>
|
||||
<text id="🍸" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="159" y="359">🍸</tspan>
|
||||
</text>
|
||||
<text id="🍷" font-family="AppleColorEmoji, Apple Color Emoji" font-size="116" font-weight="normal" fill="#000000">
|
||||
<tspan x="38" y="257">🍷</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<rect id="connection-rectangle" fill="url(#linearGradient-1)" x="875" y="193" width="248" height="50"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class='vertical-space'></div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='Alcohol-and-the-Brain'>Alcohol and the Brain</h2>
|
||||
<h2 id='#section-1'>Alcohol and the Brain</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
@ -38,7 +101,7 @@
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='What-does-Cerebellum-do?'>What does Cerebellum do?</h2>
|
||||
<h2 id='#section-1'>What does Cerebellum do?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
@ -49,7 +112,7 @@
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='Symptoms-of-Cerebellum-damage'>Symptoms of Cerebellum damage</h2>
|
||||
<h2 id='#section-1'>Symptoms of Cerebellum damage</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
@ -58,5 +121,6 @@
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
|
||||
<script src='javascript/anime.min.js'></script>
|
||||
<script src='javascript/main.js'></script>
|
||||
</body>
|
||||
|
||||
8
javascript/anime.min.js
vendored
Normal file
8
javascript/anime.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
38
javascript/main.js
Normal file
38
javascript/main.js
Normal file
@ -0,0 +1,38 @@
|
||||
anime({
|
||||
targets: '#human',
|
||||
opacity: 1,
|
||||
duration: 2000,
|
||||
easing: 'easeInOutExpo'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '#brain',
|
||||
opacity: 1,
|
||||
duration: 2000,
|
||||
delay: 1000,
|
||||
easing: 'easeInOutExpo'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '#brain-projection',
|
||||
opacity: 1,
|
||||
duration: 2000,
|
||||
delay: 1000,
|
||||
easing: 'easeInOutExpo'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '#Alcohol',
|
||||
opacity: 1,
|
||||
duration: 2000,
|
||||
delay: 2000,
|
||||
easing: 'easeInOutExpo'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '#connection-rectangle',
|
||||
opacity: 1,
|
||||
duration: 1000,
|
||||
delay: 3000,
|
||||
easing: 'easeInOutExpo'
|
||||
});
|
||||
@ -1,5 +1,6 @@
|
||||
<head>
|
||||
<link rel='stylesheet' href='css/milligram.min.css' />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
||||
<link rel='stylesheet' href='css/style.css' />
|
||||
</head>
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
|
||||
<body class='container'>
|
||||
<header class='row'>
|
||||
{% for section in sections %}
|
||||
<a class='column' href='#{{ section.title | anchor }}'>{{ section.title }}</a>
|
||||
{% endfor %}
|
||||
<a class='column' href='#section-1'>Alcohol and the Brain</a>
|
||||
<a class='column' href='#section-1'>What does Cerebellum do?</a>
|
||||
<a class='column' href='#section-1'>Symptoms of Cerebellum damage</a>
|
||||
</header>
|
||||
|
||||
<div class='row'>
|
||||
@ -13,19 +13,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
{% include 'assets/alcohol-cerebellum.svg' %}
|
||||
</div>
|
||||
|
||||
<div class='vertical-space'></div>
|
||||
|
||||
{% for section in sections %}
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='{{ section.title | anchor }}'>{{ section.title }}</h2>
|
||||
<h2 id='#section-1'>Alcohol and the Brain</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>{{ section.content }}</p>
|
||||
<p>Alcohol can affect various areas of the brain including cerebellum ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='#section-1'>What does Cerebellum do?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Cerebellum is one of the major controlling areas in terms of motor function: that means moving our bodies and keeping our balance ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='#section-1'>Symptoms of Cerebellum damage</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<script src='javascript/anime.min.js'></script>
|
||||
<script src='javascript/main.js'></script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user