Skip to content

Commit 5472158

Browse files
solygambassolygambas
committed
add split landing page
1 parent 80fd7c2 commit 5472158

File tree

4 files changed

+175
-1
lines changed

4 files changed

+175
-1
lines changed

‎05-blurry loading/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ body {
1616

1717
.bg {
1818
background: url("https://images.unsplash.com/photo-1610217053402-b187336e9443?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80")
19-
no-repeat center center/cover;
19+
no-repeat center center / cover;
2020
position: absolute;
2121
top: -30px;
2222
left: -30px;

‎07-split landing page/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="split left">
12+
<h1>PlayStation 5</h1>
13+
<a href="#" class="btn">Buy Now</a>
14+
</div>
15+
<div class="split right">
16+
<h1>Xbox Series X</h1>
17+
<a href="#" class="btn">Buy Now</a>
18+
</div>
19+
</div>
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎07-split landing page/script.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const left = document.querySelector(".left");
2+
const right = document.querySelector(".right");
3+
const container = document.querySelector(".container");
4+
5+
left.addEventListener("mouseenter", () =>
6+
container.classList.add("hover-left")
7+
);
8+
left.addEventListener("mouseleave", () =>
9+
container.classList.remove("hover-left")
10+
);
11+
right.addEventListener("mouseenter", () =>
12+
container.classList.add("hover-right")
13+
);
14+
right.addEventListener("mouseleave", () =>
15+
container.classList.remove("hover-right")
16+
);

‎07-split landing page/style.css

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
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+
--minimize-width: 25%;
10+
--transition-speed: 1s;
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+
color: #fff;
36+
position: absolute;
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
left: 50%;
41+
top: 40%;
42+
transform: translateX(-50%);
43+
border: #fff solid 0.2rem;
44+
text-decoration: none;
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("https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
79+
no-repeat center / cover;
80+
}
81+
82+
.split.left::before {
83+
content: "";
84+
position: absolute;
85+
width: 100%;
86+
height: 100%;
87+
background-color: var(--left-bg-color);
88+
}
89+
90+
.split.right {
91+
right: 0;
92+
background: url("https://images.unsplash.com/photo-1607853827120-6847830b38b0?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1762&q=80")
93+
no-repeat center / cover;
94+
}
95+
96+
.split.right::before {
97+
content: "";
98+
position: absolute;
99+
width: 100%;
100+
height: 100%;
101+
background-color: var(--right-bg-color);
102+
}
103+
104+
.split.left,
105+
.split.right,
106+
.split.left::before,
107+
.split.right::before {
108+
transition: all var(--transition-speed) ease-in-out;
109+
}
110+
111+
.hover-left .left {
112+
width: var(--hover-width);
113+
}
114+
115+
.hover-left .right {
116+
width: var(--minimize-width);
117+
}
118+
119+
.hover-right .right {
120+
width: var(--hover-width);
121+
}
122+
123+
.hover-right .left {
124+
width: var(--minimize-width);
125+
}
126+
127+
@media (max-width: 800px) {
128+
h1 {
129+
font-size: 2rem;
130+
top: 30%;
131+
}
132+
.btn {
133+
padding: 1.2rem;
134+
width: 12rem;
135+
}
136+
}

0 commit comments

Comments
 (0)