Skip to content

Commit 2f2f07e

Browse files
esuneelkumar722esuneelkumar722
committed
LandingPageTemplate
0 parents  commit 2f2f07e

5 files changed

Lines changed: 356 additions & 0 deletions

File tree

‎images/home.png‎

144 KB
Loading

‎images/logo.png‎

7.21 KB
Loading

‎index.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Landing Page Template</title>
8+
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10+
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
<body>
14+
15+
16+
17+
<header class="header">
18+
19+
<a href="#" class="logo">
20+
<img src="images/logo.png" alt="">
21+
</a>
22+
23+
<nav class="navbar">
24+
<div id="close" class="fas fa-times"></div>
25+
26+
<a href="#" class="nav_item">home</a>
27+
<a href="#" class="nav_item">about</a>
28+
<a href="#" class="nav_item">menu</a>
29+
<a href="#" class="nav_item">contact</a>
30+
31+
</nav>
32+
33+
<div class="social-icons">
34+
<a href="#" class="social-icon"><i class="fa-brands fa-facebook"></i></a>
35+
<a href="#" class="social-icon"><i class="fa-brands fa-instagram"></i></a>
36+
<a href="#" class="social-icon"><i class="fa-brands fa-x-twitter"></i></a>
37+
</div>
38+
39+
<div id="menu" class="fas fa-bars"></div>
40+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
41+
42+
43+
</header>
44+
45+
46+
47+
<section class="home">
48+
49+
<div class="content">
50+
<h1 class="title">fresh <span>coffee</span> in the <span>morning</span> </h1>
51+
<p class="description">A great cup of coffee and the ears of a good friend are the best kind of therapy.</p>
52+
<a href="#" class="btn">get started</a>
53+
</div>
54+
55+
<div class="image">
56+
<img src="images/home.png" alt="" data-speed="-3" class="move">
57+
</div>
58+
59+
</section>
60+
61+
62+
63+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
64+
<script src="https://kit.fontawesome.com/0b31d7426c.js" crossorigin="anonymous"></script>
65+
66+
<script src="script.js"></script>
67+
</body>
68+
</html>

‎script.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
let navbar = document.querySelector('.header .navbar')
2+
3+
document.querySelector('#menu').onclick = () =>{
4+
navbar.classList.add('active');
5+
}
6+
7+
document.querySelector('#close').onclick = () =>{
8+
navbar.classList.remove('active');
9+
}
10+
11+
12+
document.addEventListener('mousemove', move);
13+
function move(e){
14+
this.querySelectorAll('.move').forEach(layer =>{
15+
const speed = layer.getAttribute('data-speed')
16+
17+
const x = (window.innerWidth - e.pageX*speed)/120;
18+
const y = (window.innerWidth - e.pageY*speed)/120;
19+
20+
layer.style.transform = `translateX(${x}px) translateY(${y}px)`;
21+
22+
});
23+
}
24+
25+
26+
27+
gsap.from('.logo', {opacity: 0, duration: 1, delay: 2, y:10});
28+
gsap.from('.navbar .nav_item', {opacity: 0, duration: 1, delay: 2.1, y:30, stagger: 0.2});
29+
30+
gsap.from('.title', {opacity: 0, duration: 1, delay: 1.6, y:30});
31+
gsap.from('.description', {opacity: 0, duration: 1, delay: 1.8, y:30});
32+
gsap.from('.btn', {opacity: 0, duration: 1, delay: 2.1, y:30});
33+
gsap.from('.image', {opacity: 0, duration: 1, delay: 2.6, y:30});
34+
35+
gsap.from('.social-icons', { opacity: 0, duration: 1, delay: 2.4, y: -20 });

‎style.css‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
2+
3+
*{
4+
font-family: 'Nunito',sans-serif;
5+
margin: 0; padding: 0;
6+
box-sizing: border-box;
7+
text-decoration: none;
8+
text-transform: capitalize;
9+
transition: .2s linear;
10+
}
11+
12+
html{
13+
font-size: 62.5%;
14+
}
15+
16+
section{
17+
padding: 2rem 9%;
18+
}
19+
20+
21+
22+
.header{
23+
position: fixed;
24+
top: 0; left: 0; right: 0;
25+
display: flex;
26+
align-items: center;
27+
justify-content: space-between;
28+
padding: 2rem 9%;
29+
z-index: 2;
30+
}
31+
32+
.header .logo img{
33+
height: 8rem;
34+
}
35+
36+
.header .navbar #close{
37+
display: none;
38+
position: absolute;
39+
top: 4rem;
40+
right: 2rem;
41+
cursor: pointer;
42+
font-size: 3rem;
43+
color: #fff;
44+
}
45+
46+
.header .navbar a{
47+
font-size: 2rem;
48+
margin-right: 2rem;
49+
color: #fff;
50+
}
51+
52+
.header .navbar a:hover{
53+
color: #000;
54+
}
55+
56+
.header #menu{
57+
display: none;
58+
cursor: pointer;
59+
font-size: 2.5rem;
60+
color: #fff;
61+
}
62+
63+
64+
65+
.home{
66+
display: flex;
67+
flex-wrap: wrap;
68+
gap: 1.5rem;
69+
min-height: 100vh;
70+
align-items: center;
71+
justify-content: center;
72+
background: #576925;
73+
}
74+
75+
.home .content{
76+
flex: 1 1 40rem;
77+
padding-top: 6.5rem;
78+
}
79+
80+
.home .content .title{
81+
font-size: 6rem;
82+
color: #fff;
83+
text-transform: uppercase;
84+
}
85+
86+
.home .content .title span{
87+
text-transform: uppercase;
88+
color: #d3ad7f;
89+
}
90+
91+
.home .content .description{
92+
font-size: 2rem;
93+
font-weight: lighter;
94+
line-height: 1.8;
95+
padding: 1rem 0;
96+
color: #fff;
97+
}
98+
99+
.home .content .btn{
100+
margin-top: 1rem;
101+
display: inline-block;
102+
padding: .9rem 3rem;
103+
font-size: 1.7rem;
104+
color: #fff;
105+
background: #131211;
106+
cursor: pointer;
107+
}
108+
109+
.home .content .btn:hover{
110+
letter-spacing: .2rem;
111+
color: rgba(27, 26, 26, 0.993);
112+
background: #dfdcdd;
113+
}
114+
115+
.home .image{
116+
flex: 1 1 40rem;
117+
}
118+
119+
.home .image img{
120+
width: 100%;
121+
}
122+
123+
124+
125+
@media (max-width:991px){
126+
html{
127+
font-size: 55%;
128+
}
129+
130+
.header{
131+
padding: 2rem;
132+
}
133+
134+
section{
135+
padding: 2rem;
136+
}
137+
138+
}
139+
140+
141+
.social-icons {
142+
display: flex;
143+
flex-direction: column;
144+
gap: 10px;
145+
align-items: flex-end;
146+
position: fixed;
147+
top: 47%;
148+
right: 2rem;
149+
transform: translateY(-50%);
150+
}
151+
152+
.social-icon {
153+
position: relative;
154+
margin: 8px 0;
155+
font-size: 25px;
156+
color: #fff;
157+
transition: color 0.6s ease;
158+
display: block;
159+
width: 35px;
160+
height: 35px;
161+
border-radius: 50%;
162+
background-color: #8f8f49;
163+
text-align: center ;
164+
box-shadow: 0 4px 8px 0 rgb(0,0,0.2);
165+
}
166+
167+
.social-icon:hover {
168+
color: #d3ad7f;
169+
}
170+
171+
.social-icon .fa-facebook:hover {
172+
color: #1877f2;
173+
}
174+
175+
.social-icon .fa-instagram:hover {
176+
color: #e1306c;
177+
}
178+
179+
.social-icon .fa-x-twitter:hover {
180+
color: #000000;
181+
}
182+
183+
.social-icon .fa {
184+
font-size: 50px;
185+
line-height: 40px;
186+
transition: .3s;
187+
color: #000;
188+
}
189+
190+
.social-icon a:hover {
191+
color: #fff;
192+
}
193+
194+
195+
196+
@media (max-width:768px){
197+
198+
.header #menu{
199+
display: inline-block;
200+
}
201+
202+
.header .navbar{
203+
position: fixed;
204+
top: 0; right: -105%;
205+
width: 30rem;
206+
background: rgba(255,255,255,0.2);
207+
backdrop-filter: blur(50px);
208+
transition: .5s;
209+
height: 100%;
210+
display: flex;
211+
flex-flow: column;
212+
justify-content: center;
213+
z-index: 1200;
214+
}
215+
216+
.header .navbar.active{
217+
right: 0;
218+
}
219+
220+
.header .navbar #close{
221+
display: block;
222+
}
223+
224+
.header .navbar a{
225+
display: block;
226+
margin: 1rem 0;
227+
text-align: center;
228+
font-size: 3rem;
229+
}
230+
231+
.home .content{
232+
padding-top: 9.5rem;
233+
}
234+
235+
.home .image img{
236+
width: 368px;
237+
}
238+
239+
.home .content .title{
240+
font-size: 4rem;
241+
}
242+
243+
.home .content .description{
244+
font-size: 1.6rem;
245+
}
246+
247+
}
248+
249+
@media (max-width:450px){
250+
html{
251+
font-size: 50%;
252+
}
253+
}

0 commit comments

Comments
 (0)