Skip to content

Instantly share code, notes, and snippets.

@IliaLiashenko

IliaLiashenko/index.html

Created May 21, 2025 16:01
Show Gist options
  • Save IliaLiashenko/488af1589aef5f6cc9003463b78e7e40 to your computer and use it in GitHub Desktop.
Save IliaLiashenko/488af1589aef5f6cc9003463b78e7e40 to your computer and use it in GitHub Desktop.
Download ZIP
Parallax html/css
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<section class="bg-1">
<h2>Section 1</h2>
</section>
<section class="bg-2">
<h2>Section 2</h2>
</section>
<section class="bg-3">
<h2>Section 3</h2>
</section>
<section class="bg-4">
<h2>Section 4</h2>
</section>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;
justify-content: center;
align-items: center;
font-size: 8vw;
background-position: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
}
.bg-1{
background-image: url(img/bg1.jpg);
height: 100vh;
}
.bg-2{
background: #fff;
height: 100vh;
}
.bg-3{
background-image: url(img/bg3.jpg);
height: 100vh;
}
.bg-4{
background-image: url(img/bg4.jpg);
height: 100vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment