Skip to content

Commit 0419953

Browse files
mikeludemannmikeludemann
committed
Setup complete - css-morphism
1 parent d372358 commit 0419953

File tree

3 files changed

+86
-0
lines changed

3 files changed

+86
-0
lines changed

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# OS Generate Files #
2+
######################
3+
.DS_Store
4+
.DS_Store?
5+
._*
6+
.Spotlight-V100
7+
.Trashes
8+
Desktop.ini

‎index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="./src/styles/style.css">
5+
</head>
6+
<body>
7+
<div class="content">
8+
<div class="morphism--1"></div>
9+
</div>
10+
<div class="content">
11+
<div class="morphism--2"></div>
12+
</div>
13+
<div class="content">
14+
<div class="morphism--3"></div>
15+
</div>
16+
<div class="content">
17+
<div class="morphism--4"></div>
18+
</div>
19+
</body>
20+
</html>
21+

‎src/styles/style.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.content {
2+
width: calc(100vw);
3+
height: calc(100vh);
4+
position: relative;
5+
}
6+
7+
.morphism--1 {
8+
width: 250px;
9+
height: 250px;
10+
border-radius: 50%;
11+
background: linear-gradient(315deg, #a7db4d, #c6ff5b);
12+
box-shadow: -50px -50px 100px #4a6122,
13+
50px 50px 100px #ffff88;
14+
position: absolute;
15+
top: 50%;
16+
left: 50%;
17+
margin: -125px 0 0px -125px;
18+
}
19+
20+
.morphism--2 {
21+
width: 250px;
22+
height: 250px;
23+
border-radius: 50%;
24+
background: linear-gradient(315deg, #a7db4d, #c6ff5b);
25+
box-shadow: -50px -50px 100px #4a6122,
26+
50px 50px 100px #ffff88;
27+
position: absolute;
28+
top: 50%;
29+
left: 50%;
30+
margin: -125px 0 0px -125px;
31+
}
32+
33+
.morphism--3 {
34+
width: 250px;
35+
height: 250px;
36+
border-radius: 50%;
37+
background: linear-gradient(315deg, #c6ff5b, #a7db4d);
38+
box-shadow: -50px -50px 100px #4a6122,
39+
50px 50px 100px #ffff88;
40+
position: absolute;
41+
top: 50%;
42+
left: 50%;
43+
margin: -125px 0 0px -125px;
44+
}
45+
46+
.morphism--4 {
47+
width: 250px;
48+
height: 250px;
49+
border-radius: 50%;
50+
background: #b9f355;
51+
box-shadow: -50px -50px 100px #4a6122,
52+
50px 50px 100px #ffff88;
53+
position: absolute;
54+
top: 50%;
55+
left: 50%;
56+
margin: -125px 0 0px -125px;
57+
}

0 commit comments

Comments
 (0)