thereadme/cerebellum-alcohol-infographic
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add sections and smooth scroll

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/style.css
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 {

60
index.html
View File

@ -1,3 +1,4 @@
<html lang="en">
<head> <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" />
@ -6,13 +7,17 @@
<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>
<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> </header>
<div class='container'>
<div class='row heading'> <div class='row heading'>
<div class='column'> <div class='column'>
<h1>How Does Alcohol Affect Your Brain?</h1> <h1>How Does Alcohol Affect Your Brain?</h1>
@ -91,7 +96,7 @@
<div class='row'> <div class='row'>
<div class='column'> <div class='column'>
<h2 id='#section-1'>Alcohol and the Brain</h2> <h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
</div> </div>
</div> </div>
<div class='row'> <div class='row'>
@ -105,14 +110,14 @@
<div class='column column-50'> <div class='column column-50'>
<div class='alcohol-abuse-chart-box'> <div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas> <canvas id='alcohol-abuse'></canvas>
<p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p> <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>
</div> </div>
<div class='row'> <div class='row'>
<div class='column'> <div class='column'>
<h2 id='#section-1'>What does Cerebellum do?</h2> <h2 id='what-is-cerebellum'>What is Cerebellum and what does it do?</h2>
</div> </div>
</div> </div>
<div class='row'> <div class='row'>
@ -123,7 +128,7 @@
<div class='row'> <div class='row'>
<div class='column'> <div class='column'>
<h2 id='#section-1'>Symptoms of Cerebellum damage</h2> <h2 id='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2>
</div> </div>
</div> </div>
<div class='row'> <div class='row'>
@ -132,9 +137,46 @@
</div class='column'> </div class='column'>
</div> </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>
<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>

63
templates/index.nj
View File

@ -1,12 +1,17 @@
<html lang="en">
{% include './head.nj' %} {% 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>
<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> </header>
<div class='container'>
<div class='row heading'> <div class='row heading'>
<div class='column'> <div class='column'>
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
@ -22,7 +27,7 @@
<div class='row'> <div class='row'>
<div class='column'> <div class='column'>
<h2 id='#section-1'>Alcohol and the Brain</h2> <h2 id='alcohol-and-the-brain'>Alcohol and the Brain</h2>
</div> </div>
</div> </div>
<div class='row'> <div class='row'>
@ -36,14 +41,14 @@
<div class='column column-50'> <div class='column column-50'>
<div class='alcohol-abuse-chart-box'> <div class='alcohol-abuse-chart-box'>
<canvas id='alcohol-abuse'></canvas> <canvas id='alcohol-abuse'></canvas>
<p class='text-center'>Alcohol Abuse Across The World [<a href='#ref-2'>2</a>]</p> <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>
</div> </div>
<div class='row'> <div class='row'>
<div class='column'> <div class='column'>
<h2 id='#section-1'>What does Cerebellum do?</h2> <h2 id='what-is-cerebellum'>What is Cerebellum and what does it do?</h2>
</div> </div>
</div> </div>
<div class='row'> <div class='row'>
@ -54,7 +59,7 @@
<div class='row'> <div class='row'>
<div class='column'> <div class='column'>
<h2 id='#section-1'>Symptoms of Cerebellum damage</h2> <h2 id='how-alcohol-damages-cerebellum'>How does Alcohol damage your Cerebellum?</h2>
</div> </div>
</div> </div>
<div class='row'> <div class='row'>
@ -63,9 +68,41 @@
</div class='column'> </div class='column'>
</div> </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='how-cerebellum-damage-affects-you'>How does damage to Cerebellum affect you?</h2>
<script src="javascript/alcohol-use-disorder.js"></script> </div>
<script src='javascript/main.js'></script> </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> </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>