Algo não está certo

gere22333 · 4 de Setembro 2022

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>



<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'

}

Entrar

2 Quem está por aqui 0 membros estão online

Algo não está certo

Posts Recomendados

gere22333 13

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Fóruns

Todas Atividades

LOJA WCOINS

Informação Importante