Ajuda html.

HTML

PHP

HTML5

CSS3

24/08/2018

Gente como faço isso tipo um poup com html e com vários nomes e horarios
https://i.imgur.com/f5NXCzg.png
Fábio Martins

Fábio Martins

Curtidas 0

Respostas

Fernando Duwe

Fernando Duwe

24/08/2018

Olá Fábio,

Você pode criar uma div, com css e definir o posicionamento dela:

.Alert { position: absolute; z-index: 1000; top: 85%; left: 35%; width: 30%; height: 10%; }
.gameAlert { background-color: azure; border: 1px solid #cccccc; border-radius: 30px; }

.gameAlertIcon { position: absolute; top: 0px; left: 20px; padding-top: 10px; }
.gameAlertText { position: absolute; top: 0px; left: 30%; width: 70%; padding-top: 10px; text-align: left; }


* A class Alert cuida do posicionamento (position, top, left) da mensagem (o z-index serve para definir que essa mensagem ficaré sobre qualquer outro item);
* A classe gameAlert cuida do estilo da mensagem;
* A classe gameAlertIcon cuida do posicionamento do ícone dentro da caixa da mensagem;
* A classe gameAlertText cuida do posicionamento do texto dentro da caixa de mensagem;

Depois, use da seguinte forma no código:

        <div class="Alert gameAlert">
            <div class="gameAlertIcon">
                <img src="assets/prize.png">
            </div>
            <div class="gameAlertText">
                <b>Conquista desbloqueada</b><br>
                Vamo Zuá!
            </div>            
        </div>


Claro, esse é somente um exemplo bem simples do que pode ser feito, servirá como um pontapé inicial para você. Caso queira pintar o ícone, como está no exemplo, você pode adicionar um background para a classe gameAlertIcon, além de usar novamente o border-radius. Essa é uma forma bem básica de fazer. Seria interessante trabalhar com Bootstrap também, e tentar fazer uma versão com essa ferramenta.
GOSTEI 0
POSTAR