-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathboxshadow.html
43 lines (42 loc) · 2.28 KB
/
boxshadow.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box shadow and text shadow</title>
<style>
.container{
display: flex;
}
.card{
padding:23px 3px;
/* border:2px solid red; */
margin: 23px 11px;
background-color: bisque;
box-shadow: -10px -13px 10px red;
box-shadow: -10px -13px 10px 13px red;
box-shadow: inset 3px 5px green;
box-shadow: 3px 5px green,2px 5px red;
}
.card h2{
text-shadow: 0px 3px blueviolet;
text-shadow: 0px 3px 2px blueviolet;
}
</style>
</head>
<body>
<div class="container">
<div class="card" id="card-1"><h2>This is C++ course.</h2>
<p>I have started this course which does not mean we will stop this course Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem hic expedita laboriosam ab vitaeanimi, velit nam quaerat eius numquam voluptate voluptatum placeat, officia deleniti unde quam magni ad istetempore saepe dicta doloribus ut! Possimus distinctio harum libero beatae labore expedita praesentium magni!Quo, inventore velit. Quod.</p></div>
<div class="card" id="card-2"><h2>This is html course.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem hic expedita laboriosam ab vitae
animi, velit nam quaerat eius numquam voluptate voluptatum placeat, officia deleniti unde quam magni ad iste
tempore saepe dicta doloribus ut! Possimus distinctio harum libero beatae labore expedita praesentium magni!
Quo, inventore velit. Quod.</p></div>
<div class="card" id="card-3"><h2>Card3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem hic expedita laboriosam ab vitae
animi, velit nam quaerat eius numquam voluptate voluptatum placeat, officia deleniti unde quam magni ad isttempore saepe dicta doloribus ut! Possimus distinctio harum libero beatae labore expedita praesentium magniQuo, inventore velit. Quod.</p></div>
</div>
</body>
</html>