index.html

<!DOCTYPE html>
<html lang="en" class="has-navbar-fixed-top">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
  <link href="https://fonts.googleapis.com/css?family=Slabo+27px&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="main.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
  <title>KBA-CET</title>
</head>
<body>
    <nav class="navbar is-link is-spaced is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
          <a class="navbar-item has-text-weight-bold" href="#">
            KBA-CET &nbsp; <i class="fas fa-cubes blue" ></i>
          </a>
      
          <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
      
        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-end ">
            <a class="navbar-item" href="#home">
              Home
            </a>
      
            <a class="navbar-item" href="#about">
              About
            </a>

            <a class="navbar-item" href="#event">
              Events
            </a>

            <a class="navbar-item" href="#team">
              Team
            </a>

            <a class="navbar-item" href="#contact">
              Contact
            </a>
          </div>
        </div>
      </nav>
    
      <header id="particles-js" class="hero-container">
        <img class="main-image" src="./img/college1.jpg" />
        <section class="hero is-medium" id="home">
            <div class="hero-body">
              <div class="container is-fluid has-text-centered">
                <h1 class="hero-text title has-text-white is-size-1">
                  Blockchain Innovation Club
                  
                </h1>
                <h2 class="hero-text-sub subtitle has-text-white is-size-4">
                  College of Engineering Trivandrum
                </h2>

                <a class="button hero-container-main-button is-primary is-large is-rounded is-outlined" href="#event">Upcoming events</a>
              </div>
            </div>
          </section>
      </header>

      <section class="hero is-transparent is-medium" id="about">
        <div class="hero-body">
          <div class="container">
            <div class="columns">
              
              <div class="column is-one-quarter ">
                <div class="flex-container">
                  <figure class="image is-128x128" style="margin: 1rem">
                      <img src="./img/blockchain.svg">
                  </figure>
                </div>  
              </div>
              <div class="column  is-three-quarter">
                <h1 class="title has-text-left has-text-dark is-size-2">
                    About us<span class="has-text-primary">.</span>
                </h1>
                
                <p class="is-size-5 has-text-left ">
                  Kerala Blockchain Academy Innovation Club (KBAIC) is a novel initiative by Kerala Blockchain Academy (KBA) to help students from 
                  academic institutions across the country to explore deep into the potential of the blockchain technology.
                  KBA-CET aims to tap into this disruptive technology and make the students equipped and industry-ready for blockchain applications.
                  Dr. K Sunil Kumar, Asst Professor Department of Mechanical Engg is the coordinator for the KBAIC.
                </p>
                <p class="is-size-5 has-text-left "> 
                    
                  
                </p>
              </div>
            </div>
            
            
          </div>
        </div>
      </section>

      <div class="modal" id="modal1">
        <div class="modal-background"></div>
          <div class="modal-card">
            <h3 >Test</h3>
          </div>
        <button class="modal-close is-large" onclick="toggleModal()" aria-label="close"></button>
      </div>

      <section class="event-container" id="event">
          
          <section class="hero is-medium">
              <div class="hero-body justify-center">
                  <h1 class="is-size-1 has-text-centered text-gradient">Loading events..</h1>
                  <h2 class="hero-text-sub has-text-centered subtitle has-text-white is-size-4">
                      Watch this space for future events.
                  </h2>
                      
                <button class="button is-primary is-outlined has-text-centered" onclick="toggleModal()" disabled>
                  <span>Coming soon</span>
                </button>
              </div>
            </section>
      </section>

      <section class="hero is-transparent is-medium" id="about">
          <div class="hero-body">
            <div class="container">
              <div class="columns">
                
                <!-- <div class="column is-two-quarter ">
                  <div class="flex-container">
                    <figure class="image is-128x128" style="margin: 1rem">
                        <img src="./img/blockchain.svg">
                    </figure>
                    <figure class="image is-128x128" style="margin: 1rem">
                        <img src="./img/blockchain.svg">
                    </figure>
                    <figure class="image is-128x128" style="margin: 1rem">
                        <img src="./img/blockchain.svg">
                    </figure>
                  </div>  
                </div> -->
                <div class="column text-center center is-two-quarter">
                    <h1 class="title is-size-2 has-text-centered  has-text-dark is-size-2">
                      Certificate of Membership<span class="has-text-primary">.</span>
                  </h1>
              
                  <center><img src="./img/certificate.png" class="certificate_image"/>
                  </center>
                  <p class="is-size-5 has-text-centered ">
                     College of Engineering Trivandrum is an official member of KBA Innovation Club.
                  </p>
                </div>
              </div>
              
              
            </div>
          </div>
        </section>
  

      <section class="advisor-container" id="team">
          <section class="hero is-medium">
              <div class="hero-body">
                
                <div class="container">
                    <h1 class="title is-size-2 has-text-centered">
                        Advisory and Team<span class="has-text-primary">.</span> 
                    </h1>
                    
                    <h2 class="title is-size-4 has-text-centered  sub-head" style="margin-top:4em">
                        KBAIC Coordinator
                    </h2>
<div clas="notification is-info">
    <div class="columns is-multiline">
        <!-- <div class="column is-one-quarter-desktop is-half-tablet"> -->
            <div class="justify-center is-vcentered"  style="width: 100%;margin-bottom: 2em;">
                <div class="">
                    <figure class="image is-128x128">
                        <img src="./img/ksk.jpg" class="is-rounded" alt="">
                    </figure>
                </div>
                <footer class="">
                    <p class="has-text-centered">
                      Dr. K Sunil Kumar
                    </p>
                    <p class="tag is-info">
                        Mechanical Engg - Associate Professor
                    </p>  
                </footer>
            </div>
          <!-- </div>  -->
      </div>

    </div>

    <h2 class="title is-size-4 has-text-centered sub-head">
        KBAIC Department Coordinator
    </h2>
    <div clas="notification is-info">
        <div class="columns is-multiline">
                <div class="justify-center is-vcentered"  style="width: 100%;margin-bottom: 2em;">
                    <div class="">
                        <figure class="image is-128x128">
                            <img src="./img/syla.jpg" class="is-rounded" alt="">
                        </figure>
                    </div>
                    <footer class="">
                        <p class="has-text-centered">
                          Baby Syla S
                        </p>
                        <p class="tag is-info">
                            MCA - Assistant Professor
                        </p>  
                    </footer>
                </div>
          </div>
    
        </div>


        <h2 class="title is-size-4 has-text-centered  sub-head">
            KBAIC Student Ambassadors
        </h2>
<div clas="notification is-info">
    <div class="columns is-multiline">
          <div class="column is-offset-one-quarter  is-one-quarter-desktop is-half-tablet">
            <div class="justify-center is-vcentered">
                <div class="">
                    <figure class="image is-128x128">
                        <img src="./img/aswin.JPG" class="is-rounded" alt="">
                    </figure>
                </div>
                <footer class="is-text-centered">
                    <a class="card-footer-item">
                      Ashwin Madhu
                    </a>
                </footer>
            </div>
          </div> 
          <div class="column is-one-quarter-desktop is-half-tablet">
            <div class="justify-center is-vcentered">
                <div class="">
                    <figure class="image is-128x128">
                        <img src="./img/Vas1.jpeg" class="is-rounded" alt="">
                    </figure>
                </div>
                <footer class="is-text-centered">
                    <a class="card-footer-item">
                      Vasudev R Nair
                    </a>
                </footer>
            </div>
          </div> 
        
      </div>

    </div>


    <h2 class="title is-size-4 has-text-centered sub-head">
        Executive Committee
    </h2>
<div clas="notification is-info">
    <div class="columns is-multiline">
        <div class="column is-one-quarter-desktop is-half-tablet">
          <div class="justify-center is-vcentered">
              <div class="">
                  <figure class="image is-128x128">
                      <img src="./img/varna.jpg" class="is-rounded" alt="">
                  </figure>
              </div>
              <footer class="is-text-centered">
                  <a class="card-footer-item">
                    Varna Krishnan
                  </a>
              </footer>
          </div>
        </div>  
        <div class="column is-one-quarter-desktop is-half-tablet">
          <div class="justify-center is-vcentered">
              <div class="">
                  <figure class="image is-128x128">
                      <img src="./img/Shibin1.jpeg" class="is-rounded" alt="">
                  </figure>
              </div>
              <footer class="is-text-centered">
                  <a class="card-footer-item">
                    Shibin Sidharth
                  </a>
              </footer>
          </div>
        </div> 
        <div class="column is-one-quarter-desktop is-half-tablet">
          <div class="justify-center is-vcentered">
              <div class="">
                  <figure class="image is-128x128">
                      <img src="./img/anna.png" class="is-rounded" alt="">
                  </figure>
              </div>
              <footer class="is-text-centered">
                  <a class="card-footer-item">
                    Anna Shajan
                  </a>
              </footer>
          </div>
        </div> 
        <div class="column is-one-quarter-desktop is-half-tablet">
          <div class="justify-center is-vcentered">
              <div class="">
                  <figure class="image is-128x128">
                      <img src="./img/vaish.jpg" class="is-rounded" alt="">
                  </figure>
              </div>
              <footer class="is-text-centered">
                  <a class="card-footer-item">
                    Vaishnav P
                  </a>
              </footer>
          </div>
        </div> 
      
      </div>

    </div>


                    <!-- <div class="tile is-ancestor">
                        <div class="tile is-vertical is-8">
                          <div class="tile">
                            <div class="tile is-parent is-vertical">
                              <article class="tile is-child notification is-primary">
                                <p class="title">Vertical...</p>
                                <p class="subtitle">Top tile</p>
                              </article>
                              <article class="tile is-child notification is-warning">
                                <p class="title">...tiles</p>
                                <p class="subtitle">Bottom tile</p>
                                <figure class="image is-128x128">
                                    <img src="https://bulma.io/images/placeholders/640x480.png">
                                  </figure>
                              </article>
                            </div>
                            <div class="tile is-parent">
                              <article class="tile is-child notification is-info">
                                <p class="title">Middle tile</p>
                                <p class="subtitle">With an image</p>
                                <figure class="image is-4by3">
                                  <img src="https://bulma.io/images/placeholders/640x480.png">
                                </figure>
                              </article>
                            </div>
                          </div>
                          <div class="tile is-parent">
                            <article class="tile is-child notification is-danger">
                              <p class="title">Wide tile</p>
                              <p class="subtitle">Aligned with the right tile</p>
                              <div class="content">
                               
                              </div>
                            </article>
                          </div>
                        </div>
                        <div class="tile is-parent">
                          <article class="tile is-child notification is-success">
                            <div class="content">
                              <p class="title">Tall tile</p>
                              <p class="subtitle">With even more content</p>
                              <div class="content">
                                  <figure class="image is-4by5">
                                      <img src="https://bulma.io/images/placeholders/640x480.png">
                                    </figure>
                              </div>
                            </div>
                          </article>
                        </div>
                      </div> -->
                </div>
              </div>
          </section>
      </section>

      <section class="contact-container" id="contact">
         
              <div class="hero">
                <div class="hero-body ">
                    <div class="container">
                    <h1 class="title is-size-2 has-text-left text-bg">
                        Leave a message<span class="">.</span> 
                    </h1>
                    <a class="button is-medium is-success is-outlined " href="mailto:someone@yoursite.com?subject=Mail from Our Site">Send an email</a>
                    </div>
                </div>
              </div>

      </section>

      <footer class="footer  footer-bg has-text-white">
        <div class="content">
          <div class="tile is-ancestor">
            <div class="tile is-parent is-vertical">
              <div class="tile is-child"></div>
              <div class="tile is-child has-text-centered" style="animation: fadeUp 2s ease-in-out 0.5s 1 backwards;">
                  
                  <p>
                    &copy 2019 College of Engineering Trivandrum. All rights reserved.
                  </p>
              </div>
            </div>
          </div>
          
        </div>
      </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   
  <script>
  //Smooth scroll
  $(document).ready(function(){
        // Add smooth scrolling to all links
        $("a").on('click', function(event) {
      
          // Make sure this.hash has a value before overriding default behavior
          if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();
      
            // Store hash
            var hash = this.hash;
      
            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
              scrollTop: $(hash).offset().top
            }, 800, function(){
      
              // Add hash (#) to URL when done scrolling (default click behavior)
              window.location.hash = hash;
            });
          } // End if
        });
      });

  //end
  document.addEventListener('DOMContentLoaded', () => {

  // Get all "navbar-burger" elements
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {

    // Add a click event on each of them
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {

        // Get the target from the "data-target" attribute
        const target = el.dataset.target;
        const $target = document.getElementById(target);

        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');

      });
    });
  }

  });

  function toggleModal() {
    var element = document.getElementById('modal1');
    element.classList.toggle('is-active');
    console.log('test');
  }

  </script>
  <script src="./js/particle_custom.js" ></script>
</body>

</html>