Gamedust - Documentation
Support: TM Profile (Aurora-Themes)
Thank you for purchasing Gamedust - HTML Web Template.
If you have any problem with this product, be free to check for support on my TemplateMonster Author Profile (Aurora-Themes). Also, if you have a problem to customize this template, contact me, and I will do that for you. I worked hard to provide the best and newest features in this template. Gamedust is template particularly crafted for game development teams.
# Installation
Zip File
After download Gamedust - HTML Web Template, and unpacking zip file you have the following folders:
Install - Server and FTP Upload
To install Via - HTML Web Template you can use two methods:
1. Upload files to the server using cPanel (cPanel provide to you your hosting provider). On the bottom image you can see an example:
To upload files to the server:
- Log in to your account (hosting),
- Upload your choosen template version to the server - ZIP file (all versions can be found in "Versions" folder).
- Unzip files in following folder on server: public_html
- You are ready to go.
2. Upload files to the server using some ftp client (for example - FileZilla). On the bottom image - FileZilla (screen):
Please, download the newest FileZilla version.
Not Allowed - GitHub
It's not allowed to install Gamedust template on GitHub. Bottom image - GitHub start screen.
Useful Links
# Licensing
TemplateMonster offers licenses by product types. In section "Website Templates and Themes Licenses", there are following licenses: Personal, Commercial and Business. Also TM provides and FAQ's about any of these three types of licenses.
Useful Links
# Layouts
There are five layouts within the Gamedust HTML web template:
- Vanilla,
- Light,
- Sunlight,
- Chocolate.
- Dark Chocolate.
# Images
Template images aren't included in this package. It's only there for preview purposes. Instead, there are appropriate image placeholders with sizes in pixels.
To change image you need to take a care about image names. Image name need to be same in the folder (Images), but also and inside code. For example: Graphic.webp (Images folder), src = "Images/Graphic.webp" (code). You only need to replace placeholders with real images, and that's easy like that.
I strongly recommend use of images with "webp" extension.
Useful Link
# HTML
In each version you can find HTML folder where are located HTML files (except index.html). These files are very important because there you can make changes, which relates to this web template. Actually, text and images are replaced inside HTML files (except background images). Also, each HTML file has the Table of Contents for your easier orientation.
Layout - Dark Chocolate
index.html
Description
Code Line: 11
<meta name = "description" content = "Gamedust is a HTML Web Template, which is all about to support game development studios, and their presentation on internet.">
Keywords
Code Line: 13
<meta name = "keywords" content = "App, Desktop, Development, Game, Layouts, Mobile, Modern, Studio">
Browser Bar Image
Code Line: 22
<link rel = "icon" type = "image/png" href = "Images/Title-Bar/Gamedust.webp">
Browser Title Text
Code Line: 34
Loader
Code Lines: 706-711
<!-- Loader -->
<div class = "loader">
<!-- Spinner -->
<div class = "loader-block">
</div>
</div>
Header
Code Lines: 718-970
<!-- Header -->
<header id = "header-anchor">
<div class = "header-top">
<div class = "header-top-content">
<div class = "header-top-content-search">
<div class = "header-top-content-search-icon">
<!-- Search Icon -->
<img alt = "Search Icon" class = "header-top-content-search-icon-img img-fluid" src = "Images/Header/Search.webp">
</div>
</div>
<div class = "header-top-content-logo">
<!-- Logo Text -->
<a href = "#header-anchor">
Gamedust
</a>
</div>
<div class = "header-top-content-navbar">
<div class = "header-top-content-navbar-lines">
<!-- Top Line -->
<div class = "header-top-content-navbar-lines-lineTopBottom">
<div class = "header-top-content-navbar-lines-lineTopBottom-line">
</div>
</div>
<!-- Middle Line -->
<div class = "header-top-content-navbar-lines-lineMiddle">
</div>
<!-- Bottom Line -->
<div class = "header-top-content-navbar-lines-lineTopBottom">
<div class = "header-top-content-navbar-lines-lineTopBottom-line">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Search Screen -->
<div class = "header-search">
<div class = "header-search-content">
<div class = "header-search-content-formArea">
<!-- Typing Form -->
<form class = "header-search-content-formArea-form" id = "formSearch">
<input class = "header-search-content-formArea-form-input" id = "searchArea" name = "search" onkeyup = "filterObjects()" type = "text">
</form>
</div>
<!-- Close Button -->
<div class = "header-search-content-close">
<img alt = "Close" class = "img-fluid" src = "Images/Header/Close.webp">
</div>
<!-- Objects for Search -->
<div class = "header-search-content-objects">
<div class = "header-search-content-objects-block" id = "objectsList">
<div class = "header-search-content-objects-block-object" data-altname = "about" data-index = "0">
<a class = "header-search-content-objects-block-object-link" href = "#about-anchor">
About
</a>
</div>
<div class = "header-search-content-objects-block-object" data-altname = "contact" data-index = "1">
<a class = "header-search-content-objects-block-object-link" href = "#contact-anchor">
Contact
</a>
</div>
<div class = "header-search-content-objects-block-object" data-altname = "footer" data-index = "2">
<a class = "header-search-content-objects-block-object-link" href = "#">
Footer
</a>
</div>
<div class = "header-search-content-objects-block-object" data-altname = "games" data-index = "3">
<a class = "header-search-content-objects-block-object-link" href = "#games-anchor">
Games
</a>
</div>
<div class = "header-search-content-objects-block-object" data-altname = "game vault" data-index = "4">
<a class = "header-search-content-objects-block-object-link" href = "#">
Game Vault
</a>
</div>
<div class = "header-search-content-objects-block-object" data-altname = "header" data-index = "5">
<a class = "header-search-content-objects-block-object-link" href = "#header-anchor">
Header
</a>
</div>
<div class = "header-search-content-objects-block-object" data-altname = "news" data-index = "6">
<a class = "header-search-content-objects-block-object-link" href = "#news-anchor">
News
</a>
</div>
<div class = "header-search-content-objects-block-object" data-altname = "subscribe" data-index = "7">
<a class = "header-search-content-objects-block-object-link" href = "#subscribe-anchor">
Subscribe
</a>
</div>
</div>
<!-- No Records - Message -->
<p class = "header-search-content-objects-noRecords hidden" id = "empty-list-message">
No records found.
</p>
</div>
</div>
</div>
<!-- Navbar on Click -->
<div class = "header-navbar">
<div class = "header-navbar-content">
<!-- Close Button -->
<div class = "header-navbar-content-close">
<img alt = "Close" class = "img-fluid" src = "Images/Header/Close.webp">
</div>
<!-- Navbar Links -->
<div class = "header-navbar-content-links">
<ul>
<li>
<a class = "header-navbar-content-links-ul-li-link" href = "#header-anchor">
Home
</a>
</li>
<li>
<a class = "header-navbar-content-links-ul-li-link" href = "#about-anchor">
About
</a>
</li>
<li>
<a class = "header-navbar-content-links-ul-li-link" href = "#games-anchor">
Games
</a>
</li>
<li>
<a class = "header-navbar-content-links-ul-li-link" href = "#news-anchor">
News
</a>
</li>
<li>
<a class = "header-navbar-content-links-ul-li-link" href = "#contact-anchor">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
<div class = "header-middle">
<div class = "header-middle-content">
<div class = "header-middle-content-left">
<div class = "header-middle-content-left-largeText">
<div class = "header-middle-content-left-largeText-content">
<!-- Text - "We Create Magic..." -->
<h1>
<span class = "header-middle-content-left-largeText-content-h1-block">
We Create
</span>
<span class = "header-middle-content-left-largeText-content-h1-block">
<span class = "header-middle-content-left-largeText-content-h1-block-word">
Magic
</span>
<span class = "header-middle-content-left-largeText-content-h1-block-line">
</span>
</span>
<span class = "header-middle-content-left-largeText-content-h1-block">
in
</span>
<span class = "header-middle-content-left-largeText-content-h1-block">
<span class = "header-middle-content-left-largeText-content-h1-block-word">
Gaming.
</span>
<span class = "header-middle-content-left-largeText-content-h1-block-lineGaming">
</span>
</span>
</h1>
</div>
</div>
<!-- Small Text -->
<div class = "header-middle-content-left-smallText">
<h4>
We enjoy to use the latest technologies and create extraordinary games.
</h4>
</div>
<div class = "header-middle-content-left-button">
<div class = "header-middle-content-left-button-area">
<div class = "header-middle-content-left-button-area-circle">
</div>
<div class = "header-middle-content-left-button-area-textArrow">
<!-- Button Text -->
<h4>
Learn More
</h4>
<!-- Image - Arrow -->
<img alt = "Arrow" class = "img-fluid" onclick = "window.location = '#';" src = "Images/Header/Arrow.webp">
</div>
</div>
</div>
</div>
<div class = "header-middle-content-right">
<div class = "header-middle-content-right-img">
<!-- Img - Gaming Team -->
<img alt = "Gaming Team" class = "fluid" src = "Images/Header/Gaming-Team.webp">
</div>
</div>
</div>
</div>
<div class = "header-social">
<div class = "header-social-block">
<!-- Social Networks, Icons -->
<a href = "#">
<img alt = "Fb" class = "img-fluid" src = "Images/Header/Fb.webp">
</a>
<a href = "#">
<img alt = "X" class = "img-fluid" src = "Images/Header/X.webp">
</a>
<a href = "#">
<img alt = "Instagram" class = "img-fluid" src = "Images/Header/Instagram.webp">
</a>
<a href = "#">
<img alt = "Pinterest" class = "img-fluid" src = "Images/Header/Pinterest.webp">
</a>
</div>
</div>
<div class = "header-info">
<div class = "header-info-block">
<div class = "header-info-block-content">
<!-- Column One with Text -->
<div class = "header-info-block-content-column header-info-block-content-columnOne">
<div class = "header-info-block-content-columnOne-text header-info-block-content-column-text">
<h4>
25 Developers
</h4>
</div>
</div>
<!-- Column Two with Text -->
<div class = "header-info-block-content-column header-info-block-content-columnTwo">
<div class = "header-info-block-content-column-text header-info-block-content-columnTwo-text">
<h4>
100k Followers
</h4>
</div>
</div>
<!-- Column Three with Text -->
<div class = "header-info-block-content-column header-info-block-content-columnThree">
<div class = "header-info-block-content-column-text header-info-block-content-columnThree-text">
<h4>
10 Games
</h4>
</div>
</div>
<!-- Column Four with Text -->
<div class = "header-info-block-content-column header-info-block-content-columnFour">
<div class = "header-info-block-content-column-text header-info-block-content-columnFour-text">
<h4>
12 Tournaments
</h4>
</div>
</div>
</div>
</div>
</div>
</header>
About
Code Lines: 973-1080
<!-- Section -->
<section class = "about" id = "about-anchor">
<h2 class = "about-validation">
Required for Validation
</h2>
<div class = "about-portfolio">
<div class = "about-portfolio-images">
<!-- Portfolio Images -->
<img alt = "Portfolio-Left" class = "img-fluid" src = "Images/About/Portfolio-Left.webp">
<img alt = "Portfolio-Center" class = "img-fluid" src = "Images/About/Portfolio-Center.webp">
<img alt = "Portfolio-Right" class = "img-fluid" src = "Images/About/Portfolio-Right.webp">
</div>
</div>
<div class = "about-text">
<!-- Large Text -->
<h5>
Our portfolio is full of quality games, and we invite you to try that. Download free demos and enjoy in cutting edge graphic, excellent UI/UX system, and carefully tailored stories.
</h5>
</div>
<div class = "about-button">
<!-- Button - See More -->
<div class = "about-button-content" onclick = "window.location = 'HTML/game-vault.html';">
<h5>
SEE MORE
</h5>
</div>
</div>
<div class = "about-video">
<!-- Video -->
<video class = "about-video-vid">
<source src = "Video/Gaming.mp4" type = "video/mp4">
</video>
<!-- Dark Layer -->
<div class = "about-video-layer">
<div class = "about-video-layer-play">
<!-- Large Circle -->
<div class = "about-video-layer-play-largeCircle">
<!-- Small Circle -->
<div class = "about-video-layer-play-largeCircle-smallCircle">
<!-- Triangle -->
<div class = "about-video-layer-play-largeCircle-smallCircle-triangle">
</div>
<div class = "about-video-layer-play-largeCircle-smallCircle-pause">
<div class = "about-video-layer-play-largeCircle-smallCircle-pause-blocks">
<div class = "about-video-layer-play-largeCircle-smallCircle-pause-blocks-block">
</div>
<div class = "about-video-layer-play-largeCircle-smallCircle-pause-blocks-block">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "about-social">
<div class = "about-social-content">
<div class = "about-social-content-block">
<div class = "about-social-content-block-top" onclick = "window.location = '#';">
<!-- Icon - Artstation -->
<img alt = "Artstation" class = "about-social-content-block-top-artstation img-fluid" src = "Images/About/Artstation.webp">
</div>
<div class = "about-social-content-block-bottom">
<!-- Text - Artstation -->
<h5>
ARTSTATION
</h5>
</div>
</div>
<div class = "about-social-content-block">
<div class = "about-social-content-block-top" onclick = "window.location = '#';">
<!-- Icon - Discord -->
<img alt = "Discord" class = "about-social-content-block-top-discord img-fluid" src = "Images/About/Discord.webp">
</div>
<div class = "about-social-content-block-bottom">
<!-- Text - Discord -->
<h5>
DISCORD
</h5>
</div>
</div>
<div class = "about-social-content-block">
<div class = "about-social-content-block-top" onclick = "window.location = '#';">
<!-- Icon - X -->
<img alt = "X" class = "about-social-content-block-top-x img-fluid" src = "Images/About/X.webp">
</div>
<div class = "about-social-content-block-bottom">
<!-- Text - X -->
<h5>
X
</h5>
</div>
</div>
<div class = "about-social-content-block">
<div class = "about-social-content-block-top" onclick = "window.location = '#';">
<!-- Icon - YouTube -->
<img alt = "YT" class = "about-social-content-block-top-yt img-fluid" src = "Images/About/YT.webp">
</div>
<div class = "about-social-content-block-bottom">
<!-- Text - YouTube -->
<h5>
YOUTUBE
</h5>
</div>
</div>
</div>
</div>
</section>
Games
Code Lines: 1083-1386
<section class = "games" id = "games-anchor">
<div class = "games-content">
<div class = "games-content-blocks">
<div class = "games-content-blocks-block">
<div class = "games-content-blocks-block-top">
<div class = "games-content-blocks-block-top-info">
<div class = "games-content-blocks-block-top-info-elements">
<!-- Game - Name -->
<h3>
HEAVEN WATERFALL
</h3>
<!-- Genre -->
<h5>
Platform
</h5>
<div class = "games-content-blocks-block-top-info-elements-lineArea">
<div class = "games-content-blocks-block-top-info-elements-lineArea-line">
</div>
</div>
<div class = "games-content-blocks-block-top-info-elements-textArea">
<!-- Text -->
<h5>
Heaven Waterfall is our new platform game, which use the cutting edge technologies in 3D modeling and rendering. Game is created in Unity Game Engine, and itās our first, which support VR technologies.
</h5>
</div>
<div class = "games-content-blocks-block-top-info-elements-rating">
<!-- Text - Rating -->
<h5>
Rating
</h5>
<div class = "games-content-blocks-block-top-info-elements-rating-starsArea">
<div class = "games-content-blocks-block-top-info-elements-rating-starsArea-stars">
<!-- Stars -->
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
</div>
</div>
</div>
<div class = "games-content-blocks-block-top-info-elements-get">
<!-- Text - Get it On -->
<h5>
GET IT ON
</h5>
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea">
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons">
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation" onclick = "window.location = '#';">
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-imgArea">
<!-- Icon - Artstation -->
<img alt = "Artstation" class = "img-fluid" src = "Images/Games/Artstation.webp">
</div>
<!-- Text - Artstation -->
<p>
<span class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-p-art">
ART
</span>
<span class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-p-station">
STATION
</span>
</p>
</div>
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-humble" onclick = "window.location = '#';">
<!-- Icon - Humble -->
<img alt = "Humble" class = "img-fluid" src = "Images/Games/Humble.webp">
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "games-content-blocks-block-top-img">
<!-- Large Image -->
<img alt = "Heaven-Waterfall" class = "img-fluid" src = "Images/Games/Heaven-Waterfall.webp">
</div>
</div>
<div class = "games-content-blocks-block-features">
<!-- Heading - Game Features -->
<h4>
GAME FEATURES
</h4>
<div class = "games-content-blocks-block-features-blocks">
<div class = "games-content-blocks-block-features-blocks-feature games-content-blocks-block-features-blocks-featureOne">
<div class = "games-content-blocks-block-features-blocks-feature-content">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-image">
<!-- Icon - Gamepad -->
<img alt = "Gamepad" class = "img-fluid" src = "Images/Games/Gamepad.webp">
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Platform -->
<h5>
PLATFORM
</h5>
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Heaven Waterfall is... -->
<h5>
Heaven Waterfall is our famous platform game.
</h5>
</div>
</div>
</div>
</div>
<div class = "games-content-blocks-block-features-blocks-feature games-content-blocks-block-features-blocks-featureTwo">
<div class = "games-content-blocks-block-features-blocks-feature-content">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-image">
<!-- Icon - Monitor -->
<img alt = "Monitor" class = "img-fluid" src = "Images/Games/Monitor.webp">
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Desktop -->
<h5>
DESKTOP
</h5>
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Heaven Waterfall is... -->
<h5>
Heaven Waterfall is crafted exclusively for PC.
</h5>
</div>
</div>
</div>
</div>
<div class = "games-content-blocks-block-features-blocks-feature games-content-blocks-block-features-blocks-featureThree">
<div class = "games-content-blocks-block-features-blocks-feature-content">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-image">
<!-- Icon - Multiplayer -->
<img alt = "Multiplayer" class = "img-fluid" src = "Images/Games/Multiplayer.webp">
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Multiplayer -->
<h5>
MULTIPLAYER
</h5>
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - You want to... -->
<h5>
You want to play with your friends. Itās possible in this game.
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "games-content-blocks-block games-content-blocks-cheesePlanet">
<div class = "games-content-blocks-block-top">
<div class = "games-content-blocks-block-top-info">
<div class = "games-content-blocks-block-top-info-elements">
<!-- Game - Name -->
<h3>
CHEESE PLANET
</h3>
<!-- Genre -->
<h5>
Adventure
</h5>
<div class = "games-content-blocks-block-top-info-elements-lineArea">
<div class = "games-content-blocks-block-top-info-elements-lineArea-line">
</div>
</div>
<div class = "games-content-blocks-block-top-info-elements-textArea">
<!-- Text -->
<h5>
Cheese Planet is our new adventure game, which use the cutting edge technologies in 3D modeling and rendering. Game is created in Unreal Game Engine, and it still doesnāt support VR technologies.
</h5>
</div>
<div class = "games-content-blocks-block-top-info-elements-rating">
<!-- Text - Rating -->
<h5>
Rating
</h5>
<div class = "games-content-blocks-block-top-info-elements-rating-starsArea">
<div class = "games-content-blocks-block-top-info-elements-rating-starsArea-stars">
<!-- Stars -->
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-Blue.webp">
<img alt = "star" class = "img-fluid" src = "Images/Games/Star-White.webp">
</div>
</div>
</div>
<div class = "games-content-blocks-block-top-info-elements-get">
<!-- Text - Get it On -->
<h5>
GET IT ON
</h5>
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea">
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons">
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation" onclick = "window.location = '#';">
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-imgArea">
<!-- Icon - Artstation -->
<img alt = "Artstation" class = "img-fluid" src = "Images/Games/Artstation.webp">
</div>
<!-- Text - Artstation -->
<p>
<span class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-p-art">
ART
</span>
<span class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-p-station">
STATION
</span>
</p>
</div>
<div class = "games-content-blocks-block-top-info-elements-get-iconsArea-icons-humble" onclick = "window.location = '#';">
<!-- Icon - Humble -->
<img alt = "Humble" class = "img-fluid" src = "Images/Games/Humble.webp">
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "games-content-blocks-block-top-img">
<!-- Large Image -->
<img alt = "Heaven-Waterfall" class = "img-fluid" src = "Images/Games/Cheese-Planet.webp">
</div>
</div>
<div class = "games-content-blocks-block-features">
<!-- Heading - Game Features -->
<h4>
GAME FEATURES
</h4>
<div class = "games-content-blocks-block-features-blocks">
<div class = "games-content-blocks-block-features-blocks-feature games-content-blocks-block-features-blocks-featureOne">
<div class = "games-content-blocks-block-features-blocks-feature-content">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-image">
<!-- Icon - Gamepad -->
<img alt = "Gamepad" class = "img-fluid" src = "Images/Games/Gamepad.webp">
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Adventure -->
<h5>
ADVENTURE
</h5>
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Cheese Planet is... -->
<h5>
Cheese Planet is our famous adventure game.
</h5>
</div>
</div>
</div>
</div>
<div class = "games-content-blocks-block-features-blocks-feature games-content-blocks-block-features-blocks-featureTwo">
<div class = "games-content-blocks-block-features-blocks-feature-content">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-image">
<!-- Icon - Playstation -->
<img alt = "Playstation" class = "img-fluid" src = "Images/Games/PS.webp">
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Desktop -->
<h5>
PLAYSTATION
</h5>
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Cheese Planet is... -->
<h5>
Cheese Planet is crafted exclusively for PS5.
</h5>
</div>
</div>
</div>
</div>
<div class = "games-content-blocks-block-features-blocks-feature games-content-blocks-block-features-blocks-featureThree">
<div class = "games-content-blocks-block-features-blocks-feature-content">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside">
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-image">
<!-- Icon - Multiplayer -->
<img alt = "Multiplayer" class = "img-fluid" src = "Images/Games/Multiplayer.webp">
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - Multiplayer -->
<h5>
MULTIPLAYER
</h5>
</div>
<div class = "games-content-blocks-block-features-blocks-feature-content-inside-text">
<!-- Text - You want to... -->
<h5>
You want to play with your friends. Itās possible in this game.
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Company News
Code Lines: 1389-1542
<section class = "news" id = "news-anchor">
<div class = "news-content">
<div class = "news-content-heading">
<!-- Heading -->
<h2>
Company News
</h2>
</div>
<div class = "news-content-gameName">
<!-- Name of the Game -->
<h5>
Old Crypt
</h5>
</div>
<div class = "news-content-image">
<!-- Large Image -->
<img alt = "Old Crypt" class = "img-fluid" src = "Images/News/Old-Crypt.webp">
</div>
<div class = "news-content-author">
<div class = "news-content-author-image">
<!-- Img - Author -->
<img alt = "Author" class = "img-fluid" src = "Images/News/Author-01.webp">
</div>
<div class = "news-content-author-name">
<!-- Name - Author -->
<h5>
DAVID MANONE
</h5>
</div>
</div>
<div class = "news-content-text">
<!-- Large Text -->
<h5>
Currently, we are working on our new adventure game, and itās about 80% completed. I am talking about Old Crypt game, which we work in Unreal Game Engine. I believe that very soon our followers, will have a possibility to test this game, and give their reviews. We will soon publish beta version of this game.
</h5>
<div class = "news-content-text-date">
<div class = "news-content-text-date-wrapper">
<div class = "news-content-text-date-wrapper-info">
<div class = "news-content-text-date-wrapper-info-line">
</div>
<!-- Day -->
<h3>
19
</h3>
<!-- Month -->
<p>
Sept.
</p>
<!-- Year -->
<p>
2024
</p>
</div>
</div>
</div>
</div>
<div class = "news-content-button">
<div class = "news-content-button-shape" onclick = "window.location = 'HTML/old-crypt.html';">
<div class = "news-content-button-shape-sand news-content-button-shape-top">
<!-- Button - Text -->
<h5>
Read
</h5>
</div>
</div>
</div>
<div class = "news-content-social">
<!-- Icons -->
<div class = "news-content-social-icons">
<div class = "news-content-social-icons-circle" onclick = "window.location = '#';">
<img alt = "Facebook" class = "img-fluid news-content-social-icons-circle-fb" src = "Images/News/Fb.webp">
</div>
<div class = "news-content-social-icons-circle" onclick = "window.location = '#';">
<img alt = "X" class = "img-fluid news-content-social-icons-circle-x" src = "Images/News/X.webp">
</div>
<div class = "news-content-social-icons-circle" onclick = "window.location = '#';">
<img alt = "Instagram" class = "img-fluid news-content-social-icons-circle-instagram" src = "Images/News/Instagram.webp">
</div>
</div>
</div>
<div class = "news-content-gameName news-content-roadAdventures">
<!-- Name of the Game -->
<h5>
Road Adventures
</h5>
</div>
<div class = "news-content-image">
<!-- Large Image -->
<img alt = "Old Crypt" class = "img-fluid" src = "Images/News/Road-Adventures.webp">
</div>
<div class = "news-content-author">
<div class = "news-content-author-image">
<!-- Img - Author -->
<img alt = "Author" class = "img-fluid" src = "Images/News/Author-02.webp">
</div>
<div class = "news-content-author-name">
<!-- Name - Author -->
<h5>
DIANA TUCKER
</h5>
</div>
</div>
<div class = "news-content-text">
<!-- Large Text -->
<h5>
Currently, we are working on our new adventure game, and itās about 80% completed. I am talking about Road Adventures game, which we work in Unreal Game Engine. I believe that very soon our followers, will have a possibility to test this game, and give their reviews. We will soon publish beta version of this game.
</h5>
<div class = "news-content-text-date">
<div class = "news-content-text-date-wrapper">
<div class = "news-content-text-date-wrapper-info">
<div class = "news-content-text-date-wrapper-info-line">
</div>
<!-- Day -->
<h3>
25
</h3>
<!-- Month -->
<p>
Nove.
</p>
<!-- Year -->
<p>
2024
</p>
</div>
</div>
</div>
</div>
<div class = "news-content-button">
<div class = "news-content-button-shape" onclick = "window.location = 'HTML/road-adventures.html';">
<div class = "news-content-button-shape-bottom news-content-button-shape-sand">
<!-- Button - Text -->
<h5>
Read
</h5>
</div>
</div>
</div>
<div class = "news-content-social">
<!-- Icons -->
<div class = "news-content-social-icons">
<div class = "news-content-social-icons-circle" onclick = "window.location = '#';">
<img alt = "Facebook" class = "img-fluid news-content-social-icons-circle-fb" src = "Images/News/Fb.webp">
</div>
<div class = "news-content-social-icons-circle" onclick = "window.location = '#';">
<img alt = "X" class = "img-fluid news-content-social-icons-circle-x" src = "Images/News/X.webp">
</div>
<div class = "news-content-social-icons-circle" onclick = "window.location = '#';">
<img alt = "Instagram" class = "img-fluid news-content-social-icons-circle-instagram" src = "Images/News/Instagram.webp">
</div>
</div>
</div>
</div>
</section>
Subscribe
Code Lines: 1545-1570
<section class = "subscribe" id = "subscribe-anchor">
<div class = "subscribe-content">
<div class = "subscribe-content-shape">
<div class = "subscribe-content-shape-elements">
<div class = "subscribe-content-shape-elements-heading">
<!-- Text - Subscribe -->
<h4>
SUBSCRIBE
</h4>
</div>
<div class = "subscribe-content-shape-elements-text">
<!-- Text -->
<h5>
Subscribe to our newsletter, and be informed about our latest games and products.
</h5>
</div>
<form action = "PHP/subscribe.php" class = "subscribe-content-shape-elements-form" method = "post">
<!-- Form Field -->
<input class = "subscribe-content-shape-elements-form-email" id = "email" name = "email" placeholder = "YOUR EMAIL..." type = "email" required>
<!-- Button -->
<input class = "subscribe-content-shape-elements-form-send" name = "submit" type = "submit" value = "Send">
</form>
</div>
</div>
</div>
</section>
Contact
Code Lines: 1573-1664
<section class = "contact" id = "contact-anchor">
<div class = "contact-content">
<div class = "contact-content-elementsContainer">
<div class = "contact-content-elementsContainer-elements">
<div class = "contact-content-elementsContainer-elements-mapArea">
<div class = "contact-content-elementsContainer-elements-mapArea-mapContainer">
<div id = "contact-content-elementsContainer-elements-mapArea-mapContainer-map">
</div>
</div>
</div>
<div class = "contact-content-elementsContainer-elements-socialAddressContainer">
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress">
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea">
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social">
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social-img">
<a href = "#">
<!-- Icon-Fb -->
<img alt = "Fb" class = "img-fluid" src = "Images/Contact/Fb.webp">
</a>
</div>
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social-img">
<a href = "#">
<!-- Icon - X -->
<img alt = "X" class = "img-fluid" src = "Images/Contact/X.webp">
</a>
</div>
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social-img">
<a href = "#">
<!-- Icon - Instagram -->
<img alt = "Instagram" class = "img-fluid" src = "Images/Contact/Instagram.webp">
</a>
</div>
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social-img">
<a class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social-img-pinterest" href = "#">
<!-- Icon - Pinterest -->
<img alt = "Pinterest" class = "img-fluid" src = "Images/Contact/Pinterest.webp">
</a>
</div>
</div>
</div>
<div class = "contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-address">
<!-- Address -->
<p>
NEW YORK, UNITED STATES
</p>
</div>
</div>
</div>
<div class = "contact-content-elementsContainer-elements-formAreaContainer">
<div class = "contact-content-elementsContainer-elements-formAreaContainer-formArea">
<div class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-heading">
<!-- Contact Form Heading -->
<h6>
CONTACT FORM
</h6>
</div>
<form action = "PHP/contact.php" class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form" id = "form" method = "post">
<div class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea">
<!-- Field - Name -->
<input class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea-field" id = "name" name = "userName" placeholder = "Name" type = "text" required>
</div>
<div class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldAreaMargin">
<!-- Field - Email -->
<input class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea-field" id = "mail" name = "userEmail" placeholder = "E-Mail" type = "email" required>
</div>
<div class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldAreaMargin">
<!-- Field - Phone -->
<input class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea-field" id = "phone" name = "userPhone" placeholder = "Phone" type = "tel" required>
</div>
<div class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldAreaMargin contact-content-elementsContainer-elements-formArea-form-fieldAreaMessage">
<!-- Field - Message -->
<textarea class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea-field contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea-message" id = "message" name = "userMessage" placeholder = "Message" required></textarea>
</div>
<div class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit">
<!-- Button - Send Message -->
<button class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button" name = "submit" type = "submit">
<span class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button-textLine">
SEND MESSAGE
<span class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button-textLine-lineContainer">
<span class = "contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button-textLine-lineContainer-line">
</span>
</span>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Footer
Code Lines: 1667-1687
<!-- Footer -->
<footer id = "footer-anchor">
<div class = "footer-content">
<div class = "footer-content-logo">
<a href = "#">
<!-- Logo - Game -->
<span class = "footer-content-logo-a-game">
GAME
</span>
<!-- Logo - Dust -->
<span class = "footer-content-logo-a-dust">
DUST
</span>
</a>
</div>
<!-- Text - Aurora Themes -->
<h5>
Aurora-Themes©, 2025
</h5>
</div>
</footer>
game-vault.html
Game Vault
Code Lines: 174-569
<section class = "gameVault">
<!-- Required for Validation -->
<h2 class = "gameVault-validation">
Required for Validation
</h2>
<div class = "gameVault-content">
<div class = "gameVault-content-top">
<div class = "gameVault-content-top-elements">
<div class = "gameVault-content-top-elements-search">
<div class = "gameVault-content-top-elements-search-icon">
<!-- Search Icon -->
<img alt = "Search Icon" class = "img-fluid gameVault-content-top-elements-search-icon-img" src = "../Images/Header/Search.webp">
</div>
</div>
<div class = "gameVault-content-top-elements-logo">
<!-- Logo Text -->
<a href = "#">
Gamedust
</a>
</div>
<div class = "gameVault-content-top-elements-navbar">
<div class = "gameVault-content-top-elements-navbar-lines">
<div class = "gameVault-content-top-elements-navbar-lines-lineTopBottom">
<div class = "gameVault-content-top-elements-navbar-lines-lineTopBottom-line">
</div>
</div>
<div class = "gameVault-content-top-elements-navbar-lines-lineMiddle">
</div>
<div class = "gameVault-content-top-elements-navbar-lines-lineTopBottom">
<div class = "gameVault-content-top-elements-navbar-lines-lineTopBottom-line">
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "gameVault-content-search">
<div class = "gameVault-content-search-elements">
<div class = "gameVault-content-search-elements-formArea">
<form class = "gameVault-content-search-elements-formArea-form" id = "formSearch">
<!-- Search Field -->
<input class = "gameVault-content-search-elements-formArea-form-input" id = "searchArea" name = "search" onkeyup = "filterObjects()" type = "text">
</form>
</div>
<div class = "gameVault-content-search-elements-close">
<!-- Search, Close Img -->
<img alt = "Close" class = "img-fluid" src = "../Images/Header/Close.webp">
</div>
<div class = "gameVault-content-search-elements-objects">
<div class = "gameVault-content-search-elements-objects-block" id = "objectsList">
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "about" data-index = "0">
<!-- Search, Link - About -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "../index.html#about-anchor">
About
</a>
</div>
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "contact" data-index = "1">
<!-- Search, Link - Contact -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "../index.html#contact-anchor">
Contact
</a>
</div>
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "footer" data-index = "2">
<!-- Search, Link - Footer -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "../index.html#footer-anchor">
Footer
</a>
</div>
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "games" data-index = "3">
<!-- Search, Link - Games -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "../index.html#games-anchor">
Games
</a>
</div>
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "game vault" data-index = "4">
<!-- Search, Link - Game Vault -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "#">
Game Vault
</a>
</div>
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "header" data-index = "5">
<!-- Search, Link - Header -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "../index.html">
Header
</a>
</div>
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "news" data-index = "6">
<!-- Search, Link - News -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "../index.html#news-anchor">
News
</a>
</div>
<div class = "gameVault-content-search-elements-objects-block-object" data-altname = "subscribe" data-index = "7">
<!-- Search, Link - Subscribe -->
<a class = "gameVault-content-search-elements-objects-block-object-link" href = "../index.html#subscribe-anchor">
Subscribe
</a>
</div>
</div>
<!-- No Records - Message -->
<p class = "gameVault-content-search-elements-objects-noRecords hidden" id = "empty-list-message">
No records found.
</p>
</div>
</div>
</div>
<div class = "gameVault-content-navbar">
<div class = "gameVault-content-navbar-elements">
<div class = "gameVault-content-navbar-elements-close">
<!-- Navbar, Close Icon -->
<img alt = "Close" class = "img-fluid" src = "../Images/Header/Close.webp">
</div>
<div class = "gameVault-content-navbar-elements-links">
<ul>
<li>
<!-- Navbar, Link - Home -->
<a class = "gameVault-content-navbar-elements-links-ul-li-link" href = "../index.html">
Home
</a>
</li>
<li>
<!-- Navbar, Link - About -->
<a class = "gameVault-content-navbar-elements-links-ul-li-link" href = "../index.html#about-anchor">
About
</a>
</li>
<li>
<!-- Navbar, Link - Games -->
<a class = "gameVault-content-navbar-elements-links-ul-li-link" href = "../index.html#games-anchor">
Games
</a>
</li>
<li>
<!-- Navbar, Link - News -->
<a class = "gameVault-content-navbar-elements-links-ul-li-link" href = "../index.html#news-anchor">
News
</a>
</li>
<li>
<!-- Navbar, Link - Contact -->
<a class = "gameVault-content-navbar-elements-links-ul-li-link" href = "../index.html#contact-anchor">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
<div class = "gameVault-content-demosShop">
<div class = "gameVault-content-demosShop-container">
<div class = "gameVault-content-demosShop-container-heading">
<!-- Heading - Game Vault -->
<h2>
Game Vault
</h2>
</div>
<div class = "gameVault-content-demosShop-container-text">
<!-- Text -->
<p>
Here in Gamedust we work hard to provide the best for our gamers. Letās see the best of the best in Gamedust portfolio.
</p>
</div>
<div class = "gameVault-content-demosShop-container-buttons">
<div class = "gameVault-content-demosShop-container-buttons-elements">
<!-- Button - Demos -->
<button class = "gameVault-content-demosShop-container-buttons-elements-demos">
<span>
DEMOS
</span>
</button>
<!-- Button - Shop -->
<button class = "gameVault-content-demosShop-container-buttons-elements-shop">
<span>
SHOP
</span>
</button>
</div>
</div>
</div>
</div>
<div class = "gameVault-content-games">
<div class = "gameVault-content-games-objects">
<div class = "gameVault-content-games-objects-heading">
<!-- Heading -->
<p>
GAMES
</p>
</div>
<div class = "gameVault-content-games-objects-text">
<!-- Text -->
<p>
Our Recent Products
</p>
</div>
</div>
</div>
<div class = "gameVault-content-game">
<div class = "gameVault-content-game-objects">
<div class = "gameVault-content-game-objects-imgArea">
<div class = "gameVault-content-game-objects-imgArea-img">
<!-- Img -->
<img alt = "Game" class = "img-fluid" src = "../Images/Game-Vault/Noir-City.webp">
<div class = "gameVault-content-game-objects-imgArea-img-layer">
</div>
<div class = "gameVault-content-game-objects-imgArea-img-rectangle">
<!-- Text -->
<p>
NOIR CITY
</p>
</div>
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea">
<div class = "gameVault-content-game-objects-infoArea-information">
<div class = "gameVault-content-game-objects-infoArea-information-heading">
<!-- Heading -->
<h5>
Noir City is Officially Released
</h5>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-author">
<!-- Author Name -->
<p>
Matt Dilan
</p>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea-line">
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-date">
<!-- Date -->
<p>
January 2025
</p>
</div>
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-text">
<!-- Game Info -->
<p>
Recently, we have released our newest horror adventure. Itās Noir City, and itās all about life in large and strange city.
</p>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer">
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton">
<!-- Button Text - Learn More -->
<p>
LEARN MORE
</p>
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea">
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea-button" onclick = "window.location = '#';">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "gameVault-content-game">
<div class = "gameVault-content-game-objects">
<div class = "gameVault-content-game-objects-imgArea">
<div class = "gameVault-content-game-objects-imgArea-img">
<!-- Img -->
<img alt = "Game" class = "img-fluid" src = "../Images/Game-Vault/Sea-Garbage.webp">
<div class = "gameVault-content-game-objects-imgArea-img-layer">
</div>
<div class = "gameVault-content-game-objects-imgArea-img-rectangle">
<!-- Text -->
<p>
SEA GARBAGE
</p>
</div>
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea">
<div class = "gameVault-content-game-objects-infoArea-information">
<div class = "gameVault-content-game-objects-infoArea-information-heading">
<!-- Heading -->
<h5>
Sea Garbage is Officially Released
</h5>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-author">
<!-- Author Name -->
<p>
Vinnona Cussy
</p>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea-line">
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-date">
<!-- Date -->
<p>
January 2025
</p>
</div>
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-text">
<!-- Game Info -->
<p>
Recently, we have released our newest sea adventure. Itās Sea Garbage, and itās all about collection and solving of sea pollution problem.
</p>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer">
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton">
<!-- Button Text - Learn More -->
<p>
LEARN MORE
</p>
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea">
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea-button" onclick = "window.location = '#';">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "gameVault-content-game gameVault-content-gameMargin">
<div class = "gameVault-content-game-objects">
<div class = "gameVault-content-game-objects-imgArea">
<div class = "gameVault-content-game-objects-imgArea-img">
<!-- Img -->
<img alt = "Game" class = "img-fluid" src = "../Images/Game-Vault/Alien-Planet.webp">
<div class = "gameVault-content-game-objects-imgArea-img-layer">
</div>
<div class = "gameVault-content-game-objects-imgArea-img-rectangle">
<!-- Text -->
<p>
ALIEN PLANET
</p>
</div>
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea">
<div class = "gameVault-content-game-objects-infoArea-information">
<div class = "gameVault-content-game-objects-infoArea-information-heading">
<!-- Heading -->
<h5>
Alien Planet is Officially Released
</h5>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-author">
<!-- Author Name -->
<p>
James Iverson
</p>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea">
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea-line">
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-date">
<!-- Date -->
<p>
January 2025
</p>
</div>
</div>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-text">
<!-- Game Info -->
<p>
Recently, we have released our newest space adventure. Itās Alien Planet, and itās all about exploration and survival in deep space.
</p>
</div>
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer">
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton">
<!-- Button Text - Learn More -->
<p>
LEARN MORE
</p>
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea">
<div class = "gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea-button" onclick = "window.location = '#';">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
old-crypt.html
Old Crypt
Code Lines: 213-624
<section class = "newsInside">
<!-- Required for Validation -->
<h2 class = "newsInside-validation">
Required for Validation
</h2>
<div class = "newsInside-content">
<div class = "newsInside-content-top">
<div class = "newsInside-content-top-elements">
<div class = "newsInside-content-top-elements-search">
<div class = "newsInside-content-top-elements-search-icon">
<!-- Search Icon -->
<img alt = "Search Icon" class = "img-fluid newsInside-content-top-elements-search-icon-img" src = "../Images/Header/Search.webp">
</div>
</div>
<div class = "newsInside-content-top-elements-logo">
<!-- Logo Text -->
<a href = "#">
Gamedust
</a>
</div>
<div class = "newsInside-content-top-elements-navbar">
<div class = "newsInside-content-top-elements-navbar-lines">
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom">
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom-line">
</div>
</div>
<div class = "newsInside-content-top-elements-navbar-lines-lineMiddle">
</div>
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom">
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom-line">
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "newsInside-content-search">
<div class = "newsInside-content-search-elements">
<div class = "newsInside-content-search-elements-formArea">
<form class = "newsInside-content-search-elements-formArea-form" id = "formSearch">
<!-- Search Field -->
<input class = "newsInside-content-search-elements-formArea-form-input" id = "searchArea" name = "search" onkeyup = "filterObjects()" type = "text">
</form>
</div>
<div class = "newsInside-content-search-elements-close">
<!-- Search, Close Img -->
<img alt = "Close" class = "img-fluid" src = "../Images/Header/Close.webp">
</div>
<div class = "newsInside-content-search-elements-objects">
<div class = "newsInside-content-search-elements-objects-block" id = "objectsList">
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "about" data-index = "0">
<!-- Search, Link - About -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#about-anchor">
About
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "contact" data-index = "1">
<!-- Search, Link - Contact -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#contact-anchor">
Contact
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "footer" data-index = "2">
<!-- Search, Link - Footer -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#footer-anchor">
Footer
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "games" data-index = "3">
<!-- Search, Link - Games -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#games-anchor">
Games
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "game vault" data-index = "4">
<!-- Search, Link - Game Vault -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "#">
Game Vault
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "header" data-index = "5">
<!-- Search, Link - Header -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html">
Header
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "news" data-index = "6">
<!-- Search, Link - News -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#news-anchor">
News
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "subscribe" data-index = "7">
<!-- Search, Link - Subscribe -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#subscribe-anchor">
Subscribe
</a>
</div>
</div>
<!-- No Records - Message -->
<p class = "newsInside-content-search-elements-objects-noRecords hidden" id = "empty-list-message">
No records found.
</p>
</div>
</div>
</div>
<div class = "newsInside-content-navbar">
<div class = "newsInside-content-navbar-elements">
<div class = "newsInside-content-navbar-elements-close">
<!-- Navbar, Close Icon -->
<img alt = "Close" class = "img-fluid" src = "../Images/Header/Close.webp">
</div>
<div class = "newsInside-content-navbar-elements-links">
<ul>
<li>
<!-- Navbar, Link - Home -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html">
Home
</a>
</li>
<li>
<!-- Navbar, Link - About -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#about-anchor">
About
</a>
</li>
<li>
<!-- Navbar, Link - Games -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#games-anchor">
Games
</a>
</li>
<li>
<!-- Navbar, Link - News -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#news-anchor">
News
</a>
</li>
<li>
<!-- Navbar, Link - Contact -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#contact-anchor">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
<div class = "newsInside-content-largeImgInfo">
<div class = "newsInside-content-largeImgInfo-elements">
<div class = "newsInside-content-largeImgInfo-elements-largeImg">
<!-- Large Img -->
<img alt = "Large Img" class = "img-fluid" src = "../Images/News-Inside/Large-Img.webp">
</div>
<div class = "newsInside-content-largeImgInfo-elements-infoContainer">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-game">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-game-name">
<!-- Text - Old Crypt -->
<p>
Old Crypt
</p>
</div>
</div>
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-genre">
<!-- Text - Game Genre -->
<h4>
New Adventure Game
</h4>
</div>
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor-texts">
<!-- Date -->
<p>
September 2024
</p>
<!-- Author -->
<p class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor-texts-author">
David Manone
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer">
<div class = "newsInside-content-bottomContainer-bottom">
<div class = "newsInside-content-bottomContainer-bottom-left">
<div class = "newsInside-content-bottomContainer-bottom-left-video">
<!-- Video Img -->
<img alt = "video-img" class = "img-fluid" src = "../Images/News-Inside/Video-Img.webp">
<div class = "newsInside-content-bottomContainer-bottom-left-video-darkLayer">
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer">
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle" onclick = "window.location = '#';">
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle-smallCircle">
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle-smallCircle-icon">
<!-- Icon - Play -->
<img alt = "Play" class = "img-fluid" src = "../Images/News-Inside/Play.webp">
</div>
</div>
</div>
</div>
</div>
<!-- Text 01 -->
<h5>
Currently, we are working on our new adventure game, and itās about 80% completed. I am talking about Old Crypt game, which we work in Unreal Game Engine. I believe that very soon our followers, will have a possibility to test this game, and give their reviews. We will soon publish beta version of this game.
</h5>
<div class = "newsInside-content-bottomContainer-bottom-left-invitation">
<!-- Text Inside Rectangle -->
<h5>
WE INVITE YOU TO BE TESTER OF OUR āOLD CRYPTā GAME!
</h5>
</div>
<!-- Text 02 -->
<h5>
It will be a classic adventure game, which will be located in fictitious Eden world, which is all about nice rivers, trees and houses. Player will control hero, whose name is Rick, and his task is to work on archaeological sites in the world and find large treasure. To complete his mission, he will need to go around the world and work on quests, to successfully complete his main task.
</h5>
<div class = "newsInside-content-bottomContainer-bottom-left-images">
<div class = "newsInside-content-bottomContainer-bottom-left-images-objects">
<div class = "newsInside-content-bottomContainer-bottom-left-images-objects-leftImage">
<!-- Img, Treasury One -->
<img alt = "Treasury One" class = "img-fluid" src = "../Images/News-Inside/Treasury-One.webp">
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-images-objects-rightImage">
<!-- Img, Treasury Two -->
<img alt = "Treasury Two" class = "img-fluid" src = "../Images/News-Inside/Treasury-Two.webp">
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-comments">
<div class = "newsInside-content-bottomContainer-bottom-left-comments-heading">
<div class = "newsInside-content-bottomContainer-bottom-left-comments-heading-objects">
<div class = "newsInside-content-bottomContainer-bottom-left-comments-heading-objects-triangle">
</div>
<!-- Heading - Comments -->
<h5>
COMMENTS
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer">
<!-- Form -->
<form action = "../PHP/comments.php">
<!-- Message -->
<textarea class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-message" id = "messageComments" name = "userMessageComments" placeholder = "Message" required></textarea>
<div class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields">
<!-- Name -->
<input class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields-field" id = "nameComments" name = "userNameComments" placeholder = "Name" type = "text" required>
<!-- Email -->
<input class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields-email newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields-field" id = "emailComments" name = "userMailComments" placeholder = "Email" type = "email" required>
</div>
<!-- Submit Button -->
<button class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-submit" name = "submit" type = "submit">
SUBMIT
</button>
</form>
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right">
<div class = "newsInside-content-bottomContainer-bottom-right-location">
<div class = "newsInside-content-bottomContainer-bottom-right-location-img">
<!-- Img - Treasure Cave -->
<img alt = "Treasure Cave" class = "img-fluid" src = "../Images/News-Inside/Treasure-Cave.webp">
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-location-textArea">
<div class = "newsInside-content-bottomContainer-bottom-right-location-textArea-textContainer">
<!-- Location -->
<h5>
TREASURE CAVE
</h5>
<!-- Text -->
<h5 class = "newsInside-content-bottomContainer-bottom-right-location-textArea-textContainer-text">
In treasure cave, player will have a possibility to complete the quest, to find a part of the large treasure from Pirates Island. Itās not so easy to reach this island, because itās surrounded by large water body.
</h5>
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories">
<div class = "newsInside-content-bottomContainer-bottom-right-categories-heading">
<div class = "newsInside-content-bottomContainer-bottom-right-categories-heading-triangleText">
<div class = "newsInside-content-bottomContainer-bottom-right-categories-heading-triangleText-triangle">
</div>
<!-- Heading - Categories -->
<h5>
CATEGORIES
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Adventure -->
<p>
Adventure
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Game -->
<p>
Game
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Gold -->
<p>
Gold
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Island -->
<p>
Island
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category newsInside-content-bottomContainer-bottom-right-categories-categoryBottom">
<!-- Category - Treasure -->
<p>
Treasure
</p>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-photos">
<div class = "newsInside-content-bottomContainer-bottom-right-photos-heading">
<div class = "newsInside-content-bottomContainer-bottom-right-photos-heading-triangleText">
<div class = "newsInside-content-bottomContainer-bottom-right-photos-heading-triangleText-triangle">
</div>
<!-- Heading -->
<h5>
PHOTOS
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-photos-images">
<!-- Images -->
<img alt = "Photo-01" class = "img-fluid" src = "../Images/News-Inside/Photos-01.webp">
<img alt = "Photo-02" class = "img-fluid" src = "../Images/News-Inside/Photos-02.webp">
<img alt = "Photo-03" class = "img-fluid" src = "../Images/News-Inside/Photos-03.webp">
<img alt = "Photo-04" class = "img-fluid" src = "../Images/News-Inside/Photos-04.webp">
<img alt = "Photo-05" class = "img-fluid" src = "../Images/News-Inside/Photos-05.webp">
<img alt = "Photo-06" class = "img-fluid" src = "../Images/News-Inside/Photos-06.webp">
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-heading">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-heading-triangleText">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-heading-triangleText-triangle">
</div>
<!-- Heading - Tags -->
<h5>
TAGS
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Adventure -->
<p>
#ADVENTURE
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Cave -->
<p>
#CAVE
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Crypt -->
<p>
#CRYPT
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Game -->
<p>
#GAME
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Gold -->
<p>
#GOLD
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Island -->
<p>
#ISLAND
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Pirates -->
<p>
#PIRATES
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Treasure -->
<p>
#TREASURE
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
road-adventures.html
Road Adventures
Code Lines: 213-624
<section class = "newsInside">
<!-- Required for Validation -->
<h2 class = "newsInside-validation">
Required for Validation
</h2>
<div class = "newsInside-content">
<div class = "newsInside-content-top">
<div class = "newsInside-content-top-elements">
<div class = "newsInside-content-top-elements-search">
<div class = "newsInside-content-top-elements-search-icon">
<!-- Search Icon -->
<img alt = "Search Icon" class = "img-fluid newsInside-content-top-elements-search-icon-img" src = "../Images/Header/Search.webp">
</div>
</div>
<div class = "newsInside-content-top-elements-logo">
<!-- Logo Text -->
<a href = "#">
Gamedust
</a>
</div>
<div class = "newsInside-content-top-elements-navbar">
<div class = "newsInside-content-top-elements-navbar-lines">
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom">
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom-line">
</div>
</div>
<div class = "newsInside-content-top-elements-navbar-lines-lineMiddle">
</div>
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom">
<div class = "newsInside-content-top-elements-navbar-lines-lineTopBottom-line">
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "newsInside-content-search">
<div class = "newsInside-content-search-elements">
<div class = "newsInside-content-search-elements-formArea">
<form class = "newsInside-content-search-elements-formArea-form" id = "formSearch">
<!-- Search Field -->
<input class = "newsInside-content-search-elements-formArea-form-input" id = "searchArea" name = "search" onkeyup = "filterObjects()" type = "text">
</form>
</div>
<div class = "newsInside-content-search-elements-close">
<!-- Search, Close Img -->
<img alt = "Close" class = "img-fluid" src = "../Images/Header/Close.webp">
</div>
<div class = "newsInside-content-search-elements-objects">
<div class = "newsInside-content-search-elements-objects-block" id = "objectsList">
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "about" data-index = "0">
<!-- Search, Link - About -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#about-anchor">
About
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "contact" data-index = "1">
<!-- Search, Link - Contact -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#contact-anchor">
Contact
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "footer" data-index = "2">
<!-- Search, Link - Footer -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#footer-anchor">
Footer
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "games" data-index = "3">
<!-- Search, Link - Games -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#games-anchor">
Games
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "game vault" data-index = "4">
<!-- Search, Link - Game Vault -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "#">
Game Vault
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "header" data-index = "5">
<!-- Search, Link - Header -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html">
Header
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "news" data-index = "6">
<!-- Search, Link - News -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#news-anchor">
News
</a>
</div>
<div class = "newsInside-content-search-elements-objects-block-object" data-altname = "subscribe" data-index = "7">
<!-- Search, Link - Subscribe -->
<a class = "newsInside-content-search-elements-objects-block-object-link" href = "../index.html#subscribe-anchor">
Subscribe
</a>
</div>
</div>
<!-- No Records - Message -->
<p class = "newsInside-content-search-elements-objects-noRecords hidden" id = "empty-list-message">
No records found.
</p>
</div>
</div>
</div>
<div class = "newsInside-content-navbar">
<div class = "newsInside-content-navbar-elements">
<div class = "newsInside-content-navbar-elements-close">
<!-- Navbar, Close Icon -->
<img alt = "Close" class = "img-fluid" src = "../Images/Header/Close.webp">
</div>
<div class = "newsInside-content-navbar-elements-links">
<ul>
<li>
<!-- Navbar, Link - Home -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html">
Home
</a>
</li>
<li>
<!-- Navbar, Link - About -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#about-anchor">
About
</a>
</li>
<li>
<!-- Navbar, Link - Games -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#games-anchor">
Games
</a>
</li>
<li>
<!-- Navbar, Link - News -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#news-anchor">
News
</a>
</li>
<li>
<!-- Navbar, Link - Contact -->
<a class = "newsInside-content-navbar-elements-links-ul-li-link" href = "../index.html#contact-anchor">
Contact
</a>
</li>
</ul>
</div>
</div>
</div>
<div class = "newsInside-content-largeImgInfo">
<div class = "newsInside-content-largeImgInfo-elements">
<div class = "newsInside-content-largeImgInfo-elements-largeImg">
<!-- Large Img -->
<img alt = "Large Img" class = "img-fluid" src = "../Images/News-Inside/Large-Img-Adventures.webp">
</div>
<div class = "newsInside-content-largeImgInfo-elements-infoContainer">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-game">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-game-name">
<!-- Text - Road Adventures -->
<p>
Road Adventures
</p>
</div>
</div>
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-genre">
<!-- Text - Game Genre -->
<h4>
New Adventure Game
</h4>
</div>
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor">
<div class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor-texts">
<!-- Date -->
<p>
November 2024
</p>
<!-- Author -->
<p class = "newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor-texts-author">
Diana Tucker
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer">
<div class = "newsInside-content-bottomContainer-bottom">
<div class = "newsInside-content-bottomContainer-bottom-left">
<div class = "newsInside-content-bottomContainer-bottom-left-video">
<!-- Video Img -->
<img alt = "video-img" class = "img-fluid" src = "../Images/News-Inside/Video-Img-Adventures.webp">
<div class = "newsInside-content-bottomContainer-bottom-left-video-darkLayer">
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer">
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle" onclick = "window.location = '#';">
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle-smallCircle">
<div class = "newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle-smallCircle-icon">
<!-- Icon - Play -->
<img alt = "Play" class = "img-fluid" src = "../Images/News-Inside/Play.webp">
</div>
</div>
</div>
</div>
</div>
<!-- Text 01 -->
<h5>
Currently, we are working on our new adventure game, and itās about 80% completed. I am talking about Road Adventures game, which we work in Unreal Game Engine. I believe that very soon our followers, will have a possibility to test this game, and give their reviews. We will soon publish beta version of this game.
</h5>
<div class = "newsInside-content-bottomContainer-bottom-left-invitation">
<!-- Text Inside Rectangle -->
<h5>
WE INVITE YOU TO BE TESTER OF OUR āROAD ADVENTURESā GAME!
</h5>
</div>
<!-- Text 02 -->
<h5>
It will be a classic adventure game, which will be located in fictitious Sand world, which is all about clear sky, some bushes and sand. Player will control hero, whose name is Rick, and his task is to be on road adventure. To complete his mission, he will need to go around the world and work on quests, to successfully complete his main task.
</h5>
<div class = "newsInside-content-bottomContainer-bottom-left-images">
<div class = "newsInside-content-bottomContainer-bottom-left-images-objects">
<div class = "newsInside-content-bottomContainer-bottom-left-images-objects-leftImage">
<!-- Img, Road One -->
<img alt = "Road One" class = "img-fluid" src = "../Images/News-Inside/Road-One.webp">
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-images-objects-rightImage">
<!-- Img, Road Two -->
<img alt = "Road Two" class = "img-fluid" src = "../Images/News-Inside/Road-Two.webp">
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-comments">
<div class = "newsInside-content-bottomContainer-bottom-left-comments-heading">
<div class = "newsInside-content-bottomContainer-bottom-left-comments-heading-objects">
<div class = "newsInside-content-bottomContainer-bottom-left-comments-heading-objects-triangle">
</div>
<!-- Heading - Comments -->
<h5>
COMMENTS
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer">
<!-- Form -->
<form action = "../PHP/comments.php">
<!-- Message -->
<textarea class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-message" id = "messageComments" name = "userMessageComments" placeholder = "Message" required></textarea>
<div class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields">
<!-- Name -->
<input class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields-field" id = "nameComments" name = "userNameComments" placeholder = "Name" type = "text" required>
<!-- Email -->
<input class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields-email newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields-field" id = "emailComments" name = "userMailComments" placeholder = "Email" type = "email" required>
</div>
<!-- Submit Button -->
<button class = "newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-submit" name = "submit" type = "submit">
SUBMIT
</button>
</form>
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right">
<div class = "newsInside-content-bottomContainer-bottom-right-location">
<div class = "newsInside-content-bottomContainer-bottom-right-location-img">
<!-- Img - Lonely Road -->
<img alt = "Lonely Road" class = "img-fluid" src = "../Images/News-Inside/Lonely-Road.webp">
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-location-textArea">
<div class = "newsInside-content-bottomContainer-bottom-right-location-textArea-textContainer">
<!-- Game Name -->
<h5>
LONELY ROAD
</h5>
<!-- Text -->
<h5 class = "newsInside-content-bottomContainer-bottom-right-location-textArea-textContainer-text">
On lonely road, player will have a possibility to complete the main quest, to complete many additional quests. Itās not so easy to complete these tasks, because there are many obstacles on this road.
</h5>
</div>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories">
<div class = "newsInside-content-bottomContainer-bottom-right-categories-heading">
<div class = "newsInside-content-bottomContainer-bottom-right-categories-heading-triangleText">
<div class = "newsInside-content-bottomContainer-bottom-right-categories-heading-triangleText-triangle">
</div>
<!-- Heading - Categories -->
<h5>
CATEGORIES
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Adventure -->
<p>
Adventure
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Drive -->
<p>
Drive
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Quest -->
<p>
Quest
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category">
<!-- Category - Road -->
<p>
Road
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-categories-category newsInside-content-bottomContainer-bottom-right-categories-categoryBottom">
<!-- Category - Travel -->
<p>
Travel
</p>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-photos">
<div class = "newsInside-content-bottomContainer-bottom-right-photos-heading">
<div class = "newsInside-content-bottomContainer-bottom-right-photos-heading-triangleText">
<div class = "newsInside-content-bottomContainer-bottom-right-photos-heading-triangleText-triangle">
</div>
<!-- Heading -->
<h5>
PHOTOS
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-photos-images">
<!-- Images -->
<img alt = "Photo-01" class = "img-fluid" src = "../Images/News-Inside/Photos-01-Adventures.webp">
<img alt = "Photo-02" class = "img-fluid" src = "../Images/News-Inside/Photos-02-Adventures.webp">
<img alt = "Photo-03" class = "img-fluid" src = "../Images/News-Inside/Photos-03-Adventures.webp">
<img alt = "Photo-04" class = "img-fluid" src = "../Images/News-Inside/Photos-04-Adventures.webp">
<img alt = "Photo-05" class = "img-fluid" src = "../Images/News-Inside/Photos-05-Adventures.webp">
<img alt = "Photo-06" class = "img-fluid" src = "../Images/News-Inside/Photos-06-Adventures.webp">
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-heading">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-heading-triangleText">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-heading-triangleText-triangle">
</div>
<!-- Heading - Tags -->
<h5>
TAGS
</h5>
</div>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words">
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Adventure -->
<p>
#ADVENTURE
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Cave -->
<p>
#DESERT
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Crypt -->
<p>
#DRIVE
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Game -->
<p>
#QUESTS
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Gold -->
<p>
#ROAD
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Island -->
<p>
#SAND
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Pirates -->
<p>
#VEHICLE
</p>
</div>
<div class = "newsInside-content-bottomContainer-bottom-right-tags-words-word">
<!-- Tag - Treasure -->
<p>
#WORLD
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
thanks.html
Thanks
Code Lines: 53-72
<section class = "thanks">
<!-- Required for Validation -->
<h2>
For validation
</h2>
<div class = "thanks-content">
<div class = "thanks-content-textButton">
<!-- Text -->
<p>
Thank you for contacting us. We will back to you soon.
</p>
<div class = "thanks-content-textButton-button">
<!-- Button -->
<button onclick = "window.location = '../index.html';">
Home Page
</button>
</div>
</div>
</div>
</section>
# SCSS
If you need to change styling of this web template, you use SCSS files. In this documentation you can find more about colors, fonts, mixins, variables, imports and containers, but if you need to make more serious changes, you are free to ask for help and support. Also, there are comments within the SCSS code for easier orientation. Notice: code section is without media queries. For changes within media queries part, be free to ask for support.
Layout - Dark Chocolate
about.scss
About
Code Lines: 29-195
.about
{
font-size:0;
margin:0;
padding:0;
.about-button
{
display:flex;
font-size:0;
justify-content:center;
margin:60px 0 0 0;
padding:0;
position:relative;
// Button - See More
.about-button-content
{
align-items:center;
background:$about-button;
border-radius:7px;
cursor:pointer;
display:flex;
height:75px;
justify-content:center;
margin:0;
padding:0;
transform:skew(-20deg);
width:250px;
h5
{
color:$about-button-text;
position:absolute;
transform:skew(20deg);
width:initial;
}
}
}
.about-portfolio
{
display:flex;
font-size:0;
justify-content:center;
margin:240px 0 0 0;
padding:0;
.about-portfolio-images
{
display:inline-grid;
font-size:0;
gap:55px;
grid-template-columns:auto auto auto;
margin:0;
padding:0;
width:84%;
// Portfolio Images
img
{
border-radius:10px;
font-size:0;
height:auto;
margin:0;
padding:0;
width:500px;
}
}
}
.about-social
{
display:flex;
justify-content:center;
margin:180px 0 180px 0;
.about-social-content
{
display:inline-grid;
gap:65px;
grid-template-columns:repeat(4, 1fr);
}
}
// Large Text
.about-text
{
display:flex;
font-size:0;
justify-content:center;
margin:60px 0 0 0;
padding:0;
}
.about-validation
{
display:none;
}
.about-video
{
margin:180px 0 0 0;
position:relative;
// Dark Layer
.about-video-layer
{
align-items:center;
background:$about-video-layer;
display:flex;
height:100%;
justify-content:center;
left:0;
position:absolute;
top:0;
width:100%;
.about-video-layer-play
{
position:relative;
// Large Circle
.about-video-layer-play-largeCircle
{
align-items:center;
border:2px solid $about-video-large-circle;
border-radius:50%;
cursor:pointer;
display:flex;
height:150px;
justify-content:center;
width:150px;
// Small Circle
.about-video-layer-play-largeCircle-smallCircle
{
align-items:center;
background:$about-video-small-circle;
border-radius:50%;
display:flex;
height:125px;
justify-content:center;
width:125px;
.about-video-layer-play-largeCircle-smallCircle-pause
{
display:none;
.about-video-layer-play-largeCircle-smallCircle-pause-blocks
{
display:inline-grid;
gap:7px;
grid-template-columns:auto auto;
.about-video-layer-play-largeCircle-smallCircle-pause-blocks-block
{
background:$about-video-pause;
height:40px;
width:10px;
}
}
}
// Triangle
.about-video-layer-play-largeCircle-smallCircle-triangle
{
border-bottom:20px solid transparent;
border-left:40px solid $about-video-triangle;
border-top:20px solid transparent;
height:0;
left:6px;
position:relative;
width:0;
}
}
}
}
}
.about-video-vid
{
height:100%;
width:100%;
}
}
}
contact.scss
Contact
Code Lines: 41-252
.contact
{
background:$contact-background;
.contact-content
{
.contact-content-elementsContainer
{
display:flex;
justify-content:center;
.contact-content-elementsContainer-elements
{
position:relative;
width:77%;
.contact-content-elementsContainer-elements-formAreaContainer
{
align-items:center;
background:$contact-form-background;
border-radius:10px;
display:flex;
height:730px;
justify-content:center;
position:absolute;
right:0;
top:0;
width:575px;
z-index:2;
.contact-content-elementsContainer-elements-formAreaContainer-formArea
{
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form
{
margin:80px 0 0 0;
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea
{
display:flex;
justify-content:center;
// Form Fields
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea-field
{
background:$contact-form-background;
border-bottom:1px solid $contact-field-border;
border-left:none;
border-right:none;
border-top:none;
color:$contact-field-text;
font-family:kanit-regular;
font-size:18px;
outline:none;
width:465px;
}
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldArea-message
{
height:37px;
}
input[placeholder]
{
color:$contact-field-text;
padding:0 0 4px 0;
}
// Placeholder
::placeholder
{
color:$contact-field-text;
opacity:1;
padding:0 0 4px 0;
}
}
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldAreaMargin
{
margin:80px 0 0 0;
}
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-fieldAreaMessage
{
height:38px;
}
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit
{
display:flex;
justify-content:center;
margin:35px 0 0 0;
// Submit Button
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button
{
align-items:center;
background:$contact-button-background;
border-radius:10px;
cursor:pointer;
display:flex;
height:70px;
justify-content:center;
width:205px;
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button-textLine
{
color:$contact-button-text;
display:inline-grid;
font-family:kanit-regular;
font-size:18px;
grid-template-columns:auto auto;
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button-textLine-lineContainer
{
align-items:center;
display:flex;
margin:0 0 0 15px;
.contact-content-elementsContainer-elements-formAreaContainer-formArea-form-submit-button-textLine-lineContainer-line
{
background:$contact-button-line;
height:2px;
width:30px;
}
}
}
}
}
}
.contact-content-elementsContainer-elements-formAreaContainer-formArea-heading
{
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
// Heading - Contact Form
h6
{
width:465px;
}
}
}
}
.contact-content-elementsContainer-elements-mapArea
{
height:700px;
margin:125px 0 0 0;
position:relative;
width:85%;
.contact-content-elementsContainer-elements-mapArea-mapContainer
{
height:100%;
position:relative;
width:100%;
#contact-content-elementsContainer-elements-mapArea-mapContainer-map
{
height:100%;
width:100%;
}
}
}
.contact-content-elementsContainer-elements-socialAddressContainer
{
font-size:0;
margin:25px 0 0 0;
padding:0;
.contact-content-elementsContainer-elements-socialAddressContainer-socialAddress
{
display:grid;
font-size:0;
grid-template-columns:50% 50%;
margin:0;
padding:0;
.contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-address
{
font-size:0;
margin:0;
padding:0;
// Address
p
{
color:$contact-address;
font-family:kanit-regular;
font-size:18px;
margin:0;
padding:0;
text-align:end;
&:hover
{
color:$contact-address;
}
}
}
.contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea
{
.contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social
{
.contact-content-elementsContainer-elements-socialAddressContainer-socialAddress-socialArea-social-img
{
display:inline;
a
{
font-size:0;
margin:0 15px 0 0;
padding:0;
text-decoration:none;
// Social Icons
img
{
display:inline;
font-size:0;
height:auto;
margin:0;
padding:0;
width:25px;
}
}
}
}
}
}
}
}
}
}
}
footer.scss
Footer
Code Lines: 14-58
footer
{
background:$footer-background;
font-size:0;
margin:0;
padding:155px 0 95px 0;
.footer-content
{
font-size:0;
margin:0;
padding:0;
.footer-content-logo
{
display:flex;
justify-content:center;
a
{
color:$footer-logo-color;
display:inline-block;
font-size:0;
width:initial;
// Logo - Dust
.footer-content-logo-a-dust
{
color:$footer-dust-color;
}
span
{
display:inline-block;
font-family:stickNoBills-regular;
font-size:70px;
}
}
}
// Text - Aurora Themes
h5
{
font-size:20px;
margin:55px 0 0 0;
padding:0;
text-align:center;
width:100%;
}
}
}
game-vault.scss
Game Vault
Code Lines: 95-665
.gameVault
{
.gameVault-content
{
font-size:0;
margin:0;
padding:0;
.gameVault-content-demosShop
{
align-items:center;
background:url("../../../Images/Game-Vault/Top.webp");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
box-shadow:inset 6000px 0 0 0 $header-background-layer;
display:flex;
height:500px;
position:relative;
top:100px;
width:100%;
.gameVault-content-demosShop-container
{
margin:0 0 0 250px;
width:515px;
.gameVault-content-demosShop-container-buttons
{
margin:25px 0 0 0;
.gameVault-content-demosShop-container-buttons-elements
{
// Buttons - Demos and Shop
button
{
border:none;
border-radius:7px;
font-family:kanit-regular;
font-size:19px;
height:45px;
position:relative;
transform:skew(-20deg);
width:160px;
span
{
display:inline-block;
transform:skew(20deg);
}
}
// Button - Demos
.gameVault-content-demosShop-container-buttons-elements-demos
{
background:$gameVault-button-blue;
color:$gameVault-button-text-white;
}
// Button - Shop
.gameVault-content-demosShop-container-buttons-elements-shop
{
background:$gameVault-button-white;
margin:0 0 0 10px;
}
}
}
.gameVault-content-demosShop-container-heading
{
// Heading - Game Vault
h2
{
font-size:33px;
}
}
.gameVault-content-demosShop-container-text
{
margin:10px 0 0 0;
// Demos, Shop - Text
p
{
font-family:kanit-regular;
font-size:18px;
text-align:start;
&:hover
{
color:$header-search-noRecord;
}
}
}
}
}
.gameVault-content-game
{
display:flex;
justify-content:center;
margin:100px 0 0 0;
padding:0;
position:relative;
top:115px;
.gameVault-content-game-objects
{
display:inline-grid;
gap:50px;
grid-template-columns:500px auto;
width:68%;
.gameVault-content-game-objects-imgArea
{
.gameVault-content-game-objects-imgArea-img
{
display:inline-block;
position:relative;
.gameVault-content-game-objects-imgArea-img-layer
{
background:$gameVault-game-layer;
border-radius:10px;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
.gameVault-content-game-objects-imgArea-img-rectangle
{
align-items:center;
background:$gameVault-gameRectangle-background;
border-radius:5px;
display:flex;
height:35px;
justify-content:center;
left:50%;
position:absolute;
top:50%;
transform:translate(-50%, -50%);
width:140px;
// Text
p
{
color:$gameVault-game-name;
font-family:kanit-bold;
font-size:19px;
&:hover
{
color:$gameVault-game-name;
}
}
}
// Img
img
{
border-radius:10px;
height:auto;
width:500px;
}
}
}
.gameVault-content-game-objects-infoArea
{
align-items:center;
display:flex;
.gameVault-content-game-objects-infoArea-information
{
.gameVault-content-game-objects-infoArea-information-authorDateArea
{
margin:10px 0 0 0;
.gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate
{
display:inline-grid;
gap:10px;
grid-template-columns:auto auto auto;
.gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-author
{
// Author Name
p
{
color:$gameVault-author;
font-family:kanit-regular;
font-size:18px;
&:hover
{
color:$gameVault-author;
}
}
}
.gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-date
{
align-items:center;
display:flex;
// Date
p
{
color:$gameVault-authorDate-date;
font-family:kanit-regular;
font-size:18px;
text-align:start;
&:hover
{
color:$gameVault-authorDate-date;
}
}
}
.gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea
{
align-items:center;
display:flex;
.gameVault-content-game-objects-infoArea-information-authorDateArea-authorDate-lineArea-line
{
background:$gameVault-authorDate-line;
height:25px;
width:3px;
}
}
}
}
.gameVault-content-game-objects-infoArea-information-heading
{
// Heading
h5
{
text-align:start;
width:initial;
}
}
.gameVault-content-game-objects-infoArea-information-text
{
margin:10px 0 0 0;
// Game Info
p
{
color:$gameVault-game-text;
font-family:kanit-regular;
font-size:17px;
text-align:start;
&:hover
{
color:$gameVault-game-text;
}
}
}
.gameVault-content-game-objects-infoArea-information-textButtonContainer
{
.gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton
{
display:inline-grid;
gap:10px;
grid-template-columns:auto auto;
margin:10px 0 0 0;
.gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea
{
align-items:center;
display:flex;
.gameVault-content-game-objects-infoArea-information-textButtonContainer-textButton-buttonArea-button
{
border-bottom:10px solid transparent;
border-left:20px solid $gameVault-button-white;
border-top:10px solid transparent;
cursor:pointer;
}
}
// Button Text - Learn More
p
{
color:$gameVault-learn-more;
font-family:kanit-regular;
font-size:18px;
text-align:start;
&:hover
{
color:$gameVault-learn-more;
}
}
}
}
}
}
}
}
.gameVault-content-gameMargin
{
padding:0 0 100px 0;
}
.gameVault-content-games
{
display:flex;
justify-content:center;
margin:80px 0 0 0;
padding:0;
position:relative;
top:100px;
.gameVault-content-games-objects
{
.gameVault-content-games-objects-heading
{
align-items:center;
background:$gameVault-games-background;
border-radius:9px;
display:flex;
height:60px;
justify-content:center;
width:215px;
// Heading
p
{
font-family:kanit-bold;
font-size:19px;
&:hover
{
color:$gameVault-hover-white;
}
}
}
.gameVault-content-games-objects-text
{
margin:20px 0 0 0;
// Text
p
{
font-family:kanit-regular;
font-size:19px;
&:hover
{
color:$gameVault-hover-white;
}
}
}
}
}
.gameVault-content-navbar
{
background:$header-navbar-background;
display:flex;
height:100%;
right:-100%;
position:fixed;
top:-100%;
transition:right 1s, top 1s;
width:100%;
z-index:3;
.gameVault-content-navbar-elements
{
height:100%;
position:relative;
width:100%;
.gameVault-content-navbar-elements-close
{
cursor:pointer;
font-size:0;
margin:0;
padding:0;
position:absolute;
right:75px;
top:75px;
// Navbar, Close Img
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:20px;
}
}
.gameVault-content-navbar-elements-links
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:100%;
ul
{
list-style-type:none;
padding:0;
li
{
align-items:center;
display:flex;
justify-content:center;
margin:15px;
// Navbar Links
a
{
margin:0;
padding:0;
}
}
}
}
}
}
.gameVault-content-search
{
background:$header-search;
display:flex;
height:100%;
left:-100%;
position:fixed;
top:-100%;
transition:left 1s, top 1s;
width:100%;
z-index:3;
.gameVault-content-search-elements
{
height:100%;
position:relative;
width:100%;
.gameVault-content-search-elements-close
{
cursor:pointer;
font-size:0;
left:75px;
margin:0;
padding:0;
position:absolute;
top:75px;
// Search, Close Img
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:20px;
}
}
.gameVault-content-search-elements-formArea
{
display:flex;
justify-content:center;
width:100%;
.gameVault-content-search-elements-formArea-form
{
margin:100px 0 0 0;
width:500px;
// Input Field
.gameVault-content-search-elements-formArea-form-input
{
background:$header-search;
border-bottom:1px solid $header-input-color;
border-left:none;
border-right:none;
border-top:none;
color:$header-input-color;
font-family:oswald-regular;
font-size:16px;
outline:none;
text-align:center;
width:100%;
}
}
}
.gameVault-content-search-elements-objects
{
display:flex;
justify-content:center;
margin:50px 0 0 0;
.gameVault-content-search-elements-objects-block
{
display:inline-block;
.gameVault-content-search-elements-objects-block-object
{
font-size:0;
padding:0;
}
}
}
}
}
.gameVault-content-top
{
align-items:center;
background:$header-top;
display:flex;
height:100px;
justify-content:center;
position:fixed;
width:100%;
z-index:3;
.gameVault-content-top-elements
{
display:inline-grid;
grid-template-columns:repeat(3, 1fr);
width:calc(100% - 200px);
.gameVault-content-top-elements-logo
{
display:flex;
justify-content:center;
margin:0;
padding:0;
// Logo Text
a
{
display:inline-block;
font-family:stickNoBills-regular;
font-size:24px;
text-decoration:none;
width:initial;
&:hover
{
color:$header-logo;
}
}
}
.gameVault-content-top-elements-navbar
{
align-items:center;
display:flex;
font-size:0;
justify-content:flex-end;
margin:0;
padding:0;
.gameVault-content-top-elements-navbar-lines
{
cursor:pointer;
font-size:0;
margin:0;
padding:0;
.gameVault-content-top-elements-navbar-lines-lineMiddle
{
background:$header-navbar;
font-size:0;
height:3px;
margin:10px 0 10px 0;
padding:0;
width:52px;
}
.gameVault-content-top-elements-navbar-lines-lineTopBottom
{
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
.gameVault-content-top-elements-navbar-lines-lineTopBottom-line
{
background:$header-navbar;
font-size:0;
height:3px;
margin:0;
padding:0;
width:32px;
}
}
}
}
.gameVault-content-top-elements-search
{
align-items:center;
display:flex;
font-size:0;
margin:0;
padding:0;
.gameVault-content-top-elements-search-icon
{
display:inline-block;
font-size:0;
margin:0;
padding:0;
// Search Icon
img
{
cursor:pointer;
font-size:0;
height:auto;
margin:0;
padding:0;
width:24px;
}
}
}
}
}
}
.gameVault-validation
{
display:none;
}
}
games.scss
Games
Code Lines: 46-318
.games
{
background:$games-background;
.games-content
{
display:flex;
justify-content:center;
padding:155px 0 0 0;
.games-content-blocks
{
width:77%;
.games-content-blocks-block
{
.games-content-blocks-block-features
{
font-size:0;
margin:110px 0 0 0;
padding:0;
// Heading - Game Features
h4
{
font-family:kanit-regular;
font-size:27px;
margin:0;
padding:0;
text-align:center;
width:100%;
}
}
.games-content-blocks-block-top
{
height:780px;
position:relative;
.games-content-blocks-block-top-img
{
font-size:0;
margin:0;
padding:0;
position:absolute;
right:0;
top:0;
z-index:1;
// Large Image
img
{
border-radius:9px;
font-size:0;
height:auto;
margin:0;
padding:0;
width:810px;
}
}
.games-content-blocks-block-top-info
{
align-items:center;
background:$games-info-features-background;
border-radius:9px;
display:flex;
height:675px;
justify-content:center;
left:0;
position:absolute;
top:105px;
width:720px;
z-index:2;
.games-content-blocks-block-top-info-elements
{
.games-content-blocks-block-top-info-elements-get
{
margin:60px 0 0 0;
.games-content-blocks-block-top-info-elements-get-iconsArea
{
align-items:center;
display:flex;
font-size:0;
justify-content:center;
margin:15px 0 0 0;
padding:0;
.games-content-blocks-block-top-info-elements-get-iconsArea-icons
{
display:inline-grid;
font-size:0;
gap:40px;
grid-template-columns:auto auto;
margin:0;
padding:0;
.games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation
{
cursor:pointer;
.games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-imgArea
{
align-items:center;
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
// Icon - Artstation
img
{
border-radius:0;
font-size:0;
height:auto;
margin:0;
padding:0;
position:relative;
top:0;
width:44px;
}
}
// Text - Artstation
p
{
color:$games-artstation;
display:inline-block;
font-size:0;
.games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-p-art
{
display:inline-block;
font-family:oswald-bold;
font-size:16px;
}
.games-content-blocks-block-top-info-elements-get-iconsArea-icons-artstation-p-station
{
display:inline-block;
font-size:16px;
}
}
}
.games-content-blocks-block-top-info-elements-get-iconsArea-icons-humble
{
align-items:center;
cursor:pointer;
display:flex;
justify-content:center;
// Icon - Humnle
img
{
border-radius:0;
font-size:0;
height:auto;
margin:0;
padding:0;
position:relative;
top:0;
width:100px;
}
}
}
}
}
.games-content-blocks-block-top-info-elements-lineArea
{
display:flex;
justify-content:center;
margin:12px 0 0 0;
// Line
.games-content-blocks-block-top-info-elements-lineArea-line
{
background:$games-line-top;
height:6px;
width:575px;
}
}
.games-content-blocks-block-top-info-elements-rating
{
margin:60px 0 0 0;
.games-content-blocks-block-top-info-elements-rating-starsArea
{
display:flex;
font-size:0;
justify-content:center;
margin:5px 0 0 0;
padding:0;
.games-content-blocks-block-top-info-elements-rating-starsArea-stars
{
display:inline-block;
font-size:0;
margin:0;
padding:0;
// Stars
img
{
border-radius:0;
font-size:0;
height:auto;
margin:5px;
padding:0;
position:relative;
top:0;
width:25px;
}
}
}
h5
{
font-size:23px;
}
}
.games-content-blocks-block-top-info-elements-textArea
{
display:flex;
justify-content:center;
margin:45px 0 0 0;
// Large Text
h5
{
font-size:21px;
width:500px;
}
}
h5
{
color:$games-text;
font-size:23px;
width:initial;
}
}
}
}
}
.games-content-blocks-cheesePlanet
{
margin:250px 0 0 0;
.games-content-blocks-block-features
{
.games-content-blocks-block-features-blocks
{
.games-content-blocks-block-features-blocks-featureTwo
{
.games-content-blocks-block-features-blocks-feature-content
{
.games-content-blocks-block-features-blocks-feature-content-inside
{
.games-content-blocks-block-features-blocks-feature-content-inside-image
{
img
{
width:58px;
}
}
}
}
}
}
}
.games-content-blocks-block-top
{
.games-content-blocks-block-top-img
{
left:0;
}
.games-content-blocks-block-top-info
{
left:initial;
right:0;
.games-content-blocks-block-top-info-elements
{
.games-content-blocks-block-top-info-elements-lineArea
{
.games-content-blocks-block-top-info-elements-lineArea-line
{
background:$games-line-bottom;
}
}
}
}
}
}
}
}
}
header.scss
Header
Code Lines: 77-569
header
{
background:url("../../../Images/Header/Background-Img.webp");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
box-shadow:inset 6000px 0 0 0 $header-background-layer;
height:100vh;
position:relative;
width:100%;
.header-info
{
.header-info-block
{
.header-info-block-content
{
.header-info-block-content-columnFour
{
.header-info-block-content-columnFour-text
{
// Text - 12 Tournaments
h4
{
width:146px;
}
}
}
.header-info-block-content-columnOne
{
.header-info-block-content-columnOne-text
{
// Text - 25 Developers
h4
{
width:125px;
}
}
}
.header-info-block-content-columnThree
{
.header-info-block-content-columnThree-text
{
// Text - 10 Games
h4
{
width:76px;
}
}
}
.header-info-block-content-columnTwo
{
.header-info-block-content-columnTwo-text
{
// Text - 100k Followers
h4
{
width:105px;
}
}
}
}
}
}
.header-middle
{
align-items:center;
display:flex;
height:calc(100% - 100px);
justify-content:center;
position:relative;
top:100px;
.header-middle-content
{
bottom:10px;
display:inline-grid;
grid-template-columns:repeat(2, 1fr);
position:relative;
width:calc(100% - 490px);
.header-middle-content-left
{
// Button - Learn More
.header-middle-content-left-button
{
display:inline-block;
font-size:0;
margin:30px 0 0 0;
padding:0;
.header-middle-content-left-button-area
{
position:relative;
width:215px;
// Circle
.header-middle-content-left-button-area-circle
{
background:$header-button-circle;
border-radius:50%;
cursor:pointer;
height:75px;
width:75px;
}
.header-middle-content-left-button-area-textArrow
{
cursor:pointer;
display:inline-block;
font-size:0;
margin:0;
padding:0;
position:absolute;
right:0;
top:50%;
transform:translate(0%, -50%);
// Text - Learn More
h4
{
font-size:24px;
width:initial;
}
// Image - Arrow
img
{
height:auto;
margin:0 0 0 17px;
width:49px;
}
}
}
}
.header-middle-content-left-largeText
{
font-size:0;
margin:0;
padding:0;
.header-middle-content-left-largeText-content
{
// Text - We Create Magic in Gaming
h1
{
.header-middle-content-left-largeText-content-h1-block
{
display:inline-block;
height:90px;
margin:0;
padding:0;
position:relative;
.header-middle-content-left-largeText-content-h1-block-line
{
background:$header-text-line;
display:inline-block;
height:60px;
left:0;
position:absolute;
top:75px;
width:105%;
z-index:0;
}
.header-middle-content-left-largeText-content-h1-block-lineGaming
{
background:$header-text-line;
display:none;
height:60px;
left:0;
position:absolute;
top:75px;
width:105%;
z-index:0;
}
.header-middle-content-left-largeText-content-h1-block-word
{
position:relative;
z-index:1;
}
}
}
}
}
// Text - "We enjoy to use..."
.header-middle-content-left-smallText
{
margin:35px 0 0 0;
}
}
.header-middle-content-right
{
align-items:center;
display:flex;
justify-content:flex-end;
.header-middle-content-right-img
{
font-size:0;
margin:0;
padding:0;
// Img - Gaming Team
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:600px;
}
}
}
}
}
// Navbar on Click
.header-navbar
{
background:$header-navbar-background;
display:flex;
height:100%;
right:-100%;
position:fixed;
top:-100%;
transition:right 1s, top 1s;
width:100%;
z-index:3;
.header-navbar-content
{
height:100%;
position:relative;
width:100%;
// Close Button
.header-navbar-content-close
{
cursor:pointer;
font-size:0;
margin:0;
padding:0;
position:absolute;
right:75px;
top:75px;
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:20px;
}
}
// Navbar Links
.header-navbar-content-links
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:100%;
ul
{
list-style-type:none;
padding:0;
li
{
align-items:center;
display:flex;
justify-content:center;
margin:15px;
a
{
margin:0;
padding:0;
}
}
}
}
}
}
// Search Screen
.header-search
{
background:$header-search;
display:flex;
height:100%;
left:-100%;
position:fixed;
top:-100%;
transition:left 1s, top 1s;
width:100%;
z-index:3;
.header-search-content
{
height:100%;
position:relative;
width:100%;
// Close Button
.header-search-content-close
{
cursor:pointer;
font-size:0;
left:75px;
margin:0;
padding:0;
position:absolute;
top:75px;
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:20px;
}
}
// Typing Form
.header-search-content-formArea
{
display:flex;
justify-content:center;
width:100%;
.header-search-content-formArea-form
{
margin:100px 0 0 0;
width:500px;
// Input Field
.header-search-content-formArea-form-input
{
background:$header-search;
border-bottom:1px solid $header-input-color;
border-left:none;
border-right:none;
border-top:none;
color:$header-input-color;
font-family:oswald-regular;
font-size:16px;
outline:none;
text-align:center;
width:100%;
}
}
}
// Objects for Search
.header-search-content-objects
{
display:flex;
justify-content:center;
margin:50px 0 0 0;
.header-search-content-objects-block
{
display:inline-block;
.header-search-content-objects-block-object
{
font-size:0;
padding:0;
}
}
}
}
}
.header-social
{
align-items:center;
display:flex;
font-size:0;
height:100%;
margin:0 100px 0 0;
padding:0;
position:absolute;
right:0;
top:0;
z-index:0;
.header-social-block
{
display:block;
font-size:0;
margin:0;
padding:0;
// Social Networks, Icons, Links
a
{
display:block;
line-height:0.9px;
margin:18px 0 18px 0;
padding:0;
text-decoration:none;
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:25px;
}
}
}
}
.header-top
{
align-items:center;
background:$header-top;
display:flex;
height:100px;
justify-content:center;
position:fixed;
width:100%;
z-index:3;
.header-top-content
{
display:inline-grid;
grid-template-columns:repeat(3, 1fr);
width:calc(100% - 200px);
// Logo Text Area
.header-top-content-logo
{
display:flex;
justify-content:center;
margin:0;
padding:0;
a
{
display:inline-block;
font-family:stickNoBills-regular;
font-size:24px;
text-decoration:none;
width:initial;
&:hover
{
color:$header-logo;
}
}
}
.header-top-content-navbar
{
align-items:center;
display:flex;
font-size:0;
justify-content:flex-end;
margin:0;
padding:0;
.header-top-content-navbar-lines
{
cursor:pointer;
font-size:0;
margin:0;
padding:0;
// Middle Line
.header-top-content-navbar-lines-lineMiddle
{
background:$header-navbar;
font-size:0;
height:3px;
margin:10px 0 10px 0;
padding:0;
width:52px;
}
// Top and Bottom Line
.header-top-content-navbar-lines-lineTopBottom
{
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
.header-top-content-navbar-lines-lineTopBottom-line
{
background:$header-navbar;
font-size:0;
height:3px;
margin:0;
padding:0;
width:32px;
}
}
}
}
// Search Icon
.header-top-content-search
{
align-items:center;
display:flex;
font-size:0;
margin:0;
padding:0;
.header-top-content-search-icon
{
display:inline-block;
font-size:0;
margin:0;
padding:0;
img
{
cursor:pointer;
font-size:0;
height:auto;
margin:0;
padding:0;
width:24px;
}
}
}
}
}
}
loader.scss
Loader
Code Lines: 13-67
// Loader
.loader
{
align-items:center;
background:$loader-background;
display:flex;
height:100vh;
justify-content:center;
left:0;
position:fixed;
width:100%;
z-index:4;
// Spinner Area
.loader-block
{
font-size:100px;
height:100px;
position:relative;
width:100px;
&:after, &:before
{
animation:spin 1s infinite;
border-color:transparent;
border-radius:100px;
border-style:double;
border-width:50px;
box-sizing:border-box;
content: "";
display:block;
height:100px;
position:absolute;
top:0;
width:100px;
}
&:after
{
border-left-color:$loader-spinner;
left:0;
}
&:before
{
animation-delay:calc($loader-speed/-4);
border-right-color:$loader-spinner;
right:0;
}
}
// Keyframes for Animation
@keyframes spin
{
from
{
transform:rotate(360deg);
}
}
}
news-inside.scss
Old Crypt, Road Adventures
Code Lines: 118-921
.newsInside
{
.newsInside-content
{
font-size:0;
margin:0;
padding:0;
.newsInside-content-bottomContainer
{
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
.newsInside-content-bottomContainer-bottom
{
display:inline-grid;
font-size:0;
grid-template-columns:65% 35%;
margin:0;
padding:0;
width:86%;
.newsInside-content-bottomContainer-bottom-left
{
font-size:0;
margin:0;
padding:0;
h5
{
font-size:20px;
margin:30px 0 0 0;
text-align:start;
width:85%;
}
.newsInside-content-bottomContainer-bottom-left-comments
{
display:inline-block;
margin:50px 0 0 0;
width:85%;
.newsInside-content-bottomContainer-bottom-left-comments-formContainer
{
margin:25px 0 0 0;
width:100%;
// Form
form
{
font-family:kanit-regular;
width:100%;
// Placeholders
input[placeholder]
{
color:$newsInside-comments;
font-size:20px;
padding:0;
}
// Fields
.newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields
{
display:inline-grid;
gap:70px;
grid-template-columns:auto auto;
margin:50px 0 0 0;
width:100%;
.newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-fields-field
{
background:$newsInside-comments-form;
border-bottom:1px solid $newsInside-comments-border;
border-left:none;
border-right:none;
border-top:none;
height:75px;
outline:none;
}
}
// Message
.newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-message
{
background:$newsInside-comments-form;
border-bottom:1px solid $newsInside-comments-border;
border-left:none;
border-right:none;
border-top:none;
color:$newsInside-comments;
font-size:20px;
height:200px;
outline:none;
padding:0;
width:100%;
}
// Submit Button
.newsInside-content-bottomContainer-bottom-left-comments-formContainer-form-submit
{
background:$newsInside-button;
border:none;
border-radius:12px;
color:$newsInside-button-text;
font-size:20px;
height:55px;
margin:30px 0 0 0;
width:100%;
}
// Placeholder
::placeholder
{
color:$newsInside-comments;
font-size:20px;
opacity:1;
padding:0;
}
}
}
// Heading - Comments
.newsInside-content-bottomContainer-bottom-left-comments-heading
{
align-items:center;
background:$newsInside-comments-heading;
display:flex;
height:70px;
width:100%;
.newsInside-content-bottomContainer-bottom-left-comments-heading-objects
{
display:inline-grid;
gap:15px;
grid-template-columns:auto auto;
margin:0 0 0 25px;
h5
{
font-size:20px;
margin:0;
padding:0;
text-align:start;
width:initial;
}
// Triangle
.newsInside-content-bottomContainer-bottom-left-comments-heading-objects-triangle
{
border-bottom:12px solid transparent;
border-left:24px solid $newsInside-comments-triangle;
border-top:12px solid transparent;
}
}
}
}
.newsInside-content-bottomContainer-bottom-left-images
{
margin:30px 0 0 0;
width:85%;
.newsInside-content-bottomContainer-bottom-left-images-objects
{
display:inline-grid;
gap:55px;
grid-template-columns:auto auto;
.newsInside-content-bottomContainer-bottom-left-images-objects-leftImage
{
display:inline-block;
// Img, Treasury One
img
{
height:auto;
width:425px;
}
}
.newsInside-content-bottomContainer-bottom-left-images-objects-rightImage
{
// Img, Treasury Two
img
{
height:auto;
width:425px;
}
}
}
}
.newsInside-content-bottomContainer-bottom-left-invitation
{
align-items:center;
background:$newsInside-invitation;
border-radius:10px;
display:flex;
height:115px;
justify-content:center;
margin:30px 0 0 0;
width:85%;
h5
{
font-size:20px;
margin:0;
width:initial;
}
}
.newsInside-content-bottomContainer-bottom-left-video
{
font-size:0;
margin:0;
padding:0;
position:relative;
width:85%;
img
{
border-radius:12px;
font-size:0;
height:auto;
margin:0;
padding:0;
width:100%;
}
.newsInside-content-bottomContainer-bottom-left-video-darkLayer
{
background:$newsInside-video-layer;
border-radius:12px;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
.newsInside-content-bottomContainer-bottom-left-video-playContainer
{
height:110px;
left:50%;
position:absolute;
top:50%;
transform:translate(-50%, -50%);
width:110px;
.newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle
{
align-items:center;
background:$newsInside-large-circle;
border-radius:50%;
cursor:pointer;
display:flex;
height:110px;
justify-content:center;
width:110px;
.newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle-smallCircle
{
background:$newsInside-small-circle;
border-radius:50%;
height:96px;
width:96px;
.newsInside-content-bottomContainer-bottom-left-video-playContainer-largeCircle-smallCircle-icon
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
img
{
border-radius:0;
height:auto;
left:4px;
position:relative;
width:30px;
}
}
}
}
}
}
}
.newsInside-content-bottomContainer-bottom-right
{
.newsInside-content-bottomContainer-bottom-right-categories
{
background:$newsInside-categories-background;
margin:70px 0 0 0;
padding:0 0 5px 0;
.newsInside-content-bottomContainer-bottom-right-categories-category
{
align-items:center;
background:$newsInside-categories-heading-category-background;
display:flex;
height:45px;
justify-content:center;
margin:5px 0 5px 0;
// Category - Adventure, Game, Gold, Island
p
{
font-family:kanit-regular;
font-size:18px;
&:hover
{
color:$header-search-noRecord;
}
}
}
.newsInside-content-bottomContainer-bottom-right-categories-categoryBottom
{
margin:5px 0 0 0;
}
.newsInside-content-bottomContainer-bottom-right-categories-heading
{
align-items:center;
background:$newsInside-categories-heading-category-background;
display:flex;
height:70px;
.newsInside-content-bottomContainer-bottom-right-categories-heading-triangleText
{
display:inline-grid;
gap:15px;
grid-template-columns:auto auto;
margin:0 0 0 25px;
// Heading - Categories
h5
{
color:$newsInside-categories-text;
font-size:20px;
margin:0;
padding:0;
text-align:start;
width:initial;
}
.newsInside-content-bottomContainer-bottom-right-categories-heading-triangleText-triangle
{
border-bottom:12px solid transparent;
border-left:24px solid $newsInside-categories-triangle;
border-top:12px solid transparent;
}
}
}
}
.newsInside-content-bottomContainer-bottom-right-photos
{
margin:70px 0 0 0;
.newsInside-content-bottomContainer-bottom-right-photos-heading
{
align-items:center;
background:$newsInside-photos-heading-background;
display:flex;
height:70px;
.newsInside-content-bottomContainer-bottom-right-photos-heading-triangleText
{
display:inline-grid;
gap:15px;
grid-template-columns:auto auto;
margin:0 0 0 25px;
.newsInside-content-bottomContainer-bottom-right-photos-heading-triangleText-triangle
{
border-bottom:12px solid transparent;
border-left:24px solid $newsInside-photos-triangle;
border-top:12px solid transparent;
}
}
}
.newsInside-content-bottomContainer-bottom-right-photos-images
{
display:inline-grid;
gap:20px;
grid-template-columns:auto auto auto;
margin:40px 0 0 0;
// Images
img
{
height:auto;
width:200px;
}
}
}
.newsInside-content-bottomContainer-bottom-right-tags
{
margin:70px 0 60px 0;
.newsInside-content-bottomContainer-bottom-right-tags-heading
{
align-items:center;
background:$newsInside-tags-heading-background;
display:flex;
height:70px;
.newsInside-content-bottomContainer-bottom-right-tags-heading-triangleText
{
display:inline-grid;
gap:15px;
grid-template-columns:auto auto;
margin:0 0 0 25px;
.newsInside-content-bottomContainer-bottom-right-tags-heading-triangleText-triangle
{
border-bottom:12px solid transparent;
border-left:24px solid $newsInside-tags-triangle;
border-top:12px solid transparent;
}
}
}
.newsInside-content-bottomContainer-bottom-right-tags-words
{
display:inline-grid;
gap:15px;
grid-template-columns:auto auto auto auto auto;
margin:40px 0 0 0;
.newsInside-content-bottomContainer-bottom-right-tags-words-word
{
// Tags
p
{
border:0.1px solid $newsInside-tags-border;
font-family:kanit-regular;
font-size:18px;
padding:5px;
text-align:center;
&:hover
{
color:$newsInside-tags-color;
}
}
}
}
}
.newsInside-content-bottomContainer-bottom-right-location
{
.newsInside-content-bottomContainer-bottom-right-location-img
{
img
{
height:auto;
width:650px;
}
}
.newsInside-content-bottomContainer-bottom-right-location-textArea
{
align-items:center;
background:$newsInside-location-background;
display:flex;
height:230px;
justify-content:center;
width:100%;
.newsInside-content-bottomContainer-bottom-right-location-textArea-textContainer
{
width:88%;
h5
{
display:inline-block;
font-family:kanit-bold;
font-size:20px;
width:100%;
}
.newsInside-content-bottomContainer-bottom-right-location-textArea-textContainer-text
{
font-family:kanit-regular;
margin:10px 0 0 0;
}
}
}
}
}
}
}
.newsInside-content-largeImgInfo
{
padding:100px 0 0 0;
.newsInside-content-largeImgInfo-elements
{
.newsInside-content-largeImgInfo-elements-infoContainer
{
bottom:105px;
display:flex;
justify-content:center;
position:relative;
.newsInside-content-largeImgInfo-elements-infoContainer-info
{
align-items:center;
background:$newsInside-info-background;
border-radius:9px;
display:flex;
height:210px;
justify-content:center;
width:65%;
.newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea
{
width:100%;
.newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor
{
display:flex;
justify-content:center;
margin:20px 0 0 0;
.newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor-texts
{
display:inline-grid;
grid-template-columns:auto auto;
width:29%;
// Author
.newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-dateAuthor-texts-author
{
text-align:end;
}
// Date
p
{
display:inline-block;
font-family:kanit-regular;
font-size:18px;
text-align:start;
&:hover
{
color:$newsInside-date-author-hover;
}
}
}
}
.newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-game
{
display:flex;
justify-content:center;
.newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-game-name
{
align-items:center;
background:$newsInside-game-background;
border-radius:7px;
display:flex;
height:45px;
justify-content:center;
width:17%;
// Text - Old Crypt
p
{
font-family:kanit-regular;
font-size:18px;
&:hover
{
color:$header-search-noRecord;
}
}
}
}
.newsInside-content-largeImgInfo-elements-infoContainer-info-infoArea-genre
{
display:flex;
justify-content:center;
margin:20px 0 0 0;
// Text - Game Genre
h4
{
font-family:kanit-regular;
width:initial;
}
}
}
}
}
.newsInside-content-largeImgInfo-elements-largeImg
{
font-size:0;
margin:0;
padding:0;
// Large Img
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:100%;
}
}
}
}
.newsInside-content-navbar
{
background:$header-navbar-background;
display:flex;
height:100%;
right:-100%;
position:fixed;
top:-100%;
transition:right 1s, top 1s;
width:100%;
z-index:3;
.newsInside-content-navbar-elements
{
height:100%;
position:relative;
width:100%;
.newsInside-content-navbar-elements-close
{
cursor:pointer;
font-size:0;
margin:0;
padding:0;
position:absolute;
right:75px;
top:75px;
// Navbar, Close Img
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:20px;
}
}
.newsInside-content-navbar-elements-links
{
align-items:center;
display:flex;
height:100%;
justify-content:center;
width:100%;
ul
{
list-style-type:none;
padding:0;
li
{
align-items:center;
display:flex;
justify-content:center;
margin:15px;
// Navbar Links
a
{
margin:0;
padding:0;
}
}
}
}
}
}
.newsInside-content-search
{
background:$header-search;
display:flex;
height:100%;
left:-100%;
position:fixed;
top:-100%;
transition:left 1s, top 1s;
width:100%;
z-index:3;
.newsInside-content-search-elements
{
height:100%;
position:relative;
width:100%;
.newsInside-content-search-elements-close
{
cursor:pointer;
font-size:0;
left:75px;
margin:0;
padding:0;
position:absolute;
top:75px;
// Search, Close Img
img
{
font-size:0;
height:auto;
margin:0;
padding:0;
width:20px;
}
}
.newsInside-content-search-elements-formArea
{
display:flex;
justify-content:center;
width:100%;
.newsInside-content-search-elements-formArea-form
{
margin:100px 0 0 0;
width:500px;
// Input Field
.newsInside-content-search-elements-formArea-form-input
{
background:$header-search;
border-bottom:1px solid $header-input-color;
border-left:none;
border-right:none;
border-top:none;
color:$header-input-color;
font-family:oswald-regular;
font-size:16px;
outline:none;
text-align:center;
width:100%;
}
}
}
.newsInside-content-search-elements-objects
{
display:flex;
justify-content:center;
margin:50px 0 0 0;
.newsInside-content-search-elements-objects-block
{
display:inline-block;
.newsInside-content-search-elements-objects-block-object
{
font-size:0;
padding:0;
}
}
}
}
}
.newsInside-content-top
{
align-items:center;
background:$header-top;
display:flex;
height:100px;
justify-content:center;
position:fixed;
width:100%;
z-index:3;
.newsInside-content-top-elements
{
display:inline-grid;
grid-template-columns:repeat(3, 1fr);
width:calc(100% - 200px);
.newsInside-content-top-elements-logo
{
display:flex;
justify-content:center;
margin:0;
padding:0;
// Logo Text
a
{
display:inline-block;
font-family:stickNoBills-regular;
font-size:24px;
text-decoration:none;
width:initial;
&:hover
{
color:$header-logo;
}
}
}
.newsInside-content-top-elements-navbar
{
align-items:center;
display:flex;
font-size:0;
justify-content:flex-end;
margin:0;
padding:0;
.newsInside-content-top-elements-navbar-lines
{
cursor:pointer;
font-size:0;
margin:0;
padding:0;
.newsInside-content-top-elements-navbar-lines-lineMiddle
{
background:$header-navbar;
font-size:0;
height:3px;
margin:10px 0 10px 0;
padding:0;
width:52px;
}
.newsInside-content-top-elements-navbar-lines-lineTopBottom
{
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
.newsInside-content-top-elements-navbar-lines-lineTopBottom-line
{
background:$header-navbar;
font-size:0;
height:3px;
margin:0;
padding:0;
width:32px;
}
}
}
}
.newsInside-content-top-elements-search
{
align-items:center;
display:flex;
font-size:0;
margin:0;
padding:0;
.newsInside-content-top-elements-search-icon
{
display:inline-block;
font-size:0;
margin:0;
padding:0;
// Search Icon
img
{
cursor:pointer;
font-size:0;
height:auto;
margin:0;
padding:0;
width:24px;
}
}
}
}
}
}
.newsInside-validation
{
display:none;
}
}
news.scss
Company News
Code Lines: 38-264
.news
{
background:$news-background;
font-size:0;
margin:0;
padding:0;
.news-content
{
display:inline-block;
font-size:0;
margin:0;
padding:155px 0 155px 0;
width:100%;
// Author
.news-content-author
{
margin:35px 0 0 0;
.news-content-author-image
{
display:flex;
justify-content:center;
// Image
img
{
height:auto;
width:75px;
}
}
.news-content-author-name
{
margin:10px 0 0 0;
// Author Name
h5
{
font-size:20px;
width:initial;
}
}
}
.news-content-button
{
display:flex;
justify-content:center;
margin:50px 0 0 0;
.news-content-button-shape
{
background:$news-button-light;
border-radius:9px;
cursor:pointer;
height:45px;
position:relative;
width:135px;
.news-content-button-shape-bottom
{
background:$news-button-bottom;
}
.news-content-button-shape-sand
{
align-items:center;
border-radius:9px;
display:flex;
height:40px;
justify-content:center;
width:130px;
// Button Text
h5
{
color:$news-button-text;
font-size:20px;
}
}
.news-content-button-shape-top
{
background:$news-button-chocolate;
}
}
}
.news-content-gameName
{
margin:35px 0 0 0;
// Name of the Game
h5
{
font-size:20px;
width:initial;
}
}
.news-content-heading
{
display:flex;
justify-content:center;
width:100%;
}
.news-content-image
{
display:flex;
font-size:0;
justify-content:center;
margin:35px 0 0 0;
padding:0;
// Large Image
img
{
border-radius:10px;
font-size:0;
height:auto;
margin:0;
padding:0;
width:1000px;
}
}
// Bottom Game
.news-content-roadAdventures
{
margin:125px 0 0 0;
}
.news-content-social
{
display:flex;
justify-content:center;
margin:30px 0 0 0;
// Icons
.news-content-social-icons
{
display:inline-grid;
grid-template-columns:auto auto auto;
.news-content-social-icons-circle
{
align-items:center;
border:1px solid $news-social-circle;
border-radius:50%;
cursor:pointer;
display:flex;
height:50px;
justify-content:center;
margin:20px;
margin-bottom:0;
width:50px;
// Fb
.news-content-social-icons-circle-fb
{
height:auto;
width:13px;
}
// Instagram
.news-content-social-icons-circle-instagram
{
height:auto;
width:23px;
}
// X
.news-content-social-icons-circle-x
{
height:auto;
width:25px;
}
}
}
}
.news-content-text
{
display:flex;
justify-content:center;
margin:15px 0 0 0;
position:relative;
h5
{
font-size:20px;
width:34%;
}
.news-content-text-date
{
display:flex;
font-size:0;
justify-content:center;
left:0;
margin:0;
padding:0;
position:absolute;
top:8px;
width:100%;
.news-content-text-date-wrapper
{
font-size:0;
margin:0;
padding:0;
width:1000px;
.news-content-text-date-wrapper-info
{
font-size:0;
margin:0;
padding:0;
width:75px;
h3
{
color:$news-date-day;
display:inline-block;
font-size:30px;
margin:5px 0 0 0;
padding:0;
width:100%;
}
.news-content-text-date-wrapper-info-line
{
background:$news-date-line;
font-size:0;
height:5px;
margin:0;
padding:0;
width:100%;
}
p
{
font-family:kanit-regular;
font-size:18px;
margin:0;
&:hover
{
color:$news-month-hover;
}
}
}
}
}
}
}
}
subscribe.scss
Subscribe
Code Lines: 21-139
.subscribe
{
background:$subscribe-background;
padding:0 0 155px 0;
width:100%;
.subscribe-content
{
background:url("../../../Images/Subscribe/Background.webp");
background-position:center;
background-repeat:no-repeat;
background-size:cover;
height:645px;
position:relative;
width:100%;
// Shape
.subscribe-content-shape
{
align-items:center;
backdrop-filter:blur(10px);
background:$subscribe-shape;
clip-path:polygon(330px 0%, 100% 0%, 100% 100%, 0% 100%);
display:flex;
height:645px;
justify-content:center;
position:absolute;
right:0;
top:0;
width:1110px;
.subscribe-content-shape-elements
{
left:90px;
position:relative;
z-index:2;
// Form
.subscribe-content-shape-elements-form
{
align-items:center;
display:flex;
height:65px;
margin:15px 0 0 0;
position:relative;
width:600px;
// Field
input[placeholder]
{
color:$subscribe-form-text;
padding:0 0 0 15px;
}
// Placeholder
::placeholder
{
color:$subscribe-form-text;
opacity:1;
padding:0 0 0 15px;
}
// Email Field
.subscribe-content-shape-elements-form-email
{
background:$subscribe-form;
border:none;
border-radius:10px;
color:$subscribe-form-text;
font-family:kanit-regular;
font-size:18px;
height:65px;
opacity:1;
outline:none;
width:100%;
}
// Send Button
.subscribe-content-shape-elements-form-send
{
background:$subscribe-button-background;
border:none;
border-radius:7px;
color:$subscribe-button;
font-family:kanit-regular;
font-size:18px;
height:50px;
position:absolute;
right:15px;
top:7.5px;
width:120px;
}
}
.subscribe-content-shape-elements-heading
{
display:flex;
font-size:0;
justify-content:center;
margin:0;
padding:0;
// Text - Subscribe
h4
{
color:$subscribe-text;
font-family:kanit-regular;
margin:0;
padding:0;
width:initial;
}
}
.subscribe-content-shape-elements-text
{
display:flex;
justify-content:center;
margin:5px 0 0 0;
// Text
h5
{
color:$subscribe-text;
font-size:20px;
width:500px;
}
}
}
}
}
}
# PHP
In this section, you will learn about the most basic elements for the comment and subscribe system, as well as the full code for the contact system.
Layout - Dark Chocolate
comments.php
Comments
Code Line: 10
$conn = new mysqli('localhost', 'username', 'password', 'database_name');
contact.php
Contact Form
Code Lines: 9-26
// Send Message
if(isset($_POST['submit']))
{
$name = $_POST['userName'];
$mailFrom = $_POST['userEmail'];
$phone = $_POST['userPhone'];
$message = $_POST['userMessage'];
$mailTo = "email@example.com";
$headers = "From: ".$mailFrom;
$txt = "You have received an e-mail from ".$name.".\n\n".$phone;
mail($mailTo, $txt, $headers, $message);
header("Location:../HTML/thanks.html?mailsend");
}
subscribe.php
Subscribe
Code Lines: 3-4
<?php
$to = "me@example.com"; // Your Brand Mail ID
$from = "no-reply@example.com"; // Replace it with your From Mail ID
$headers = "From: " . $from . "rn";
$subject = "New subscription";
$body = "New user subscription: " . $_POST['email'];
if( filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) )
{
if (mail($to, $subject, $body, $headers, "-f " . $from))
{
echo 'Your e-mail (' . $_POST['email'] . ') has been added to our mailing list!';
}
else
{
echo 'There was a problem with your e-mail (' . $_POST['email'] . ')';
}
}
?>