Fórum Quando coloco uma imagem, o tamanho da página aumenta. #622442

29/08/2024

0

CSS HTML5

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
*{
   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

Orlando Namba

Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar