Alguem me ajuda ai

Bootstrap

HTML5

CSS3

Front-end

28/08/2019

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Romulo Lessa</title>
</head>
<body>
    <div class="painel">
        <!-- texto principal nível 1 -->
        <img id="imagem" src="img/codigo_de_programacao_fundo.jpg" alt="imagem de codigo para fundo">
        <h1>Romulo Lessa</h1>
        <img id="perfil" src="https://scontent.fsdu8-1.fna.fbcdn.net/v/t1.0-9/14731123_1225965720760309_5976373550744053717_n.jpg?_nc_cat=111&_nc_oc=AQnEWUWfwHqL3mSFoav9ARMdhVu7d8Y6Oz0YLcEZKbwg42tcCJj6_kQ9ZYODOmyOfoMXqh9fUriuJAzjY-L92nPV&_nc_ht=scontent.fsdu8-1.fna&oh=f34a910ae0ee6ce4cc64c8ed5d2da45d&oe=5E045686" alt="foto do perfil">
        <p>Desenvolvedor front-end</p>
    </div>    
    <div id="menu">
        <!--menu lateral -->
        <a href="#Sobre_min">Sobre min|</a>
        <a href="#Conhecimento">Conhecimento |</a>
        <a href="#Projetos">Projetos</a>
    </div>

    <div id="sobre">
        <!-- texto principal nível 2 -->
        <h2 id="Sobre_min">Sobre min</h2> 

        <!--paragrafo-->
        <p>Me chamo Romulo de Almeida Lessa, sou morador do Rio de Janeiro no endereço 
        avenida lúcio costa 3200-casa28- barra da tijuca, estudante do ensino superior da 
        faculdade universidade do grande rio- UNIGRANRIO estou atualmente no 3 período com 
        previsão de formatura no 2 semestre de 2020, tenho conhecimento intermediário em 
        html, css, javascript e java, iniciante nos ES6, git, sass e react</p>
    </div>
    <div class="conhecimento">

        <!--texto principal nível 2 -->
        <h2 id="Conhecimento">Conhecimento</h2>
        <!--Lista de 8 itens -->
        <ul>
        

            <li>Html
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 80%;" 
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div>
                </div>
            </li><!--barra de porcentagem-->
            <li>Css
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 40%;" 
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">40%</div>
                </div>
            </li><!--barra de porcentagem-->
            <li>Javascript
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 40%;" 
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">40%</div>
                </div>
            </li><!--barra de porcentagem-->
            <li>Java
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 30%;" 
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">30%</div>
                </div>
            </li><!--barra de porcentagem-->
            <li>ES6
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 30%;" 
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">30%</div>
                </div>
            </li><!--barra de porcentagem-->
            <li>Git
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 50%;" 
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">50%</div>
                </div>
            </li><!--barra de porcentagem-->
            <li>Sass
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 10%;" 
                    aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">10%</div>
                </div>
            </li><!--barra de porcentagem-->
            <li>React
                    <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 10%;" 
                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">10%</div>
                        </div>
            </li><!--barra de porcentagem-->
        </ul>

    </div>
    <div id="projetos">
        <!-- texto principal nível 2-->
        <h2 id="Projetos">Projetos</h2>

        <!-- texto principal nível 3-->
        <h3>Concluídos</h3>
        <p>Semana Omnistack em breve link </p>

        <!-- texto principal nível 2-->
        <h3>Andamento</h3>
        <p>Meu site/ portifolio em breve link</p>
        <p>Pwa Abito21 em breve link</p>

        <!-- texto principal nível 2-->
        <h3>Futuros</h3>
        <p>Pwa Ravenna</p>
    </div>
</body>
</html>


body{
    color: black;
    background-color: rgba(221, 212, 212, 0.877);
    padding: 10px;
}
.painel #perfil{
    border-radius: 50%;
    text-align: center;
    width: 50%;
}
.painel #imagem{
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
    -webkit-filter: blur(4px);
}
.painel p, h1, #perfil{
    color: rgb(248, 228, 228);
    text-align: center;
    position: sticky;
}
.painel{
    color: azure;
    width: 90%;
    margin: 0 auto;
    position: relative;
}
#menu{
    text-align: center;
    margin-top: 25px;
}
#menu a{
    text-decoration: none;
    color: black;
}
#menu a:hover{
    color: gray;
}
.nav{
    text-align: center;
}
.conhecimento li{
    list-style-type: none;
}

ja botei assim e nao funcionou nao sei pq
.painel #perfil{
border-radius: 50%;
text-align: center;
width: 50%;
}
Romulo Lessa

Romulo Lessa

Curtidas 0

Respostas

Alex William

Alex William

28/08/2019

Olá, amigo. Tudo bem?
Se você pudesse descrever o que você esta com dificuldade, ajudaria pois apenas com seu código não da pra saber como você gostaria que o código se comportasse.

Obrigado. :D
GOSTEI 0
Romulo Lessa

Romulo Lessa

28/08/2019

Olá, amigo. Tudo bem?
Se você pudesse descrever o que você esta com dificuldade, ajudaria pois apenas com seu código não da pra saber como você gostaria que o código se comportasse.

Obrigado. :D


<div class="painel">
<!-- texto principal nível 1 -->
<img id="imagem" src="img/codigo_de_programacao_fundo.jpg" alt="imagem de codigo para fundo">
<h1>Romulo Lessa</h1>
<img id="perfil" src="https://scontent.fsdu8-1.fna.fbcdn.net/v/t1.0-9/14731123_1225965720760309_5976373550744053717_n.jpg?_nc_cat=111&_nc_oc=AQnEWUWfwHqL3mSFoav9ARMdhVu7d8Y6Oz0YLcEZKbwg42tcCJj6_kQ9ZYODOmyOfoMXqh9fUriuJAzjY-L92nPV&_nc_ht=scontent.fsdu8-1.fna&oh=f34a910ae0ee6ce4cc64c8ed5d2da45d&oe=5E045686" alt="foto do perfil">
<p>Desenvolvedor front-end</p>
</div>
estou com problema nessa parte ai, eu nao to conseguindo centralizar a img perfil nao sei pq
GOSTEI 0
Alex William

Alex William

28/08/2019

Olá, amigo.

Você esta usando a propriedade "text-align", já tentou usar somente "align" na div?

Este material pode te dar uma ajuda.

https://www.w3schools.com/css/css_align.asp

Espero ter ajudado. :D
GOSTEI 0
Murilo Viscondi

Murilo Viscondi

28/08/2019

Se ainda não consegui resolver o seu problema, e se eu entendi o seu problema, testa aplicar o "text-align: center" na div (.painel) em vez da id (#perfil)
GOSTEI 0
POSTAR