https://tf.2mayhemevent.com/

스캔 ID:: 21bd34d7-45ee-4ae9-bf28-094e26d860a9완료
제출된 URL:: https://tf.2mayhemevent.com/
보고서 완료:: 2024년 11월 17일 02:43:45
링크 · 23개 결과

페이지에서 식별된 외부 링크
링크	텍스트
https://teamfortress.com
https://steamcommunity.com/profiles/76561198138014202	-=NHS=- Kwas
https://steamcommunity.com/profiles/76561198197081327	bamboo
https://steamcommunity.com/profiles/76561198865269690	boba
https://steamcommunity.com/profiles/76561198027738883	Bonk Nickeltoon
https://steamcommunity.com/profiles/76561199094219345	Chikamae`
https://steamcommunity.com/profiles/76561198045327094	Kerpongle
https://steamcommunity.com/profiles/76561198079133635	Pritter30
https://steamcommunity.com/profiles/76561198029585558	Sera486
https://steamcommunity.com/profiles/76561199175400163	default
JavaScript 변수 · 8개 결과

페이지의 창 개체에 로드된 전역 JavaScript 변수는 함수 외부에서 선언된 변수로, 현재 범위 내에서 코드의 어느 부분에서나 액세스할 수 있습니다
이름	유형
onbeforetoggle	object
documentPictureInPicture	object
onscrollend	object
r	function
Jt	function
n	object
t	function
Splide	function
콘솔 로그 메시지 · 0개 결과

웹 콘솔에 기록된 메시지
HTML

페이지의 원시 HTML 본문
<!DOCTYPE html><html lang="en"><head>
     
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta property="og:title" content="Pаrticle Mаyhem 2 - Tеam Fortress 2 Cоntest">
	<meta property="og:type" content="game">
	<meta property="og:url" content="https://tf.2mayhemevent.com/">
	<meta property="og:image" content="https://tf.2mayhemevent.com/images/share.jpeg">
	<meta property="og:site_name" content="https://tf.2mayhemevent.com ">
		<meta property="og:description" content="Welcome to the TF2 Mаyhem! Immerse yourself in this lively, community-driven event where TF2 fans come together to showcase and create new in-game effects.">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="
https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css
" rel="stylesheet">
    <link rel="shortcut icon" href="./assets/favicon.ico">
    <title>Pаrticle Mаyhem 2 - Tеam Fortress 2 Cоntest</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:[email protected]&display=swap");
      @import url("https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap");
      body {
        margin: 0;
        background-color: black;
        min-width: 1100px;
        font-family: Arial, Helvetica, sans-serif;
      }

      .wrapper {
        margin: 0 auto;
        position: relative;
      }

      .header {
        background-image: url("./assets/header-bg.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        margin: 0 auto;
      }

      .header-content {
        position: relative;
        width: 1100px;
        height: 1150px;
        padding-top: 50px;
        margin: 0 auto;
      }

      .logo {
        position: absolute;
        left: 400px;
        top: 29px;
      }

      .logo-img {
        filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
        max-height: 67px;
        width: 300px;
        object-fit: cover;
        pointer-events: none;
      }

      .logo-video {
        width: 1100px;
      }

      .time {
        background-image: url("./assets/time.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        margin: 0 auto;
      }

      .time-content {
        margin: 0 auto;
        padding-top: 450px;
        width: 780px;
        height: 650px;
      }

      .time-text {
        color: black;
        font-family: "Lexend Deca", sans-serif;
        line-height: 30px;
        margin: 0px 0px 29px 0px;
        font-size: 18px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      .prize {
        background-image: url("./assets/prize.jpg");
        background-repeat: no-repeat;
        background-position: center top;
      }

      .prize-content {
        width: 800px;
        height: 725px;
        margin: 0 auto;
      }

      .prize-pools {
        padding-top: 272px;
        padding-left: 95px;
        transform: rotate(8deg);
        text-align: center;
        float: left;
      }

      .prize-pools-header {
        width: 340px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0px 0px 45px 0px;
        padding: 0;
        font-size: 40px;
        text-decoration: underline;
        font-family: Caveat, Arial, Helvetica, sans-serif;
      }

      .prize-pools-keys {
        width: 340px;
        line-height: 32px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0px 0px 35px 0px;
        padding: 0;
        font-size: 60px;
        text-decoration: underline;
        font-family: Caveat, Arial, Helvetica, sans-serif;
      }

      .prize-pools-text {
        width: 340px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0px 0px 20px 0px;
        padding: 0;
        font-size: 32px;
        font-family: Caveat, Arial, Helvetica, sans-serif;
      }

      .prize-pools-text span {
        text-decoration: underline;
        font-size: 28px;
      }

      .prize-desc {
        padding-top: 230px;
        padding-right: 175px;
        width: 160px;
        height: 324px;
        float: right;
      }

      .prize-desc-text {
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0px 0px 15px 0px;
      }

      .prize-desc-text:last-child {
        margin: 25px 0px 15px 0px;
      }

      .prize-contribute {
        padding-right: 50px;
        width: 285px;
        float: right;
      }

      .prize-contribute-text {
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0px 0px 15px 0px;
      }

      .prize-contribute-text a {
        color: #3fdcc0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
      }

      .donors {
        background-image: url("./assets/donor.jpg");
        background-repeat: repeat-y;
        background-position: center top;
      }

      .donors-content {
        width: 800px;
        padding-bottom: 50px;
        margin: 0 auto;
        text-align: center;
      }

      .donors-content-title {
        text-align: center;
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0px 0px 15px 0px;
      }

      .donor {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        color: #fff;
        padding: 5px 8px;
        font-size: 20px;
        margin: 0 2px 4px;
        display: inline-flex;
        gap: 5px;
      }

      .donor-person {
        color: #3fdcc0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
        font-size: 20px;
      }

      .donor-amount {
        margin: 0;
        font-size: 20px;
      }

      .rules {
        background-image: url("./assets/rule.jpg");
        background-repeat: no-repeat;
        background-position: center top;
      }

      .rules-content {
        padding-top: 150px;
        width: 800px;
        height: 300px;
        margin: 0 auto;
      }

      .rules-ul {
        width: 780px;
        padding-left: 20px;
      }

      .rules-li {
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin-bottom: 10px;
      }

      .faq {
        background-image: url("./assets/faq.jpg");
        background-repeat: no-repeat;
        background-position: center top;
      }

      .faq-content {
        height: 1020px;
        padding-top: 150px;
        width: 800px;
        margin: 0 auto;
      }

      .faq-questions {
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0px 0px 15px 0px;
        text-decoration: underline;
        font-weight: 400;
      }

      .faq-answer {
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        font-weight: 400;
        margin: 0px 0px 15px 0px;
      }

      .faq-answer a {
        color: #3fdcc0;
      }

      .faq-answer a:hover {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 5px currentColor;
      }

      .experiments {
        background-position: center top;
        background-repeat: no-repeat;
        background-image: url("./assets/experiments.jpg");
      }

      .experiments-content {
        position: relative;
        height: 700px;
        padding-top: 450px;
        width: 950px;
        margin: 0 auto;
      }

      .my-next-btn {
        border: none;
        font: inherit;
        color: inherit;
        background-color: transparent;

        background-image: url("./assets/Right.png");
        margin-right: 10px;
        float: right;
        width: 110px;
        height: 156px;
        margin-top: 73px;
        cursor: pointer;
        right: 0;
      }

      .my-next-btn:hover {
        background-position: center;
      }

      .my-prev-btn {
        border: none;
        font: inherit;
        color: inherit;
        background-color: transparent;

        background-image: url("./assets/Left.png");
        margin-left: 10px;
        float: left;
        width: 110px;
        height: 156px;
        margin-top: 73px;
        cursor: pointer;
        left: 0;
      }

      .my-prev-btn,
      .my-next-btn {
        position: absolute;
        top: 48%;
        transform: translateY(-60%);
      }

      .my-prev-btn:hover {
        background-position: center;
      }

      .item {
        display: flex;
        gap: 25px;
        width: 690px;
        margin: 0 auto;
      }

      .item-image {
        width: 300px;
      }

      .item-image:hover {
        filter: brightness(1.25);
      }

      .item-text {
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      .item-info {
        float: right;
      }

      #item-reverse {
        flex-direction: row-reverse;
      }

      .experiments-disclaimer {
        position: absolute;
        top: 790px;
        opacity: 0.3;
        font-size: 13px;
        text-align: center;
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        color: #fff;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        margin: 0;
        width: 100%;
      }

      .links {
        background-image: url("./assets/links.jpg");
        background-position: center top;
        background-repeat: no-repeat;
      }

      .links-content {
        width: 800px;
        padding-top: 50px;
        height: 410px;
        position: relative;
        margin: 0 auto;
      }

      .links-image-a {
        position: absolute;
        top: 100px;
      }

      .links-image {
        top: 100px;
        width: 300px;
        height: 300px;
        transform: rotate(-3deg);
      }

      .links-image:hover {
        filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5)) brightness(1.25);
      }

      .links-social-img-discord {
        display: block;
        background-image: url("./assets/discord.png");
        background-repeat: no-repeat;
        width: 362px;
        height: 134px;
        right: 0;
        margin-left: auto;
      }

      .links-social-img-discord:hover {
        background-position: center;
      }

      .links-social-img-steam {
        display: block;
        background-image: url("./assets/steam.png");
        background-repeat: no-repeat;
        width: 298px;
        height: 142px;
        right: 0;
        margin-left: auto;
      }

      .links-social-img-steam:hover {
        background-position: center;
      }

      .links-social-img-workshop {
        display: block;
        background-image: url("./assets/workshop.png");
        background-repeat: no-repeat;
        width: 425px;
        height: 134px;
        right: 0;
        margin-left: auto;
      }

      .links-social-img-workshop:hover {
        background-position: center;
      }

      .credits {
        background-image: url("./assets/credits.jpg");
        background-position: center top;
        background-repeat: no-repeat;
      }

      .credits-content {
        height: 810px;
        padding-top: 450px;
        width: 950px;
        margin: 0 auto;
      }

      .credits-content-image {
        position: relative;
        margin-left: 8px;
        width: 90px;
        height: 90px;
        display: inline-block;
      }

      .credits-content-image-a {
        max-width: 90px;
        height: 90px;
        position: relative;
        text-decoration: none;
      }

      .credits-content-image-a::after {
        position: absolute;
        content: "";
        width: 90px;
        height: 90px;
        background-image: url("./assets/creditsOverlay.png");
        right: 4px;
      }

      #creditsImagePosition::after {
        right: 0px;
      }

      #creditsImagePosition {
        margin-left: 226px;
      }

      .credits-content-image-a:hover {
        filter: brightness(1.25);
      }

      #creditsImage {
        margin-left: 225px;
      }

      .credits-content-image-block {
        position: relative;
        margin: 0 0 15px 0px;
      }

      #creditsImageBody {
        margin-top: 72px;
      }

      .credits-content-image-block-last {
        margin-left: 164px;
        width: 620px;
      }

      .credits-icons-text {
        display: inline-block;
        font-family: Lexend Deca, Arial, Helvetica, sans-serif;
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }

      .footer {
        background-image: url("./assets/footer.jpg");
        background-position: center top;
        background-repeat: no-repeat;
      }

      .footer-content {
        padding-top: 110px;
        width: 950px;
        height: 740px;
        margin: 0 auto;
      }

      .footer-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .footer-valve-logo {
        width: 101px;
        height: 30px;
        background-image: url("./assets/logoValve.png");
      }

      .footer-valve-logo:hover {
        background-position: bottom;
      }

      .footer-copText {
        width: 801px;
        height: 60px;
        display: flex;
        align-items: center;
        right: 16px;
        font-size: 12px;
        text-shadow: 0 0 10px #000;
        color: #a5a5a5;
      }
    </style>
  </head>
  <body>
    <section class="header wrapper">
      <div class="header-content">
        <a class="logo" href="https://teamfortress.com">
          <img class="logo-img" src="./assets/logoT-F.png" alt="">
        </a>
        <video class="logo-video" autoplay="" loop="" muted="" playsinline="" src="./assets/logo-video.webm"></video>
      </div>
    </section>
    <section class="time wrapper">
      <div class="time-content">
        <p class="time-text">
          Discovery! A word teeming with limitless potential. What does it mean
          to truly <i>discover</i>? Since the dawn of civilization, humans have
          pursued the unknown. Thousands of years ago, our ancestors discovered
          fire. In 1876, Alexander Bell discovered the telephone.
        </p>
        <p class="time-text">
          At Particle Mayhem, we're about more than just fire and phones. Today,
          we're thrilled to announce we've decoded one of the cosmos' profound
          mysteries. Some said it was unreachable. To them, we say: nonsense!
          What do you understand about science!?
        </p>
        <p class="time-text">
          That's right, fellow particle enthusiasts. We're transcending time and
          space!
        </p>
        <p class="time-text">
          Not only will we venture into the cosmos, but we'll shatter the
          barriers of time itself! The most exciting part is... YOU are again
          tasked with crafting experiments! Can your creations endure time or
          brave Jupiter’s storms? Will they time-travel and revolutionize
          Ancient Egypt? <u>Anything is possible!</u>
        </p>
      </div>
    </section>
    <section class="prize wrapper">
      <div class="prize-content">
        <div class="prize-pools">
          <p class="prize-pools-header">Prize Pool</p>
          <p class="prize-pools-keys">444 Keys</p>
          <p class="prize-pools-text">1st place (3 cats): <span>~20%</span></p>
          <p class="prize-pools-text">2nd place (3 cats): <span>~15%</span></p>
          <p class="prize-pools-text">3rd place (3 cats): <span>~10%</span></p>
          <p class="prize-pools-text">
            Honorable mentions (x5): <span>~5%</span>
          </p>
        </div>
        <div class="prize-desc">
          <p class="prize-desc-text">
            This time, our leading experiments have the chance to secure an
            <u>expanding Key surplus</u>.
          </p>
          <p class="prize-desc-text">
            The ultimate prize pool has now reached an impressive
            <u>444 Keys</u>
          </p>
        </div>
        <div class="prize-contribute">
          <p class="prize-contribute-text">
            interested in contributing? Have more questions? Check out the
            <a href="#FAQ">FAQ</a> below!
          </p>
        </div>
      </div>
    </section>
    <section id="donors" class="donors wrapper">
      <div class="donors-content">
        <p class="donors-content-title">Gratitude to our donors:</p>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561198138014202">-=NHS=- Kwas
          </a>
          <p class="donor-amount">- 350 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561198197081327">bamboo
          </a>
          <p class="donor-amount">- 50 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561198865269690">boba</a>
          <p class="donor-amount">- 65 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561198027738883">Bonk Nickeltoon</a>
          <p class="donor-amount">- 20 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561199094219345">Chikamae`
          </a>
          <p class="donor-amount">- 8 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561198045327094">Kerpongle</a>
          <p class="donor-amount">- 10 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561198079133635">Pritter30</a>
          <p class="donor-amount">- 25 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561198029585558">Sera486</a>
          <p class="donor-amount">- 40 Keys</p>
        </div>
        <div class="donor">
          <a class="donor-person" href="https://steamcommunity.com/profiles/76561199175400163">default</a>
          <p class="donor-amount">- 9 Keys</p>
        </div>
      </div>
    </section>
    <section class="rules wrapper">
      <div class="rules-content">
        <ul class="rules-ul">
          <li class="rules-li">
            All submissions must be uploaded to the TF2 Steam Workshop by the
            deadline of <u>December 31st, 2023, at 12am UTC.</u>
          </li>
          <li class="rules-li">
            The contest revolves around the intriguing themes of
            <u>time <i>and</i> space</u>! Participants are encouraged to submit
            any particle effect, item, or war paint that aligns with these
            themes.
          </li>
          <li class="rules-li">
            You are allowed to use concept art and sprites that were created
            prior to the contest. However, any other pre-existing materials are
            not eligible for submission.
          </li>
          <li class="rules-li">
            Staff members are not permitted to compete in the contest. They may
            submit entries, but these will neither be judged nor eligible for
            placement. Additionally, items already featured on this site are not
            eligible for the contest.
          </li>
        </ul>
      </div>
    </section>
    <section id="FAQ" class="faq wrapper">
      <div class="faq-content">
        <div class="faq-block">
          <h3 class="faq-questions">What is Particle Mayhem 2?</h3>
          <h4 class="faq-answer">
            Particle Mayhem 2 is a community-driven contest organized by
            enthusiastic members of the Team Fortress 2 community. We are
            calling on time travelers and astronauts from around the globe to
            create the most extraordinary Steam Workshop submissions imaginable!
            Join us in making this contest a cosmic success!
          </h4>
        </div>

        <div class="faq-block">
          <h3 class="faq-questions">
            Is this an official update for Team Fortress 2?
          </h3>
          <h4 class="faq-answer">
            No, this is not an official update. This is a community-initiated
            project and is not directly affiliated with Valve. This means that
            submissions to the contest have no guarantee of being officially
            added to the game.
          </h4>
        </div>

        <div class="faq-block">
          <h3 class="faq-questions">
            What can I submit, and what can't I submit?
          </h3>
          <h4 class="faq-answer">
            You can submit cosmetics, war paints, and, of course, particles!
            These item types are all eligible as long as they align with the
            time and space theme of the contest. Please refrain from submitting
            anything that violates the contest rules.
          </h4>
        </div>

        <div class="faq-block">
          <h3 class="faq-questions">
            Last time you mentioned medals. What's the deal?
          </h3>
          <h4 class="faq-answer">
            In 2019, Valve quietly stopped accepting new community-made medals
            due to oversaturation and high demand.
          </h4>
          <h4 class="faq-answer">
            Unfortunately, the original medals created for the first event were
            not implemented before this change, and we are unsure if Valve will
            add new medals in the future. We apologize for any inconvenience
            this may cause.
          </h4>
        </div>

        <div class="faq-block">
          <h3 class="faq-questions">
            How do the prizes work? Can I contribute?
          </h3>
          <h4 class="faq-answer">
            We are kicking off the contest's prize pool with a total of 100 Mann
            Co. Keys, which will be divided into three categories: particles,
            cosmetics, and war paints. The keys will be equally distributed
            among all contributors of a winning submission.
          </h4>
          <h4 class="faq-answer">
            Donations are now closed. We extend our gratitude to all
            <a href="#donors">donors</a> who helped increase the prize pool to
            such an impressive number of Keys!
          </h4>
        </div>
        </div>
      
    </section>
    <section class="experiments wrapper">
      <div class="experiments-content">
        <div id="image-carousel" class="splide splide--loop splide--ltr splide--draggable is-active is-overflow is-initialized" aria-label="Beautiful Images" role="region" aria-roledescription="carousel">
          <div class="splide__track splide__track--loop splide__track--ltr splide__track--draggable" id="image-carousel-track" style="padding-left: 0px; padding-right: 0px;" aria-live="off" aria-atomic="true">
            <ul class="splide__list" id="image-carousel-list" role="presentation" style="transform: translateX(-1900px);">
              <li class="splide__slide splide__slide--clone" id="image-carousel-clone01" role="group" aria-roledescription="slide" aria-label="7 of 8" style="width: calc(100%);" aria-hidden="true">
                <div class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb7.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle7.png" draggable="false">
                    <p class="item-text">
                      Our latest development in time-travel technology! This
                      state-of-the-art canteen was made to send those annoying
                      killer robots to other time periods, out of sight and
                      mind! What's that? Every world leader is a robot now? What
                      a ridiculous—ALL GLORY TO THE ROBOT OVERLORDS.
                    </p>
                  </div>
                </div>
              </li><li class="splide__slide splide__slide--clone is-prev" id="image-carousel-clone02" role="group" aria-roledescription="slide" aria-label="8 of 8" style="width: calc(100%);" aria-hidden="true">
                <div id="item-reverse" class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb8.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle8.png" draggable="false">
                    <p class="item-text">
                      Oddly enough, this wasn't part of our experiments. We were
                      cleaning out a former employee's desk and found spray cans
                      full of an unknown, circuit-like substance. We did the
                      logical thing and sprayed it on guns. You know, for
                      science.
                    </p>
                  </div>
                </div>
              </li><li class="splide__slide is-active is-visible" id="image-carousel-slide01" role="group" aria-roledescription="slide" aria-label="1 of 8" style="width: calc(100%);">
                <div class="item">
                  <a href="sign" draggable="false">
                    <img class="item-image" src="images/itemthumb1.png" draggable="false">
                  </a>
                  <div class="item-info">
						<img src="images/itemtitle1.png" draggable="false">
                    <p class="item-text">
                      
The "Malibu Sunset" effect in TF2 turns the hat into a stunning beach sunrise scene, with vibrant colors and a prominent palm tree, evoking a serene and tropical atmosphere.
                    </p>
					</div>
				</div>
              </li>
              <li class="splide__slide is-next" id="image-carousel-slide02" role="group" aria-roledescription="slide" aria-label="2 of 8" style="width: calc(100%);" aria-hidden="true">
                <div id="item-reverse" class="item">
                  <a href="sign" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb2.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle2.png" draggable="false">
                    <p class="item-text">
                      Circular teleportation? DULL! Hexagonal teleportation?
                      Already patented. Teleport in STYLE with our new
                      triangular method! Don't be a square (because that's
                      patented too) and try it today!
                    </p>
                  </div>
                </div>
              </li>
              <li class="splide__slide" id="image-carousel-slide03" role="group" aria-roledescription="slide" aria-label="3 of 8" style="width: calc(100%);" aria-hidden="true">
                <div class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb3.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle3.png" draggable="false">
                    <p class="item-text">
                      Congratulations! You thought a massive supercollider would
                      be the best place for a game of hide-and-seek! You were
                      right, as you now have the ability to endlessly float
                      through your own timestream! All it cost you was lifelong
                      bone rattling syndrome.
                    </p>
                  </div>
                </div>
              </li>
              <li class="splide__slide" id="image-carousel-slide04" role="group" aria-roledescription="slide" aria-label="4 of 8" style="width: calc(100%);" aria-hidden="true">
                <div id="item-reverse" class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb4.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle4.png" draggable="false">
                    <p class="item-text">
                      What happens when you decrease the pressure of a thousand
                      stars at once? An unstoppable, ever-emitting Supernova!
                      Perfect for destroying classified documents, and maybe one
                      or two interns.
                    </p>
                  </div>
                </div>
              </li>
              <li class="splide__slide" id="image-carousel-slide05" role="group" aria-roledescription="slide" aria-label="5 of 8" style="width: calc(100%);" aria-hidden="true">
                <div class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb5.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle5.png" draggable="false">
                    <p class="item-text">
                      Want to look your best while facing the horrors of space?
                      Look no further! We removed the excess skull fragments
                      from this one for maximum comfort. Perfect for long
                      strolls on the Moon!
                    </p>
                  </div>
                </div>
              </li>
              <li class="splide__slide" id="image-carousel-slide06" role="group" aria-roledescription="slide" aria-label="6 of 8" style="width: calc(100%);" aria-hidden="true">
                <div id="item-reverse" class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb6.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle6.png" draggable="false">
                    <p class="item-text">
                      This little fellow has been a great help in the lab.
                      Tasked with carrying out experiments and shooting our
                      scientists' evil time-traveling doppelgangers (with a 50%
                      success rate), the SP-13 is ready for the world beyond!
                    </p>
                  </div>
                </div>
              </li>
              <li class="splide__slide" id="image-carousel-slide07" role="group" aria-roledescription="slide" aria-label="7 of 8" style="width: calc(100%);" aria-hidden="true">
                <div class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb7.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle7.png" draggable="false">
                    <p class="item-text">
                      Our latest development in time-travel technology! This
                      state-of-the-art canteen was made to send those annoying
                      killer robots to other time periods, out of sight and
                      mind! What's that? Every world leader is a robot now? What
                      a ridiculous—ALL GLORY TO THE ROBOT OVERLORDS.
                    </p>
                  </div>
                </div>
              </li>
              <li class="splide__slide" id="image-carousel-slide08" role="group" aria-roledescription="slide" aria-label="8 of 8" style="width: calc(100%);" aria-hidden="true">
                <div id="item-reverse" class="item">
                  <a href="sign" target="_blank" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb8.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle8.png" draggable="false">
                    <p class="item-text">
                      Oddly enough, this wasn't part of our experiments. We were
                      cleaning out a former employee's desk and found spray cans
                      full of an unknown, circuit-like substance. We did the
                      logical thing and sprayed it on guns. You know, for
                      science.
                    </p>
                  </div>
                </div>
              </li>
            <li class="splide__slide splide__slide--clone is-active" id="image-carousel-clone03" role="group" aria-roledescription="slide" aria-label="1 of 8" style="width: calc(100%);" aria-hidden="true">
                <div class="item">
                  <a href="sign" draggable="false" tabindex="-1">
                    <img class="item-image" src="images/itemthumb1.png" draggable="false">
                  </a>
                  <div class="item-info">
						<img src="images/itemtitle1.png" draggable="false">
                    <p class="item-text">
                      
The "Malibu Sunset" effect in TF2 turns the hat into a stunning beach sunrise scene, with vibrant colors and a prominent palm tree, evoking a serene and tropical atmosphere.
                    </p>
					</div>
				</div>
              </li><li class="splide__slide splide__slide--clone" id="image-carousel-clone04" role="group" aria-roledescription="slide" aria-label="2 of 8" style="width: calc(100%);" aria-hidden="true">
                <div id="item-reverse" class="item">
                  <a href="sign" draggable="false" tabindex="-1">
                    <img class="item-image" src="./assets/itemthumb2.png" draggable="false">
                  </a>
                  <div class="item-info">
                    <img src="./assets/itemtitle2.png" draggable="false">
                    <p class="item-text">
                      Circular teleportation? DULL! Hexagonal teleportation?
                      Already patented. Teleport in STYLE with our new
                      triangular method! Don't be a square (because that's
                      patented too) and try it today!
                    </p>
                  </div>
                </div>
              </li></ul>
          </div>
        </div>
        <button id="my-prev-btn" class="my-prev-btn"></button>
        <button id="my-next-btn" class="my-next-btn"></button>
        <p class="experiments-disclaimer">

        </p>
      </div>
    </section>
    <section class="links wrapper">
      <div class="links-content">
        <a class="links-image-a" href="downloads/thumbnail.png">
          <img class="links-image" src="./assets/thumbnail.png" alt="">
        </a>
        <div class="links-social">
          <a class="links-social-img-discord" href="https://discord.gg/g9sPRXJgPA">
          </a>
          <a class="links-social-img-steam" href="https://steamcommunity.com/groups/ParticleMayhem">
          </a>
          <a class="links-social-img-workshop" href="https://steamcommunity.com/sharedfiles/filedetails/?id=3038415270">
          </a>
        </div>
      </div>
    </section>
    <section class="credits wrapper">
      <div class="credits-content">
        <div class="credits-content-image-block">
          <a class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198027738883">
            <img class="credits-content-image" src="./assets/creditsBonk.png" alt="">
          </a>
          <a id="creditsImage" class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198043892001">
            <img class="credits-content-image" src="./assets/creditsMuhai.png" alt="">
          </a>
          <a id="creditsImagePosition" class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198071260200">
            <img class="credits-content-image" src="./assets/creditsProper.png" alt="">
          </a>
        </div>
        <div id="creditsImageBody" class="credits-content-image-block">
          <a class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198066916585">
            <img class="credits-content-image" src="./assets/creditsCheesy.png" alt="">
          </a>
          <a id="creditsImage" class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198078856258">
            <img class="credits-content-image" src="./assets/creditsLettuce.png" alt="">
          </a>
          <a id="creditsImagePosition" class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198040588557">
            <img class="credits-content-image" src="./assets/creditsLazer.png" alt="">
          </a>
        </div>
        <div id="creditsImageBody" class="credits-content-image-block">
          <a class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198127379171">
            <img class="credits-content-image" src="./assets/creditsFeksil.png" alt="">
          </a>
          <a id="creditsImage" class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198038963425">
            <img class="credits-content-image" src="./assets/creditsDansky.png" alt="">
          </a>
          <a id="creditsImagePosition" class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198178926899">
            <img class="credits-content-image" src="./assets/creditsFancy.png" alt="">
          </a>
        </div>
        <div id="creditsImageBody" class="credits-content-image-block credits-content-image-block-last">
          <a class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198043050514">
            <img class="credits-content-image" src="./assets/creditsLight.png" alt="">
          </a>
          <a id="creditsImagePosition" class="credits-content-image-a" href="https://steamcommunity.com/profiles/76561198865269690">
            <img class="credits-content-image" src="./assets/creditsBoba.png" alt="">
          </a>
        </div>
        <p style="margin-left: 140px; margin-top: 71px" class="credits-icons-text">
          Director
        </p>
        <p style="margin-left: 140px; margin-top: 71px" class="credits-icons-text">
          Particles
        </p>
        <p style="margin-left: 136px; margin-top: 71px" class="credits-icons-text">
          Artist
        </p>
        <p style="margin-left: 160px; margin-top: 71px" class="credits-icons-text">
          Modeler
        </p>

        <p style="margin-left: 248px; margin-top: 28px" class="credits-icons-text">
          SFM Artist
        </p>
        <p style="margin-left: 120px; margin-top: 28px" class="credits-icons-text">
          Writer
        </p>
        <p style="margin-left: 156px; margin-top: 28px" class="credits-icons-text">
          Webdev
        </p>
      </div>
    </section>
    <section class="footer wrapper">
      <div class="footer-content">
        <div class="footer-wrapper">
          <a class="footer-valve-logo" href="https://www.valvesoftware.com/">
          </a>
          <p class="footer-copText">
            © 2022-2024 Valve Corporation, all rights reserved. 
          </p>
        </div>
      </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const splide = new Splide("#image-carousel", {
          type: "loop",
          perPage: 1,
          pagination: false,
          arrows: false,
          autoplay: true,
          interval: 7000,
        }).mount();

        document
          .getElementById("my-prev-btn")
          .addEventListener("click", function () {
            splide.go("<");
          });

        document
          .getElementById("my-next-btn")
          .addEventListener("click", function () {
            splide.go(">");
          });

        document.querySelectorAll('a[href^="#"').forEach((link) => {
          link.addEventListener("click", function (e) {
            e.preventDefault();

            let href = this.getAttribute("href").substring(1);

            const scrollTarget = document.getElementById(href);

            const topOffset = 0;
            const elementPosition = scrollTarget.getBoundingClientRect().top;
            const offsetPosition = elementPosition - topOffset;

            window.scrollBy({
              top: offsetPosition,
              behavior: "smooth",
            });
          });
        });
      });
    </script>
  

</body></html>