I Wrote This Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Phone Tales</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lalezar&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zain:wght@200;300;400;700;800;900&display=swap"
rel="stylesheet">
<link rel="icon" href="Images/Icon.png">
</head>
<body>
<nav>
<div class="leftdiv navdiv">
<h0point5 class="lalezar-regular" onclick="location.href="Index.html"">
Phone Tales
</h0point5>
</div>
<div class="rightdiv navdiv">
<a href="Ar/Index.html" class="Regular">العربية</a>
</div>
</nav>
<section class="s1 flex">
<div class="flex">
<div class="leftdiv">
<img src="Images/Image1.png" style="height: 400px !important; border-radius: 20px;">
</div>
<hr id="s1-vertical">
<div class="rightdiv">
<h0point5 class="lalezar-regular">
Mobile phones are the essence of life.
</h0point5>
<p style="width: 400px; font-size: 20px;">
We cannot deny that mobile phones have become an integral part of our daily lives. They connect us
to the world, provide us with tools to organize our personal and professional lives, and offer us
information and entertainment anytime, anywhere. Do you think our increasing reliance on mobile
phones affects the quality of our lives? 🤔
</p>
</div>
</div>
</section>
<section class="s2 flex">
<div class="flex" id="s2-container">
<div class="leftdiv">
<img src="Images/Image3.png" style="height: 600px !important; border-radius: 20px;">
</div>
<hr id="s2-vertical">
<div class="rightdiv">
<h0point5 class="lalezar-regular">
The history of the phone.
</h0point5>
<p style="width: 400px; font-size: 20px;">
Imagine that in <span class="lalezar-regular">1876</span>, Alexander Graham Bell invented a simple
telephone that could transmit sound over wires. This invention changed the world, and communication
was no longer limited to written letters or personal meetings. Over the years, the telephone
evolved, transitioning from a heavy, stationary device to a large mobile phone in the 1980s. Then
came smartphones, which pack incredible computing power.
<br>
Now, the smartphone is not just a tool for voice communication; it is also a hub for personal
management, entertainment, and social interaction. It allows us to keep up with our work, shop,
learn new skills, and even monitor our health.
<br>
But, despite all these benefits, the question remains: Have phones made us more connected or more
isolated? Have these small devices become a blessing that enhances our lives, or a curse that
distances us from reality?
</p>
</div>
</div>
</section>
<section class="s3">
<h0point5 class="lalezar-regular">The Phones</h0point5>
<div id="PhonesContainer"></div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS:
* {
transition: all 0.5s !important;
font-family: "Zain", sans-serif;
font-weight: 400;
font-style: normal;
}
a:hover, button:hover {
transition: none !important;
background-color: rgba(128, 128, 128, 0.5) !important;
}
body {
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 30px;
border-bottom: 1px solid rgba(128, 128, 128, 0.5);
position: fixed;
width: 98vw;
}
a {
padding: 10px;
border-radius: 10px;
}
.lalezar-regular {
font-family: "Lalezar", system-ui !important;
font-weight: 400;
font-style: normal;
}
.Regular {
text-decoration: none;
color: currentColor;
}
nav .Regular {
margin-left: 10px;
margin-right: 10px;
}
.leftdiv {
float: left;
}
.rightdiv {
float: right;
}
h0point5 {
font-size: 2em;
}
nav h0point5 {
cursor: pointer;
position: relative;
top: 5px;
}
.flex {
display: flex;
}
section {
padding-left: 10px;
height: 100vh !important;
align-content: center;
}
.s1 {
align-items: center;
justify-content: center;
}
#s1-vertical {
background-color: black;
border-radius: 5px;
border: none;
height: 400px;
width: 5px;
margin-left: 10px !important;
margin-right: 10px !important;
}
.s2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Images/Image2.png');
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: white;
}
#s2-vertical {
background-color: white;
border-radius: 5px;
border: none;
height: 600px;
width: 5px;
margin-left: 10px !important;
margin-right: 10px !important;
}
.s3 {
justify-content: center;
text-align: center;
}
.s3 h0point5 {
font-size: 60px;
}
#PhonesContainer {
display: flex;
height: 0;
width: /*80%*/ 0;
border-radius: 20px;
border: 2px black solid;
margin: auto;
overflow-x: scroll;
overflow-y: hidden;
}
#PhonesContainer::-webkit-scrollbar {
display: none;
}
JavaScript:
window.addEventListener("scroll", function() {
if (this.scrollY > 1200) {
this.document.getElementById("PhonesContainer").style.width = "80%";
this.document.getElementById("PhonesContainer").style.height = "400px";
this.document.getElementById("PhonesContainer").style.borderColor = "black";
} else {
this.document.getElementById("PhonesContainer").style.width = "0";
this.document.getElementById("PhonesContainer").style.height = "0";
this.document.getElementById("PhonesContainer").style.borderColor = "transparent";
}
if (this.scrollY > 715) {
this.document.getElementById("s2-container").style.transform = "scale(1)";
} else {
this.document.getElementById("s2-container").style.transform = "scale(0)";
}
});
But when I run the code and scroll to 715:
The image becomes above the navbar!
When the container appears when I scroll the website becomes above the nav and I want it to become beyond the nav, and the same problem is in another website I made when I hover above the button :
A part of the button appears above the navbar because I changed the transform: scale(1.5) When I Hover.
Is There a solution to this problem?
You need to sign in to view this answers
Leave feedback about this