Skip to content

Commit 24a401c

Browse files
CodingBDXCodingBDX
authored
Add files via upload
1 parent b4fa648 commit 24a401c

3 files changed

Lines changed: 197 additions & 0 deletions

File tree

‎prototype/splitingpage/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
13

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>split landing page</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div class="split left">
15+
<h1>playstation 5</h1>
16+
<a href="" class="btn">buy now</a>
17+
</div>
18+
<div class="split right">
19+
<h1>xbox one</h1>
20+
<a href="" class="btn">buy now</a>
21+
</div>
22+
23+
</div>
24+
<script src="script.js"></script>
25+
</body>
26+
27+
</html>

‎prototype/splitingpage/script.js‎

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

‎prototype/splitingpage/style.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
height: 100vh;
8+
margin: 0;
9+
overflow: hidden;
10+
}
11+
h1 {
12+
font-size: 3rem;
13+
color: white;
14+
text-align: center;
15+
position: absolute;
16+
left: 50%;
17+
top: 5%;
18+
transform: translateX(-50%);
19+
white-space: nowrap;
20+
}
21+
.btn {
22+
position: absolute;
23+
left: 50%;
24+
top: 25%;
25+
transform: translateX(-50%);
26+
text-decoration: none;
27+
color: white;
28+
background-color: crimson;
29+
border: crimson solid 0.2rem;
30+
padding: 4px;
31+
cursor: pointer;
32+
font-size: 25px;
33+
font-weight: bold;
34+
text-transform: uppercase;
35+
border-radius: 4px;
36+
37+
}
38+
39+
.btn:hover {
40+
background-color: blueviolet;
41+
border-color: blueviolet;
42+
}
43+
44+
.container {
45+
width: 100%;
46+
height: 100%;
47+
position: relative;
48+
background-color: grey;
49+
}
50+
51+
.split {
52+
position: absolute;
53+
width: 50%;
54+
height: 100%;
55+
overflow: hidden;
56+
}
57+
58+
.split.left {
59+
left: 0;
60+
background-image: url('https://images.unsplash.com/photo-1607853202273-797f1c22a38e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxheXN0YXRpb24lMjA1fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60');
61+
background-repeat: no-repeat;
62+
background-size: cover;
63+
}
64+
65+
.split.left::before {
66+
content: '';
67+
width: 100%;
68+
position: absolute;
69+
height: 100%;
70+
background-color: rgba(87, 84, 236, 0,7);
71+
}
72+
73+
.split.right {
74+
right: 0;
75+
background-image: url('https://images.unsplash.com/photo-1621259182978-fbf93132d53d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80');
76+
background-repeat: no-repeat;
77+
background-size: cover;
78+
79+
}
80+
81+
.split.right::before {
82+
content: '';
83+
width: 100%;
84+
position: absolute;
85+
height: 100%;
86+
background-color: rgba(87, 84, 236, 0,7);
87+
}
88+
89+
.split.right, .split.left, .split.right::before, .split.left::before {
90+
transition: all 0.3s ease-in-out;
91+
}
92+
93+
.hover-left .left {
94+
width: 75%;
95+
}
96+
.hover-left .right {
97+
width: 25%;
98+
}
99+
100+
101+
102+
103+
.hover-right .right {
104+
width: 75%;
105+
}
106+
.hover-right .left {
107+
width: 25%;
108+
}
109+
110+
111+
@media (max-width: 800px) {
112+
h1 {
113+
font-size:
114+
2rem;
115+
margin-top: 55%;
116+
117+
}
118+
119+
.btn {
120+
padding: 2px;
121+
font-size: 22px;
122+
margin-top: 75%;
123+
124+
}
125+
126+
127+
}
128+
129+
130+
131+
132+
133+
134+
135+
136+
137+
138+
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
149+
150+

0 commit comments

Comments
 (0)