Tag de paragrafo não funciona na pagina!

Front-end
#1

bom eu queria fazer com que uma letra ou numero aparecesse do lado dos meus icones eu tentei mais não ta dando!

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="programador.png">
    <link rel="stylesheet" href="style.css">
    <title>Geovane-dev-front-end</title>
</head>

<body>
    <header>
        <div class="cabeçalho">
            <h1 id="about">About</h1>
            <nav>

                <ul>
                    <div class="listas">
                        <li class="primeiro"><a href="#about">About</a></li>
                        <li class="segundo"><a href="#projetos">Projetos</a></li>
                        <li class="terceiro"><a href="#contato">Contato</a></li>
                    </div>
                </ul>

            </nav>
        </div>
    </header>
    <main>

        <div class="sobre-mim">
            <img src="foto.png">
            <p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
                e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
        </div>


        <h2 id="projetos">Projetos</h2>
        <p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>


        <h3>Contato</h3>

        <nav>
            <ul>


                <div id="contato" class="social-midia">
                    <div class="container">
                        <div class="box">
                            <li class="whatsapp">
                                <a href="https://web.whatsapp.com/"><img src="whatsapp.png.png" class="whatsapp-a"></a>
                            </li>
                            <p>sdfghj</p>
                        </div>
                        <div class="box">
                            <li class="linkedin">
                                <a href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png.png" class="linkedin-a"></a>
                            </li>
                        </div>

                    </div>

            </ul>
        </nav>



    </main>
    <footer>

    </footer>

</body>

</html>

body {
    background-color: #e6e6e6;
}

.cabeçalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

img {
    margin: 143px 1143px;
    position: absolute;
    width: 423px;
}

li {
    display: inline-block;
    margin: 8px;
    font-size: 36px;
}

.quem-sou {
    margin: 288px 22px;
    position: relative;
    font-size: 25px;
}

.p-projetos {
    margin: 901px -65px;
    font-size: 28px;
}

main {
    display: flex;
}

a {
    color: black;
}

.listas {
    margin: 8px;
}

h1 {
    margin: 46px 69px;
    font-size: 60px;
}

h2 {
    margin: 768px -299px;
    font-size: 60px;
}

h3 {
    margin: 996px -312px;
    font-size: 60px;
    align-items: center;
}

.primeiro :hover {
    font-size: 29px;
}

.segundo :hover {
    font-size: 29px;
}

.terceiro :hover {
    font-size: 29px;
}

.whatsapp {
    margin: 9px 458px;
}

.linkedin {
    margin: 9px 8px;
}

.social-midia {
    position: absolute;
    margin: 909px -1864px;
}

.container {
    display: flex;
    justify-content: space-between;
}

.box {
    height: 100px;
    background-color: black;
    width: 200px;
}

.whatsapp-a {
    margin: 187px 1545px;
    width: 69px;
}

.linkedin-a {
    margin: 187px 1690px;
    width: 69px;
}

p {
    color: black;
}

Captura%20de%20tela%202021-05-15%20215454
Captura de tela 2021-05-15 215454.png752×286 14.3 KB

#2

se alquem puder me ajudar eu agradeço!

#3

O que você quer dizer com "colocar uma letra ou “número ao lado dos meus ícones” ? Pode fornecer uma imagem de exemplo (montado no paint mesmo, se for mais fácil)?

Pra facilitar a visualização, você pode também colocar seu código em um serviço como o https://jsfiddle.net/ , e colocar o link gerado aqui. Assim, a gente pode ver o resultado do html+css .

Abraço.

#4

É que eu já tenho os ícones, mais eu queria colocar o número do lado do ícone whatsapp pra pessoa saber qual é o número, bom isso é um ícone da área de contato do portifólio só que eu coloco a tag img dentro da TAG p e não acontece nada eu achei que era porque o fundo da minha página é cinza mais eu coloquei a propriedade color Black no CSS na TAG p, e não funciona!

#5

Por que a div .social-midia está com margem negativa? O que espera obter com isso?

.social-midia {
    position: absolute;
    margin: 909px -1864px;
}

Isso está posicionando os elementos dessa div fora da página. As imagens que você está usando aparecem porque você ajusta as margens e as traz de volta pra área visível, mas o p fica de fora.

Além disso, quando você usa ul, é o ideal que os elementos dentro sejam li, não divs e outros elementos. Tente sempre seguir a hierarquia desses elementos.

Sugiro dar uma repensada no layout dessa área de contato. Adicione os elementos na ordem em que deveriam aparecer e só depois parta para ajustar o css. Por exemplo, simplesmente colocando o p após a div com a imagem do whats já deve exibir o p na posição que você deseja, e a partir daí é só ajuste.

Abraço.

2 curtidas
#6

desculpe a demora para responder mais é que fiz o que você disse, mais agora estou enfrentando outro problema, veja que quando eu coloco o icone, ele sobe para área de cabeçalho e não faz nenhum sentido, sendo que eu coloquei organizado no html em baixo do contato!

Geovane-dev-front-end

About

            <ul>
                <div class="listas">
                    <li class="primeiro"><a href="#about">About</a></li>
                    <li class="segundo"><a href="#projetos">Projetos</a></li>
                    <li class="terceiro"><a href="#contato">Contato</a></li>
                </div>
            </ul>

        </nav>
    </div>
</header>
<main>

    <div class="sobre-mim">
        <img src="foto.png" class="foto">
        <p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na área
            e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
    </div>


    <h2 id="projetos">Projetos</h2>
    <p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>


    <h3>Contato</h3>
    <nav>
        <a><img src="linkedin.png.png" alt="" class="icone-linkedin"></a>
    </nav>




</main>
<footer>

</footer>
`body { background-color: #e6e6e6; }

.cabeçalho {
display: flex;
align-items: center;
justify-content: space-between;
}

.foto {
margin: 143px 903px;
position: absolute;
width: 423px;
}

li {
display: inline-block;
margin: 8px;
font-size: 36px;
}

.quem-sou {
margin: 288px 22px;
position: relative;
font-size: 25px;
}

.p-projetos {
margin: 901px -65px;
font-size: 28px;
}

main {
display: flex;
}

a {
color: black;
}

.listas {
margin: 8px;
}

h1 {
margin: 46px 69px;
font-size: 60px;
}

h2 {
margin: 768px -299px;
font-size: 60px;
}

h3 {
margin: 996px -312px;
font-size: 60px;
align-items: center;
}

.primeiro :hover {
font-size: 29px;
}

.segundo :hover {
font-size: 29px;
}

.terceiro :hover {
font-size: 29px;
}

.icone-linkedin {
display: flex;
align-items: center;
}

Captura%20de%20tela%202021-05-18%20215916
Captura de tela 2021-05-18 215916.png1366×768 221 KB
`

#7

Coloque o código completo dessa página (o html e o css) no jsfiddle.net, pois fica mais fácil de a gente ver o resultado.

E, novamente, você está usando uns números estranhos nas margens (tanto valores altos quanto valores negativos). Que espera obter com isso? Se está usando a margem para tentar posicionar os elementos, não vai funcionar do jeito que você espera, ainda mais que você está usando valores fixos em px.

Tente montar primeiro toda a parte html, delimitando corretamente as seções verticais (que, pelo que entendi, são cabeçalho, corpo e rodapé), e só depois parta para ajustar o css.

Abraço.

#8

https://codepen.io/geovane10/pen/OJpbqmW

#9

esse é um code pen que eu criei