Quando coloco uma imagem, o tamanho da p�gina aumenta.

29/08/2024

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.

<!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

Curtir t�pico + 0

Responder