Я создавал веб-портфолио, я создал раздел приветствия, затем я создал раздел проектов, но раздел проектов появляется за разделом приветствия. Почему это происходит? Я пробовал сделать некоторые элементы в виде блоков, но это не сработало.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: black;
}
a{
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 1% 0.8%;
box-shadow: 0px 2px 10px #888888;
}
.logo{
cursor: pointer;
color: white;
font-family: 'Staatliches';
letter-spacing: 5px;
font-size: larger;
}
.nav-area{
list-style: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 25px;
}
.nav-area li{
display: inline-block;
padding: 0 15px;
text-transform: uppercase;
}
.nav-area li a{
transition: all .3s ease 0s;
color: white;
}
.nav-area li a:hover{
color: rgb(0, 204, 255);
}
.text-container{
color: white;
position: absolute;
left: 13%;
top: 42%;
transform:translate(-13%, -42%);
}
.text-container p:nth-child(1){
font-family: monospace;
font-weight: bold;
font-size: 35px;
}
.text-container p:nth-child(2){
font-family: monospace;
font-weight: bold;
font-size: 70px;
}
.text-container p:nth-child(3){
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 30px;
font-size: 35px;
margin-top: 10px;
}
.model {
height: 650px;
position: absolute;
top: 13%;
left: 70%;
transform: translateX(-70%);
}
.text-container button{
width: 130px;
height: 42px;
border-radius: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: bold;
font-size: 14px;
outline: none;
margin: 20px 10px;
}
.hire-btn{
border: 2px solid grey;
}
.hire-btn{
border: 2px solid grey;
}
button:hover{
transform: scale(1.1);
}
.welcome-section{
display: block;
}
.projects-section{
text-align: center;
padding: 10rem 10rem;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rajdeep Thakare</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet"> </head>
<body>
<header>
<div class="logo"><h1>Rajdeep Thakare</h1></div>
<nav>
<ul class="nav-area">
<li><a href="#">home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<section class="welcome-section">
<div class="text-container">
<p>Hello,</p>
<p>I am Rajdeep</p>
<p>Maker and Hobbyist!!</p>
<button class="hire-btn">Hire Me</button>
<button class="down-btn">Download CV</button>
</div>
<img class="model" src="https://drive.google.com/file/d/12vEKYhBZvpfRXV0aJ1wXmXk59lwplRe0/view?usp=sharing" alt="my photo">
</section>
<section class="projects-section">
<div>
<h1>MY PROJECTS</h1>
</div>
</section>
</body>
</html>
Кодовая ссылка - https://codepen.io/Rajdeep100/pen/WNQqoGQ?editors=1100