Fiz exatamente o que estava nos exercícios, mas não funcionou quando redimensionei a janela
Fiz exatamente o que estava nos exercícios, mas não funcionou quando redimensionei a janela
hoje, com a Alura e o Google Gemini
Oi Márcia, tudo bem?
Você está usando o mesmo tema que o curso?
Sim, estou acompanhado o curso com o mesmo tema. Testei em todos os navegadores que uso, Chrome, Firefox e IE 11.
Segue o código CSS:
.foto-home {
height: 200px;
border-radius: 50%;
}
.palavra-home {
font-size: .25em;
font-family: 'Shadows Into Light', cursive;
font-family: 'Open Sans', sans-serif;
color:#D5447E;
font-weight:bold;
position: absolute;
}
.eficiencia {
top: 20%;
left: 75%;
}
.boas-praticas {
top: 70%;
left: 20%;
}
.codigo-limpo {
top: 45%;
left: 10%;
}
.css3 {
top: 50%;
left: 30%;
}
.html5 {
top: 40%;
left: 80%;
}
.javascript {
top: 10%;
left: 60%;
}
.acessibilidade {
top: 30%;
left: 25%;
}
.responsivo {
top: 15%;
left: 15%;
}
.otimizacoes {
top: 60%;
left: 70%;
}
.agilidade {
top: 10%;
left: 30%;
}
.design {
top: 35%;
left: 65%;
}
header {
position: relative;
}
.saudacao p {
font-size: 1.5em;
color: #99A;
line-height: 1;
padding: 2em;
}
.saudacao-inicio {
color: #889;
font-size: 3em;
}
.saudacao-ultima-linha {
text-align: right;
display: block;
}
.saudacao strong {
color: #000;
font-size: 2em;
}
.saudacao em {
color: #851944;
font-size: 4em;
}
.botao-index {
font-size: 1.25em;
background-color: #851944;
color: #FFF;
border: .2em solid black;
width: 40ch;
/* width: 12.5em;*/
margin: 2em auto;
display: block;
text-align: center;
}
.secao-inicio {
padding: 2em;
}
.secao-inicio h2 {
font-size: 3em;
text-transform: uppercase;
text-shadow: 2px 2px #000;
margin-bottom: .5em;
}
.trabalhos {
background-color: #3C1D3D;
border-top: 0.3em solid #000;
border-bottom: 0.3em solid #000;
}
.trabalhos h2 {
color: #FFF;
}
.trabalhos ul {
overflow: hidden;
border: 0.5em solid black;
}
.trabalhos li {
float: left;
width: 33.333%;
}
.trabalhos img {
width: 100%;
display: block;
}
.blog {
background-color: #999;
color: #FFF;
border-bottom: 0.5em solid #851944;
position:relative;
}
.blog small {
position: relative;
top: -2em;
}
.blog li {
width: 30%;
}
.blog li a {
color: #FCF;
padding: .5em;
display: block;
}
.blog .mais-recente {
background-color: #F2FFFC;
}
.blog li.mais-recente a {
color: #F26;
padding: .5em;
display: block;
}
.mais-recente p {
position:absolute;
top: 5em;
left: 30%;
right: 4em;
background:#F2FFFC;
padding:1.5em;
height: 8em;
color:black;
}
footer {
background-color: #000;
color: #FFF;
padding: 2em;
}
footer h2 {
font-size: 3em;
}
footer a {
color: #F99;
}
main {
width: 100%;
padding-bottom: 0;
float: none;
}O CSS parece ok, tem como postar o HTML?
Segue o html:
<!DOCTYPE html>
Desenvolvedor web
Olá, meu nome é João da Silva e eu construo sites maravilhosos
Conheça mais um pouco sobre mim
Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
Você pode entrar em contato comigo por e-mail ou pelo telefone (12) 3456-7890
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>João da Silva - Desenvolvedor Web</title>
<link rel="shortcut icon" href="imagens/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
</head>
<body>
<header class="titulo-principal">
<img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
<h1>João da Silva</h1>
<p class="subtitulo-principal">Desenvolvedor web</p>
<ul>
<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>
</ul>
<a class="banner-twitter" href="http://twitter.com/joaodasilva">Siga-me no Twitter</a>
</header>
<main>
<section class="secao-inicio saudacao">
<p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong> <span class="saudacao-ultima-linha">e eu construo <em>sites maravilhosos</em></span></p>
<a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
</section>
<section class="secao-inicio trabalhos">
<h2>Trabalhos</h2>
<ul>
<li><img src="imagens/bmw.png" alt="Site da BMW"></li>
<li><img src="imagens/ibm.png" alt="Site da IBM"></li>
<li><img src="imagens/uol.png" alt="Site da UOL"></li>
</ul>
<a class="botao-index" href="portfolio.html">Veja mais</a>
</section>
<section class="secao-inicio blog">
<h2>Blog</h2>
<small>Últimos posts</small>
<ol>
<li class="mais-recente">
<a href="blog.html">O essencial de design responsivo</a>
<p class="inicio-post">
Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
</p>
</li>
<li>
<a href="blog.html">Por que fazer páginas acessíveis?</a>
</li>
<li>
<a href="blog.html">JavaScript não obstrusivo</a>
</li>
</ol>
<a class="botao-index" href="blog.html">Veja mais</a>
</section>
</main>
<footer>
<h2>Vamos conversar?</h2>
<p>Você pode entrar em contato comigo <a href="contato.html">por e-mail</a> ou pelo telefone <a href="tel:+551234567890">(12) 3456-7890</a></p>
</footer>
</body>
</html>Márcia, acredito que vc tem que mudar os valores do top, left e etc que acompanham o position:absolute.
Por exemplo, os valores que estão agora em % podem ser muito altos e isso quebrar o layout, tente mudar esses valores.
Provavel que vc precise de uma media query para resolver isso. Vc chegou a ver? É um código mais ou menos no seguinte formado.
@media(max-width: 300px) {
/* código css aqui para dispositivos menores do que 300px */
}
Alguém conseguiu resolver esse problema realmente? as porcentagens exatas?