asif/ab-particles
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

dummy text and styling

Browse Source
This commit is contained in:
Asif Bacchus 2020-04-08 08:26:58 -06:00
parent 00ddc1e918
commit 7f8bdb188d
3 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -9,6 +9,11 @@
crossorigin="anonymous"/> crossorigin="anonymous"/>
</head> </head>
<body onload='particles(avoidMouse=false, speed=15)'> <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, perspiciatis nobis ipsum 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>
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<!-- javascript --> <!-- javascript -->
<script <script

2
scss/_palette.scss
View File

@ -4,4 +4,6 @@
--col-particle: #ebe7c5; --col-particle: #ebe7c5;
--col-particle-stroke: #692e50; --col-particle-stroke: #692e50;
--col-particle-stroke-hover: #9aa68b; --col-particle-stroke-hover: #9aa68b;
--col-text: #ebe7c5;
} }

21
scss/index.scss
View File

@ -6,6 +6,26 @@ import partials
@import 'reset'; @import 'reset';
@import 'palette'; @import 'palette';
body {
color: var(--col-text);
}
h1 {
font-size: 5rem;
line-height: 5rem;
margin-bottom: 3rem;
}
p {
margin-bottom: 1.5rem;
}
.wrapper {
display: flex;
flex-direction: column;
padding: 2rem;
}
#particles { #particles {
position: fixed; position: fixed;
top: 0; top: 0;
@ -13,4 +33,5 @@ import partials
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--col-bg-canvas); background: var(--col-bg-canvas);
z-index: -999;
} }