Meu site html, css e bootstrap
27/08/2019
0
estou começando a fazer um site e não estou conseguindo centralizar a imagem, alguém pode me ajudar, se tiver algo errado, inútil que possa tirar ou com algum problema pode falar também
<!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>
<!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%;
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;
}
Romulo Lessa
Curtir tópico
+ 0
Responder
Posts
27/08/2019
Romulo Lessa
ja botei assim e nao funcionou
.painel #perfil{
border-radius: 50%;
text-align: center;
width: 50%;
}
.painel #perfil{
border-radius: 50%;
text-align: center;
width: 50%;
}
Responder
08/11/2019
Wilson Santos
Ja faz bastante tempo sua postagem aqui no forum, mas só agora vi ... e seu problema se resolve utilizando da ferramenta flexbox
Retire essa parte do seu CSS:
E adicione esse trecho de codigo
Retire essa parte do seu CSS:
/* .painel p, h1, #perfil {
color: rgb(248, 228, 228);
text-align: center;
background-position: center;
} */
E adicione esse trecho de codigo
.painel {
display: flex;
flex-direction: column;
align-items: center;
}
Responder
Clique aqui para fazer login e interagir na Comunidade :)