-
Notifications
You must be signed in to change notification settings - Fork 1
/
BOX SHADOW AND TEXT SHADOW.html
92 lines (76 loc) · 2.82 KB
/
BOX SHADOW AND TEXT SHADOW.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOX SHADOW AND TEXT SHADOW</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&display=swap"
rel="stylesheet">
</head>
<style>
body {
padding: 0;
margin: 0;
font-family: 'Playfair Display', serif;
height: 100%;
width: 100%;
}
.allrounder {
display: flex;
border: 2px solid black;
padding: 100px 10px;
}
.card {
margin: 10px 10px;
border: 2px solid red;
padding: 20px 20px;
background-color: lightcyan;
box-shadow: inset -10px 10px 100px black;
text-shadow: 2px 2px 2px white;
}
#card-1 {
/* box-shadow: -10px -10px 10px 10px black ; */
}
#card-2 {
/* box-shadow: -10px -13px rgb(241, 11, 11); */
/* box-shadow: inset 10px 10px 10px blueviolet; */
}
#card-3 {
/* box-shadow: 10px 10px 10px black; */
}
#card-4 {
/* box-shadow: 10px 13px gold; */
/* box-shadow: inset -10px 10px 100px black; */
}
</style>
<body>
<header class="allrounder">
<div class="card" id="card-1">
<h1>card-1</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis repellendus rerum cupiditate quis
sint maxime, iusto quasi impedit dolorum voluptatibus eos. Commodi repellat delectus asperiores
quibusdam nam tempore cupiditate non magnam facilis!</p>
</div>
<div class="card" id="card-2">
<h1>card-2</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint, cum nobis illum distinctio quos, facere
sunt sit perferendis nemo earum molestias officia quis nisi delectus, praesentium consequatur aliquam
aliquid temporibus laborum tempora accusantium!</p>
</div>
<div class="card" id="card-3">
<h1>card-3</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores eveniet ut, eius esse ad eaque sit
voluptas aliquid suscipit explicabo delectus perspiciatis saepe, aperiam quasi provident! Quia officiis
esse repudiandae dolorem optio ducimus eaque!
</p>
</div>
<div class="card" id="card-4">
<h1>card-4</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, ullam tenetur amet culpa molestias
voluptates alias minus quo. Quas, vel facere consectetur unde consequuntur magni, eos deleniti non quaerat
necessitatibus reiciendis dolorem ducimus est asperiores.
</div>
</header>
</body>
</html>