Ir para conteúdo
Faça parte da equipe! (2024) ×
Conheça nossa Beta Zone! Novas áreas a caminho! ×
  • Quem está por aqui   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

Algo não está certo


gere22333
 Compartilhar

Posts Recomendados

Estou com dificuldade de realizar a visualização dos pop'ups já vi e revi

mas não consegui encontrar onde está o erro segue o código:

 

NO HTML: 

Citar
<!DOCTYPE html>
<html lang="pt-br">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Qual é seu time?</title>
        <link href="estilo.css" rel="stylesheet" alt="css/text">
</head>
                <body>
        <div class="conteiner-principal">
<header>
 
        <div class="logo">
                <a href="index.html">
                        <img src="principalimagem.jpg" alt="logo site">
                </a>
        </div>
 
        <nav>
                <ul>
                        <li><a href="#openmodal">Vasco</a></li>
                        <li><a href="#openmodal1">Flamengo</a></li>
                        <li><a href="#openmodal2">Botafogo</a></li>
                        <li><a href="#openmodal3">Fluminense</a></li>
                       
                </ul>
 
        </nav>
</header>
 
  <section id="banner">
        <img src="paineltorcedor.jpg" alt="banner-topo">
  </section>
 
  <div id=”openmodal” class="modalDialog">
        <div>
        <a href="#close"  title="Close" class="close">X</a>
        <h1>O Gigante da Colina</h1>
        <p><strong>Club de Regatas Vasco da Gama</strong></p>
        <b>é uma entidade sócio-poliesportiva brasileira
         com ede na cidade do Rio de Janeiro,
         fundada em 21 de agosto de 1898 por um grupo de remadores.</b>
        </div>
</div>
 
 
 
  <div id=”openmodal1” class="modalDialog">
        <div>
        <a href="#close"  title="Close" class="close">X</a>
        <h1>O Rubro Negro</h1>
        <p><strong>O Clube de Regatas do Flamengo</strong></p>
         <b>é uma agremiação poliesportiva brasileira
          com sede na cidade do Rio de Janeiro, capital do estado de mesmo nome.</b>
        </div>
</div>
 
 
 
  <div id=”openmodal2” class="modalDialog">
        <div>
        <a href="#close" title="Close"  class="close">X</a>
        <h1>O Glorioso</h1>
        <p><strong>Botafogo de Futebol e Regatas</strong></p>
         <b>é uma agremiação poliesportiva brasileira,
          com sede no bairro homônimo ao clube, na cidade do Rio de Janeiro.
           Nascido da fusão do Club de Regatas Botafogo com o Botafogo Football Club, é um dos principais clubes do Brasil.</b>
        </div>
</div>



 
  <div id=”openmodal3” class="modalDialog">
        <div>
        <a href="#close" title="Close" class="close">X</a>
        <h1>O Tricolor</h1>
        <p><strong>Fluminense Football Club</strong></p>
        <i>é uma agremiação poliesportiva e cultural sediada no bairro de Laranjeiras, Zona Sul da cidade do Rio de Janeiro, no Brasil,
         fundada em 21 de julho de 1902. É uma sociedade civil de caráter desportivo, que tem como principal atividade o futebol.</i>
        </div>
</div>
 
        <!--rodapé da página-->
        <footer>
                <div class="footer-text">
                        <h3>O Vascão</h3>
                        <p>Você sabe como se formou o Vasco? - <a href="#openmodal">Conheça</a></p>
                </div>
 
                <div class="footer-text">
                        <h3>O Mengão</h3>
                        <p>Você sabe como surgiu o Flamengo? - <a href="#openmodal1">Conheça</a></p>
 
                </div>
 
                <div class="footer-text">
                        <h3>O Fogão</h3>
                        <p>Você quer saber os primórdios do Botafogo? - <a href="#openmodal2">Conheça</a></p>
                </div>
 
                <div class="footer-text">
                        <h3>O Fluzão</h3>
                        <p>Quer saber da origem do Fluzão? - <a href="#openmodal3">Conheça</a></p>
                </div>


 
        </footer>
 
        </div>
 
                </body>
</html>

 

 

NO CSS:

 

Citar
*{ margin:0; padding:0;} /* RESET DA PÁGINA */
 
.container-principal{ font-family: Verdana, Geneva, Tahoma, sans-serif; color: gainsboro; }
 
/* PROPRIEDADE DO TOPO */
 
header{width: 100%; height: 100px; background-color: #fff;
position: relative; top:0;}
 
/* PROPRIEDADE DA LOGO */
 
.logo {position: absolute; width:300px; height:auto; }
.logo img{width: 1348px; height: 130px;}
 
/* PROPRIEDADE DO MENU */
 
nav{position: absolute; right: 30px;
bottom: 0px;}
 
nav ul li{float: left; color: #fff; width: auto;
 margin: 0.8em; font-size: 1.5em; font-family: Verdana, Geneva, Tahoma, sans-serif;}
 
nav ul li a{text-decoration: none;color: #bbb;}
 
nav ul li a:hover{color:#2b6d0c}
 
/* PROPRIEDADES DA IMAGEM PRINCIPAL */
 
#banner img{
    width: 1348px; height: 528px; margin-bottom: 0;}
 
/* PROPRIEDADES DOS POP'UPS */
 
.modalDialog {
    position: fixed;
    font-family: Verdana;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(red, green, blue, alpha);
    z-index: 9999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    display: none;
}
 
.modalDialog:target {
    display:block;
    opacity: 1;
    pointer-events: none;
}
 
.modalDialog div{
    width:500px;
    position:relative;
    margin:10% auto;
    padding:5px 20px 13px 20px;
    -webkit-border-radius:12px ;
    -moz-border-radius: 12px;
    border-radius:12px ;
    background-color: white;
}
 
.modalDialog p {
    margin-top: 5%;
    margin-bottom: 5%;
}
 
.modalDialog img {
    width: 50%;
    position: relative;
    margin-left: 25%;
}
 
.close {
    background-color: black;
    color:#3aff08;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
 
.close:hover {
    background-color: blue;
}
 
/* RODAPÉ DA PÁGINA */
 
footer{
width: 100%;
height: 18%;
background-color: #3aff08;
color: #fff;
position: relative;
float: left;
font-family: 'verdana';
width: 100%;
height: 18%;
background-color: #3aff08;
color: #fff;
position: relative;
float: left;
font-family:'verdana'
}

 

 

Link para o comentário
Compartilhar em outros sites

Participe da Conversa

Você pode postar agora e se cadastrar mais tarde. Cadastre-se Agora para publicar com Sua Conta.
Observação: sua postagem exigirá aprovação do moderador antes de ficar visível.

Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

 Compartilhar

×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.