I need some help guys I want web page with parallex effect. here is the code I h
ID: 3734439 • Letter: I
Question
I need some help guys
I want web page with parallex effect. here is the code I have done so far and please correct my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="parallex.css">
<style>
.topnav {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#" class="icon">☰</a>
</div>
<div>
<h1>Our Vission</h1>
<p>
</p>
</div>
<section class="parallex">
<div class="parallex_inner">
<h2>Different Eras, Same Exceptional Service</h2>
</div>
</section>
<div id="ourstory">
<h1></h1>
<p>
</p>
</div>
<section class="parallex1">
<div class="parallex1_inner">
<h2>Space</h2>
</div>
</section>
<h1>space</h1>
<p>
</p>
<script>
function myFunction() {
var x = document.get("mytopnav");
if (x.className === "Topnav") {
x.className += " responsive";
} else {
x.className = "Topnav";
}
}
</script>
</body>
</html>
css file
*{
margin:0;
padding:0;
border:0;
}
body{
background-color: #ffa;
}
h1 {
text-align: center;
font-size: 575%;
color:#4aa4444;
text-transform: uppercase;
letter-spacing: 14px;
margin: 5% 0 0 0;
}
h2 {
text-align: center;
font-size: 275%;
color:#e5e5e5;
text-transform: uppercase;
letter-spacing: 14px;
}
p {
color: #000;
margin:2% 10% 2%;
}
#ourstory #p2{
margin:0 10% 5%;
}
/*parallex starts*/
/*background-attachment: fixed ;parallex
background-attachment:scroll ;normal*/
.parallex{
background:
/*url() 100% fixed;*/
url(Capture2.PNG) 100% fixed;
/*url(page2.jpg) no-repeat 100% fixed;*/
}
.parallex_inner {
padding-top: 10%;
padding-bottom: 10%;
}
.parallex p{
color:#ffd;
margin-bottom: 15%;
}
.parallex1{
background:
/*url() 100% fixed;*/
url() 100% fixed;
/*url() no-repeat 100% fixed;*/
}
.parallex1_inner {
padding-top: 10%;
padding-bottom: 10%;
}
/*parallex ends*/
Explanation / Answer
here is the code i have modified i.e in java script
<script>
function myscript() {
var x = document.getElementById("idName");
if (x.className === "idName") {
x.className += " responsive";
} else {
x.className = "idName";
}
}
</script>