index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style/style.css" />
    <link rel="stylesheet" href="/style/styel2.css" />
    
    
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
      integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
      crossorigin="anonymous" />
    <link
      rel="stylesheet"
      href="style/font-awesome-4.7.0/css/font-awesome.min.css" />
      <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
     <script  src="script/script.js"></script>
    <script src="script/util.js"></script> 
    <title>Bug Developer</title>
  </head>
  <body class="body box">
      <header
        role="banner"
        class=" Site-head  pad-top-500 pad-bottom-500 ">
        <div class=" wrapper wrapper-lg ">
          
          <div
            class=" Site-head__inner box-flex space-between align-center ">
            <a
              href="/"
              class=" Site-head__site-name  leading-tight "
              aria-current="page"
              ><span class="visually-hidden">Raj Narayan</span>
             </a>
            <nav class="nav">
              <ul style="    list-style: none;"
                class=" nav__list box-flex align-center md:space-before ">
                <li class="nav__item">
                  <a href="/writing/" class="nav__item-hover" data-id="writing"
                    ><span class="nav__item-hover-inner" data-hover="Home"
                      >Home</span
                    ></a
                  >
                </li>
                <li class="nav__item">
                  <a
                    href="https://Instagram.com/raj__rr/"
                    class="nav__item-hover"
                    data-id="speaking"
                    ><span class="nav__item-hover-inner" data-hover="Instagram"
                      >Instagram</span
                    ></a
                  >
                </li>
                <li class="nav__item">
                  <a
                    href="/"
                    class="nav__item-hover"
                    data-id="speaking"
                    ><span class="nav__item-hover-inner" data-hover="Buy me A Coffee"
                      >Buy me A Coffee</span
                    ></a
                  >
                </li>
                <li class="nav__item">
                  <a
                    href="https://github.com/rajguptah/"
                    class="nav__item-hover"
                    data-id="workshop"
                    ><span class="nav__item-hover-inner" data-hover="Github"
                      >Github</span
                    ></a
                  >
                </li>
                <li class="nav__item">
                  <a
                    href="https://Instagram.com/bug__developer"
                    rel="external"
                    class="nav__item-hover"
                    data-id="playing"
                    ><span class="nav__item-hover-inner" data-hover="Contact Us"
                      >Contact Us</span
                    ></a
                  >
                </li>
              </ul>
            </nav>
            <label class="switch js-night-toggle"
              ><input onclick="funtus()"
                class="switch__checkbox js-night-checkbox"
                type="checkbox" />
              <span id="themeSwitch" class="switch__toggle"></span> Toggle dark mode</label
            >
          </div>
        </div>
    </header>
    <div class="bg-orange">
      <div class="row ">
        <div class="col">
          <img class="img-girl-google" src="/img/19362653.png" />
        </div>
         <div class="col">
          <p class="font-main">Hi, I'm, Raj Narayan Gupta</p>
          <p class="sub-head">
            i like to making fun interactive things with code i also talk &
            write about those things
          </p>
         
          <h1>
            <p
              href=""
              class="typewrite"
              data-period="2000"
              data-type='[ "Software Developer.", "Love Music.", "Scroll Down For More.", "Thanks." ]'>
              <span class="wrap"></span>
            </p>
          </h1>
          <button class="btn-green-main">
            <a href="/">Browse Our Services</a>
          </button>
        </div>
      </div>
    </div>

    <!--  -->
<!--     
    <div class="bg-orange">
      <div class="row ">
        <div class="col-lg-6 col-md-6 col-xl-6 mar-t-5">
          <p class="font-main">Hi, I'm, Raj Narayan Gupta</p>
          <p class="sub-head">
            i like to making fun interactive things with code i also talk &
            write about those things
          </p>
          <button onclick="openNav()">&Xi;</button>
          <h1>
            <p
              href=""
              class="typewrite"
              data-period="2000"
              data-type='[ "Software Developer.", "Love Music.", "Scroll Down For More.", "Thanks." ]'>
              <span class="wrap"></span>
            </p>
          </h1>
          <button class="btn-green-main">
            <a href="/">Browse Our Services</a>
          </button>
        </div>

        <div class="col-lg-6 col-md-6 col-xl-6">
          <img class="img-girl-google" src="/img/19362653.png" />
        </div>
      </div>
    </div> -->
  </body>
</html>
<script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="665b9069-ef06-4415-9f08-e94eb01e0bda";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
<script>
  //$(document).ready(SetLightTheme());
  var TxtType = function (el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 10) || 2000;
    this.txt = "";
    this.tick();
    this.isDeleting = false;
  };

  TxtType.prototype.tick = function () {
    var i = this.loopNum % this.toRotate.length;
    var fullTxt = this.toRotate[i];

    if (this.isDeleting) {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";

    var that = this;
    var delta = 200 - Math.random() * 100;

    if (this.isDeleting) {
      delta /= 2;
    }

    if (!this.isDeleting && this.txt === fullTxt) {
      delta = this.period;
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === "") {
      this.isDeleting = false;
      this.loopNum++;
      delta = 500;
    }

    setTimeout(function () {
      that.tick();
    }, delta);
  };

  window.onload = function () {
    var elements = document.getElementsByClassName("typewrite");
    for (var i = 0; i < elements.length; i++) {
      var toRotate = elements[i].getAttribute("data-type");
      var period = elements[i].getAttribute("data-period");
      if (toRotate) {
        new TxtType(elements[i], JSON.parse(toRotate), period);
      }
    }
  };
</script>