logo
window.open('index.html', '_self');

Pandapan.io

Web Game Store - Front End

A front end for a web game store based upon the popular indie game website itch.io

Role: Programmer

Tools: SASS

Language: Javascript, HTML5/CSS3

Live Site




index.html

<html lang="en"> <head> <title>Play the Latest Indie Web Games - Pandapan.io</title> <meta charset="UTF-8";> </head> <link rel="stylesheet" href="style.css"> <body class="container"> <div class="header"> <nav> <div class="hamburgerSection"> <button class="hamburger" onclick="HideSection('sidebar', 'shadow');" > <div class="hamburgerBar"></div> <div class="hamburgerBar"></div> <div class="hamburgerBar"></div> </button> </div> <div class="logo"><img src="./images/pandaLogo.svg" height="50px"></div> <div class="GameNav"> <a href="#" onmouseover="HideSubNav('SubNav');">Browse Games</a> <a href="#">Game Jams</a> <a href="#">&#128316 Upload Games</a> <a href="#">Devlogs</a> <a href="#">Community</a> </div> <div class="SearchBar"> <input class="SearchInput" required="required" type="text" placeholder=" Search for games or creators "><span style="margin-left:-20px;"><svg stroke-linecap="round" stroke="currentColor" class="svgicon icon_search" role="img" version="1.1" viewBox="0 0 24 24" stroke-width="3" height="18" stroke-linejoin="round" aria-hidden="" fill="none" width="18"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span></input> </div> <div class="ButtonNav"> <button class="buttons">Log in</button> <button class="buttons register_btn">Register</button> </div> </nav> </div> <div class="navDropdown" id="SubNav"> <a href="#">Indie Game Store</a> <a href="#">Free Games</a> <a href="#">Fun Games</a> <a href="#">Horror Games</a> <a>|</a> <a href="#">Game Development</a> <a href="#">Assets</a> <a href="#">Comics</a> <a>|</a> <a href="#">Sales</a> <a href="#">Bundles</a> <a>|</a> <a href="#">Jobs</a> </div> <section id="sidebar" class="sidebar" onmouseover="ShowScrollY('sidebar');" onmouseout="HideScrollY('sidebar');"> <section class="SidebarSections"> <h3><b>Popular Tags</b></h3> <ul> <li><a href="#">Horror games</a></li> <li><a href="#">Multiplayer</a></li> <li><a href="#">Visual novels</a></li> <li><a href="#">HTML5 games</a></li> <li><a href="#">Simulation</a></li> <li><a href="#">macOS games</a></li> <li><a href="#">Roguelike</a></li> <li><a href="#">Linux games</a></li> </ul> <p><a href="#">Browse all tags →</a></p> </section> <section class="SidebarSections"> <h3><b>Browse</b></h3> <ul> <li><a href="#">Games</a></li> <li><a href="#">Game assets</a></li> <li><a href="#">Tools</a></li> <li><a href="#">Soundtracks</a></li> <li><a href="#">Physical games</a></li> <li><a href="#">Comics</a></li> <li><a href="#">Books</a></li> <li><a href="#">⮂ Randomizer</a></li> </ul> </section> <section class="SidebarSections"> <h3><b>Games by price</b></h3> <ul> <li><a href="#">On Sale</a> </li> <li><a href="#">Free games</a></li> <li><a href="#">With demo</a></li> <li><a href="#">Top sellers</a></li> <li><a href="#">$5 or less</a></li> <li><a href="#">$15 or less</a></li> </ul> </section> <section class="SidebarSections social"> <a href="#"><img src="images/reddit.svg"></a> <a href="#"><img src="images/fb.svg"></a> <a href="#"><img src="images/twitter.svg"></a> <a href="#">Download app</a> </section> <section class="BlogSection"> <h3>From the pandapan.io blog</h3> <a href="#"> <div class="day">14d</div> <div class="blogtext"> Announcing the pandapan.io Holiday Sale and Holiday pandapan.io Selects Bundle!</div> </a> <a href="#"> <div class="day">23d</div> <div class="blogtext"> pandapan.io Recommends: a pack of cute animals</div> </a> <a href="#"> <div class="day">28d</div> <div class="blogtext"> Check out pandapan.io on YouTube!</div> </a> <a href="#"> <div class="day">30d</div> <div class="blogtext"> pandapan.io Recommends: tabletop and jam games</div> </a> <a href="#"> <div class="day">34d</div> <div class="blogtext"> Pick up 7 tabletop hits for $8 in the Tabletop pandapan.io Selects Bundle!</div> </a> <a href="#"> <div class="day">42d</div> <div class="blogtext"> Fall into a brand new game jam</div> </a> <a href="#"> <div class="day">50d</div> <div class="blogtext"> pandapan.io Recommends: smiling and puzzling</div> </a> <a href="#"> <div class="blogtext"> View All Updates → </div> </a> </section> </section> <div id="shadow" class="shadow"> </div> <section class="main"> <div class="mainsection"> <div class="intro"> <p><strong>pandapan.io</strong> is the simplest way to find and share indie web games online for free.<span class="introbreak"></br></span> <a href="#">Add your game</a> or <a href="#">Read the FAQ</a></p> </div> <div class="downloadprompt"> <div class="downloadInner"> <button class="downloadbtn">Download app</button> <strong style="padding-left: 8px;">Get the most out of pandapan.io!</strong> Play and manage your favorite web games with our desktop app! </div> </div> <div id="gameAdSection" class="gameAdSection"> <div class="gameAdSubSection"> <div class="videoContainer"> <div class="videoRatio"> <img src="./images/video-thumb.jpg" height="20%"> </div> <div class="videoText"> <a href="#" >See more on pandapan.io's YouTube</a> <svg stroke-linecap="round" stroke="currentColor" class="svgicon icon_external_link" role="img" version="1.1" viewBox="0 0 24 24" stroke-width="2" height="14" stroke-linejoin="round" aria-hidden="" fill="none" width="14"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg> </div> </div> <div class="screenshotContainer"> <h2>Featured Game Title</h2> <div class="screenshots"> <div style="margin-right: 10px; max-width: 220px;"> <img src="./images/screenshot.jpg"> </div> <div class="screenshotpad"> <img src="./images/screenshot.jpg"> </div> <div class="screenshotpad"> <img class="screenshot3" src="./images/screenshot.jpg"> </div> </div> <div class="subText"> Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <span class="price">$9.99</span> <span class="tags">#rpg #oldschool #arcade #fantasy</span> <div style="margin-top:15px;"> <button class="buybutton">Get the game →</button> </div> </div> <button class="closeButton" onmouseup="hideit('gameAdSection')">✖</button> </div> </div> <div class="catalogContainer"> <div class="freshGamesHeader"><h2 style="font-weight: 900;">Fresh Games</h2> <button class="viewBtn">View More →</button></div> <p class="description">Constantly updating with the latest web games on pandapan.io!</p> <div class="gameGrid"> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> <div class="gamecel"> <div class="gameimg"> <img class="gameinfoico" src="./images/gameinfo-icon.png"> </div> <div class="gametitle">Game Title</div><div class="pricetag">$9.99</div><br /> <div class="tags">#tag1, #tag2, #tag3</div> <div class="game-description"> Game description goes here. </div> </div> </div> <div class="viewall"> <p><b>Don't see anything you like?</b> <button class="viewBtn"><b>View All Games →</b></button> <button class="viewBtn"><b>View Something Random →</b></button></p> </div> </div> <footer class="lefooter"> <div class="footersection"> <div class="footer-row"> <a><img class="footer-social" src="images/twitter.svg"></a> <a><img class="footer-social" src="images/fb.svg"></a> <a href="#">About</a> <a href="#">FAQ</a> <a href="#">Contact us</a> <a href="#">Blog</a> </div> <div class="footer-row2"> <span class="copyright">Copyright © 2020 evil corp</span> <span class="spacer"> · </span> <a href="#">Directory</a> <span class="spacer"> · </span> <a href="#">Terms</a> <span class="spacer"> · </span> <a href="#">Privacy</a> <span class="spacer"> · </span> <a href="#">Cookies</a> </div> </div> </footer> </div> </section> </body> <script src="./functions.js"></script> </html>

index.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); $main-font: 'Open Sans', sans-serif; $pink: #FF2449; $grey: #F4F4F4; //css grid body { font-family: $main-font; } .hamburgerSection { display: none; } .hamburger { background: none; cursor: pointer; padding: 10px 16px; border: 0; //transform: rotate(-90deg); font-size: 16px; } .hamburgerBar { width: 35px; height: 2px; background-color: #333; margin: 6px 0; transition: 0.4s; } .header { grid-area: h; background-color: white; position: fixed; z-index: 3; min-height: 50px; top: -5px; left: 0; min-width: 100%; padding-top: 8px; box-shadow: 2px 2px 2px #cccccc; } .sidebar{ //grid-area: s; background-color: $grey; display: block; padding-left: 5px; padding-right: 5px; overflow-x: hidden; overflow-y: hidden; min-width: 255px; max-width: 255px; top: 55px; z-index: 2; position: fixed; height: 94.5vh; left: 0px; } @media (max-width: 850px) { .hamburgerSection { display: block; } .sidebar { //display: none; left:-265px; transition: left 0.2s ease; } } @media (min-width: 851px) { .sidebar { left: 0px !important; transition: right 0.2s ease; } .shadow { display: none !important; opacity: 0 !important; } } //NAV SECTION nav { display: flex; flex-direction: row; justify-content: space-around; text-align: center; height: 50px; padding: 0 20px 0 22px; .logo { // center items within div using flex! display: flex; align-items: center; justify-content: space-around; } .GameNav { display: flex; flex-wrap: wrap; overflow: hidden; align-items: center; margin-top: 5px; @media (max-width:550px) { display: none; } a { color: black; text-decoration: none; font-size: 12pt; font-weight: bold; position: relative; padding: 5px 0; white-space: nowrap; box-sizing: border-box; height: 100%; margin-right: 10px; margin-left: 10px; margin-bottom: 0px; border-bottom: 4px solid transparent; border-top: 4px solid transparent; } a:hover { border-bottom: 4px solid $pink; } } .SearchBar { display: flex; flex: 2; align-items: center; justify-content: space-around; max-width: 500px; min-width: 240px; margin: 0 10px 0 20px; @media (max-width: 999px) { display: none; } } .SearchInput { flex: 1; border: 0; padding: 4px 0 4px 10px; font-size: 14px; height: 30px; margin: 0; background: transparent; color:#222; background-color: #F4F4F4; border-radius: 3px; } li { text-align:center; display:inline-block; } .ButtonNav { display: flex; background-color: white; height: 50px; margin-left: auto; text-align:center; margin-bottom: -10px; } .buttons { //-moz-box-sizing: border-box; transition: all 0.1s ease; white-space: nowrap; height: 30px; line-height: 26px; color: inherit; padding: 0 15px; border: 2px solid; border-color: #dadada; text-decoration: none; font-size: 10pt; font-weight: bold; border-radius: 3px; background-color: white; cursor: pointer; margin-top:10px; margin-right: 10px; } .buttons:hover { color: $pink; } .register_btn { display: block; @media (max-width:750px) { display: none; } } } //NAV DROPDOWN SECTION .navDropdown { position: fixed; left: 0; right: 0; top: 62px; color:white; height: 40px; background-color:$pink; z-index: 20; box-shadow: 0 2px 4px rgba(0,0,0,0.2); padding: 0 40px; font-size: 16px; white-space: nowrap; overflow: hidden; align-items: center; display: none; opacity: 0; transform: translate(0, -20%); transition: all 0.2s ease; a { color: white; margin-right: 10px; text-decoration: none; } a:hover { border-bottom: 2px solid white; } } //POPULAR TAGS ECTION .SidebarSections { padding: 20px; h3 { text-transform: uppercase; font-size: 13.5px; } ul { margin-left: -50px; display: flex; flex-direction: row; flex-wrap: wrap; text-decoration: none; li { display: flex; align-items: center; padding: 3px 10px; min-height: 27px; padding: 3px 10px; box-sizing: border-box; width: 50%; } } a { text-decoration: none; opacity: 0.8; font-size: 13.5px; color: black; } a:hover { color: $pink; text-decoration: underline $pink; } } .social { margin-left: 20px !important; a { margin: 3px; font-size: 10px; } a:hover{ color: red; text-decoration: none #ff0000; img { filter: opacity(65%); } } } .BlogSection { margin-left: 20px !important; opacity: 0.8; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; text-decoration: none; font-size: 13.5px; h3 { text-transform: uppercase; font-size: 13.5px; //margin-left: 20px; } a { text-decoration: none; font-size: 13.5px; color: black; align-items: center; box-sizing: border-box; margin-bottom: 10px; //padding-right: 10px; display: flex; flex-flow: row-reverse; } a:hover { color: $pink; text-decoration: underline $pink; } .blogtext { display: block; line-height: 1.3; flex: 0.75; } .day { opacity: 0.5; float: right; align-items: flex-start; //display: flex; flex: 0.25; margin-left: 12px; padding-right: 10px; } } //END OF SIDEBAR .shadow { transition: opacity 0.2s ease; opacity: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color:rgba(0,0,0,0.6); z-index: 1; display: none; height:100%; width: 100%; } // MAIN SECTION .main{ //grid-area: m; border: 1px solid; //border-color: rgb(199, 34, 34); overflow-x: scroll; } .mainsection { position: absolute; left:245px; //margin-left: 245px; margin-top: -20px; @media (max-width: 850px) { //margin-left: 0px; left: 0px; } .intro { margin-top:50px; height: auto; background: $grey; width: 100%; display: flex; padding-top: 10px; p { margin-left: 50px; //padding-bottom: 5px; } a { color: $pink; } .introbreak{ display: none; @media (max-width: 1000px) { display: block; } } } .downloadprompt { height: 50px; width: 100%; display: flex; padding-top: 10px; background: linear-gradient(to right, #495867, rgba(73,88,103,0.8) 60%, rgba(162,135,192,0.4)),url("./images/appdownloadbg.png") 100% 0 no-repeat,linear-gradient(to right, #343f49, #8866ae); font-size: 14pt; padding-bottom: 20px; @media (max-width: 950px) { display: none; } .downloadInner { margin-top: 10px; margin-left: 50px; color: white; background-color: none; } .downloadbtn { transition: all 0.2s ease; display: inline-block; border-radius: 3px; color: white; background: rgb(0,0,0,0.01); text-decoration: none; padding: 8px 10px; border-width: 2px; cursor: pointer; border-color: white; } .downloadbtn:hover { background: $pink; border-color: $pink; } } .gameAdSection { background: black; max-width: none; padding: 0; margin-bottom: 40px; //max-width: 1680px; margin-left: auto; margin-right: auto; @media (max-width: 500px) { display:none; } } .gameAdSubSection { background-image: url('./images/gameadbg.jpg'); background-size: auto; background-size: cover; position: relative; color: white; max-width: 1300px; display: flex; margin-left: auto; margin-right: auto; padding: 40px; @media (max-width: 850px) { display: block; } .videoContainer { margin-right: 20px; flex: 1.25; max-width: 500px; @media (max-width: 850px) { margin-right: 0px; max-width: auto; } .videoText { text-align: center; margin-top: 8px; font-size: 15px; a { color: white; font-weight: bold; opacity: 0.8; text-decoration: none; } a:hover { opacity: 1; } } } .videoRatio { height: 0; position: relative; padding-bottom: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.15); background-image: url(./images/video-thumb_.jpg); background-size: cover; background-position: center; margin-top: 10px; } .videoRatio:hover { cursor: pointer; } .textContainer { margin-right: 20px; flex: 2; max-width: 680px; border: 1px solid green; } .screenshotContainer { flex: 2; min-width: 0; .screenshots { display: flex; margin: 15px 0; } .screenshotpad { margin-right: 10px !important; max-width: 220px !important; } .screenshot3 { display: flex; @media (max-width: 650px) { display: none; } } .subText { margin-top: 5px; font-size: 10pt; font-weight: bold; max-width: 500px; margin-bottom: 20px; } img { width: 100%; display: block; box-shadow: 0 1px 4px rgba(0,0,0,0.15); max-width: 220px; } img:hover { cursor: pointer; opacity: 0.8; } .price { padding-top: 3px; background: white; color:black; text-shadow: none; border-radius: 3px; padding: 2px 5px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; font-weight: bold; } .tags { float: right; font-size: 10pt; } .buybutton { border: 2px solid white; background: rgb(0,0,0,0.1); border-radius: 3px; font-size: 18px; padding: 5px 12px; display: inline-block; font-weight: 900; color: inherit; text-decoration: none; transition: all 0.2s ease; } .buybutton:hover { background: white; color: black; cursor: pointer; } } .closeButton { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: white; border: 0; padding: 5px; margin: 0; cursor: pointer; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); } .closeButton:hover { background: white; color: black; } } //Game Catalog Section .catalogContainer { padding-left: 0; padding-right: 0; margin-left: 50px; .freshGamesHeader { //margin-left: 20px; margin-bottom: 20px; display: flex; } .viewBtn { border: 1px solid $pink; background: none; border-radius: 3px; font-size: 10pt; padding: 2px 12px; display: inline-block; height: 28px; color: $pink; margin-left: 10px; margin-top: 20px; text-decoration: none; transition: all 0.2s ease; } .viewBtn:hover { background: $pink; color: white; cursor: pointer; } .description { margin-top: -20px; //margin-left: 30px; margin-bottom: 20px; font-size: 16px; color: #606060; } .gameGrid { margin-top: 0; padding-top: 0; padding-right: 10px; .gamecel { width: 202px; display: inline-block; vertical-align: top; margin-right: 10px; margin-bottom: 25px; .gameimg { width: 202px; height: 160px; background: #606060; .gameinfoico { display:none; transition: opacity 0.20s ease-in-out; opacity: 0; float: right; padding: 3px; } } .gameimg:hover { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), #606060 20% 80%, rgba(0, 0, 0, 0.8)); cursor: pointer; .gameinfoico { transition: opacity 0.20s ease-in-out; opacity: 1; display:block; } } .gametitle { font-size:10pt; color: black; float:left; margin-top: 5px; } .pricetag { padding-top: 3px; background:#737373; color:white; text-shadow: none; border-radius: 3px; padding: 2px 5px; text-transform: uppercase; font-size: 8pt; letter-spacing: 0.05em; font-weight: bold; float: right; margin-top: 5px; } .tags { color: $pink; margin-top: 5px; font-size:9px; } .game-description { opacity: 0.7; font-size: 12px; margin-top: 5px; } } } .viewall { text-align: center; margin-top: 10px; margin-bottom: 30px; } } } // END MAIN SECTION // FOOTER SECTION .lefooter { background: $grey; //min-width: 97.2vw; /* margin-left: 245px; margin-top: -20px; @media (max-width: 850px) { margin-left: 0px; left: 0px; }*/ padding-bottom: 10px; padding-top: 20px; } .footersection { .footer-row { height: auto; background: $grey; //width: 100%; //display: flex; //align-items: center; vertical-align: top; padding: 20px 20px 0 20px; //justify-content: space-around; text-align: center; a { text-decoration: none; color:#858585; padding: 0 15px; text-transform: uppercase; font-weight: bold; border: none; text-decoration: none; display: inline-block; text-shadow: none; font-size: 12pt; } a:hover { color: lightgrey; } .footer-social { padding: 0 15px; opacity: 0.5; cursor: pointer; height: 20px; } .footer-social:hover { opacity: 0.3; } } .footer-row2 { height: auto; background: $grey; vertical-align: top; padding: 20px 20px 0 20px; text-align: center; a { color:#858585; font-size: 9.5pt; } .copyright { color:#858585; font-size: 9.5pt; } .spacer { color:#858585; } } }

functions.js

function HideSection(id, Shadow) { let section = document.getElementById(id); let shadow = document.getElementById(Shadow); if (window.getComputedStyle(section).left === "0px") { section.style.left = '-265px'; shadow.style.display = 'none'; shadow.style.opacity = '0'; return; } else if (window.getComputedStyle(section).left === "-265px") { section.style.left = '0px'; shadow.style.display = 'block'; shadow.style.opacity = '100'; return; } } function HideSubNav(Nav) { let subNav = document.getElementById(Nav); if (window.getComputedStyle(subNav).display === "flex") { subNav.style.display = 'none'; subNav.style.opacity = '0'; return; } else if (window.getComputedStyle(subNav).display === "none") { subNav.style.display = 'flex'; subNav.style.opacity = '100'; setTimeout(function(ele = subNav){ hide(ele)}, 3000); return; } } function hide(ele) { ele.style.display = 'none'; ele.style.opacity = '0'; } function hideit(ele) { let element = document.getElementById(ele); element.style.display = 'none'; element.style.opacity = '0'; } function ShowScrollY(id) { let section = document.getElementById(id); section.style.overflowY = 'scroll'; if (window.getComputedStyle(section).overflowY === "hidden") { section.style.overflowY = 'scroll'; return; } } function HideScrollY(id) { let section = document.getElementById(id); if (window.getComputedStyle(section).overflowY === "scroll") { section.style.overflowY = 'hidden'; return; } }