free file

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site de Downloads</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <nav class="sidebar">
            <div class="logo">
                <img src="https://cdn.discordapp.com/attachments/1298055771266875533/1300141477422174329/Fant-removebg-preview.png?ex=671fc29b&is=671e711b&hm=f233198a83ac9f1806542a40a7a93855410fcffa41f43116f3d99628cfd951d2&" alt="Logo do Site">
            </div>

<ul>
                <li><a href="#categoria1">RPG</a></li>
                <li><a href="#categoria2">Aventura</a></li>
                <li><a href="#categoria3">Estratégia</a></li>
                <li><a href="#categoria4">Simulação</a></li>
                <li><a href="#categoria5">Ação</a></li>
                <li><a href="#categoria6">Esportes</a></li>
                <li><a href="#categoria7">Corrida</a></li>
                <li><a href="#categoria8">Terror</a></li>
                <li><a href="#categoria9">Puzzle</a></li>
                <li><a href="#categoria10">Arcade</a></li>
                <li><a href="#categoria11">MMORPG</a></li>
                <li><a href="#categoria12">Mundo Aberto</a></li>
                <li><a href="#categoria13">Survival</a></li>
                <li><a href="#categoria14">Musical</a></li>
                <li><a href="#categoria15">Plataforma</a></li>
                <li><a href="#categoria16">Hack and Slash</a></li>
            </ul>
        </nav>

<section id="categoria2">
                <h2>Aventura</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria3">
                <h2>Estratégia</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria4">
                <h2>Simulação</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria6">
                <h2>Esportes</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria7">
                <h2>Corrida</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria8">
                <h2>Terror</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria9">
                <h2>Puzzle</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria10">
                <h2>Arcade</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria11">
                <h2>MMORPG</h2>a
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria12">
                <h2>Mundo Aberto</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria13">
                <h2>Survival</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria14">
                <h2>Musical</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria15">
                <h2>Plataforma</h2>
                <div class="game-grid">
                    
                </div>
            </section>

<section id="categoria16">
                <h2>Hack and Slash</h2>
                <div class="game-grid">
                    
                </div>
            </section>
        </main>
    </div>

<button id="addGameBtn" onclick="openForm()">+</button>

<div id="gameForm" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeForm()">×</span>
            <h2>Adicionar Novo Jogo</h2>
            <form id="gameUploadForm">
                <label for="gameName">Nome do Jogo:</label>
                <input type="text" id="gameName" name="gameName" required>

<label for="author">Autor:</label>
                <input type="text" id="author" name="author" required>

<label for="downloadLink">Link para Download:</label>
                <input type="url" id="downloadLink" name="downloadLink" required>

<label for="imageLink">Link da Imagem:</label>
                <input type="url" id="imageLink" name="imageLink" required>
                
                <label for="category">Categoria:</label>
                <select id="category" name="category" required>
                    <option value="categoria1">RPG</option>
                    <option value="categoria2">Aventura</option>
                    <option value="categoria3">Estratégia</option>
                    <option value="categoria4">Simulação</option>
                    <option value="categoria5">Ação</option>
                    <option value="categoria6">Esportes</option>
                    <option value="categoria7">Corrida</option>
                    <option value="categoria8">Terror</option>
                    <option value="categoria9">Puzzle</option>
                    <option value="categoria10">Arcade</option>
                    <option value="categoria11">MMORPG</option>
                    <option value="categoria12">Mundo Aberto</option>
                    <option value="categoria13">Survival</option>
                    <option value="categoria14">Musical</option>
                    <option value="categoria15">Plataforma</option>
                    <option value="categoria16">Hack and Slash</option>
                </select>

<button type="submit">Adicionar Jogo</button>
            </form>
        </div>
    </div>

<div class="footer-search">
        <input type="text" id="searchInput" placeholder="Buscar jogo...">
        <button id="searchButton" onclick="searchGame()">Buscar</button>
    </div>

CSS

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #121212; /* Cinza escuro */
    color: #e0e0e0; /* Texto claro */
}

.container {
    display: flex;
    width: 100%;
}

.sidebar {
    width: 220px;
    background-color: #1a1a1a;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    height: 100vh;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
}

/* Estilo para a barra de rolagem */
.sidebar::-webkit-scrollbar {
    width: 12px;
}

.sidebar::-webkit-scrollbar-track {
    background: #2b2b2b;
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #76ff03;
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #66e302;
}

/* Barra de rolagem para Firefox */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: #76ff03 #2b2b2b;
}

.logo {
    text-align: center;
    margin-bottom: 30px;
}

.logo img {
    width: 100px;
    height: auto;
    border-radius: 50%; /* Deixa a logo circular */
    transition: transform 0.3s; /* Transição de efeito */
}

.logo img:hover {
    transform: scale(1.1); /* Leve zoom ao passar o mouse */
}

.sidebar ul {
    margin-top: 50px; /* Ajuste para empurrar o conteúdo para baixo */
    padding-right: 15px; /* Espaço para evitar que o conteúdo encoste na barra de rolagem */
}

.sidebar ul li {
    margin-bottom: 18px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #76ff03; /* Verde claro */
    font-weight: bold;
    display: block;
    padding: 12px 15px;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden; /* Para que o efeito ::after não ultrapasse */
}

.sidebar ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%; /* Começa fora da área visível */
    background-color: rgba(118, 255, 3, 0.1); /* Leve sombra */
    border-radius: 8px;
    transition: left 0.4s ease; /* Animação mais suave */
    z-index: 0; /* Coloca atrás do texto */
}

.sidebar ul li a:hover {
    background-color: #76ff03; /* Verde claro */
    color: #1f1f1f; /* Texto escuro */
    transform: scale(1.04); /* Efeito de zoom */
}

.sidebar ul li a:hover::after {
    left: 0; /* Move o efeito para cobrir o fundo */
}

.sidebar h2 {
    color: #76ff03; /* Verde claro para o título */
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 2px solid rgba(118, 255, 3, 0.5); /* Linha decorativa */
    padding-bottom: 10px;
}

/* Caixa de Pesquisa no Rodapé */
.footer-search {
    width: 100%;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1a1a1a;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.4);
}

.footer-search input {
    width: 80%;
    max-width: 400px;
    padding: 8px 35px 8px 15px;
    font-size: 15px;
    color: #f1f1f1;
    background-color: #2b2b2b;
    border: none;
    border-radius: 5px;
    outline: none;
    transition: box-shadow 0.2s;
}

.footer-search input::placeholder {
    color: #888;
}

.footer-search input:focus {
    box-shadow: 0 0 5px rgba(118, 255, 3, 0.4);
}

/* Ícone de pesquisa dentro do campo */
.footer-search::before {
    content: '????';
    position: absolute;
    left: 15px;
    font-size: 16px;
    color: #76ff03;
}

/* Botão de Pesquisa */
.footer-search button {
    padding: 8px 12px;
    font-size: 14px;
    color: #1a1a1a;
    background-color: #76ff03;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 8px;
    transition: background-color 0.2s;
}

.footer-search button:hover {
    background-color: #64dd17;
}

/* Container principal ajustado */
.container {
    display: flex;
    width: 100%;
    height: 100vh; /* Certifique-se de que ocupa toda a altura da tela */
}

/* Ajuste na seção de conteúdo */
.content {
    flex-grow: 1; /* Permite que a seção de conteúdo cresça */
    padding: 30px;
    margin-left: 250px; /* Aumenta a margem esquerda para afastar mais da sidebar */
    overflow-y: auto; /* Permite rolagem se o conteúdo exceder a altura */
}

/* Ajustes para a seção */
.content section {
    margin-bottom: 50px;
}

/* Títulos das seções */
.content h2 {
    margin-top: 0;
    color: #76ff03; /* Verde claro */
    font-size: 28px; /* Tamanho do título */
    text-align: center; /* Centraliza o título */
    text-transform: uppercase; /* Título em maiúsculas */
}

/* Grid para os jogos */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
}

/* Estilo para os cards de jogos */
.game-card {
    background-color: #1f1f1f; /* Cinza escuro */
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
    position: relative;
}

/* Efeito de hover para os cards */
.game-card:hover {
    transform: scale(1.05);
    background-color: #333;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Imagem dos jogos */
.game-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s;
}

/* Efeito de hover para as imagens dos cards */
.game-card:hover img {
    transform: scale(1.1);
}

/* Títulos dos cards */
.game-card h3 {
    margin: 15px 0;
    color: #76ff03; /* Verde claro */
}

.download-btn {
    background-color: #76ff03; /* Verde claro */
    color: #1f1f1f; /* Texto escuro */
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
}

.download-btn:hover {
    background-color: #64dd17; /* Verde mais escuro */
}

.download-btn:focus {
    outline: none; /* Remove a borda de foco */
    box-shadow: 0 0 0 2px rgba(118, 255, 3, 0.6); /* Borda de foco personalizada */
}

/* Adicionando um ícone antes do texto do botão (se você usar Font Awesome, por exemplo) */
.download-btn i {
    font-size: 16px; /* Tamanho do ícone */
}

/* Botão + fixo no canto superior */
#addGameBtn {
    position: fixed;
    top: 20px; /* Mantenha a posição no topo */
    right: 20px; /* Mantém a posição à direita */
    font-size: 28px; /* Aumenta o tamanho da fonte */
    border: none;
    background-color: #4CAF50; /* Verde escuro */
    color: white;
    width: 60px; /* Largura maior */
    height: 60px; /* Altura maior */
    border-radius: 50%; /* Mantém o formato redondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s; /* Transições suaves */
}

/* Efeito ao passar o mouse */
#addGameBtn:hover {
    background-color: #45a049; /* Verde mais claro ao passar o mouse */
    transform: scale(1.1); /* Aumenta o tamanho do botão */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra mais forte ao passar o mouse */
}

/* Efeito ao pressionar o botão */
#addGameBtn:active {
    transform: scale(0.95); /* Leve redução de tamanho ao pressionar */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Sombra reduzida ao pressionar */
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Conteúdo do modal */
.modal-content {
    background-color: #2e2e2e; /* Cinza escuro */
    color: #e8e8e8;
    margin: 10% auto;
    padding: 25px;
    border: 1px solid #444;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    animation: modalFadeIn 0.4s ease;
}

/* Animação de fade-in para o modal */
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Botão de fechar o modal */
.close {
    color: #888;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover {
    color: #f1f1f1;
}

/* Estilização do formulário */
#gameUploadForm label {
    color: #bbb; /* Texto mais suave */
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

#gameUploadForm input[type="text"],
#gameUploadForm input[type="url"],
#gameUploadForm select {
    width: 90%;
    padding: 12px;
    margin: 8px 0 20px 0;
    display: block;
    border: 1px solid #555;
    border-radius: 6px;
    background-color: #222; /* Cinza ainda mais escuro */
    color: #f9f9f9;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Campo de seleção de categoria com estilo */
#gameUploadForm select {
    width: 80%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#gameUploadForm input[type="text"]:focus,
#gameUploadForm input[type="url"]:focus,
#gameUploadForm select:focus {
    border-color: #4CAF50; /* Verde para o foco */
    outline: none;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.7);
}

/* Botão de enviar */
#gameUploadForm button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, box-shadow 0.3s;
}

#gameUploadForm button[type="submit"]:hover {
    background-color: #45a049;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

JS

/* Replace with your JS Code 
(Leave empty if not needed) */
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('.sidebar a');
    links.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                window.scrollTo({
                    top: targetSection.offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
});

// Função para abrir o modal
function openForm() {
    document.getElementById("gameForm").style.display = "block";
}

// Função para fechar o modal
function closeForm() {
    document.getElementById("gameForm").style.display = "none";
}

// Fecha o modal se o usuário clicar fora do conteúdo
window.onclick = function(event) {
    const modal = document.getElementById("gameForm");
    if (event.target === modal) {
        closeForm();
    }
}

// Função para adicionar o jogo na interface
document.getElementById("gameUploadForm").addEventListener("submit", function(event) {
    event.preventDefault();

// Obter os valores do formulário
    const gameName = document.getElementById("gameName").value;
    const author = document.getElementById("author").value;
    const downloadLink = document.getElementById("downloadLink").value;
    const imageLink = document.getElementById("imageLink").value;
    const category = document.getElementById("category").value;

// Cria o novo cartão de jogo
    const newGameCard = document.createElement("div");
    newGameCard.classList.add("game-card");
    newGameCard.innerHTML = `
        <img src="${imageLink}" alt="${gameName}">
        <h3>${gameName}</h3>
        <p>Autor: ${author}</p>
        <a href="${downloadLink}" class="download-btn" target="_blank">Download</a>
    `;

// Encontra a grid da categoria e adiciona o novo cartão
    document.querySelector(`#${category} .game-grid`).appendChild(newGameCard);

// Limpa o formulário e fecha o modal
    document.getElementById("gameUploadForm").reset();
    closeForm();
});

// Função para buscar e mostrar jogos
function searchGame() {
    const input = document.getElementById("searchInput").value.toLowerCase(); // Obter o texto digitado
    const sections = document.querySelectorAll(".game-grid"); // Selecionar todas as seções de jogos

let found = false;

sections.forEach(section => {
        const games = section.querySelectorAll("h3"); // Assumindo que cada jogo tem um título em <h3>

games.forEach(game => {
            const gameName = game.textContent.toLowerCase();

if (gameName.includes(input) && input.trim() !== "") {
                game.scrollIntoView({ behavior: "smooth", block: "center" });
                found = true;
            }
        });
    });

if (!found && input.trim() !== "") {
        alert("Jogo não encontrado.");
    }
}

free file

Recommended

Gladihoppers: Playable Game HTML File

Landing Page Free Template

CSS Free Button Animation

HTML

CSS

JS

Recommended

Gladihoppers: Playable Game HTML File

Landing Page Free Template

CSS Free Button Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS