Skip to content

Commit dbe6385

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #712 from vimarsh11/Split-Landing-Page
Split landing page
2 parents 4cad356 + f68d449 commit dbe6385

6 files changed

Lines changed: 177 additions & 0 deletions

File tree

‎Projects/Split Landing Page/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Description
2+
A split landing page, also known as an A/B test landing page or a multivariate landing page, is a web page that has been designed to test different versions of the same content or elements. The page is split into multiple versions, with each version containing a different variation of the design, copy, layout, or call-to-action. They can also be used in website optimization to increase the effectiveness of a website's overall design and user experience.
3+
# ATTACH SCREEN-SHOTS
4+
![Screenshot 2023-03-15 011350](https://user-images.githubusercontent.com/104987339/225328795-91457295-d904-42d1-99ed-0eeb6bdcf21f.png)
5+
![Screenshot 2023-03-15 011305](https://user-images.githubusercontent.com/104987339/225328816-985b7201-ab4f-4a2d-8c33-211eb95b4a9f.png)

‎Projects/Split Landing Page/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Split Landing Page
8+
</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="split left">
13+
<h1>Playstation 5</h1>
14+
<a href="#" class="btn">Buy Now</a>
15+
</div>
16+
<div class="split right">
17+
<h1>XBox Series X</h1>
18+
<a href="#" class="btn">Buy Now</a>
19+
</div>
20+
</div>
21+
22+
<script src="script.js"></script>
23+
</body>
24+
</html>

‎Projects/Split Landing Page/ps.jpg‎

96.6 KB
Loading

‎Projects/Split Landing Page/script.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const left = document.querySelector('.left')
2+
const right = document.querySelector('.right')
3+
const container = document.querySelector('.container')
4+
5+
left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
6+
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))
7+
8+
right.addEventListener('mouseenter', () => container.classList.add('hover-right'))
9+
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

‎Projects/Split Landing Page/style.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
:root {
4+
--left-bg-color: rgba(87, 84, 236, 0.7);
5+
--right-bg-color: rgba(43, 43, 43, 0.8);
6+
--left-btn-hover-color: rgba(87, 84, 236, 1);
7+
--right-btn-hover-color: rgba(28, 122, 28, 1);
8+
--hover-width: 75%;
9+
--other-width: 25%;
10+
--speed: 1000ms;
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
}
16+
17+
body {
18+
font-family: 'Roboto', sans-serif;
19+
height: 100vh;
20+
overflow: hidden;
21+
margin: 0;
22+
}
23+
24+
h1 {
25+
font-size: 4rem;
26+
color: #fff;
27+
position: absolute;
28+
left: 50%;
29+
top: 20%;
30+
transform: translateX(-50%);
31+
white-space: nowrap;
32+
}
33+
34+
.btn {
35+
position: absolute;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
left: 50%;
40+
top: 40%;
41+
transform: translateX(-50%);
42+
text-decoration: none;
43+
color: #fff;
44+
border: #fff solid 0.2rem;
45+
font-size: 1rem;
46+
font-weight: bold;
47+
text-transform: uppercase;
48+
width: 15rem;
49+
padding: 1.5rem;
50+
}
51+
52+
.split.left .btn:hover {
53+
background-color: var(--left-btn-hover-color);
54+
border-color: var(--left-btn-hover-color);
55+
}
56+
57+
.split.right .btn:hover {
58+
background-color: var(--right-btn-hover-color);
59+
border-color: var(--right-btn-hover-color);
60+
}
61+
62+
.container {
63+
position: relative;
64+
width: 100%;
65+
height: 100%;
66+
background: #333;
67+
}
68+
69+
.split {
70+
position: absolute;
71+
width: 50%;
72+
height: 100%;
73+
overflow: hidden;
74+
}
75+
76+
.split.left {
77+
left: 0;
78+
background: url('ps.jpg');
79+
background-repeat: no-repeat;
80+
background-size: cover;
81+
}
82+
83+
.split.left::before {
84+
content: '';
85+
position: absolute;
86+
width: 100%;
87+
height: 100%;
88+
background-color: var(--left-bg-color);
89+
}
90+
91+
.split.right {
92+
right: 0;
93+
background: url('xbox.jpg');
94+
background-repeat: no-repeat;
95+
background-size: cover;
96+
}
97+
98+
.split.right::before {
99+
content: '';
100+
position: absolute;
101+
width: 100%;
102+
height: 100%;
103+
background-color: var(--right-bg-color);
104+
}
105+
106+
.split.right,
107+
.split.left,
108+
.split.right::before,
109+
.split.left::before {
110+
transition: all var(--speed) ease-in-out;
111+
}
112+
113+
.hover-left .left {
114+
width: var(--hover-width);
115+
}
116+
117+
.hover-left .right {
118+
width: var(--other-width);
119+
}
120+
121+
.hover-right .right {
122+
width: var(--hover-width);
123+
}
124+
125+
.hover-right .left {
126+
width: var(--other-width);
127+
}
128+
129+
@media (max-width: 800px) {
130+
h1 {
131+
font-size: 2rem;
132+
top: 30%;
133+
}
134+
135+
.btn {
136+
padding: 1.2rem;
137+
width: 12rem;
138+
}
139+
}

‎Projects/Split Landing Page/xbox.jpg‎

39.7 KB
Loading

0 commit comments

Comments
 (0)