6 385
edições
(Página substituída por '<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Busca de Imagens por Nome</title> </head> <body> <form id="imageForm"> <div class="input-group"> <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off"> <div id="dropdown" class="dropdown"></div> </div> <div id="imageC...') Etiqueta: Substituído |
Sem resumo de edição |
||
Linha 1: | Linha 1: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="pt-BR"> | <html lang="pt-BR"> | ||
<style> | |||
.input-group { margin-bottom: 1em; position: relative; } | |||
.dropdown { | |||
border: 1px solid #ccc; | |||
display: none; | |||
position: absolute; | |||
background-color: #fff; | |||
z-index: 1000; | |||
max-height: 150px; | |||
overflow-y: auto; | |||
width: 100%; | |||
} | |||
.dropdown-item { | |||
padding: 8px; | |||
cursor: pointer; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.dropdown-item img { | |||
margin-right: 10px; | |||
} | |||
.dropdown-item:hover { | |||
background-color: #f0f0f0; | |||
} | |||
.image-container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.image-item { | |||
margin-bottom: 1em; | |||
text-align: center; | |||
} | |||
.image-item img { | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
.variations-container { | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: center; | |||
margin-top: 1em; | |||
} | |||
.variation-item { | |||
width: 35%; | |||
box-sizing: border-box; | |||
margin: 5px; | |||
text-align: center; | |||
border: 1px solid ; | |||
padding: 10px; | |||
} | |||
.variation-item img { | |||
display: block; | |||
margin: 0 auto 10px; | |||
} | |||
.swap-button { | |||
margin-top: 10px; | |||
cursor: pointer; | |||
width: 15px; | |||
height: 15px; | |||
background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center; | |||
background-size: contain; | |||
display: block; | |||
margin: 0 auto; | |||
} | |||
</style> | |||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> |