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 {
|
||||
|
||||
60
index.html
60
index.html
@ -1,3 +1,4 @@
|
||||
<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" />
|
||||
@ -6,13 +7,17 @@
|
||||
|
||||
|
||||
|
||||
<body class='container'>
|
||||
<body>
|
||||
<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>
|
||||
<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='container'>
|
||||
<div class='row heading'>
|
||||
<div class='column'>
|
||||
<h1>How Does Alcohol Affect Your Brain?</h1>
|
||||
@ -91,7 +96,7 @@
|
||||
|
||||
<div class='row'>
|
||||
<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 class='row'>
|
||||
@ -105,14 +110,14 @@
|
||||
<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>
|
||||
<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='#section-1'>What does Cerebellum do?</h2>
|
||||
<h2 id='what-is-cerebellum'>What is Cerebellum and what does it do?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
@ -123,7 +128,7 @@
|
||||
|
||||
<div class='row'>
|
||||
<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 class='row'>
|
||||
@ -132,9 +137,46 @@
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
<html lang="en">
|
||||
{% include './head.nj' %}
|
||||
|
||||
<body class='container'>
|
||||
<body>
|
||||
<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>
|
||||
<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='container'>
|
||||
<div class='row heading'>
|
||||
<div class='column'>
|
||||
<h1>{{ title }}</h1>
|
||||
@ -22,7 +27,7 @@
|
||||
|
||||
<div class='row'>
|
||||
<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 class='row'>
|
||||
@ -36,14 +41,14 @@
|
||||
<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>
|
||||
<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='#section-1'>What does Cerebellum do?</h2>
|
||||
<h2 id='what-is-cerebellum'>What is Cerebellum and what does it do?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class='row'>
|
||||
@ -54,7 +59,7 @@
|
||||
|
||||
<div class='row'>
|
||||
<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 class='row'>
|
||||
@ -63,9 +68,41 @@
|
||||
</div class='column'>
|
||||
</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>
|
||||
<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