Skip to content

Commit c814b86

Browse files
coder-sauravcoder-saurav
committed
First Commit
0 parents  commit c814b86

File tree

5 files changed

+189
-0
lines changed

5 files changed

+189
-0
lines changed

‎images/Designer.jpg

428 KB
Loading

‎images/Programmer.png

1.14 MB
Loading

‎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 name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="styles.css" />
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="split left">
13+
<h1>The Designer</h1>
14+
<a href="#" class="button">Read More</a>
15+
</div>
16+
<div class="split right">
17+
<h1>The Programmer</h1>
18+
<a href="#" class="button">Read More</a>
19+
</div>
20+
</div>
21+
<script src="main.js"></script>
22+
</body>
23+
</html>

‎main.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
9+
left.addEventListener("mouseleave", () => {
10+
container.classList.remove("hover-left");
11+
});
12+
13+
right.addEventListener("mouseenter", () => {
14+
container.classList.add("hover-right");
15+
});
16+
17+
right.addEventListener("mouseleave", () => {
18+
container.classList.remove("hover-right");
19+
});

‎styles.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
:root {
2+
--container-bg-color: #333;
3+
--left-bg-color: rgba(223, 39, 39, 0.7);
4+
--left-button-hover-color: rgba(161, 11, 11, 0.3);
5+
--right-bg-color: rgba(43, 43, 43, 0.8);
6+
--right-button-hover-color: rgba(92, 92, 92, 0.3);
7+
--hover-width: 75%;
8+
--other-width: 25%;
9+
--speed: 1000ms;
10+
}
11+
12+
html,
13+
body {
14+
padding: 0;
15+
margin: 0;
16+
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
17+
width: 100%;
18+
height: 100%;
19+
overflow-x: hidden;
20+
}
21+
22+
h1 {
23+
font-size: 4rem;
24+
color: #fff;
25+
position: absolute;
26+
left: 50%;
27+
top: 20%;
28+
transform: translateX(-50%);
29+
white-space: nowrap;
30+
}
31+
32+
.button {
33+
display: block;
34+
position: absolute;
35+
left: 50%;
36+
top: 40%;
37+
height: 2.5rem;
38+
padding-top: 1.3rem;
39+
width: 15rem;
40+
text-align: center;
41+
color: #fff;
42+
border: #fff solid 0.2rem;
43+
font-size: 1rem;
44+
font-weight: bold;
45+
text-transform: uppercase;
46+
text-decoration: none;
47+
transform: translateX(-50%);
48+
}
49+
50+
.split.left .button:hover {
51+
background-color: var(--left-button-hover-color);
52+
border-color: var(--left-button-hover-color);
53+
}
54+
55+
.split.right .button:hover {
56+
background-color: var(--right-button-hover-color);
57+
border-color: var(--right-button-hover-color);
58+
}
59+
60+
.container {
61+
position: relative;
62+
width: 100%;
63+
height: 100%;
64+
background: var(--container-bg-color);
65+
}
66+
67+
.split {
68+
position: absolute;
69+
width: 50%;
70+
height: 100%;
71+
overflow: hidden;
72+
}
73+
74+
.split.left {
75+
left: 0;
76+
background: url("./images/Designer.jpg") center center no-repeat;
77+
background-size: cover;
78+
}
79+
80+
.split.left:before {
81+
position: absolute;
82+
content: "";
83+
width: 100%;
84+
height: 100%;
85+
background: var(--left-bg-color);
86+
}
87+
88+
.split.right {
89+
right: 0;
90+
background: url("./images/Programmer.png") center center no-repeat;
91+
background-size: cover;
92+
}
93+
94+
.split.right:before {
95+
position: absolute;
96+
content: "";
97+
width: 100%;
98+
height: 100%;
99+
background: var(--right-bg-color);
100+
}
101+
102+
.split.left,
103+
.split.right,
104+
.split.right:before,
105+
.split.left:before {
106+
transition: var(--speed) all ease-in-out;
107+
}
108+
109+
.hover-left .left {
110+
width: var(--hover-width);
111+
}
112+
113+
.hover-left .right {
114+
width: var(--other-width);
115+
}
116+
117+
.hover-left .right:before {
118+
z-index: 2;
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+
.hover-right .left:before {
130+
z-index: 2;
131+
}
132+
133+
@media (max-width: 800px) {
134+
h1 {
135+
font-size: 2rem;
136+
}
137+
138+
.button {
139+
width: 12rem;
140+
}
141+
}
142+
143+
@media (max-height: 700px) {
144+
.button {
145+
top: 70%;
146+
}
147+
}

0 commit comments

Comments
 (0)