free file

Open In Editor 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

Profile card design

Text To File

Add button to open add profile model with form validation

HTML

CSS

JS

Recommended

Profile card design

Text To File

Add button to open add profile model with form validation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS