Fiz os procedimentos que foram instríudos para ela mas não resolveu
Solucionado
Fiz os procedimentos que foram instríudos para ela mas não resolveu
<!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 class="palavra-home">
<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><!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 class="palavra-home">
<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>.foto-home {
height: 200px;
}
.saudacao p {
font-size: 1.5em;
color: #99A;
line-height: 1;
padding: 2em;
}
.saudacao-inicio {
font-size: 3em;
color: #889;
}
.saudacao-ultima-linha {
text-align: right;
display: block;
}
.saudacao strong {
font-size: 2em;
color: #000;
}
.saudacao em {
color: #851944;
font-size: 4em;
transform: rotate(-5deg) skew(-10deg);
display: inline-block;
}
.botao-index {
font-size: 1.25em;
background-color: #851944;
color: #FFF;
padding: .5em;
border: .2em solid black;
width: 40ch;
margin: 2em auto;
display: block;
text-align: center;
}
.secao-inicio {
padding: 2em;
}
.secao-inicio h2 {
font-size: 3em;
text-transform: uppercase;
margin-bottom: .5em;
}
.trabalhos {
background-color: #3C1D3D;
border-top: .5em solid #000;
border-bottom: .5em solid #000;
}
.trabalhos h2 {
color: #FFF;
}
.trabalhos ul {
overflow: hidden;
border: .5em solid black;
}
.trabalhos li {
float: left;
width: 33.333%;
}
.trabalhos img {
width: 100%;
display: block;
}
.blog {
background-color: #999;
position: relative;
color: #FFF;
border-bottom: .5em solid #851944;
}
.blog small {
position: relative;
top: -2em;
}
.blog li {
width: 30%;
}
.blog li a {
color: #FCF;
padding: .5em;
display: block;
}
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;
}
.palavra-home {
font-family: "Shadows Into Light", cursive;
font-weight: bold;
color: #D5447E;
perspective: 6px;
position: absolute;
}
/*Corrigir bug do palavra na perspectiva*/
.titulo-principal ul {
perspective: 18px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*Fim*/
.palavras-home li {
font-size: 400%;
}
.eficiencia {
top: 50%;
left: 60%;
transform: translate(-50%,-50%) rotate(-5deg) translateZ(4px);
}
.boas-praticas {
top: 70%;
left: 20%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
}
.codigo-limpo {
top: 45%;
left: 25%;
transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px);
}
.css3 {
top: 55%;
left: 35%;
transform: translate(-50%, -50%) rotate(5deg) translateZ(2px);
}
.html5 {
top: 30%;
left: 65%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);
}
.javascript {
top: 15%;
left: 60%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px) scale(0.25);
}
.acessibilidade {
top: 30%;
left: 35%;
transform: translate(-50%,-50%) rotate(-5deg) translateZ(3px);
}
.responsivo {
top: 40%;
left: 40%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(3px);
}
.otimizacoes {
top: 70%;
left: 65%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px);
}
.agilidade {
top: 75%;
left: 35%;
transform: translate(-50%, -50%) rotate(5deg) translateZ(1px);
}
.design {
top: 40%;
left: 60%;
-webkit-transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}
.banner-twitter {
width: 14em;
line-height: 1;
padding: 1em 0;
box-sizing: border-box;
text-align: center;
text-decoration: none;
background-color: #3C1D3D;
color: white;
border: .25em solid black;
font-size: 1.2em;
font-family: "Open Sans Condensed", sans-serif;
position: absolute;
top: 0;
right: 0;
transform-origin: 0 0;
transform: translate(6.5754em, -2.4749em) rotate(45deg);
}
.titulo-principal {
position: relative;
}
.blog .inicio-post {
position: absolute;
top: 4em;
height: 8em;
left: 30%;
right: 4em;
background-color: #F2FFFC;
color: #000;
padding: 1.5em;
}
.blog .mais-recente {
background-color: #F2FFFC;
}
.blog .mais-recente a {
color: #F26;
}As fontes ficam muito pequenas. É sobre o exercício de como aumentar a qualidade das fontes.
Boa tarde, Márcia! Tudo bem? =)
Eu testei seu código aqui e achei uma coisa estranha... Rs... Para você as palavras estão aparecendo pequenas?! Aqui estão gigantes! Rs.
Para mim elas estão grandes, pois você não aplicou o scale(0.25) em todas as palavras, apenas no "HTML5" e "JavaScript"...
Qual browser você está utilizando?
Fábio
Testei no Chrome, IE e Firefox. Não apliquei em todas porque elas estão ficando muito pequenas. Coloquei o font-size 400% conforme recomendado no exercício para diminuir no scale, por isto que elas estão gigantes. Apliquei o scale somente no Javascript e no HTML% e elas ficaram minúsculas.
html5
Márcia,
Acho que pode estar relacionado com a resolução do seu monitor. Saberia me dizer qual é a resolução? Aqui eu estou usando 1920x1080 e está ótimo. Tente usar um scale() diferente, como 0.5. =)
Fábio
A resolução máxima é de 1600x900. Tem como eu mandar um print?
Márcia,
Infelizmente não é possível adicionar imagem aqui. O que muitas pessoas fazem é tirar print e colocar a imagem em algum outro lugar, depois mandar o link aqui...
Fábio
Não entendo. Sou deu certo com scale (1.0). Isto não vai dar problema pra mim em outros dispositivos?
Márcia,
scale(1.0)?! Que estranho...
Você pode ter uma ideia de como o site ficará ao ser usado em outras resoluções... Para isso, usando o Chrome, aperte F12 e, em seguida, CTRL + SHIFT + M. Aí você pode redimensionar e verificar o resultado...
Fábio
Eu não tenho como publicar o print aqui, pois é órgão público.
Márcia,
A única coisa que consigo pensar agora é na possibilidade de cache do navegador. Quando for fazer um refresh na página, opte por utilizar CTRL + SHIFT + R (hard refresh). Ele vai forçar uma requisição do browser, para não pegar do cache. Essa é uma possibilidade...
Se com valor 1.0 estiver funcionando para você, sugiro que de continuidade aos exercícios... Se tiver qualquer dúvida, mande aqui para a gente tentar resolver. =)
Ahh, só mais uma coisa, qual versão do Chrome você está utilizando? Isso também pode impactar... Tente utilizar os prefixos nas propriedades, assim:
-webkit-transform: // Valores da propriedade...
-moz-transform: // Valores da propriedade...
transform: // Valores da propriedade...Espero ter ajudado,
Fábio
Versão 55.0.2883.87 m
Testei e o único problema que percebi é que algumas palavras estão sobrepondo a foto. Eu já tinha percebido isto no módulo anterior, mas achei que a medida que o curso evoluísse, isto acabaria sendo corrigido.
Testei com o scale que te falei 1.0. Deu certo
Fábio,
Pesquisando as mesmas dúvidas de outros alunos, descobri que na verdade o exercício está induzindo ao erro, pois manda colocar o font-size de 400% no seletor errado. Ele manda colocar em ".palavra-home li" quando na verdade tem que ser colocado só na "palavra-home". Fiz o teste e deu certo. Melhor corrigir o exercício lá. Segue o trecho certo:
.palavra-home {
font-family: "Shadows Into Light", cursive;
font-weight: bold;
color: #D5447E;
perspective: 6px;
position: absolute;
font-size: 400%;
}
Márcia,
Toma cuidado com o nome das classes... Rs...
O exercício pede para você colocar em .palavras-home li, ao invés de .palavra-home li (não no singular). =)
Sendo assim, as <li>s filhas de .palavras-home são os elementos com a classe palavra-home. São apenas duas formas de escrever o seletor que buscará os mesmos elementos. =)
Essa foi justamente a primeira coisa que eu verifiquei no seu CSS, mas estava correto... O que eu não me atentei é que o erro está no seu HTML!
Ele está assim:
<ul class="palavra-home">
<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>Mas o correto é que o <ul> tenha a classe palavras-home, assim:
<ul class="palavras-home">
<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>Eu nem tinha visto seu HTML, desculpa! Agora deve funcionar corretamente! =)
Abraço e bons estudos,
Fábio
Fábio,
Eu baixei o código de vocês com a classe .palavra-home. A resposta do instrutor é que coloca .palavras-home. De qualquer maneira a resposta do exercício está errado, porque eu copiei a resposta do instrutor sem verificar que estava diferente do código fonte. De qualquer maneira tem que corrigir lá. Me desculpa pelo trantorno. Obrigada.
Márcia,
Bem justo! Obrigado pela observação e fique tranquila com relação aos problemas. =)
Em breve arrumaremos esse problema. =)
Obrigado e bons estudos,
Fábio