I’m still a begginer in html, css, and javascript. I watched a tutorial on youtube and decided to try it, I added a few changes and it’s working fine, until the diary section started to appear on the teachers section, which is completely a different section.
This is the teacher section (teachers section). But as you can see (diary section), the image I put in the diary section is appearing under the teachers section, behind the elements of the teachers section.
This is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEAR ST. LORENZO RUIZ</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header section starts -->
<header class="header">
<a href="#" class="lsclogo">
<img src="images/lsclogo.png" width="8%" height="8%" alt="">
</a>
<nav class="navbar">
<a href="#headstart">headstart</a>
<a href="#background">background</a>
<a href="#students">students</a>
<a href="#teachers">teachers</a>
<a href="#diary">diary</a>
<a href="#memes">memes</a>
<a href="#group">group</a>
</nav>
<div class="icons">
<div class="fas fa-search" id="search-btn"></div>
<div class="fas fa-bars" id="menu-btn"></div>
</div>
</header>
<!-- header section ends -->
<!-- headstart section starts -->
<section class="headstart" id="headstart">
<div class="content">
<h3>Dear St. Lorenzo Ruiz</h3>
<p>Warm greetings from the one and only humble section, 9 St. Lorenzo Ruiz.</p>
</div>
</section>
<!-- headstart section ends -->
<!-- background section starts -->
<section class="background" id="background">
<h1 class="heading"> something <span>about</span> us </h1>
<div class="row">
<div class="image">
<img src="images/about us.jpeg" alt="">
</div>
<div class="content">
<h3>What makes us St. Lorenzo, a Lorenzo?</h3>
<p>Some of us are blessed with inteligence, some of us are artists, musicians, singers, dancers, and many more. And Of course, hindi rin mawawala ang mga pasaway sa room, sometimes called as the geng geng boys ng lorenzo.</p> <br>
<p>Above everything, we are all stil unique in different ways.</p>
</div>
</div>
</section>
<!-- background section ends -->
<!-- students section starts -->
<section class="students" id="students">
<h1 class="heading"> the <span>students</span> of st. lorenzo ruiz </h1>
<div class="row">
<div class="column">
<img src="images/lance.jpg" width="100%" height="100%" alt="">
<h2>Acoba, Lance Julian</h2>
</div>
<div class="column">
<img src="images/qatlyn.jpg" width="100%" height="100%" alt="">
<h2>Altoveros, Qatlyn Rexi</h2>
</div>
<div class="column">
<img src="images/justine.jpg" width="100%" height="100%" alt="">
<h2>Asuncion, Justine Clyde</h2>
</div>
<div class="column">
<img src="images/rhyeiza.jpg" width="100%" height="100%" alt="">
<h2>Balmaceda, Rhyeiza Bless</h2>
</div>
<div class="column">
<img src="images/rainier.jpg" width="100%" height="100%" alt="">
<h2>Baltazar, Ranier</h2>
</div>
<div class="column">
<img src="images/kimberly.jpg" width="100%" height="100%" alt="">
<h2>Barakel, Kimberly Joy</h2>
</div>
<div class="column">
<img src="images/harry.jpg" width="100%" height="100%" alt="">
<h2>Bayang, Adrienne Harry</h2>
</div>
<div class="column">
<img src="images/carla.jpg" width="100%" height="100%" alt="">
<h2>Bautista, Carla Mae</h2>
</div>
<div class="column">
<img src="images/jek.jpg" width="100%" height="100%" alt="">
<h2>Carorocan, John Gerald *unable to find pictures*</h2>
</div>
</div>
</section>
<!-- students section ends -->
<!-- teachers section starts -->
<section class="teachers" id="teachers">
<h1 class="heading"> the <span>teachers</span></h1>
<div class="container">
<div class="adviser">
<img src="images/sireugie.jpg" width="20%" height="20%" alt="">
<h2> Eugiemhar S. Videra </h2>
<p> - Our one and only humble and loving adviser. Laging mabait, mainit lang ang ulo 'pag maingay ang lorenzo</p>
<p> - Siya lagi nagpapa-ayos sa'min ng gym huhu</p>
</div>
<div class="comp">
<img src="images/sirmacky.jpg" width="20%" height="20%" alt="">
<h2> Macky Ibay </h2>
<p> - Tatay ni vernix </p>
<p> -Poging computer teacher</p>
</div>
<div class="science">
<img src="images/sirvill.jpg" width="20%" height="20%" alt="">
<h2> Villamor Toquero </h2>
<p> - Pinaka mabait na science teacher</p>
<p> - The best science teacher st. lorenzo ruiz could ever have</p>
</div>
<div class="english">
<img src="images/sirace.jpg" width="20%" height="20%" alt="">
<h2> Aceyork Claro </h2>
<p> - Teaches english very well </p>
</div>
<div class="socsci">
<img src="images/sirniño.jpg" width="20%" height="20%" alt="">
<h2> Niño Jay Robles </h2>
<p> - Magaling magturo ng economics (may natututunan) + hindi masyadong boring yun subject kasi siya yun nagtuturo</p>
<p> - Poging SOCSCI teacher din</p>
</div>
<div class="religion">
<img src="images/ma'amerika.jpg" width="20%" height="20%" alt="">
<h2> Erika Silverio </h2>
<p> - Pinaka-batang religion teacher</p>
<p> - The best magturo ng religion</p>
</div>
<div class="filipino">
<img src="images/ma'amalpha.jpg" width="20%" height="20%" alt="">
<h2> Alpha Mariz Binala </h2>
<p> - Filipino teacher na kakaiba ang humor</p>
<p> - Laging lt sa subject niya (minsan lang magalit)</p>
</div>
<div class="mapeh">
<img src="images/ma'amsab.jpg" width="20%" height="20%" alt="">
<h2> Sabrina Tanya Santos </h2>
<p> - Open-minded na MAPEH teacher</p>
<p> - The best magpalaro ng PE</p>
</div>
<div class="tle">
<img src="images/ma'amregina.jpg" width="20%" height="20%" alt="">
<h2> Regina Mhae Naval; </h2>
<p> - Soft TLE teacher</p>
<p> - Cute magalit (normal lang tone ng voice niya kahit galit)</p>
</div>
</div>
</section>
<!-- teachers sections ends -->
<!-- diary section starts -->
<section class="diary" id="diary">
<h1 class="heading"> fun <span>memories</span> of st. lorenzo ruiz</h1>
<div class="row">
<div class="column">
<img src="images/feastday.jpeg" alt="">
<h2>feast day of st. lorenzo ruiz</h2>
<p>this was our first picnic and bonding with sir eugie and it was fun. lahat kami ay may dala-dalang sariling foods na pinagsaluhan, we all shared each other's food (busog much). medyo magulo lang kasi kulang yun banig, pero masaya. hindi rin mawawala yun kalokohan ng boy, nagtago sila ng shoes and nilagay pa sa bubong yun iba. hay nako lorenzo. it went well though, lahat kami nabusog.</p>
</div>
</div>
</section>
<!-- diary section ends -->
<!-- custom js file link -->
<script src="js/script.js"></script>
</body>
</html>
This is the css code:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
:root{
--main-color:#04246b;
--black:#13131a;
--bg:#add8e6;
--border:.1rem solid rgba(0, 0, 0, 0.3);
}
*{
font-family: 'Roboto', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: .8rem;
}
html::-webkit-scrollbar-track{
background: transparent;
}
html::-webkit-scrollbar-thumb{
background: #fff;
border-radius: 5rem;
}
body{
background: var(--bg);
}
section{
padding:2rem 7%;
}
.heading{
text-align: center;
color: #fff;
text-transform: uppercase;
padding-bottom: 3.5rem;
font-size: 4rem;
}
.heading span{
color: var(--main-color);
text-transform: uppercase;
}
.header{
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
padding:1.5rem 7%;
border-bottom: var(--border);
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: 10rem;
}
.lsclogo img{
height: 10rem;
width: 10rem;
}
.header .navbar a{
margin:0 1rem;
font-size: 1.6rem;
color: #162a2c;
}
.header .navbar a:hover{
color:var(--main-color);
border-bottom: .1rem solid var(--main-color);
padding-bottom: .5rem;
}
.header .icons div{
color: #162a2c;
cursor: pointer;
font-size: 2.5rem;
margin-left: 2rem;
}
.header .icons div:hover{
color: var(--main-color);
}
#menu-btn{
display: none;
}
.header .search-form{
position: absolute;
top:30%; right: 1%;
background: #fff;
width: 35rem;
height: 3.5rem;
display: flex;
align-items: center;
transform: scaleY(1);
transform-origin: top;
}
.header .search-form.active{
transform: scaleY(1);
}
.header .search-form input{
height: 100%;
width: 100%;
font-size: 1.6rem;
color:var(--black);
padding:1rem;
text-transform: none;
}
.header .search-form label{
cursor: pointer;
font-size: 2.2rem;
margin-right: 1.5rem;
color:var(--black);
}
.header .search-form label:hover{
color:var(--main-color);
}
.headstart{
min-height: 100vh;
display: flex;
align-items: center;
background:url(../images/headstart.jpeg);
background-size: cover;
background-position: center;
}
.headstart .content{
max-width: 60rem;
}
.headstart .content h3{
font-size: 6rem;
text-transform: uppercase;
color: #04246b;
}
.headstart .content p{
font-size: 2rem;
font-weight: normal;
line-height: 1.8;
padding:1rem 0;
color: #eee;
}
.background .row{
display: flex;
align-items: center;
background:var(--main-color);
flex-wrap: wrap;
}
.background .row .image{
flex:1 1 61rem;
}
.background .row .image img{
width: 100%;
}
.background .row .content{
flex:1 1 45rem;
padding:4.5rem;
font-size: 1rem;
}
.background .row .content h3{
font-size: 2rem;
color: #fff;
}
.background .row .content p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
}
.row .column{
float: left;
width:20%;
padding:.1rem;
}
.row::after{
content: "";
display: table;
clear: both;
}
.row .column h2{
margin-left: 70px;
}
.row .column img:hover{
background: #04246b;
}
.teachers .container{
position: absolute;
width: 90%;
right: 4.5%;
background-color: #04246b;
padding: 110px;
}
.teachers .container .adviser img{
float: left;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .adviser h2{
font-size: 2rem;
color: #fff;
margin-left: 17rem;
}
.teachers .container .adviser p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 17rem;
}
.teachers .container .comp{
margin-top: 12rem;
}
.teachers .container .comp img{
float: right;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .comp h2{
font-size: 2rem;
color: #fff;
margin-left: 83rem;
}
.teachers .container .comp p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 83rem;
}
.teachers .container .science{
margin-top: 12rem;
}
.teachers .container .science img{
float: left;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .science h2{
font-size: 2rem;
color: #fff;
margin-left: 17rem;
}
.teachers .container .science p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 17rem;
}
.teachers .container .english{
margin-top: 12rem;
}
.teachers .container .english img{
float: right;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .english h2{
font-size: 2rem;
color: #fff;
margin-left: 83rem;
}
.teachers .container .english p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 83rem;
}
.teachers .container .socsci{
margin-top: 12rem;
}
.teachers .container .socsci img{
float: left;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .socsci h2{
font-size: 2rem;
color: #fff;
margin-left: 17rem;
}
.teachers .container .socsci p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 17rem;
}
.teachers .container .religion{
margin-top: 12rem;
}
.teachers .container .religion img{
float: right;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .religion h2{
font-size: 2rem;
color: #fff;
margin-left: 83rem;
}
.teachers .container .religion p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 83rem;
}
.teachers .container .filipino{
margin-top: 12rem;
}
.teachers .container .filipino img{
float: left;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .filipino h2{
font-size: 2rem;
color: #fff;
margin-left: 17rem;
}
.teachers .container .filipino p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 17rem;
}
.teachers .container .mapeh{
margin-top: 12rem;
}
.teachers .container .mapeh img{
float: right;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .mapeh h2{
font-size: 2rem;
color: #fff;
margin-left: 83rem;
}
.teachers .container .mapeh p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 83rem;
}
.teachers .container .tle{
margin-top: 12rem;
}
.teachers .container .tle img{
float: left;
width: 30;
border: 10px solid #ddd;
width: 150px;
}
.teachers .container .tle h2{
font-size: 2rem;
color: #fff;
margin-left: 17rem;
}
.teachers .container .tle p{
font-size: 1.3rem;
color: #ccc;
padding:1 rem 0;
line-height: 1.8;
margin-left: 17rem;
}
This is the javascript code:
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');
}
I though the problem was the section tag. I tried rewriting the code in the diary section but it still doesn’t solve the problem.