-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
100 lines (83 loc) · 3.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>neumorphia.css</title>
<link href="style.css" rel="stylesheet" />
<link href="neumorphia.css" rel="stylesheet" />
</head>
<body>
<div class="chunk">
<div class="group">
<div class="neu outset pill">Hello there!</div>
</div>
</div>
<hr class="hr-bar">
<div class="chunk">
<div class="group">
<div class="neu convex shrink squircle">1</div>
<div class="neu convex shrink squircle">2</div>
</div>
<div class="card flat">
<div class="neu concave grow pill">Hover!</div>
<div class="group">
<div class="neu convex shrink circle">–</div>
<div class="neu convex shrink circle">+</div>
</div>
</div>
<div class="group">
<div class="neu convex shrink circle">#</div>
<div class="neu convex shrink circle">$</div>
<br>
<div class="neu convex shrink circle">?</div>
<div class="neu convex shrink circle">=</div>
</div>
</div>
<hr class="hr-bar">
<div class="chunk">
<div class="card flat">
<div class="neu inset pill">Kenny</div>
<div class="neu convex shrink circle"><i class="far fa-heart"></i></div>
<div class="neu convex shrink circle"><i class="fas fa-share"></i></div>
</div>
<div class="card flat">
<div class="neu inset pill">CSS</div>
<div class="neu convex shrink circle"><i class="far fa-heart"></i></div>
<div class="neu convex shrink circle"><i class="fas fa-share"></i></div>
</div>
</div>
<hr class="hr-bar">
<div class="chunk">
<div class="group">
<div class="card flat">
<input type="search" class="neu inset input-data" id="card-search" name="search" placeholder="Search...">
<div class="neu convex shrink circle"><i class="fas fa-search"></i></div>
</div>
</div>
</div>
<hr class="hr-bar">
<div class="chunk">
<div class="neu flat photo-card">
<img class="grow" src="https://www.worldatlas.com/r/w1200-q80/upload/2e/89/bb/shutterstock-445897690.jpg">
<p>Aurora Borealis</p>
</div>
</div>
<hr class="hr-bar">
<div class="chunk">
<div class="neu grow ring"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuYxAHm4arabyDMf6wOUGc5FROT-GiteAaTg&usqp=CAU"></div>
<hr class="hr-bar">
<div class="neu grow ring"><img src="https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5f47d4de7637290765bce495%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D1398%26cropX2%3D3908%26cropY1%3D594%26cropY2%3D3102"></div>
<hr class="hr-bar">
<div class="neu grow ring"><img src="https://images.moneycontrol.com/static-mcnews/2021/01/Elon-Musk-1.jpg"></div>
</div>
<hr class="hr-bar">
<div class="chunk">
<div class="neu grow ring">10%</div>
<div class="neu grow ring">50%</div>
<div class="neu grow ring">100%</div>
</div>
<script src="script.js"></script>
<script src="fontawesome.js"></script>
</body>
</html>