├── .vscode
    └── settings.json
├── img
    ├── bird1.png
    ├── bird2.png
    ├── birds.jpg
    ├── rock.jpg
    ├── water.jpg
    ├── forest.jpg
    ├── forest1.png
    ├── rocks1.png
    ├── water1.png
    ├── forest (1).png
    ├── elephant-flip.png
    ├── animal-removebg-preview.png
    ├── birds-removebg-preview.png
    ├── forest-removebg-preview.png
    ├── rock-removebg-preview.png
    ├── elephant-removebg-preview.png
    ├── elephant-removebg-preview (1).png
    ├── photographer-removebg-preview.png
    └── photographer2-removebg-preview.png
├── .gitattributes
├── README.md
├── style.css
└── index.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5502
3 | }
4 | 


--------------------------------------------------------------------------------
/img/bird1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/bird1.png


--------------------------------------------------------------------------------
/img/bird2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/bird2.png


--------------------------------------------------------------------------------
/img/birds.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/birds.jpg


--------------------------------------------------------------------------------
/img/rock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/rock.jpg


--------------------------------------------------------------------------------
/img/water.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/water.jpg


--------------------------------------------------------------------------------
/img/forest.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/forest.jpg


--------------------------------------------------------------------------------
/img/forest1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/forest1.png


--------------------------------------------------------------------------------
/img/rocks1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/rocks1.png


--------------------------------------------------------------------------------
/img/water1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/water1.png


--------------------------------------------------------------------------------
/img/forest (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/forest (1).png


--------------------------------------------------------------------------------
/img/elephant-flip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/elephant-flip.png


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html linguist-detectable=false
2 | *.js linguist-detectable=false
3 | *.css linguist-detectable=true
4 | 


--------------------------------------------------------------------------------
/img/animal-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/animal-removebg-preview.png


--------------------------------------------------------------------------------
/img/birds-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/birds-removebg-preview.png


--------------------------------------------------------------------------------
/img/forest-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/forest-removebg-preview.png


--------------------------------------------------------------------------------
/img/rock-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/rock-removebg-preview.png


--------------------------------------------------------------------------------
/img/elephant-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/elephant-removebg-preview.png


--------------------------------------------------------------------------------
/img/elephant-removebg-preview (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/elephant-removebg-preview (1).png


--------------------------------------------------------------------------------
/img/photographer-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/photographer-removebg-preview.png


--------------------------------------------------------------------------------
/img/photographer2-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharjeelyunus/wild-life-photography/HEAD/img/photographer2-removebg-preview.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # wild-life-photography
2 | Wild Life Photography Landing Page. When you hover the images they get bigger giving cool look.
3 | ----------------------------------------Responsive-----------------------------------------------
4 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
  3 | 
  4 | *{
  5 |   margin: 0;
  6 |   padding: 0;
  7 |   box-sizing: border-box;
  8 |   font-family: 'Poppins', sans-serif;
  9 | }
 10 | body{
 11 |  overflow-x: hidden;
 12 |   background: linear-gradient(rgb(163, 249, 255),rgb(243, 241, 111),rgb(243, 133, 166));
 13 |   min-height: 100vh;
 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: space-between;
 24 | align-items: center;
 25 | z-index: 10000;
 26 | }
 27 | #header .logo{
 28 |   color: #094b65;
 29 |   font-weight: 700;
 30 |   font-size: 2em;
 31 |   text-decoration: none;
 32 | }
 33 | #header ul{
 34 |   display: flex;
 35 |   justify-content: center;
 36 |   align-items: center;
 37 | }
 38 | #header ul li{
 39 |   list-style: none;
 40 |   margin-left: 20px;
 41 | }
 42 | 
 43 | #header ul li a{
 44 |   text-decoration: none;
 45 |   padding: 6px 15px;
 46 |   color: #094b65;
 47 |   border-radius: 20px;
 48 | 
 49 | }
 50 | 
 51 | #header ul li a:hover,
 52 | #header ul li a.active
 53 | {
 54 |   background: #094b65;
 55 |   color: white;
 56 | 
 57 | }
 58 | section{
 59 |   position: relative;
 60 |   width: 100%;
 61 |   height: 100vh;
 62 |   display: flex;
 63 |   justify-content: center;
 64 |   align-items: center;
 65 | }
 66 | section::before{
 67 |   content: '';
 68 |   position: absolute;
 69 |   bottom: 0;
 70 |   left: 0;
 71 |   width: 100%;
 72 |   height: 100px;
 73 |   background: linear-gradient(to top, #094b65, transparent);
 74 |   z-index: 10;
 75 | }
 76 | section img{
 77 | position: absolute;
 78 | top: 0;
 79 | left: 0;
 80 | width: 100%;
 81 | height: 100%;
 82 | object-fit: cover;
 83 | pointer-events: none;  
 84 | }
 85 | section #text{
 86 |   position: absolute;
 87 |   color: #094b65;
 88 |   font-size: 10vw;
 89 |   text-align: center;
 90 |   line-height: 0.55em;
 91 |   font-family: 'Rancho', cursive;
 92 |   transform: translateY(-50%);
 93 | }
 94 | section #text span{
 95 | font-size: 0.20em;
 96 | letter-spacing: 2px;
 97 | font-weight: 400;
 98 | font-family: 'Poppins', sans-serif;
 99 | }
100 | #btn{
101 |   text-decoration: none;
102 |   display: inline-block;
103 |   padding: 8px 30px;
104 |   background: #fff;
105 |   color: #094b65;
106 |   font-size: 1.2em;
107 |   font-weight: 500;
108 |   letter-spacing: 2px;
109 |   border-radius: 40px;
110 |   transform: translateY(100px);
111 | 
112 | }
113 | .sec{
114 |   position: relative;
115 |   padding: 100px;
116 |   background: #094b65;
117 | }
118 | 
119 | .sec h2{
120 |   font-size: 100px;
121 |   color: azure;
122 |   text-align: center;
123 | }
124 | /* body {
125 |   margin: 0px;
126 |   padding: 0px;
127 |   box-sizing: border-box;
128 | } */
129 | 
130 | /* .container {
131 | 	display: flex;
132 | 	flex-wrap: wrap;
133 | 	justify-content: center;
134 | } */
135 | 
136 | .container {
137 |   padding: 10px;
138 |   display: grid;
139 |   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
140 |   grid-gap: 20px;
141 |   max-width: 1100px;
142 |   grid-auto-rows: 250px;
143 |   grid-auto-flow: dense;
144 |   margin: 0 auto;
145 | }
146 | 
147 | /*stretch vertically*/
148 | .vertical {
149 |   grid-row: span 2;
150 | }
151 | 
152 | /*stretch horizontally*/
153 | .horizontal {
154 |   grid-column: span 2;
155 | }
156 | /*horizontally and vertically*/
157 | .big {
158 |   grid-column: span 2;
159 |   grid-row: span 2;
160 | }
161 | 
162 | h1 {
163 |   font-family: fantasy;
164 |   font-size: 3em;
165 |   border-bottom: 2px solid pink;
166 |   border-right: 2px solid pink;
167 |   width: 400px;
168 |   text-align: center;
169 |   box-shadow: 4px 4px 5px #888888;
170 |   margin-top: 10px;
171 | }
172 | 
173 | /* 
174 | img {
175 |   width: 400px;
176 |   height: 250px;
177 |   margin: 10px;
178 |   transition: all 0.3s;
179 | } */
180 | 
181 | .container div {
182 |   overflow: hidden;
183 | }
184 | 
185 | .container div img {
186 |   width: 100%;
187 |   height: 100%;
188 |   object-fit: cover;
189 |   filter: brightness(0.7);
190 |   transition: all 0.3s;
191 | }
192 | 
193 | .container div img:hover {
194 |   filter: brightness(1);
195 |   transform: scale(1.2);
196 | }
197 | 
198 | /* img:hover {
199 |   transform: scale(1.1);
200 | } */
201 | 
202 | @media screen and (max-width: 560px) {
203 |   .vertical {
204 |     grid-row: span 1;
205 |   }
206 | 
207 |   .horizontal {
208 |     grid-column: span 1;
209 |   }
210 | 
211 |   .big {
212 |     grid-column: span 1;
213 |     grid-row: span 1;
214 |   }
215 | }
216 | 
217 | 
218 | #forest{
219 |   height: 500px;
220 |   width: 500px;
221 |   left: 1030px;
222 |   top: 100px;
223 | }
224 | #forest1{
225 |   width: 350px;
226 |   height: 200px;
227 |   top: 260px;
228 |   left: 50px;
229 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Wild Life Photography - Landing Page</title>
  5 |     <link rel="stylesheet" type="text/css" href="style.css" />
  6 |   </head>
  7 |   <body>
  8 |     <header id="header">
  9 |       <a href="#" class="logo">Wild Life Photography</a>
 10 |       <ul>
 11 |         <li><a href="#" class="active">Home</a></li>
 12 |         <li><a href="#">About</a></li>
 13 |         <li><a href="#">Gallery</a></li>
 14 |         <li><a href="#">Contact</a></li>
 15 |       </ul>
 16 |     </header>
 17 |     <section>
 18 |       <h2 id="text"><span>Discover the Wilderness</span><br>adventure</h2>
 19 |       <img src="./img/bird1.png" id="bird1">
 20 |       <img src="./img/bird2.png" id="bird2">
 21 |       <!-- <img src="./img/forest1.png" id="forest">   -->
 22 |       <!-- <img src="./img/photographer2-removebg-preview.png" id="forest"> -->
 23 |       <!-- <img src="./img/photographer2-removebg-preview.png" id="photo"> -->
 24 |       <img src="./img/elephant-flip.png" id="forest1"> 
 25 |       <a href="#" id="btn">Explore</a>
 26 |       <img src="./img/photographer2-removebg-preview.png" id="forest">
 27 |       <!-- <img src="./img/elephant-removebg-preview (1).png" id="forest1"> -->
 28 |        <img src="./img/rocks1.png" id="rocks">  
 29 |       <!-- <img src="./img/rock-removebg-preview.png" id="rocks">  -->
 30 |        <img src="./img/water1.png" id="water">
 31 |       <!-- <img src="./img/rock-removebg-preview.png" id="water"> -->
 32 |     </section>
 33 |     <!-- <center>
 34 |       <h1>Life in the Wild</h1>
 35 |     </center> -->
 36 | 
 37 | 
 38 |   <div class="sec">
 39 |     <h2>PHOTOGRAPHY</h2>
 40 |     <div class="container">
 41 |       <div>
 42 |         <img
 43 |           src="https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg"
 44 |         />
 45 |       </div>
 46 |       <div>
 47 |         <img
 48 |           src="https://static.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg"
 49 |         />
 50 |       </div>
 51 |       <div class="big">
 52 |         <img
 53 |           src="https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg"
 54 |         />
 55 |       </div>
 56 |       <div class="big">
 57 |         <img
 58 |           src="https://static.pexels.com/photos/158471/ibis-bird-red-animals-158471.jpeg"
 59 |         />
 60 |       </div>
 61 |       <div>
 62 |         <img
 63 |           src="https://static.pexels.com/photos/133459/pexels-photo-133459.jpeg"
 64 |         />
 65 |       </div>
 66 |       <div>
 67 |         <img
 68 |           src="https://images.pexels.com/photos/1822603/pexels-photo-1822603.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
 69 |         />
 70 |       </div>
 71 |       <div>
 72 |         <img
 73 |           src="https://static.pexels.com/photos/50988/ape-berber-monkeys-mammal-affchen-50988.jpeg"
 74 |         />
 75 |       </div>
 76 |       <div class="vertical">
 77 |         <img
 78 |           src="https://images.pexels.com/photos/2578370/pexels-photo-2578370.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 79 |         />
 80 |       </div>
 81 |       <div class="horizontal">
 82 |         <img
 83 |           src="https://images.pexels.com/photos/2955703/pexels-photo-2955703.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
 84 |         />
 85 |       </div>
 86 |       <div>
 87 |         <img
 88 |           src="https://images.pexels.com/photos/1466592/pexels-photo-1466592.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
 89 |         />
 90 |       </div>
 91 |       <div>
 92 |         <img
 93 |           src="https://images.pexels.com/photos/2904176/pexels-photo-2904176.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 94 |         />
 95 |       </div>
 96 |       <div>
 97 |         <img
 98 |           src="https://images.pexels.com/photos/2265247/pexels-photo-2265247.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
 99 |         />
100 |       </div>
101 |     </div> 
102 |   </div>
103 | <script>
104 |   let text = document.getElementById('text');
105 |   let bird1 = document.getElementById('bird1');
106 |   let bird2 = document.getElementById('bird2');
107 |   let btn = document.getElementById('btn');
108 |   let rocks = document.getElementById('rocks');
109 |   let forest = document.getElementById('forest');
110 |   let water = document.getElementById('water');
111 |   let header = document.getElementById('header');
112 |   let forest1 = document.getElementById('forest1');
113 | 
114 |   window.addEventListener('scroll',function(){
115 | let value = window.scrollY;
116 | 
117 | text.style.top = 40 + value * -0.5 + '%';
118 | bird1.style.top = value * -1.5 + 'px';
119 | bird1.style.left = value * 2 + 'px';
120 | bird2.style.top = value * -1.5 + 'px';
121 | bird2.style.left = value * -5 + 'px';
122 | btn.style.marginTop = value * 1.5 + 'px';
123 | rocks.style.top = value * -0.12 + 'px';
124 | forest.style.top = 10 + value * 0.05 + '%';
125 | header.style.top = value * 0.5 + 'px';
126 | forest1.style.left = value * 0.5 + 'px';
127 | 
128 |   })
129 | </script>
130 | 
131 |   </body>
132 | </html>
133 | 


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