├── img-back
    ├── leaf.png
    ├── tree.png
    ├── hill1.png
    ├── hill2.png
    ├── hill3.png
    ├── hill4.png
    ├── hill5.png
    └── plant.png
├── script.js
├── new.css
├── style.css
└── index.html


/img-back/leaf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/leaf.png


--------------------------------------------------------------------------------
/img-back/tree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/tree.png


--------------------------------------------------------------------------------
/img-back/hill1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/hill1.png


--------------------------------------------------------------------------------
/img-back/hill2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/hill2.png


--------------------------------------------------------------------------------
/img-back/hill3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/hill3.png


--------------------------------------------------------------------------------
/img-back/hill4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/hill4.png


--------------------------------------------------------------------------------
/img-back/hill5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/hill5.png


--------------------------------------------------------------------------------
/img-back/plant.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShehanKaushalyaDurage/parallax-design/HEAD/img-back/plant.png


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | let text = document.getElementById('text');
 2 | let leaf = document.getElementById('leaf');
 3 | let hill1 = document.getElementById('hill1');
 4 | let hill4 = document.getElementById('hill4');
 5 | let hill5 = document.getElementById('hill5');
 6 | 
 7 | window.addEventListener('scroll', () =>{
 8 |     let value = window.scrollY;
 9 | 
10 |     text.style.marginTop = value * 2.5 + 'px';
11 |     leaf.style.top = value * -1.5 + 'px';
12 |     leaf.style.left = value * 1.5 + 'px';
13 |     hill5.style.left = value * 1.5 + 'px';
14 |     hill4.style.left = value * -1.5 + 'px';
15 |     hill1.style.top = value * 0.5 + 'px';
16 | 
17 | });


--------------------------------------------------------------------------------
/new.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Poppins", sans-serif;
  8 | }
  9 | 
 10 | body {
 11 |   background: white;
 12 |   min-height: 100vh;
 13 |   overflow-x: hidden;
 14 | }
 15 | 
 16 | header {
 17 |   position: absolute;
 18 |   top: 0;
 19 |   left: 0;
 20 |   width: 100%;
 21 |   padding: 30px 100px;
 22 |   display: flex;
 23 |   justify-content: flex-start;
 24 |   align-items: center;
 25 |   z-index: 100;
 26 | }
 27 | 
 28 | .logo {
 29 |   font-size: 2em;
 30 |   pointer-events: none;
 31 |   margin-right: 270px;
 32 |   animation-name: sk;
 33 |   animation-duration: 1s;
 34 |   animation-iteration-count: infinite;
 35 | }
 36 | 
 37 | .navigation a {
 38 |   text-decoration: none;
 39 |   color: #359381;
 40 |   padding: 6px 15px;
 41 |   border-radius: 20px;
 42 |   margin: 0 10px;
 43 |   font-weight: 600;
 44 | }
 45 | 
 46 | .navigation a:hover,
 47 | .navigation a.active {
 48 |   background-color: #359381;
 49 |   color: white;
 50 | }
 51 | 
 52 | .parallax {
 53 |   position: relative;
 54 |   display: flex;
 55 |   justify-content: center;
 56 |   align-items: center;
 57 |   height: 100vh;
 58 | }
 59 | 
 60 | #text {
 61 |   position: absolute;
 62 |   font-size: 5em;
 63 |   color: #ffffff;
 64 |   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 65 | }
 66 | 
 67 | .parallax img {
 68 |   position: absolute;
 69 |   top: 0;
 70 |   left: 0;
 71 |   width: 100%;
 72 |   pointer-events: none;
 73 | }
 74 | 
 75 | .sec {
 76 |   position: relative;
 77 |   background-color: #003329;
 78 |   padding: 100px;
 79 | }
 80 | 
 81 | .sec h1 {
 82 |   font-size: 3em;
 83 |   margin-bottom: 10px;
 84 |   text-align: center;
 85 | }
 86 | 
 87 | .sec p {
 88 |   font-size: 20px;
 89 |   color: #007a62;
 90 | }
 91 | 
 92 | @keyframes sk {
 93 |   from {
 94 |     color: #003329;
 95 |   }
 96 | 
 97 |   to {
 98 |     color: #00a785;
 99 |   }
100 | }
101 | 
102 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Poppins", sans-serif;
  8 | }
  9 | 
 10 | body {
 11 |   background: white;
 12 |   z-index: -999;
 13 |   overflow-x: hidden;
 14 | }
 15 | 
 16 | header {
 17 |   position: absolute;
 18 |   top: 0;
 19 |   left: 0;
 20 |   width: 100%;
 21 |   padding: 30px 100px;
 22 |   display: flex;
 23 |   justify-content: flex-start;
 24 |   align-items: center;
 25 |   z-index: 100;
 26 | }
 27 | 
 28 | .logo {
 29 |   font-size: 2em;
 30 |   pointer-events: none;
 31 |   margin-right: 270px;
 32 |   animation-name: sk;
 33 |   animation-duration: 1s;
 34 |   animation-iteration-count: infinite;
 35 | }
 36 | 
 37 | .navigation a {
 38 |   text-decoration: none;
 39 |   color: #359381;
 40 |   padding: 6px 15px;
 41 |   border-radius: 20px;
 42 |   margin: 0 10px;
 43 |   font-weight: 600;
 44 | }
 45 | 
 46 | .navigation a:hover,
 47 | .navigation a.active {
 48 |   background-color: #359381;
 49 |   color: white;
 50 | }
 51 | 
 52 | .parallax {
 53 |   position: relative;
 54 |   display: flex;
 55 |   justify-content: center;
 56 |   align-items: center;
 57 |   height: 100vh;
 58 |   width: 100vw;
 59 | }
 60 | 
 61 | #text {
 62 |   position: absolute;
 63 |   font-size: 5em;
 64 |   display: inline-block;
 65 |   color: #ffffff;
 66 |   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 67 | }
 68 | 
 69 | .parallax img {
 70 |   position: absolute;
 71 |   top: 0;
 72 |   left: 0;
 73 |   width: 100%;
 74 |   height: 100vh;
 75 |   object-fit: cover;
 76 |   pointer-events: none;
 77 | }
 78 | 
 79 | .sec {
 80 |   position: relative;
 81 |   background-color: #003329;
 82 |   padding: 100px;
 83 | }
 84 | 
 85 | .sec h1 {
 86 |   font-size: 3em;
 87 |   margin-bottom: 10px;
 88 |   text-align: center;
 89 | }
 90 | 
 91 | .sec p {
 92 |   font-size: 20px;
 93 |   color: #007a62;
 94 | }
 95 | 
 96 | @keyframes sk {
 97 |   from {
 98 |     color: #003329;
 99 |   }
100 | 
101 |   to {
102 |     color: #00a785;
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>My Portfolio | Home</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 |     <header>
14 |         <h2 class="logo">SK</h2>
15 |         <nav class="navigation">
16 |             <a href="#" class="active">Home</a>
17 |             <a href="#">About</a>
18 |             <a href="#">Service</a>
19 |             <a href="#">Contact</a>
20 |         </nav>
21 |     </header>
22 |     <section class="parallax">
23 |         <img src="img-back/hill1.png" id="hill1">
24 |         <img src="img-back/hill2.png" id="hill2">
25 |         <img src="img-back/hill3.png" id="hill3">
26 |         <img src="img-back/hill4.png" id="hill4">
27 |         <img src="img-back/hill5.png" id="hill5">
28 |         <img src="img-back/tree.png" id="tree">
29 |         <h2 id="text">Shehan Kaushalya</h2>
30 |         <img src="img-back/leaf.png" id="leaf">
31 |         <img src="img-back/plant.png" id="plant">
32 |     </section>
33 | 
34 |     <section class="sec">
35 |         <h1>Hello Friends</h1>
36 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
37 |         <br>
38 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
39 |         <br>
40 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
41 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
42 |         <br>
43 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
44 |         <br>
45 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
46 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
47 |         <br>
48 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
49 |         <br>
50 |         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repudiandae deserunt unde natus incidunt iure cum necessitatibus vel ipsam at deleniti labore pariatur tenetur soluta, odio consequatur veniam modi delectus.</p>
51 |         
52 |     </section>
53 | 
54 |     <script src="script.js"></script>
55 | </body>
56 | 
57 | </html>


--------------------------------------------------------------------------------