Skip to content

Commit 064f437

Browse files
frontzingafrontzinga
authored
files upload
0 parents  commit 064f437

File tree

4 files changed

+216
-0
lines changed

4 files changed

+216
-0
lines changed

‎img/faye.png

764 KB
Loading

‎img/spike.png

417 KB
Loading

‎index.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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>Cowboy bebop hero</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Bevan&display=swap" rel="stylesheet">
11+
<link href="style.css" rel="stylesheet" />
12+
</head>
13+
<body>
14+
15+
<header>Cowboy bebop</header>
16+
17+
<div class="hero">
18+
19+
<div class="slice left">
20+
<div class="text">
21+
<h2>Spike<br/>Spiegel</h2>
22+
<div class="abstract">
23+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat fugiat nesciunt veniam maxime ab explicabo omnis deleniti vel, molestiae accusamus! Ea laboriosam iure iusto minima, officia optio atque totam?</p>
24+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur cupiditate blanditiis consequuntur reprehenderit. Maiores quo deleniti mollitia soluta architecto officia molestias fugiat quisquam nesciunt, odit voluptatibus a reprehenderit similique tempore.</p>
25+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, commodi nobis! Corrupti vel est, quaerat commodi possimus doloribus voluptates molestias quibusdam reprehenderit? Iure placeat aspernatur, debitis mollitia nihil excepturi ipsam.</p>
26+
</div>
27+
</div>
28+
<div class="bg"></div>
29+
</div>
30+
31+
<div class="slice right">
32+
<div class="text">
33+
<h2>Faye<br/>Valentine</h2>
34+
<div class="abstract">
35+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat fugiat nesciunt veniam maxime ab explicabo omnis deleniti vel, molestiae accusamus! Ea laboriosam iure iusto minima, officia optio atque totam?</p>
36+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur cupiditate blanditiis consequuntur reprehenderit. Maiores quo deleniti mollitia soluta architecto officia molestias fugiat quisquam nesciunt, odit voluptatibus a reprehenderit similique tempore.</p>
37+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, commodi nobis! Corrupti vel est, quaerat commodi possimus doloribus voluptates molestias quibusdam reprehenderit? Iure placeat aspernatur, debitis mollitia nihil excepturi ipsam.</p>
38+
</div>
39+
</div>
40+
<div class="bg"></div>
41+
</div>
42+
43+
</div>
44+
45+
<footer>@Frontzinga</footer>
46+
47+
</body>
48+
</html>

‎style.css

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
*, *:before, *:after {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--transition: all 0.5s ease;
9+
}
10+
11+
body {
12+
font-family: 'Bevan', cursive;
13+
font-size: 16px;
14+
line-height: 1.3;
15+
padding: 2rem;
16+
background: black;
17+
height: 100vh;
18+
}
19+
20+
header {
21+
position: absolute;
22+
top: 0;
23+
left: 50%;
24+
transform: translateX(-50%);
25+
background: #b73659;
26+
color: white;
27+
font-size: 2rem;
28+
padding: 0.5rem 1rem;
29+
text-align: center;
30+
z-index: 1;
31+
text-transform: uppercase;
32+
}
33+
34+
footer {
35+
position: absolute;
36+
bottom: 0;
37+
left: 50%;
38+
transform: translateX(-50%);
39+
color: #555;
40+
font-size: 0.8rem;
41+
text-align: center;
42+
padding: 0.5rem;
43+
}
44+
45+
.hero {
46+
height: 100%;
47+
position: relative;
48+
}
49+
50+
.slice {
51+
width: calc(60% - 4rem);
52+
height: 100%;
53+
position: absolute;
54+
overflow: hidden;
55+
color: white;
56+
cursor: pointer;
57+
}
58+
59+
.slice.left {
60+
background: #6532a0;
61+
clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
62+
left: 0;
63+
transition: var(--transition);
64+
}
65+
66+
.slice.right {
67+
background: #ea2a5e;
68+
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
69+
right: 0;
70+
transition: var(--transition);
71+
}
72+
73+
.slice .text {
74+
padding: 2rem;
75+
position: absolute;
76+
bottom: 0;
77+
width: 100%;
78+
z-index: 2;
79+
background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(255,255,255,0) 100%);
80+
}
81+
82+
.slice h2 {
83+
font-size: 2.5rem;
84+
position: relative;
85+
padding-bottom: 2rem;
86+
}
87+
88+
.slice h2:after {
89+
content: '';
90+
width: 2rem;
91+
height: 1rem;
92+
margin-top: 1rem;
93+
position: absolute;
94+
bottom: 0;
95+
transition: var(--transition);
96+
}
97+
98+
.slice.left h2:after {
99+
background: #ea2a5e;
100+
left: 0;
101+
}
102+
103+
.slice.right h2:after {
104+
background: #6532a0;
105+
right: 0;
106+
}
107+
108+
.slice .abstract {
109+
color: #ddd;
110+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
111+
padding-top: 1rem;
112+
max-height: 0;
113+
opacity: 0;
114+
transition: var(--transition);
115+
}
116+
117+
.slice p {
118+
margin-bottom: 1rem;
119+
}
120+
121+
.slice.left .text {
122+
left: 0;
123+
padding-right: 15rem;
124+
}
125+
126+
.slice.right .text {
127+
right: 0;
128+
padding-left: 15rem;
129+
text-align: right;
130+
}
131+
132+
.slice .bg {
133+
background-repeat: no-repeat;
134+
width: 100%;
135+
height: 100%;
136+
filter: grayscale(1);
137+
transition: var(--transition);
138+
}
139+
140+
.slice.left .bg {
141+
background-image: url(/img/spike.png);
142+
}
143+
144+
.slice.right .bg {
145+
background-image: url(/img/faye.png);
146+
}
147+
148+
.slice:hover .bg {
149+
filter: grayscale(0);
150+
transform: scale(1.2);
151+
}
152+
153+
.slice:hover .abstract {
154+
opacity: 1;
155+
max-height: 20rem;
156+
}
157+
158+
.slice:hover h2:after {
159+
width: 6rem;
160+
}
161+
162+
.slice.left:hover {
163+
background: #3298a0;
164+
}
165+
166+
.slice.right:hover {
167+
background: #d4bb32;
168+
}

0 commit comments

Comments
 (0)