index.html

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

<head>
  <title>Home - Scholarly</title>
  <meta property="og:title" content="Scholarly Library"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8" />
  <link rel="icon" type="image/png" href="scholarlyv1_icon.png">
  <style data-tag="reset-style-sheet">
    html {
      line-height: 1.15;
    }

    body {
      margin: 0;
    }

    * {
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
    }

    p,
    li,
    ul,
    pre,
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    figure,
    blockquote,
    figcaption {
      margin: 0;
      padding: 0;
    }

    button {
      background-color: transparent;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
      font-family: inherit;
      font-size: 100%;
      line-height: 1.15;
      margin: 0;
    }

    button,
    select {
      text-transform: none;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
      -webkit-appearance: button;
    }

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
      border-style: none;
      padding: 0;
    }

    button:-moz-focus,
    [type="button"]:-moz-focus,
    [type="reset"]:-moz-focus,
    [type="submit"]:-moz-focus {
      outline: 1px dotted ButtonText;
    }

    a {
      color: inherit;
      text-decoration: inherit;
    }

    input {
      padding: 2px 4px;
    }

    img {
      display: block;
    }

    html {
      scroll-behavior: smooth
    }
  </style>
  <style data-tag="default-style-sheet">
    html {
      font-family: Poppins;
      font-size: 16px;
    }

    body {
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      text-transform: undefined;
      letter-spacing: normal;
      line-height: 1.3;
      color: var(--dl-color-scheme-darkblue);
      background-color: var(--dl-color-scheme-white);

    }
  </style>
  <link rel="stylesheet"
    href="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&amp;display=swap"
    data-tag="font" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital,wght@0,400;1,400&amp;display=swap"
    data-tag="font" />
  <style>
    .services-card:hover>div {
      background-color: #fff
    }
  </style>
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div>
    <link href="./home.css" rel="stylesheet" />

    <div class="home-container">
      <header data-role="Header" class="navigation-header">
        <div class="navigation-announcement">
          <span class="navigation-title">You are using the Legacy site. </span>
          <div class="navigation-button">
            <a href = "/read-more/"><span class="navigation-button-text">See more -&gt;</span></a>
          </div>
        </div>
        <div class="navigation-max-width">
          <a href="/"><img alt="logo" src="scholarlyv1_webfriendly-200h.png" class="navigation-image" /></a>
          <div class="navigation-nav">
            <nav class="navigation-links-nav navigation-links-root-class-name17">
              <span class="navigation-links-text Navigation-Link">
                <a href="/"><span>Home</span></a>
              </span>
              <span class="navigation-links-text1 Navigation-Link">
                <a href="/library"><span>Library</span></a>
              </span>
              <span class="navigation-links-text2 Navigation-Link">
                <a href="/coach"><span>Coach</span></a>
              </span>
              <span class="navigation-links-text3 Navigation-Link">
                <a href="https://github.com/ScholarlyDigital" target="_blank"><span>About</span></a>
              </span>
            </nav>
            <a href="mailto:contact@scholarly.digital" target="_blank"><button
                class="button-secondary button button-md">
                <span>Contact Us</span>
              </button></a>
          </div>
          <div data-role="BurgerMenu" class="navigation-burger-menu">
            <svg viewBox="0 0 1024 1024" class="navigation-icon">
              <path
                d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z">
              </path>
            </svg>
          </div>
          <div data-role="MobileMenu" class="mobile-menu navigation-mobile-menu">
            <div class="navigation-nav1">
              <div class="navigation-container">
                <a href="/"><img alt="image" src="scholarlyv1_webfriendly-200h.png" class="navigation-image" /></a>
                <div data-role="CloseMobileMenu" class="navigation-close-mobile-menu">
                  <svg viewBox="0 0 1024 1024" class="navigation-icon2">
                    <path
                      d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z">
                    </path>
                  </svg>
                </div>
              </div>
              <nav class="navigation-links-nav navigation-links-root-class-name18">
                <span class="navigation-links-text Navigation-Link">
                  <a href="/"><span>Home</span></a>
                </span>
                <span class="navigation-links-text1 Navigation-Link">
                  <a href="/library"><span>Library</span></a>
                </span>
                <span class="navigation-links-text2 Navigation-Link">
                  <a href="/coach"><span>Coach</span></a>
                </span>
                <span class="navigation-links-text3 Navigation-Link">
                  <a href="https://github.com/ScholarlyDigital" target="_blank"><span>About</span></a>
                </span>
              </nav>
              <a href="mailto:contact@scholarly.digital" target="_blank"><button class="button-secondary button button-md">
                <span>Contact Us</span>
              </button></a>
            </div>
          </div>
        </div>
      </header>
      <main class="home-main">
        <div class="home-hero section-container">
          <div class="home-max-width max-content-container">
            <div class="home-heading-container">
              <h1 class="home-text">
                <span>All your textbooks</span>
                <br />
                <span>All in one place</span>
              </h1>
              <span class="home-text04">
                <span>
                  Welcome to the Scholarly Library. This is an archive of all GCSE textbooks you'll need. This is a legacy version of the site that will be shutdown in March 2024.
                </span>
                <br>
                <br>
                <a href="#featured"><button class="home-primary button-primary button-lg button">
                    Let's find what you need!
                  </button></a>
            </div>
            <div class="home-gallery">
              <div class="home-container1">
                <img alt="image"
                  src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDF8fHN0dWR5fGVufDB8fHx8MTY3NTg4MzY0Ng&amp;ixlib=rb-4.0.3&amp;w=1000"
                  class="home-image" />
              </div>
              <div class="home-container2">
                <img alt="image"
                  src="https://images.unsplash.com/photo-1532153955177-f59af40d6472?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDE0fHxzdHVkeXxlbnwwfHx8fDE2NzU4ODM2NDY&amp;ixlib=rb-4.0.3&amp;w=1000"
                  class="home-image1" />
                <img alt="image"
                  src="https://images.unsplash.com/photo-1616400619175-5beda3a17896?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDh8fHN0dWR5fGVufDB8fHx8MTY3NTg4MzY0Ng&amp;ixlib=rb-4.0.3&amp;w=1000"
                  class="home-image2" />
              </div>
              <div class="home-container3">
                <img alt="image"
                  src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDEzfHxzdHVkeXxlbnwwfHx8fDE2NzU4ODM2NDY&amp;ixlib=rb-4.0.3&amp;w=1000"
                  class="home-image3" />
                <div class="home-container4">
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1600195077077-7c815f540a3d?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDd8fHN0dWR5fGVufDB8fHx8MTY3NTg4MzY0Ng&amp;ixlib=rb-4.0.3&amp;w=1000"
                    class="home-image4" />
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDQxfHxzdHVkeXxlbnwwfHx8fDE2NzU4ODM2ODU&amp;ixlib=rb-4.0.3&amp;w=1000"
                    class="home-image5" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section-container" id="featured">
          <div class="home-max-width1 max-content-container">
            <div class="home-text-container">
              <span class="home-text09">The TEXTBOOKS</span>
              <h2 class="home-text10 Heading2">Explore our library</h2>
              <span class="home-text11">
                <span>
                  These are the featured textbooks in our library. While there are more in the full library, we don't have it all. If there's something you need and it's missing, just send us an email.
                </span>
              </span>
              <a href=""><button class="button-secondary button-lg button">
                Full Library Out Soon
              </button></a>
            </div>
            <div class="home-tab-selector-cards-container">
              <div class="portofolio-card-speaker-card portofolio-card-root-class-name">
                <div class="portofolio-card-image-container">
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1509228468518-180dd4864904?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDE2fHxtYXRofGVufDB8fHx8MTY3NTg4Mzc2Mw&amp;ixlib=rb-4.0.3&amp;h=400"
                    class="portofolio-card-image" />
                  <div class="portofolio-card-see-project-container">
                    <a href="/math/textbook.html" target="_blank"><button
                        class="button-secondary-white button button-md">
                        <span>Open Textbook</span>
                      </button></a>
                  </div>
                </div>
                <span class="portofolio-card-first-name">
                  <span>Edexcel GCSE Mathematics - Higher (9-1)</span>
                </span>
              </div>
              <div class="portofolio-card-speaker-card portofolio-card-root-class-name5">
                <div class="portofolio-card-image-container">
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1451226428352-cf66bf8a0317?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDEzfHxlbmdsaXNofGVufDB8fHx8MTY3NTg4Mzg0OQ&amp;ixlib=rb-4.0.3&amp;h=400"
                    class="portofolio-card-image" />
                  <div class="portofolio-card-see-project-container">
                    <a href="https://britams.fireflycloud.net/subjects-1/english" target="_blank"><button
                        class="button-secondary-white button button-md">
                        <span>Open in Firefly</span>
                      </button></a>
                  </div>
                </div>
                <span class="portofolio-card-first-name">
                  <span>English GCSE - Overview</span>
                </span>
              </div>
              <div class="portofolio-card-speaker-card portofolio-card-root-class-name4">
                <div class="portofolio-card-image-container">
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1635070040809-d434392ae756?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDh8fHBoeXNpY3N8ZW58MHx8fHwxNjc1ODgzODk4&amp;ixlib=rb-4.0.3&amp;h=400"
                    class="portofolio-card-image" />
                  <div class="portofolio-card-see-project-container">
                    <a href="/physics/textbook.html"
                      target="_blank"><button class="button-secondary-white button button-md">
                        <span>Open Textbook</span>
                      </button></a>
                  </div>
                </div>
                <span class="portofolio-card-first-name">
                  <span>Edexcel GCSE Physics 9-1 (Triple Award)</span>
                </span>
              </div>
              <div class="portofolio-card-speaker-card portofolio-card-root-class-name3">
                <div class="portofolio-card-image-container">
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1628863353691-0071c8c1874c?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDN8fGNoZW1pc3RyeXxlbnwwfHx8fDE2NzU4ODM5MjU&amp;ixlib=rb-4.0.3&amp;h=400"
                    class="portofolio-card-image" />
                  <div class="portofolio-card-see-project-container">
                    <a href="/chemistry/textbook.html" target="_blank"><button
                        class="button-secondary-white button button-md">
                        <span>Open Textbook</span>
                      </button></a>
                  </div>
                </div>
                <span class="portofolio-card-first-name">
                  <span>Edexcel IGCSE Chemistry 9-1 (Triple Award)</span>
                </span>
              </div>
              <div class="portofolio-card-speaker-card portofolio-card-root-class-name2">
                <div class="portofolio-card-image-container">
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1524683745036-b46f52b8505a?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDV8fGJpb2xvZ3l8ZW58MHx8fHwxNjc1ODgzOTUz&amp;ixlib=rb-4.0.3&amp;h=400"
                    class="portofolio-card-image" />
                  <div class="portofolio-card-see-project-container">
                    <a href="/biology/textbook.html" target="_blank"><button
                        class="button-secondary-white button button-md">
                        <span>Open Textbook</span>
                      </button></a>
                  </div>
                </div>
                <span class="portofolio-card-first-name">
                  <span>Edexcel IGCSE Biology 9-1 (Triple Award)</span>
                </span>
              </div>
              <div class="portofolio-card-speaker-card portofolio-card-root-class-name1">
                <div class="portofolio-card-image-container">
                  <img alt="image"
                    src="https://images.unsplash.com/photo-1594026200204-a25bea256816?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDEzfHxoaXN0b3J5fGVufDB8fHx8MTY3NTg4Mzk4NA&amp;ixlib=rb-4.0.3&amp;h=400"
                    class="portofolio-card-image" />
                  <div class="portofolio-card-see-project-container">
                    <a href="https://britams.fireflycloud.net/subjects/history/igcse" target="_blank"><button
                        class="button-secondary-white button button-md">
                        <span>Open in Firefly</span>
                      </button></a>
                  </div>
                </div>
                <span class="portofolio-card-first-name">
                  <span>Cambridge IGCSE History - Overview</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
  <script src="https://unpkg.com/@teleporthq/teleport-custom-scripts"></script>
  <script>
    window.onload = () => {
      const runAllScripts = () => {
        initializeAllSliders();
      };

      const listenForUrlChanges = () => {
        let url = location.href;
        document.body.addEventListener(
          "click",
          () => {
            requestAnimationFrame(() => {
              if (url !== location.href) {
                runAllScripts();
                url = location.href;
              }
            });
          },
          true
        );
      };

      const initializeAllSliders = () => {
        const allSliders = document.querySelectorAll('[data-type="slider"]');
        allSliders.forEach((slider) => {
          initializeSlider(slider);
        });
      };

      const initializeSlider = (slider) => {
        const slides = slider.querySelectorAll('[data-type="slide"]');
        const middle = Math.ceil(slides.length / 2);
        let currentSlide = middle;

        const nextSlideBtns = document.querySelectorAll(
          '[data-action="nextSlide"]'
        );
        const previousSlideBtns = document.querySelectorAll(
          '[data-action="previousSlide"]'
        );

        const changeSlide = (slideIndex, action) => {
          currentSlide = slideIndex;

          switch (action) {
            case "next":
              slideIndex === slides.length
                ? (currentSlide = 1)
                : currentSlide++;
              break;
            case "previous":
              slideIndex === 1
                ? (currentSlide = slides.length)
                : currentSlide--;
          }

          const slide = slides[0];
          if (!slide) {
            console.error("No slides present");
            return;
          }
          const style = window.getComputedStyle(slide);
          slideWidth =
            parseInt(style.width) +
            parseInt(style.marginLeft) +
            parseInt(style.marginRight);
          const transformValue = -slideWidth * (currentSlide - middle);

          slider.style.transform = `translateX(${transformValue}px)`;
        };

        previousSlideBtns.forEach((btn) => {
          btn.addEventListener("click", () =>
            changeSlide(currentSlide, "previous")
          );
        });

        nextSlideBtns.forEach((btn) => {
          btn.addEventListener("click", () =>
            changeSlide(currentSlide, "next")
          );
        });
      };

      runAllScripts();
    };
  </script>
  <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>

</html>