Solucionado
Olá pessoal,
Estou fazendo a atividade e ficou similar ao exemplo. Minha dúvida é quanto ao ZOOM, quando o deixo maior que 200%, algumas palavras (palavra-home), ficam sobre a imagem. Observei que a imagem esta com 200px, tentei fazer algumas alterações mas não consegui um bom resultado.
O que é utilizado para tratar estas mudanças no browser?
Edir
Poste seu código
Index.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
Index.css:
.titulo-principal { position: relative; } .palavra-home { position: absolute; color: #D5447E; font-family: "Shadows Into Light", cursive; font-weight: bold; } .eficiencia { top: 15%; left: 75%; } .html5 { top: 29%; left: 78%; } .boas-praticas { top: 40%; left: 17%; } .codigo-limpo { top: 28%; left: 10%; } .css3 { top: 35%; left: 30%; } .javascript { top: 10%; left: 60%; } .acessibilidade { top: 23%; left: 26%; } .responsivo { top: 13%; left: 14%; } .otimizacoes { top: 36%; left: 71%; } .agilidade { top: 10%; left: 32%; } .design { top: 22%; left: 65%; } .foto-home { height: 200px; } .saudacao p { color: #99A; line-height: 1; } .saudacao-inicio { color: #889; text-align: center; font-size: 400%; margin-left: 12rem; } .saudacao-ultima-linha { text-align: right; display: block; margin-right: 12rem; } .saudacao-ultima-linha em { font-size: 400%; } .saudacao strong { color: #000; font-size: 300%; } .saudacao em { color: #851944; } .botao-index { background-color: #851944; color: #FFF; border: .2em solid black; width: 400px; display: block; text-align: center; margin: auto; margin-bottom: 2rem; margin-top: 2rem; } .secao-inicio, footer { padding: 1.5rem; } .secao-inicio h2 { text-transform: uppercase; } .trabalhos { background-color: #3C1D3D; border-top: 10px solid #000; border-bottom: 10px solid #000; } h2 { color: #FFF; margin-bottom: 1.5rem; font-size: 200%; } .trabalhos ul { overflow: hidden; border: 10px solid black; } .trabalhos li { float: left; width: 33.333%; } .trabalhos img { width: 100%; display: block; } .blog { background-color: #999; color: #FFF; border-bottom: 10px solid #851944; position: relative; } .blog small { font-size: 80%; } .blog li { padding: .8rem; width: 30%;} .blog li a { color: #FCF; } .blog .inicio-post { position: absolute; top: 4em; height: 8rem; left: 30%; right: 1.2em; background-color: #F2FFFC; color: #000; padding: 1.5em; box-sizing: border-box; } .blog .mais-recente { background-color: #F2FFFC; } .blog .mais-recente a { color: #F26; } footer { background-color: #000; color: #FFF; } footer a { color: #F99; } main { width: 100%; padding-bottom: 0; float: none; }
Segue novamente, com html legível:
index.html:
<!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 html5">HTML5</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 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>
</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>index.css:
.titulo-principal {
position: relative;
}
.palavra-home {
position: absolute;
color: #D5447E;
font-family: "Shadows Into Light", cursive;
font-weight: bold;
}
.eficiencia {
top: 15%;
left: 75%;
}
.html5 {
top: 29%;
left: 78%;
}
.boas-praticas {
top: 40%;
left: 17%;
}
.codigo-limpo {
top: 28%;
left: 10%;
}
.css3 {
top: 35%;
left: 30%;
}
.javascript {
top: 10%;
left: 60%;
}
.acessibilidade {
top: 23%;
left: 26%;
}
.responsivo {
top: 13%;
left: 14%;
}
.otimizacoes {
top: 36%;
left: 71%;
}
.agilidade {
top: 10%;
left: 32%;
}
.design {
top: 22%;
left: 65%;
}
.foto-home {
height: 200px;
}
.saudacao p {
color: #99A;
line-height: 1;
}
.saudacao-inicio {
color: #889;
text-align: center;
font-size: 400%;
margin-left: 12rem;
}
.saudacao-ultima-linha {
text-align: right;
display: block;
margin-right: 12rem;
}
.saudacao-ultima-linha em {
font-size: 400%;
}
.saudacao strong {
color: #000;
font-size: 300%;
}
.saudacao em {
color: #851944;
}
.botao-index {
background-color: #851944;
color: #FFF;
border: .2em solid black;
width: 400px;
display: block;
text-align: center;
margin: auto;
margin-bottom: 2rem;
margin-top: 2rem;
}
.secao-inicio, footer {
padding: 1.5rem;
}
.secao-inicio h2 {
text-transform: uppercase;
}
.trabalhos {
background-color: #3C1D3D;
border-top: 10px solid #000;
border-bottom: 10px solid #000;
}
h2 {
color: #FFF;
margin-bottom: 1.5rem;
font-size: 200%;
}
.trabalhos ul {
overflow: hidden;
border: 10px solid black;
}
.trabalhos li {
float: left;
width: 33.333%;
}
.trabalhos img {
width: 100%;
display: block;
}
.blog {
background-color: #999;
color: #FFF;
border-bottom: 10px solid #851944;
position: relative;
}
.blog small {
font-size: 80%;
}
.blog li {
padding: .8rem;
width: 30%;
}
.blog li a {
color: #FCF;
}
.blog .inicio-post {
position: absolute;
top: 4em;
height: 8rem;
left: 30%;
right: 1.2em;
background-color: #F2FFFC;
color: #000;
padding: 1.5em;
box-sizing: border-box;
}
.blog .mais-recente {
background-color: #F2FFFC;
}
.blog .mais-recente a {
color: #F26;
}
footer {
background-color: #000;
color: #FFF;
}
footer a {
color: #F99;
}
main {
width: 100%;
padding-bottom: 0;
float: none;
}Com a função calc, consegui resolver...
.blog .inicio-post {
height: calc(15rem - 10%);
}Obrigado pela atenção
Magina não fiz nada kkkk