Skip to content

Parallax website template #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Parallax website template #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c096693
Parallax website template
Purva2109 Oct 27, 2021
049e072
Parallax website template
Purva2109 Oct 27, 2021
3bed0ea
Added parallax website template
Purva2109 Oct 27, 2021
b250aac
Added parallax website template
Purva2109 Oct 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added image1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parallax Website Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax Website
</span>
</div>
</div>

<section class="section section-light">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in. Distinctio provident dolorem modi cumque illo enim quidem tempora deserunt nostrum voluptate labore repellat quisquam quasi cum suscipit dolore ab consequuntur, ad porro earum temporibus. Laborum ad temporibus ex, omnis!
</p>
</section>

<div class="pimg2">
<div class="ptext">
<span class="border trans">
Image Two Text
</span>
</div>
</div>

<section class="section section-dark">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>

<div class="pimg3">
<div class="ptext">
<span class="border trans">
Image Three Text
</span>
</div>
</div>

<section class="section section-dark">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>

<div class="pimg1">
<div class="ptext">
<span class="border">
Traversy Media
</span>
</div>
</div>
</body>
</html>
145 changes: 145 additions & 0 deletions parallax .html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parallax Website Demo</title>
<style>
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}

.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;

/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}

.pimg1{
background-image:url('img/image1.jpg');
min-height:100%;
}

.pimg2{
background-image:url('img/image2.jpg');
min-height:400px;
}

.pimg3{
background-image:url('img/image3.jpg');
min-height:400px;
}

.section{
text-align:center;
padding:50px 80px;
}

.section-light{
background-color:#f4f4f4;
color:#666;
}

.section-dark{
background-color:#282e34;
color:#ddd;
}

.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
}

.ptext .border{
background-color:#111;
color:#fff;
padding:20px;
}

.ptext .border.trans{
background-color:transparent;
}

@media(max-width:568px){
.pimg1, .pimg2, .pimg3{
background-attachment:scroll;
}
}
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax Website
</span>
</div>
</div>

<section class="section section-light">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in. Distinctio provident dolorem modi cumque illo enim quidem tempora deserunt nostrum voluptate labore repellat quisquam quasi cum suscipit dolore ab consequuntur, ad porro earum temporibus. Laborum ad temporibus ex, omnis!
</p>
</section>

<div class="pimg2">
<div class="ptext">
<span class="border trans">
Image Two Text
</span>
</div>
</div>

<section class="section section-dark">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>

<div class="pimg3">
<div class="ptext">
<span class="border trans">
Image Three Text
</span>
</div>
</div>

<section class="section section-dark">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>

<div class="pimg1">
<div class="ptext">
<span class="border">
Traversy Media
</span>
</div>
</div>
</body>
</html>
80 changes: 80 additions & 0 deletions parallax.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}

.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;

/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}

.pimg1{
background-image:url('img/image1.jpg');
min-height:100%;
}

.pimg2{
background-image:url('img/image2.jpg');
min-height:400px;
}

.pimg3{
background-image:url('img/image3.jpg');
min-height:400px;
}

.section{
text-align:center;
padding:50px 80px;
}

.section-light{
background-color:#f4f4f4;
color:#666;
}

.section-dark{
background-color:#282e34;
color:#ddd;
}

.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
}

.ptext .border{
background-color:#111;
color:#fff;
padding:20px;
}

.ptext .border.trans{
background-color:transparent;
}

@media(max-width:568px){
.pimg1, .pimg2, .pimg3{
background-attachment:scroll;
}
}