Jump to content

julianaparra

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About julianaparra

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. julianaparra

    Quando minimizo a tela minhas div cortam no meio

    Ainda assim não foi, consegui hospedar pra conseguir entender melhor. Por exemplo, quem entra com celular vê tudo cortado. http://julianaparra-dev.com/
  2. 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; }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.