Responsive hero with image and particles-js

RH Suman
June 20, 2022

52

Examples of inspirational CSS hero image background and plugin that will make the bootstrap site even more influential providing section for site overview.
Responsive hero with image and particles-js

First I used particles js and Bootstrap CDN OR Download Bootstrap and particles js New Virtion

<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

HTML Link:

<div id="particles-js"></div>
  
<div class="container-fluid pt-5">
  <div class="card pt-5">
    <div class="card-body">
      <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
        
        <div class="col-lg-6">
        <img src="https://images.unsplash.com/photo-1530435460869-d13625c69bbf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="d-block mx-lg-auto img-fluid" alt="">
      </div>
        
        <div class="col-lg-6">
        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
        <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est deleniti accusamus ipsum atque, aut voluptas distinctio ipsam aliquam, exercitationem iste rem commodi soluta quisquam voluptates dolore tempora odit, sint recusandae.</p>
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

CSS Code:

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport
{
    width: device-width;
}

body
{
    font-family: Open Sans, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
    color: #525f7f;
    background-color: #f8f9fe;
}

#particles-js {
    position: absolute;  
    width: 100%;
    height: 100%;
    /* background-color: #252525; */
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 24%, rgba(0,212,255,1) 100%);


    background: #314755;  /* fallback for old browsers */
    background: -webkit-linear-gradient(180deg, #26a0da, #314755);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(180deg, #26a0da, #314755); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* background-image: url(""); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }  

JS Code:

particlesJS("particles-js", { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "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": 4, "random": true, "anim": { "enable": true, "speed": 9.744926547616142, "size_min": 1.6241544246026904, "sync": true } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 3, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "window", "events": { "onhover": { "enable": false, "mode": "repulse" }, "onclick": { "enable": true, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 150, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true });

Preview:

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts