Pessoal, boa noite.
Não consegui fazer funcionar
}
display: inline;
}me ajudem, sou novato na área ainda.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Pessoal, boa noite.
Não consegui fazer funcionar
}
display: inline;
}me ajudem, sou novato na área ainda.
Olá Felipe! Poste seu código completo aqui pra gente dar uma olhada.
Primeiro eu fiz assim:
body{
background-color: #F2FFFC;
font-family: "Crimson Text", serif;
font-size: 120%;
line-height: 1.5;
}
main h1, main h2{
font-family: "Open Sans Condensed", sans-serif;
}
main h1{
font-size: 60px;
background-color: #851944;
color: #F2FFFC;
text-align: center;
padding: 25px;
margin: 0;
border-bottom: 10px solid #000;
}
main h2{
font-size: 40px;
}
p{
text-align: justify;
margin: 20px 0;
}
blockquote {
background-color: #D9E5E3;
border: 10px solid #C2CCCA;
width: 250px;
margin: 20px 40px;
box-sizing: border-box;
}
aside{
background-color: #3C1D3D;
color: #F2FFFC;
}
footer{
background-color: #000;
color: #FFF;
margin: 0;
}
nav a{
color: #F2FFFC;
}
main a {
color: #851944;
}
blockquote, aside, footer {
padding: 20px;
}
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
text-decoration: none;
}
aside h1 {
font-size: 30px;
margin-bottom: 25px;
}
.icones-sociais li{
display: inline-block;
}
strong{
font-weight: bold;
}
em{
font-style: italic;
}
h2{
font-size: 30px;
}
body{
display: inline;
}E depois eu fiz assim:
body{
background-color: #F2FFFC;
font-family: "Crimson Text", serif;
font-size: 120%;
line-height: 1.5;
display: inline;
}
main h1, main h2{
font-family: "Open Sans Condensed", sans-serif;
}
main h1{
font-size: 60px;
background-color: #851944;
color: #F2FFFC;
text-align: center;
padding: 25px;
margin: 0;
border-bottom: 10px solid #000;
}
main h2{
font-size: 40px;
}
p{
text-align: justify;
margin: 20px 0;
}
blockquote {
background-color: #D9E5E3;
border: 10px solid #C2CCCA;
width: 250px;
margin: 20px 40px;
box-sizing: border-box;
}
aside{
background-color: #3C1D3D;
color: #F2FFFC;
}
footer{
background-color: #000;
color: #FFF;
margin: 0;
}
nav a{
color: #F2FFFC;
}
main a {
color: #851944;
}
blockquote, aside, footer {
padding: 20px;
}
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
text-decoration: none;
}
aside h1 {
font-size: 30px;
margin-bottom: 25px;
}
.icones-sociais li{
display: inline-block;
}
strong{
font-weight: bold;
}
em{
font-style: italic;
}
h2{
font-size: 30px;
}
Felipe, coloque seu HTML também.
<!DOCTYPE html>
<html>
<head>
<title>Biografia - João da Silva</title>
<meta charset="utf-8">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.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">
</head>
<body>
<main>
<h1>Sobre mim</h1>
<div>
<p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>
<p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de <strong>acessibilidade</strong>, <strong>responsividade</strong> e <strong>web semântica</strong>, sem descuidar da qualidade de código.</p>
<h2>Como trabalho</h2>
<blockquote>
<p>João é o melhor desenvolvidor front-end com que já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
<cite>José Souza, Fiat</cite>
</blockquote>
<p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: <strong>o cliente é que decide quando o produto está pronto.</strong></p>
<p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada.</strong></p>
<h2>Experiência</h2>
<blockquote>
<p>João domina as tecnologias como ninguém. eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
<cite>Manoel Santos, Petrobrás</cite>
</blockquote>
<p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
<p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>
<h2>Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portifolio.html">diversas palestras</a> e mantenho um <a href="blog.html">blog.</a></p>
</div>
</main>
<img src="eu.jpg" alt="Foto de João da Silva">
<aside>
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portifolio.html">Portifólio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-sociais">
<li><a href="http://github.com/joãodasilva"><img src="github.png" alt="Github"></a></li>
<li><a href="http://twitter.com/joãodasilva"><img src="twitter.png" alt="Twitter"></a></li>
<li><a href="http://linkedin.com/joãodasilva"><img src="linkedin.png" alt="Linkedin"></a></li>
</ul>
</aside>
<footer class="com-borda">
© João da Silva 2014
</footer>
</body>
</html>
Felipe, testei aqui e está tudo ok, esta é a página neste estágio do curso mesmo. Seus dois arquivos CSS são iguais, você apenas colocou dois seletores para a tag body. A que exatamente você se refere quando diz Não deu certo?
Que no resultado do exercício fala que quando adicionarmos
{
display=inline;
}todo o texto tinha que ficar na mesma linha, e não ficou, também não tinha exemplo de como deveria ficar na tela pra mim, mais segundo o professor iria ficar tudo na mesma linha e não em blocos.
Entendi agora, na verdade está faltando um seletor no seu código, é o asterisco (*). Ele é o seletor universal, pega todos os elementos da página. Testa aí:
* {
display=inline;
}Você colocou essa propriedade no body mas era para colocar através do asterisco (*).
Mas este exercício é somente um teste para visualizarmos como fica a página se colocarmos em toda ela display: inline. Testa e já tira pois não será utilizada no decorrer do curso.
Abraços!
André muito obrigado pelo o tempo e pela paciência, para mim esse * não era de importância, era apenas para eu adivinhar em qual tag colocar o código.
Obrigado.