My journey with HTML, CSS, and Javascript began as a beginner. After following a tutorial on YouTube and making some modifications, everything was running smoothly until the diary section unexpectedly appeared under the teacher's section, which should be a separate area.
This is the teachers' section (teachers section). However, you can see that the image in the diary section (diary section) is showing up below the teachers' section, overlapping their content.
I suspected that the issue might be related to the section tag. Even after attempting to rewrite the code in the diary section, the problem hasn't been resolved.
Here is the code snippet:
let navbar = document.querySelector('.navbar');
document.querySelector('#menu-btn').oneclick = () => {
navbar.classList.toggle('active');
navbar.classList.remove('active');
searchForm.classList.remove('active');
}
let searchForm = document.querySelector('.search-form');
document.querySelector('#search-btn').oneclick = () => {
searchForm.classList.toggle('active');
navbar.classList.remove('active');
searchForm.classList.remove('active');
}
window.onscroll = () => {
navbar.classList.remove('active');
searchForm.classList.remove('active');
}@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
:root {
--main-color: #04246b;
...
height: 83rem;
}
.teachers .container .adviser img {
float: left;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
...
</body>
</html>