Quando coloco uma imagem, o tamanho da página aumenta.
Eae galerinha, beleza?
To dando uma curiada em HTML e CSS, para futuramente fazer um portfólio para mim.
Dividi meu site em 5 páginas (de rolagem), quando cheguei na parte que seria o sobre mim, quando coloco a imagem que eu quero, o tamanho da página aumenta. Mesmo eu colocando a imagem em um lugar que ao meu ver não deveria atrapalhar.
Vou deixar abaixo o código HTML e CSS.
To dando uma curiada em HTML e CSS, para futuramente fazer um portfólio para mim.
Dividi meu site em 5 páginas (de rolagem), quando cheguei na parte que seria o sobre mim, quando coloco a imagem que eu quero, o tamanho da página aumenta. Mesmo eu colocando a imagem em um lugar que ao meu ver não deveria atrapalhar.
Vou deixar abaixo o código HTML e CSS.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>Portfólio | Orlando Namba - Desenvolvedor Full-Stack</title>
</head>
<body>
<header>
<div class="center">
<div class="logo">onamba.</div>
<div class="menu">
<a href="" target="_blank">Inicio</a>
<a href="" target="_blank">Sobre Mim</a>
<a href="" target="_blank">Habilidades</a>
<a href="" target="_blank">Projetos</a>
<a href="" target="_blank">Contato</a>
</div>
</div>
</header>
<div class="social-midia">
<a href=""><img src="/img/icon-LinkedIn.png"></a>
<a href=""><img src="/img/icon-GitHub.png"></a>
<a href=""><img src="/img/icon-Instagram.png"></a>
</div>
<main>
<section class="page1">
<div class="center">
<div class="texto-apresentacao">
<h1>Seja Bem Vindo!<br>Meu nome é Orlando Namba <br>Sou Desenvolvededor tananana</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae libero alias sequi maiores cumque est natus repudiandae laudantium temporibus ut ducimus, eveniet molestiae consequuntur? Eveniet enim atque reprehenderit deserunt earum.</span><span><br>dsa dasdasdasds ds<span
style="color: coral;">Python, Java, SQL,
HTML, CSS e JavaScript</span>. Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis impedit cupiditate illum cumque ut delectus aut et fugiat odit iure, asperiores, labore quos modi voluptatibus nobis ex beatae eaque molestiae?<br></span></p>
<button>Serviços Oferecidos</button>
</div>
</div>
</section>
<section class="page2">
<div class="center">
<div class="texto-sobre-mim">
<h2>Sobre Mim</h2>
<p>
<span class="paragrafo1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem aut a
asperiores incidunt, animi delectus eveniet illo pariatur, ab reiciendis obcaecati, quasi ad
deserunt necessitatibus quia. Dolorum error quos nesciunt.<br><br></span>
<span class="paragrafo2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem aut a
asperiores incidunt, animi delectus eveniet illo pariatur, ab reiciendis obcaecati, quasi ad
deserunt necessitatibus quia. Dolorum error quos nesciunt.<br><br></span>
<span class="paragrafo3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem aut a
asperiores incidunt, animi delectus eveniet illo pariatur, ab reiciendis obcaecati, quasi ad
deserunt necessitatibus quia. Dolorum error quos nesciunt.<br><br>
</span>
</p>
<div class="minha-foto">
<img class="calleri" src="img/calleri.png">
</div>
</div>
</div>
</section>
<section class="page3">
<div class="center">
<div class="texto-habilidades">
<h2>Minhas Habilidades</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque recusandae error enim ipsam ullam
vel minus, est iusto iure, voluptate qui inventore soluta natus ducimus quos assumenda illo
deleniti harum!
</p>
</div>
</div>
</section>
<section class="page4">
<div class="center">
<div class="projetos">
<img src="/img/github_logo.png">
</div>
</div>
</section>
<section class="page5">
<div class="center">
<div class="contato">
#
</div>
</div>
</section>
</main>
<script src="/javascript/scripts.js"></script>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.center{
display: flex;
flex-wrap: wrap;
max-width: 1280px;
margin: 0 auto;
padding: 0 2%;
}
.logo{
width: 50%;
font-size: 30px;
margin-top: 21px;
}
.menu{
width: 50%;
text-align: right;
margin-top: 30px;
}
.menu a{
color: bisque;
text-decoration: none;
font-weight: bold;
margin-right: 15px;
}
.social-midia{
position: absolute;
right: 75px;
top: 110px;
}
.social-midia img{
display: block;
width: 40px;
margin: 30px 0;
}
body{
background-color: black;
color: bisque;
}
section{
display: grid;
place-items: center;
align-items: center;
min-height: 100vh;
}
h2{
text-align: center;
font-size: 50px;
}
p{
font-size: 20px;
}
.page1{
background-color: rgb(0, 0, 0);
}
.texto-apresentacao{
}
.texto-apresentacao h1{
font-size: 50px;
}
.texto-apresentacao p{
margin: 50px 0;
font-size: 20px;
}
.texto-apresentacao button{
border: 0;
background-color: coral;
color: white;
border-radius: 10px;
width: 100px;
height: 50px;
}
.page2{
background-color: rgb(168, 11, 11);
}
.texto-sobre-mim{
border: solid 1px greenyellow;
}
.texto-sobre-mim h2{
margin-top: 30px;
}
.texto-sobre-mim p{
border: solid 1px blanchedalmond;
width: 60%;
margin: 90px 0;
text-align: justify;
position: absolute;
position: relative;
}
.calleri{
border: solid 1px black;
max-width: 350px;
height: 350px;
position: absolute;
position: relative;
right: -770px;
top: -500px;
}
.page3{
background-color: crimson;
}
.page4{
background-color: rgb(57, 20, 220);
}
.page5{
background-color: chocolate;
}
Orlando Namba
Curtidas 0