<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="container">
        <div class="title">You're currently using <span class="browserName">chrome</span> Browser</div>
        <div class="logos">
            <div class="browserLogo ieLogo"></div>
            <div class="browserLogo edgeLogo"></div>
            <div class="browserLogo firefoxLogo"></div>
            <div class="browserLogo operaLogo"></div>
            <div class="browserLogo chromeLogo"></div>
            <div class="browserLogo safariLogo"></div>
        </div>
    </div>

    <script>
        function detectBrowser() {
            let UA = navigator.userAgent
            let browser;
            if (!!document.documentMode == true) {
                browser = "IE";
            } else if (UA.match(/edg/i)) {
                browser = "edge";
            } else if (UA.match(/firefox|fxios/i)) {
                browser = "firefox";
            } else if (UA.match(/opr\//i)) {
                browser = "opera";
            } else if (UA.match(/chrome|chromium|crios/i)) {
                browser = "chrome";
            } else if (UA.match(/safari/i)) {
                browser = "safari";
            } else {
                alert("You are using another browser");
            }
            return browser
        }

        function setBrowser(browser) {
            let logo = document.querySelector(`.${browser}Logo`)
            let browserName = document.querySelector(`.browserName`)

            logo.classList.add('current')
            browserName.innerHTML = browser
            browserName.classList.add(browser)
        }
        setBrowser(detectBrowser().toLowerCase())
        console.log(detectBrowser())
    </script>
<!-- Code injected by live-server -->
<script type="text/javascript">
  // <![CDATA[  <-- For SVG support
  if ('WebSocket' in window) {
    (function () {
      function refreshCSS() {
        var sheets = [].slice.call(document.getElementsByTagName("link"));
        var head = document.getElementsByTagName("head")[0];
        for (var i = 0; i < sheets.length; ++i) {
          var elem = sheets[i];
          var parent = elem.parentElement || head;
          parent.removeChild(elem);
          var rel = elem.rel;
          if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
            var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
            elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
          }
          parent.appendChild(elem);
        }
      }
      var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
      var address = protocol + window.location.host + window.location.pathname + '/ws';
      var socket = new WebSocket(address);
      socket.onmessage = function (msg) {
        if (msg.data == 'reload') window.location.reload();
        else if (msg.data == 'refreshcss') refreshCSS();
      };
      if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
        console.log('Live reload enabled.');
        sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
      }
    })();
  }
  else {
    console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
  }
  // ]]>
</script></body>

</html>
/* --------------------- Created By InCoder --------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  height: 100vh;
  background-color: rgb(0 0 0 / 80%);
}

.container .title {
  color: #fff;
  font-weight: 500;
  text-align: center;
  padding-top: 1.8rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.browserName {
  text-transform: capitalize;
}

.browserLogo {
  height: 7rem;
  transition: all 0.3s;
  filter: grayscale(0.9);
  width: clamp(7rem, 4vw, 5rem);
}

.chrome {
  font-weight: 800;
  color: #fbc011;
}

.opera {
  font-weight: 800;
  color: #ff1429;
}

.ie {
  font-weight: 800;
  color: #37a5e2;
}

.edge {
  font-weight: 800;
  color: #38cb54;
}

.firefox {
  font-weight: 800;
  color: #b93ce7;
}

.safari {
  font-weight: 800;
  color: #0184ca;
}

.logos {
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.chromeLogo {
  background: url(https://drive.google.com/uc?id=199wEkk6kQbv_OzgTLSAdAZ5c86gLNnCP&export=view) no-repeat center 100%;
  background-size: cover;
}

.operaLogo {
  background: url(https://drive.google.com/uc?id=1OGVcfiKtfCWztQm8yMUT2GCz_BpwftWD&export=view) no-repeat center 100%;
  background-size: cover;
}

.ieLogo {
  background: url(https://drive.google.com/uc?id=1yg5gjO7yaXLQuAA8rrJ84JCApzyi0BZB&export=view) no-repeat center 100%;
  background-size: cover;
}

.edgeLogo {
  background: url(https://drive.google.com/uc?id=13Y8-krv89SAu3SL8qlSjddMnOODiCUix&export=view) no-repeat center 100%;
  background-size: cover;
}

.firefoxLogo {
  background: url(https://drive.google.com/uc?id=1dH-uY09eDhZZriVArof2bpr7Nux4tKjT&export=view) no-repeat center 100%;
  background-size: cover;
}

.safariLogo {
  background: url(https://drive.google.com/uc?id=1-wMfuXglcL27eXEihH2ODqPQb0fWjpfi&export=view) no-repeat center 100%;
  background-size: cover;
}

:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo) {
    transform: scale(.9);
}

:is(.operaLogo, .chromeLogo, .ieLogo, .edgeLogo, .firefoxLogo, .safariLogo).current {
  filter: grayscale(0);
  transform: scale(1.2);
}

@media (max-width: 710px) {
  .browserLogo {
    width: 4rem;
    height: 4rem;
  }
}

@media (max-width: 500px) {
  .browserLogo {
    width: 3rem;
    height: 3rem;
  }

  .logos {
    flex-wrap: wrap;
  }

  .logos div {
    margin-left: .3rem;
  }
}

@media (min-width: 1440px) {
  .logos {
    max-width: 70%;
    justify-content: center;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.