update base index sample page styles and content
This commit is contained in:
Asif Bacchus
parent
e6ab47bfdd
commit
db11078881
30
index.html
30
index.html
|
|
@ -4,15 +4,39 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>animated particles</title>
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat&display=block"
|
||||
crossorigin="anonymous">
|
||||
<link rel="stylesheet"
|
||||
href="css/index.min.css"
|
||||
crossorigin="anonymous"/>
|
||||
</head>
|
||||
<body onload='particles(avoidMouse=false, speed=15)'>
|
||||
<div class="wrapper">
|
||||
<h1>Lorem ipsum dolor sit amet.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut delectus quibusdam est rem sequi consectetur doloremque. Laborum suscipit, incidunt excepturi veniam rerum quis accusamus eaque, obcaecati modi doloremque eveniet ratione!</p>
|
||||
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quod, ut aliquid doloremque impedit debitis similique dicta perferendis nam iusto consequuntur obcaecati nemo, <a href="#">perspiciatis nobis ipsum</a> nostrum eos quasi est quidem reiciendis ducimus beatae repudiandae. Facere mollitia incidunt recusandae, voluptatem ullam placeat fugiat autem nihil. Hic quia accusantium nesciunt dicta.</p>
|
||||
<div class="spacer"></div>
|
||||
<header>
|
||||
<h1>ab-particles</h1>
|
||||
<h2>simple, lightweight vanilla-javascript particle animation</h2>
|
||||
</header>
|
||||
<main>
|
||||
<p>This is a sample page showing off some settings of this tiny (5kb!) script. No external libraries, no external configuration files, no jQuery. Just javascript and easy colour styling via CSS variables.</p>
|
||||
<p>Configuration details, download and source at <a href="http://git.asifbacchus.app/asif/ab-particles.git">my git repo</a>.</p>
|
||||
<p>Thanks for checking it out!</p>
|
||||
</main>
|
||||
<div class="spacer"></div>
|
||||
<footer>
|
||||
<p>Design, code and content appearing on this site is developed by
|
||||
<a href="https://asifbacchus.com">Asif Bacchus</a> ('author') and
|
||||
may be freely used and redistributed in accordance with the <a
|
||||
href="https://git.asifbacchus.app/asif/ab-particles/LICENSE">license</a>
|
||||
appearing in the <a
|
||||
href="https://git.asifbacchus.app/asif/ab-particles.git">content
|
||||
repo</a>. Author provides no warranties, guarantees or implications
|
||||
of suitability and disclaims any and all responsibility arising from
|
||||
the usage of anything appearing on or linked to this page for any
|
||||
purpose whatsoever. Copyright 2020 Asif Bacchus. Some Rights
|
||||
Reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
<canvas id="particles"></canvas>
|
||||
<!-- javascript -->
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
// colours used thoughout site
|
||||
:root {
|
||||
--col-bg: #212121;
|
||||
--col-particle: #536878;
|
||||
--col-particle-stroke: #035096;
|
||||
--col-particle-stroke-hover: #0892d0;
|
||||
--col-link: #bbdefb;
|
||||
--col-text: #ebe7c5;
|
||||
|
||||
--col-particle-stroke-hover: #0892d0;
|
||||
--col-particle-stroke: #035096;
|
||||
--col-particle: #536878;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,12 +9,37 @@ import partials
|
|||
body {
|
||||
background-color: var(--col-bg);
|
||||
color: var(--col-text);
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.6rem;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.85rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
line-height: 5rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -23,19 +48,16 @@ p {
|
|||
|
||||
a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
transition: all 0.5s ease;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: red;
|
||||
color: var(--col-link);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#particles {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
|
@ -44,3 +66,14 @@ a {
|
|||
width: 100%;
|
||||
z-index: -999;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue