Entrar Ainda não tem acesso?
3
respostas

Ícones aparecem grandes demais e não centraliza

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS

por Rosana
| 53.8k xp | 5 posts
Assistente Operacional II 
<section class="apresentacao__conteudo">
            <h1 class="apresentação__conteudo__titulo">Eleve seu negócio digital a outro 
                nível <strong class="titulo__destaque"> com um Front-end de qualidade!</strong></h1>  
            <p class="apresentacao__conteudo__texto">Olá! Sou Rosana Santana, desenvolvedora Front-end 
                com especialidade em<strong> React, HTML e CSS</strong>. Ajudo pequenos negócios e 
                designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <div class="apresentação__links">
            <h2 class="apresentacao__links__subtitulo">
                Acesse minhas redes:</h2>  
            <a class="apresentacao__links__link" href=
            "https://www.linkedin.com/in/rosanasouzasantanapcd/">
                <img src="./assets/linkedin.png">
                linkedin
            </a>
            <a class="apresentacao__links__link"
             href="https://github.com/Rosanasantana84">
                <img src="./assets/github.png">
                Github
            </a>
        </div>
        </section>
3 respostas
por Renan Cezar Wuicik
| 2954.4k xp | 6074 posts
Instrutor Suporte Educacional Start By Alura

Olá Rosana, tudo bem contigo?

Eu ficaria muito feliz em lhe ajudar e seria um prazer para mim ser útil em seu desenvolvimento, contudo eu irei precisar do seu documento de estilos, ou seja, o documento CSS para que eu possa verificar o que está acontecendo ali e para que eu possa lhe auxiliar de alguma forma, isso visto que com o seu HTML não tem nada de errado aparentemente.

E se possível eu gostaria que você me mandasse em resposta à este post todo o documento HTML, bem como todo o documento CSS, isso para que eu possa analisar o projeto na totalidade e lhe ajudar de uma melhor forma.

Em suma seria isso, aguardo seu retorno e bons estudos.
por Rosana
| 53.8k xp | 5 posts
Assistente Operacional II

INDEX.HTML

<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentação__conteudo__titulo">Eleve seu negócio digital a outro 
                nível <strong class="titulo__destaque"> com um Front-end de qualidade!</strong></h1>  
            <p class="apresentacao__conteudo__texto">Olá! Sou Rosana Santana, desenvolvedora Front-end 
                com especialidade em<strong> React, HTML e CSS</strong>. Ajudo pequenos negócios e 
                designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <div class="apresentação__links">
            <h2 class="apresentacao__links__subtitulo">
                Acesse minhas redes:</h2>  
            <a class="apresentacao__links__link" href="https://www.linkedin.com/in/rosanasouzasantanapcd/">
                <img src="./assets/linkedin.png">
                linkedin
            </a>
            <a class="apresentacao__links__link" href="https://github.com/Rosanasantana84">
                <img src="./assets/github.png">
                Github
            </a>
        </div>
        </section>
        <img src="./assets/Rosana-vestido azul.jpg" alt="Foto Rosana Santana">
    </main>
    <footer class="apresentacao__rodape">Desenvolvido por Rosana Santana</footer>
</body>
</html>

STYLE.CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background-color: #000000;
    color: #F6F6F6;
    box-sizing: border-box;
}

.titulo__destaque {
    color:#22D4FD;
}

.apresentacao {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
 width: 615px;
 display: flex;
 flex-direction: column;
 gap: 40px;
}

.apresentação__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;

}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.apresentação__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo {
    font-family: 'krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.apresentacao__links__link {
   /* background-color: #22D4FD; */
   display: flex;
   justify-content: center;
   gap: 16px;
   border: 2px solid #22D4FD;
   width: 378px;
   text-align: center;
   border-radius: 8px;
   font-size: 24px;
   font-weight: 600;
   padding: 21.5px 0;
   text-decoration: none;
   color: #F6F6F6;
   font-family: 'Montserrat', sans-serif;
}

.apresentacao__links__link:hover {
    background-color: #272727;
    padding: 3%;
}

.apresentacao__rodape {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 24px;
    color: #000000;
    background-color: rgb(230, 227, 244);
}

img {
    position: absolute;
    width: 488px;
    height: 550px;
    left: 1030px;
    top: 0 23.5px ;
}
por Renan Cezar Wuicik
| 2954.4k xp | 6074 posts
Instrutor Suporte Educacional Start By Alura

Olá Rosana, tudo bem contigo?

Primeiramente eu gostaria de agradecer por compartilhar o seu código comigo.

Agora analisando o seu código eu encontrei o problema!

O que gerou problema foi que você usou um seletor absoluto para poder editar as imagens!, acredito que você tentou editar uma imagem só, mas como você colocou o seletor img no CSS, você selecionou TODAS as imagens, portanto quando você quiser colocar estilos somente para uma tag especifica coloque uma classe ou um ID(identificador) nela e chame a classe ou o ID colocado e coloque os estilos que deseja.

Portanto se você analizar o seu código e encontrar essa parte de código:

img {
    position: absolute;
    width: 488px;
    height: 550px;
    left: 1030px;
    top: 0 23.5px ;
}

Apague ela ou a comente dessa forma:

/* img {
    position: absolute;
    width: 488px;
    height: 550px;
    left: 1030px;
    top: 0 23.5px ;
} */

Dessa forma você não terá mais problemas e o resultado será esse:

imagem de um portfólio fictício

  • Em suma seria isso, e caso você queira mudar o tamanho das imagens, ou seja, aumentar o tamanho delas você pode simplesmente adicionar à elas a propriedade width dentro do seletor dela e para aumentar o tamanho você pode colocar mais de 100%, para diminuir é só diminuir o valor.

    OBS: existe momentos que você vai ter que usar a propriedade height também, isso pois as imagens pode vir à ficar "esmagadas" dependendo do valor que você colocar e do tamanho de tela que você usar, portanto seria assim necessário mudar o tamanho do height também, pois ele indica a altura do objeto, já width delimita a largura.

Em suma era isso, caso precise de ajuda adicional eu estarei aqui é só chamar.

Abraços e bons estudos.