2
respostas

Dúvida no Exercício 06 - Palavras-chave na página inicial - Como o do Rafael

Assim, como a mesma dúvida do Rafael, para que a minha página ficasse igual a do instrutor foi necessário que eu à deixasse o código css da seguinte maneira,]

E para mim sem a declaração: li , não funciona, fica tudo sobre-posto. Ainda coloquei font-size: 0.5em, para o tamanho da fonte não ficar muito grande, mais parecido com o proposto no exercício.

Meu Código: (`)

No Index.html: `

Foto de João da Silva

João da Silva

Desenvolvedor web

  • Eficiência
  • Boas-práticas
  • Código-limpo
  • CSS3
  • HTML5
  • JavaScript
  • Acessibilidade
  • Responsivo
  • Otimizações
  • Agilidade
  • Design

No Index.css:

.foto-home { height: 200px; }

.inicio-post { color: #000; background-color: #FFF; position: absolute; top: 1em; right: 1.5em; height: 6em; padding: 1em; }

.subtitulo-principal{ font-size: 0.3em; text-align: center; }

.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; }

.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-shadow: 2px 2px #000; 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; color: #FFF; border-bottom: .5em solid #851944; position: relative; }

.blog small { position: relative; top: -2em; }

.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; }

footer a { color: #F99; }

main { width: 100%; padding-bottom: 0; float: none; }

header{ position: relative; }

.palavra-home li { position: absolute; font-family: "Shadows Into Light", cursive; font-size: 0.5em; font-weight: bold; color: #D5447E; }

.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%; } `

(`)

2 respostas

Fala aí Paulo, tudo bem? Qual seria essa dúvida do Rafael? Consegue me passar mais detalhes sobre o problema, se possível, também cole o código HTML e CSS completo para eu simular o problema.

Fico no aguardo.

Assim, como a mesma dúvida do Rafael, para que a minha página ficasse igual a do instrutor foi necessário que eu à deixasse o código css da seguinte maneira,]

E para mim sem a declaração: li , não funciona, fica tudo sobre-posto. Ainda coloquei font-size: 0.5em, para o tamanho da fonte não ficar muito grande, mais parecido com o proposto no exercício.

Index.html
 <header class="titulo-principal">
        <img class="foto-home" src="img/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>
    </header>

index.css
.foto-home {
    height: 200px;
}

.inicio-post {
  color: #000;  
  background-color: #FFF;
  position: absolute;
  top: 1em;
  right: 1.5em;
  height: 6em;
  padding: 1em;
}

.subtitulo-principal{
    font-size: 0.3em;
    text-align: center;
}

.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;
}

.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-shadow: 2px 2px #000;
    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;
    color: #FFF;
    border-bottom: .5em solid #851944;
    position: relative;
}

.blog small {
    position: relative;
    top: -2em;
}

.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;
}

footer a {
    color: #F99;
}

main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}

header{
    position: relative;
}

.palavra-home li {
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-size: 0.5em;
    font-weight: bold;
    color: #D5447E;
}

.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%;
}