add sections and smooth scroll

This commit is contained in:
Mahdi Dibaiee 2021-10-17 08:35:16 +01:00
parent f9b777d061
commit a2e6c0626d
4 changed files with 244 additions and 127 deletions

View File

@ -1,6 +1,39 @@
html {
scroll-behavior: smooth;
}
header { header {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 4rem; 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 { .vertical-space {

View File

@ -1,4 +1,5 @@
<head> <html lang="en">
<head>
<link rel='stylesheet' href='css/milligram.min.css' /> <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="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel='stylesheet' href='css/style.css' /> <link rel='stylesheet' href='css/style.css' />
@ -6,22 +7,26 @@
<body class='container'> <body>
<header class='row'> <header class='row'>
<a class='column' href='#section-1'>Alcohol and the Brain</a> <div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div>
<a class='column' href='#section-1'>What is Cerebellum and what does it do?</a> <div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div>
<a class='column' href='#section-1'>Symptoms of Cerebellum damage</a> <div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div>
</header> <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='container'>
<div class='column'> <div class='row heading'>
<h1>How Does Alcohol Affect Your Brain?</h1> <div class='column'>
<h2>Cerebellum and its Role in Your Coordination</h2> <h1>How Does Alcohol Affect Your Brain?</h1>
</div> <h2>Cerebellum and its Role in Your Coordination</h2>
</div> </div>
</div>
<div class='row'> <div class='row'>
<?xml version="1.0" encoding="UTF-8"?> <?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"> <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 --> <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
<title>Alcohol-Cerebellum</title> <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> <rect id="connection-rectangle" fill="url(#linearGradient-1)" x="867" y="193" width="248" height="50"></rect>
</g> </g>
</svg> </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>
<div class='row'> <div class='vertical-space'></div>
<div class='column'>
<h2 id='#section-1'>What does Cerebellum do?</h2> <div class='row'>
</div> <div class='column'>
</div> <h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
<div class='row'> </div>
<div class='column'> </div>
<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='row'>
</div class='column'> <div class='column column-50'>
</div> <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> </body>
<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/anime.min.js'></script>
<script src='javascript/lodash.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="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/alcohol-use-disorder.js"></script>
<script src='javascript/main.js'></script> <script src='javascript/main.js'></script>
</body>
</html>

View File

@ -1,71 +1,108 @@
{% include './head.nj' %} <html lang="en">
{% include './head.nj' %}
<body class='container'> <body>
<header class='row'> <header class='row'>
<a class='column' href='#section-1'>Alcohol and the Brain</a> <div class='column'><a href='#alcohol-and-the-brain'>Alcohol and the Brain</a></div>
<a class='column' href='#section-1'>What is Cerebellum and what does it do?</a> <div class='column'><a href='#what-is-cerebellum'>What is Cerebellum?</a></div>
<a class='column' href='#section-1'>Symptoms of Cerebellum damage</a> <div class='column'><a href='#how-alcohol-damages-cerebellum'>Alcohol and Cerebellum</a></div>
</header> <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='container'>
<div class='column'> <div class='row heading'>
<h1>{{ title }}</h1> <div class='column'>
<h2>{{ subtitle }}</h2> <h1>{{ title }}</h1>
</div> <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> </div>
</div>
</div>
<div class='row'> <div class='row'>
<div class='column'> {% include 'assets/alcohol-cerebellum.svg' %}
<h2 id='#section-1'>What does Cerebellum do?</h2> </div>
</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='vertical-space'></div>
<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> <div class='row'>
<script src='javascript/lodash.min.js'></script> <div class='column'>
<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> <h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
<script src="javascript/alcohol-use-disorder.js"></script> </div>
<script src='javascript/main.js'></script> </div>
</body> <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
View 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>