add sections and smooth scroll
This commit is contained in:
parent
f9b777d061
commit
a2e6c0626d
@ -1,6 +1,39 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
box-sizing: border-box;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
header a {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header a::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
bottom: -0.4rem;
|
||||
width: 50%;
|
||||
height: 1px;
|
||||
background: #9b4dca;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
header a:hover::after {
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
background: #606c76;
|
||||
}
|
||||
|
||||
.vertical-space {
|
||||
|
||||
166
index.html
166
index.html
@ -1,4 +1,5 @@
|
||||
<head>
|
||||
<html lang="en">
|
||||
<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' />
|
||||
@ -6,22 +7,26 @@
|
||||
|
||||
|
||||
|
||||
<body class='container'>
|
||||
<header class='row'>
|
||||
<a class='column' href='#section-1'>Alcohol and the Brain</a>
|
||||
<a class='column' href='#section-1'>What is Cerebellum and what does it do?</a>
|
||||
<a class='column' href='#section-1'>Symptoms of Cerebellum damage</a>
|
||||
</header>
|
||||
<body>
|
||||
<header class='row'>
|
||||
<div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div>
|
||||
<div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div>
|
||||
<div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div>
|
||||
<div class='column'><a href='#how-cerebellum-damage-affects-you'>Symptoms</a></div>
|
||||
<div class='column'><a href='#assessment'>Assessment</a></div>
|
||||
<div class='column'><a href='#treatment-and-rehab'>Treatment & Rehabilitation</a></div>
|
||||
</header>
|
||||
|
||||
<div class='row heading'>
|
||||
<div class='column'>
|
||||
<h1>How Does Alcohol Affect Your Brain?</h1>
|
||||
<h2>Cerebellum and its Role in Your Coordination</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='container'>
|
||||
<div class='row heading'>
|
||||
<div class='column'>
|
||||
<h1>How Does Alcohol Affect Your Brain?</h1>
|
||||
<h2>Cerebellum and its Role in Your Coordination</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<div class='row'>
|
||||
<?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>
|
||||
@ -85,56 +90,93 @@
|
||||
<rect id="connection-rectangle" fill="url(#linearGradient-1)" x="867" y="193" width="248" height="50"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class='vertical-space'></div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='#section-1'>Alcohol and the Brain</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column column-50'>
|
||||
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
|
||||
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
|
||||
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
|
||||
|
||||
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
|
||||
</div>
|
||||
<div class='column column-50'>
|
||||
<div class='alcohol-abuse-chart-box'>
|
||||
<canvas id='alcohol-abuse'></canvas>
|
||||
<p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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='vertical-space'></div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column column-50'>
|
||||
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
|
||||
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
|
||||
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
|
||||
|
||||
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
|
||||
</div>
|
||||
<div class='column column-50'>
|
||||
<div class='alcohol-abuse-chart-box'>
|
||||
<canvas id='alcohol-abuse'></canvas>
|
||||
<p class='text-center'>Prevalence of alcohol abuse and direct death caused by alcohol dependance across the world [<a href='#ref-2'>2</a>]</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='what-is-cerebellum'>What is Cerebellum and what does it 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='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='how-cerebellum-damage-affects-you'>How does damage to Cerebellum affect you?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='assessment'>How to assess your Cerebellum function?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='treatment-and-rehab'>Treatment and Rehabilitation</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</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>
|
||||
</body>
|
||||
|
||||
<script src='javascript/anime.min.js'></script>
|
||||
<script src='javascript/lodash.min.js'></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="javascript/alcohol-use-disorder.js"></script>
|
||||
<script src='javascript/main.js'></script>
|
||||
</body>
|
||||
<script src='javascript/lodash.min.js'></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="javascript/alcohol-use-disorder.js"></script>
|
||||
<script src='javascript/main.js'></script>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,71 +1,108 @@
|
||||
{% include './head.nj' %}
|
||||
<html lang="en">
|
||||
{% include './head.nj' %}
|
||||
|
||||
<body class='container'>
|
||||
<header class='row'>
|
||||
<a class='column' href='#section-1'>Alcohol and the Brain</a>
|
||||
<a class='column' href='#section-1'>What is Cerebellum and what does it do?</a>
|
||||
<a class='column' href='#section-1'>Symptoms of Cerebellum damage</a>
|
||||
</header>
|
||||
<body>
|
||||
<header class='row'>
|
||||
<div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div>
|
||||
<div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div>
|
||||
<div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div>
|
||||
<div class='column'><a href='#how-cerebellum-damage-affects-you'>Symptoms</a></div>
|
||||
<div class='column'><a href='#assessment'>Assessment</a></div>
|
||||
<div class='column'><a href='#treatment-and-rehab'>Treatment & Rehabilitation</a></div>
|
||||
</header>
|
||||
|
||||
<div class='row heading'>
|
||||
<div class='column'>
|
||||
<h1>{{ title }}</h1>
|
||||
<h2>{{ subtitle }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
{% include 'assets/alcohol-cerebellum.svg' %}
|
||||
</div>
|
||||
|
||||
<div class='vertical-space'></div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='#section-1'>Alcohol and the Brain</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column column-50'>
|
||||
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
|
||||
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
|
||||
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
|
||||
|
||||
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
|
||||
</div>
|
||||
<div class='column column-50'>
|
||||
<div class='alcohol-abuse-chart-box'>
|
||||
<canvas id='alcohol-abuse'></canvas>
|
||||
<p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p>
|
||||
<div class='container'>
|
||||
<div class='row heading'>
|
||||
<div class='column'>
|
||||
<h1>{{ title }}</h1>
|
||||
<h2>{{ subtitle }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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'>
|
||||
{% include 'assets/alcohol-cerebellum.svg' %}
|
||||
</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>
|
||||
<div class='vertical-space'></div>
|
||||
|
||||
<script src='javascript/anime.min.js'></script>
|
||||
<script src='javascript/lodash.min.js'></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="javascript/alcohol-use-disorder.js"></script>
|
||||
<script src='javascript/main.js'></script>
|
||||
</body>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column column-50'>
|
||||
<p>Binge drinking (drinking 5 units over a 2 hour period, followed by a period of abstinence) and high alcohol intake (more than 5 units a day), can lead to dependence, tolerance and cravings, which lead to a continuation of alcohol abuse to prevent withdrawal symptoms.</p>
|
||||
<p>Chronic alcohol abuse can have adverse effects such as loss of balance and gait, slurred speech, slower reactions, poor memory consolidation, compromised emotional modulation and judgement. These effects in turn can lead to difficulties in social and emotional interactions, and a reduction in motivation, attention and impulse control.</p>
|
||||
<p>These effects are studied and proven using methods such as MRI scans which show loss of neurons, particularly in the frontal lobe, the area most associated with reasoning, decision-making and rationality, however it can affect other areas of the brain such as the cerebellum (associated with balance and movement), hippocampus (memory) and amygdala (memory, decision making and emotional responses). [<a href='#ref-1'>1</a>]</p>
|
||||
|
||||
<p>Every year millions of people suffer from Alcohol use disorder, leading to physical and mental health problems.</p>
|
||||
</div>
|
||||
<div class='column column-50'>
|
||||
<div class='alcohol-abuse-chart-box'>
|
||||
<canvas id='alcohol-abuse'></canvas>
|
||||
<p class='text-center'>Prevalence of alcohol abuse and direct death caused by alcohol dependance across the world [<a href='#ref-2'>2</a>]</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='what-is-cerebellum'>What is Cerebellum and what does it 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='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='how-cerebellum-damage-affects-you'>How does damage to Cerebellum affect you?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='assessment'>How to assess your Cerebellum function?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<h2 id='treatment-and-rehab'>Treatment and Rehabilitation</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
<div class='column'>
|
||||
<p>Loss of balance, dizziness, ...</p>
|
||||
</div class='column'>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
{% include './scripts.nj' %}
|
||||
</html>
|
||||
|
||||
5
templates/scripts.nj
Normal file
5
templates/scripts.nj
Normal file
@ -0,0 +1,5 @@
|
||||
<script src='javascript/anime.min.js'></script>
|
||||
<script src='javascript/lodash.min.js'></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="javascript/alcohol-use-disorder.js"></script>
|
||||
<script src='javascript/main.js'></script>
|
||||
Loading…
Reference in New Issue
Block a user