Ir para conteúdo

julianaparra

Members
 Perfil  Explorar Conteúdo

  • Total de itens

    4

  • Registro em

  • Última visita

Tudo que julianaparra postou

  1. julianaparra
    Eu não estou conseguindo declarar um span com a pseudo-classe action. Estou declarando o span errado, pois ele não reconhece o comando action e hover : ( Ja tentei deixar só span, mas como esta dentro de um <p> ele também não reconhece, tiro o <p> ele faz a ação ) Ja tentei declarar por: span:action span.destaque_glossario:action p.destaque_glossario span.destaque_glossario p:action e nada T.T Mas se eu declarar .destaque:action ao clicar no texto ele aceita, mas eu gostaria que fosse apenas na palavra. div.glossario { background-color: #fdeae4; padding: 1em; border-radius: 10px; margin-left: auto; margin-right: auto; border-top: 3px solid #7e3e3b; max-width: 600px; margin-left: auto; margin-right: auto; position: absolute; top: 20%; left: 70%; display: none; } div.glossario p { text-indent: 0; margin-top: 0; margin-bottom: 0; } span.destaque_glossario { font-weight: bold; color: #3d8177; } span.destaque_glossario:active + div.glossario { display: block; } <body> <div class="destaque"> <p> Completa a coleção um caderno de gramática que atende a todos os anos do Fundamental II – do 6o ao 9o. Esse manual básico contém as principais normas referentes ao padrão linguístico, todas acompanhadas de exemplos correspondentes.trabalha interdisciplinaridade. <span class="destaque_glossario">Ética:</span> trabalha interdisciplinaridade. Seu conteúdo compreende cinco eixos temáticos: fonética, morfologia, sintaxe, semântica, estilística. </p> </div> <div class="glossario"> <p> <span class="destaque_glossario">Ética:</span> valores e modos de agir considerados como corretos </p> </div> </body>
  2. julianaparra

    Quando minimizo a tela minhas div cortam no meio

    julianaparra respondeu ao tópico de julianaparra em Desenvolvimento frontend

    Omar~ Muito obrigada mesmo, entendi o que quis dizer, quando montei fui pesquisando as partes por isso saiu desajustado. Obrigado mesmo pelas dicas, anotei tudo !
  3. julianaparra
    Eu acho que posso estar errando no CSS, quando minimizo a pag as div cortam e a imagem de cima também, elas não ficam proporcionais. Esse é meu código, sei não esta responsivo, acho que tem mais div do que deveria, mas se tiro alguma ele buga. Eu não consigo anexar as fotos para mostrar e o site ainda não esta no ar. http://julianaparra-dev.com/ HTML <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/main.css"> <title>Juliana Parra</title> </head> <body> <header class="menu-principal"> <main> <div class="header-1"> <div class="logo"> <a href="index.html"> <img src="./img/logo.png" /> </a> </div> <div class="links"> <div class="menu"> <nav> <ul> <li><a href="index.html">Início</a></li> <li><a href="sobre.html">Sobre</a></li> <li><a href="portifolio.html">Portifolio</a></li> <li><a href="contato.html">contato</a></li> </ul> </nav> </div> <ul class="redes-sociais"> <li><a href="https://github.com/Parrajuliana" target="_blank"><img src="./img/github.png" alt="Meu github"></a></li> <li><a href="https://www.linkedin.com/in/juliana-do-a-parra-00701818a/" target="_blank"><img src="./img/linkedin.png" alt="Meu linkedIn"></a></li> </ul> </div> </div> </main> </header> <div class="header-2"> <div class="imagem-fundo"></div> <div class="container"></div> <div class="imagem-miolo"> <img class="imagem-bolinhas" src="./img/imagem_centro_icones.png" alt=""> </div> </div> <div> <div class="texto"> <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong> Dolore ullam ratione numquam repellendus enim, reprehenderit molestias, excepturi tempore nemo porro vel sequi ea quisquam velit sunt? Recusandae quidem aperiam tenetur.</p> <div class="botao"> <a class="bt bt-lj" href="sobre.html"><strong>saiba mais</strong></a> </div> </div> </div> <footer> <div class="rodape"> <main> <div class="direitos-reservados"> 2019 Todos os Direitos Reservados </div> </main> </div> </footer> </body> </html> //CSS body { font-family: 'Open Sans', sans-serif; width: 100%; height: 100%; margin: 0 auto; } .menu-principal { background-color: #252323; height: 68px; width: 100%; } main { margin: 0 auto; width: 980px; position: relative; } .logo { float: left; padding: 10px; width: 30%; } .links ul li { margin-left: 20px; display: inline-block; float: left; list-style: none; } .links{ padding: 10px; width: 65%; float: left; } .menu ul li a { padding: 10px; color: #8b8b8b; text-decoration: none; font-size: 16px; text-transform: uppercase; } .menu ul li a:hover{ color: #00bac6; } .slick-initialized { overflow: hidden; } .imagem-fundo { background-image: url(/img/imagem_home.png); width: 100%; height: 400px; background-repeat: no-repeat; } .container { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00aa9b+8,2989d8+45,207cca+52,00ba3a+100 */ background: #00aa9b; /* Old browsers */ background: -moz-linear-gradient(-45deg, #00aa9b 8%, #2989d8 45%, #207cca 52%, #00ba3a 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #00aa9b 8%,#2989d8 45%,#207cca 52%,#00ba3a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aa9b', endColorstr='#00ba3a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ display: block; width: 100%; height: 30px; } .imagem-bolinhas{ width: 1080px; position: relative; left: 250px; top: 20px; height: 300px; background-repeat: no-repeat; size: cover; } .texto { text-align: center; width: 600px; height: 300px; font-size: 25px; padding: 20px; position:relative; top:20%; left:30%; } .bt { text-decoration:none; font-size: 15px; color:white; padding: 10px 20px; background: -moz-linear-gradient( top, #0083ab 0%, #00ba3b); background: -webkit-gradient( linear, left top, left bottom, from(#0083ab), to(#00ba3b)); border-radius: 10px; border: 1px solid; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5), inset 0px 0px 0px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5), inset 0px 0px 0px rgba(255,255,255,0.7); box-shadow: 0px 1px 3px rgba(0,0,0,0.5), inset 0px 0px 0px rgba(255,255,255,0.7); } .rodape { color: #c1c1c1; background-color: #252323; height: 60px; width: 100%; } .direitos-reservados { padding: 20px; width: 60%; float: right; }
  4. julianaparra

    Quando minimizo a tela minhas div cortam no meio

    julianaparra respondeu ao tópico de julianaparra em Desenvolvimento frontend

    Ainda assim não foi, consegui hospedar pra conseguir entender melhor. Por exemplo, quem entra com celular vê tudo cortado. http://julianaparra-dev.com/
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito