Gecko [ gandhischool.edu.np ]

Name	Size	Permission
.git	[ DIR ]	drwxr-xr-x
assets	[ DIR ]	drwxr-xr-x
css	[ DIR ]	drwxr-xr-x
forms	[ DIR ]	drwxr-xr-x
regulator	[ DIR ]	drwxr-xr-x
sass	[ DIR ]	drwxr-xr-x
.DS_Store	10 KB	-rw-r--r--
.gitignore	624 B	-rw-r--r--
3dviewer.html	5.59 KB	-rw-r--r--
Readme.txt	455 B	-rw-r--r--
ar_hand_prompt.png	11.66 KB	-rw-r--r--
ar_icon.png	679 B	-rw-r--r--
changelog.txt	2.67 KB	-rw-r--r--
index.html	62.58 KB	-rw-r--r--
inner-page.html	8.21 KB	-rw-r--r--
modified_index.html	52.42 KB	-rw-r--r--
oxygen-cylinder.html	13.31 KB	-rw-r--r--
oxygen-mask.html	10.4 KB	-rw-r--r--
oxygen-regulator.html	10.42 KB	-rw-r--r--
portfolio-details.html	10.05 KB	-rw-r--r--

Code Editor : oxygen-mask.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>SD Gases</title>
    <meta content="Sd Gases" name="description" />
    <meta content="" name="keywords" />
    
    <link href="assets/img/sdgases_logo.png" rel="icon" />
    <link href="assets/img/sdgases_logo.png" rel="apple-touch-icon" />
    
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i"
      rel="stylesheet"
    />
    
    <link href="assets/vendor/aos/aos.css" rel="stylesheet" />
    <link
      href="assets/vendor/bootstrap/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
      rel="stylesheet"
    />
    <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
    <link
      href="assets/vendor/glightbox/css/glightbox.min.css"
      rel="stylesheet"
    />
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
    <script
      crossorigin="anonymous"
      src="https://kit.fontawesome.com/831f59072b.js"
    ></script>
    <script
      src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"
      type="module"
    ></script>
    
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    
    <script
      async="true"
      src="https://www.googletagmanager.com/gtag/js?id=G-HMEJ2NJZ6X"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-HMEJ2NJZ6X");
    </script>

.section-title {
        text-align: center;
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #2f4d5a;
      }

.section-description {
        text-align: center;
        margin-bottom: 20px;
        font-size: 16px;
        color: #555;
      }

model-viewer {
        width: 100%;
        height: 100%;
        --poster-color: transparent;
        object-fit: contain;
      }

model-viewer::part(default-progress-bar) {
        display: none;
      }

/* Content Wrapper */
      .content-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
      }

.video-container,
      .main-model-box {
        flex: 1 1 100%;
        max-width: 600px;
      }

iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

/* Key Features Section */
      .features-list {
        margin-top: 30px;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

.features-list h3 {
        font-size: 22px;
        margin-bottom: 20px;
        color: #2f4d5a;
      }

.features-list ul {
        list-style-type: disc;
        padding-left: 20px;
      }

.features-list ul li {
        margin-bottom: 10px;
        font-size: 16px;
        color: #333;
      }

/* Responsive Styles */
      @media (max-width: 767px) {
        .main-model-box,
        .video-container {
          height: 300px;
        }
      }
    </style>
  </head>
  <body>
    
    <header class="fixed-top" id="header">
      <div class="container d-flex align-items-center justify-content-between">
        <div class="logo">
          <h1 class="text-light">
            <a href="index.html"><span>Sd Gases</span></a>
          </h1>
        </div>
        <nav class="navbar" id="navbar">
          <ul>
            <li>
              <a class="nav-link scrollto active" href="index.html#hero"
                >Home</a
              >
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#about">About Us</a>
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#products"
                >Products</a
              >
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#why-us">Why Us</a>
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#services"
                >Services</a
              >
            </li>
            <li>
              <a class="nav-link scrollto" href="index.html#contact">Contact</a>
            </li>
          </ul>
          <i class="bi bi-list mobile-nav-toggle"></i>
        </nav>
      </div>
    </header>

<main id="main">
      
      <section>
        <div class="container">
          <div class="section-title" data-aos="fade-in" data-aos-delay="100">
            <h2>SD Gases Oxygen Facemask</h2>
          </div>
          <div class="content-wrapper">
            <div class="video-container" data-aos="fade-right">
              <iframe
                width="1007"
                height="566"
                src="https://www.youtube.com/embed/LDpto3ql58U"
                title="MaskSD"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen
              ></iframe>
            </div>
          </div>
        </div>
      </section>

<section>
        <div class="container">
          <div class="section-title" data-aos="fade-in" data-aos-delay="100">
            <h2>3D Model Viewer</h2>
          </div>
          <div
            class="section-description"
            data-aos="fade-in"
            data-aos-delay="200"
          >
            <p>
              Explore our product in 3D! Use your mouse or touch to rotate,
              zoom, and pan around the model.
            </p>
          </div>
          <div class="content-wrapper">
            <div class="main-model-box" data-aos="fade-left">
              <model-viewer
                alt="Mountaineering Oxygen Equipment"
                ar
                ar-modes="webxr scene-viewer quick-look"
                camera-controls
                auto-rotate
                interaction-prompt="auto"
                interaction-prompt-style="basic"
                camera-orbit="0deg 75deg auto"
                min-camera-orbit="auto auto 50%"
                max-camera-orbit="auto auto 400%"
                environment-image="neutral"
                exposure="1.5"
                id="main-model"
                shadow-intensity="1.06"
                shadow-softness="1"
                src="assets/models/maskonly.glb"
                tone-mapping="agx"
                touch-action="pan-y"
              ></model-viewer>
            </div>
          </div>
        </div>
      </section>

<section class="features-list mb-4">
        <div class="container">
          <h3>Key Features</h3>
          <ul>
            <li>Available in three sizes for a perfect fit</li>
            <li>Unique oxygen reservoir for efficient breathing</li>
            <li>Low-profile design fits comfortably under helmets</li>
            <li>Durable construction withstands harsh mountain conditions</li>
          </ul>
        </div>
      </section>
    </main>

<footer id="footer">
      <div class="footer-top">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 col-md-6">
              <div class="footer-info">
                <h3>SDGASES</h3>
                <p class="pb-3">
                  <em>Leading business provider in mountain oxygen sector.</em>
                </p>
                <p>
                  Patandhoka<br />
                  Lalitpur, Nepal<br /><br />
                  <strong>Phone:</strong> +01-5533950<br />
                  <strong>Email:</strong> sdgases.mgmt@gmail.com<br />
                </p>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 footer-links">
              <h4>Useful Links</h4>
              <ul>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Home</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">About us</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Products</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Services</a>
                </li>
                <li>
                  <i class="bx bx-chevron-right"></i> <a href="#">Contact</a>
                </li>
              </ul>
            </div>
            <div class="col-lg-4 col-md-6 footer-newsletter">
              <h4>Our Newsletter</h4>
              <p>Sign up for exclusive offers and updates.</p>
              <form action="forms/submit.php" method="post">
                <input name="email" type="email" /><input
                  type="submit"
                  value="Subscribe"
                />
              </form>
            </div>
          </div>
        </div>
      </div>
    </footer>

<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
    <script src="assets/vendor/aos/aos.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="assets/vendor/php-email-form/validate.js"></script>
    
    <script src="assets/js/main.js"></script>
  </body>
</html>

${this.title}

Code Editor : oxygen-mask.html