<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Oswald" rel="stylesheet">
<div id = "container">
<div id="particles-js" class = "particles">
</div>
<div id = "holderOne" class = "holder">
<!-- <div id = "particles-jsMiniOne"> </div> -->
<div class = "mini">
Octavia
</div>
<div class = "title">
Butler
</div>
</div>
<div id="particles-jsTwo" class = "particles">
</div>
<div id = "holderTwo" class = "holder">
<div class = "mini">
Jorge Luis
</div>
<div class = "title">
Borges
</div>
</div>
<div id="particles-jsThree" class = "particles">
</div>
<div id = "holderThree" class = "holder">
<div class = "mini">
James
</div>
<div class = "title">
Baldwin
</div>
</div>
</div>
body {
/* background-color: rgba( 6, 52, 87,1); */
background-color: rgba( 6, 52, 87,.1);
font-family: 'Oswald', sans-serif;
color: rgba(253, 238, 192, 1);
font-size: 50px;
text-align: center;
}
#container{
height:100vh;
width: 93vw;
display:grid;
grid-template-rows:85vh 9vh;
grid-template-columns:30vw 30vw 30vw;
grid-gap: .3em;
margin: auto;
}
/* ---- particles.js container ---- */
.particles{
border: .3em solid rgba(68, 68, 68,.3);
}
#particles-js{
grid-column: 1/1;
grid-row: 1/1;
background-color: rgba( 6, 52, 87,1);
width: 90%;
/* margin: auto; */
}
#particles-jsTwo{
grid-column: 2/2;
grid-row: 1/1;
/* background-color: #061539; */
background-color: #fcfcfc;
width: 90%;
/* margin: auto; */
}
#particles-jsThree{
grid-column: 3/3;
grid-row: 1/1;
background-color:#1A1A1A;
width: 90%;
/* margin: auto; */
}
#particles-jsMiniOne{
top:0;
}
.holder {
background-color: rgba(68, 68, 68,.1);
padding: .1em;
color: #141414;
width: 90%;
/* box-shadow: 0em -.5em 1em rgba(68, 68, 68,.3); */
font-family: 'Archivo Black', sans-serif;
text-shadow: 2px 2px 1px #fcfcfc;
/* text-shadow: 2px 2px 1px #444; */
text-transform: uppercase;
}
#holderOne{
grid-column: 1/1;
grid-row: 2/2;
}
#holderTwo{
grid-column: 2/2;
grid-row: 2/2;
}
#holderThree{
grid-column: 3/3;
grid-row: 2/2;
}
.title{
left: 1em;
/* position: absolute; */
}
.mini{
font-size: 35%;
}
jQuery("title").fitText(1.2, { minFontSize: '85em', maxFontSize: '150em' });
/* Particles */
particlesJS("particles-js",
{"particles":
{"number":
//inititial number
{"value":700,"density":
{"enable":true,"value_area":1200}},
//node color
"color": {"value":"#042037"},
"shape":
{"type":"circle","stroke":
{"width":.1,"color":"#6B0062"},"polygon":
{"nb_sides":5},
"image":
{"src":"img/github.svg","width":100,"height":100}},
"opacity":
{"value":0.5,"random":false,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},
"size":
{"value":2.5,"random":false,"anim":
{"enable":false,"speed":20,"size_min":0.1,"sync":false}},
//'edges' connectors between two nodes
"line_linked":
{"enable":true,"distance":150,
"color":"#226666",
// "color":"#EF6E73",
"opacity":0.4,"width":1},
"move":
{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":
{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":
{"detect_on":"canvas","events":
{"onhover":
{"enable":true,"mode":"repulse"},"onclick":
{"enable":true,"mode":"push"},"resize":true},"modes":
{"grab":
{"distance":400,"line_linked":
{"opacity":1}},"bubble":
{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":
{"distance":100,"duration":0.4},"push":
{"particles_nb":4},"remove":
{"particles_nb":2}}},"retina_detect":true});
/* Particles Two */
particlesJS("particles-jsTwo",
{"particles":
// Number of particles at start
{"number":
{"value":800,"density":
{"enable":true,"value_area":1200}},
// Node color
"color": {
// "value":"#0E0E52"
"value":"#fcfcfc"
},
// Node stroke and size
"shape":
{"type":"circle",
"stroke":
{"width":.1,
"color": "#192BC2"
},
"polygon":
{"nb_sides":5},
"image":
{"src":"img/github.svg","width":100,"height":100}},
"opacity":
{"value":1,"random":false,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},
"size":
{"value":2.5,
"random":false,"anim":
{"enable":false,"speed":20,"size_min":0.1,"sync":false}},
//'edges' connectors between two nodes
"line_linked":
{"enable":true,"distance":150,
// "color":"#78C0E0",
"color":"#5677AC",
"opacity":0.7,"width":1},
"move":
{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":
{"enable":false,"rotateX":600,"rotateY":1200}}},
"interactivity":
{"detect_on":"canvas","events":
{"onhover":
{"enable":true,"mode":"repulse"},
"onclick":
{"enable":true,"mode":"bubble"},"resize":true},
"modes":
{"grab":
{"distance":400,"line_linked":
{"opacity":1}},"bubble":
{"distance":250,"size":10,"duration":2,"opacity":8,"speed":3},"repulse":
{"distance":100,"duration":0.4},"push":
{"particles_nb":4},"remove":
{"particles_nb":2}}},"retina_detect":true});
/* Particles THree*/
particlesJS("particles-jsThree",
{"particles":
{"number":{"value":1700,"density":
{"enable":true,"value_area":1300}},
//node color
"color": {"value":"#F0922D"},
"shape":
{"type":"circle","stroke":
{"width":.1,"color":"#6B0062"},"polygon":
{"nb_sides":5},
"image":
{"src":"img/github.svg","width":100,"height":100}},
"opacity":
{"value":0.5,"random":false,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},
"size":
{"value":2.5,"random":false,"anim":
{"enable":false,"speed":20,"size_min":0.1,"sync":false}},
//'edges' connectors between two nodes
"line_linked":
{"enable":true,"distance":150,
"color":"#AA3939",
// "color":"#EF6E73",
"opacity":0.4,"width":1},
"move":
{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":
{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":
{"detect_on":"canvas","events":
{"onhover":
{"enable":true,"mode":"repulse"},"onclick":
{"enable":true,"mode":"bubble"},"resize":true},"modes":
{"grab":
{"distance":400,"line_linked":
{"opacity":1}},"bubble":
{"distance":250,"size":15,"duration":2,"opacity":8,"speed":2},"repulse":
{"distance":100,"duration":0.4},"push":
{"particles_nb":4},"remove":
{"particles_nb":2}}},"retina_detect":true});
This Pen doesn't use any external CSS resources.