Skip to content

Commit 27e7402

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #47 from KryptonANSHU/Split_Landing-CSS
Split landing css
2 parents 83f6f62 + 0f67979 commit 27e7402

6 files changed

Lines changed: 153 additions & 0 deletions

File tree

‎Awesome Split Landing Page/Images/Ps5.png‎

729 KB
Loading

‎Awesome Split Landing Page/Images/grp2.jpg‎

706 KB
Loading

‎Awesome Split Landing Page/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Split-landing
2+
Try it here https://kryptonanshu.github.io/Split-landing/

‎Awesome Split Landing Page/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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>Play station 5</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="outer" id="outer">
12+
13+
<div class="left" id="left">
14+
<a href="#">Buy Now</a>
15+
</div>
16+
17+
<div class="right" id="right">
18+
<a href="#">Explore Games</a>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎Awesome Split Landing Page/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const outer = document.getElementById('outer');
2+
const right = document.getElementById('right');
3+
const left = document.getElementById('left');
4+
5+
left.addEventListener('mouseover',()=>{
6+
outer.classList.add('hover-left');
7+
})
8+
left.addEventListener('mouseleave',()=>{
9+
outer.classList.remove('hover-left');
10+
})
11+
12+
right.addEventListener('mouseover',()=>{
13+
outer.classList.add('hover-right');
14+
})
15+
right.addEventListener('mouseleave',()=>{
16+
outer.classList.remove('hover-right');
17+
})

‎Awesome Split Landing Page/style.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@1,600&display=swap');
2+
3+
4+
5+
*{
6+
margin: 0px;
7+
box-sizing: border-box;
8+
}
9+
body{
10+
font-family: 'Nunito Sans', sans-serif;
11+
overflow: hidden;
12+
}
13+
14+
.outer{
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
height: 100vh;
19+
width: 100vw;
20+
}
21+
.outer.hover-left .left{
22+
width: 75%;
23+
}
24+
25+
.outer.hover-left .right{
26+
width: 25%;
27+
}
28+
29+
.outer.hover-right .right{
30+
width: 75%;
31+
}
32+
.outer.hover-right .left{
33+
width: 25%;
34+
}
35+
36+
37+
/* ----------------------------------------------------------Left (PS5)---------------------------------------------------- */
38+
39+
.left{
40+
height: inherit;
41+
width: 50%;
42+
transition: all 1.3s ease;
43+
background: rgba(80, 60, 240, 0.6);
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
}
48+
.left::before{
49+
content: '';
50+
position: absolute;
51+
left: 0;
52+
top: 0;
53+
height: inherit;
54+
width: inherit;
55+
background-image: url(./Images/Ps5.png);
56+
background-repeat: no-repeat;
57+
background-size: auto 100%;
58+
background-position: center ;
59+
z-index: -1;
60+
}
61+
62+
63+
/* ---------------------------------------------------Right---------------------------------------------- */
64+
65+
.right{
66+
height: inherit;
67+
width: 50%;
68+
transition: all 1.3s ease;
69+
/* border-left: 2px solid black; */
70+
background: rgb(23 36 26 / 80%);
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
75+
}
76+
.right::before{
77+
content: '';
78+
position: absolute;
79+
right: 0;
80+
top: 0;
81+
height: inherit;
82+
width: inherit;
83+
background-image: url(./Images/grp2.jpg);
84+
background-repeat: no-repeat;
85+
background-size: auto 100%;
86+
background-position: center;
87+
z-index: -1;
88+
/* background-position: center; */
89+
}
90+
/* ------------------------------------------------------------------------------------------------ */
91+
a{
92+
opacity: 0;
93+
text-decoration: none;
94+
list-style: none;
95+
color: white;
96+
font-size: 30px;
97+
text-transform: uppercase;
98+
padding: 20px 20px;
99+
border: 3px solid white;
100+
transition: all 1.3s ease;
101+
}
102+
103+
104+
.outer.hover-right .right a{
105+
opacity: 1;
106+
}
107+
108+
109+
.outer.hover-left .left a{
110+
opacity: 1;
111+
}

0 commit comments

Comments
 (0)