<!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>
</head>
<style>
.container{
display: flex;
}
.card{
padding: 23px 12px;
margin: 23px 12px;
/* border: 2px solid red; */
background-color: bisque;
/* box-shadow: offset-x offset-y color; */
/* box-shadow: offset-x offset-y blur-radius spread-radius color; */
/* box-shadow: 10px 13px green; */
/* box-shadow: -7px -5px 10px green; */
/* box-shadow: -7px -5px 10px 20px rgba(71, 172, 172, 0.5) */
box-shadow: inset 3px 5px red;
}
.card h2{
/* text-shadow: 3px 4px white; */
text-shadow: 3px 4px 2px white;
}
</style>
<body>
<div class="container">
<div class="card" id="car-1">
<h2> This is C++ Course</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet repudiandae, quaerat rerum quae error assumenda ipsum beatae excepturi explicabo facilis ex? Voluptate quaerat illo iusto quia incidunt quos, ipsa exercitationem ut perspiciatis eligendi nisi!
</p>
</div>
<div class="card" id="car-2">
<h2>This is HTML Course</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, voluptates! Dolorem repudiandae vitae, excepturi iusto vel ad reiciendis similique eligendi officia amet animi.</p>
</div>
<div class="card" id="car-3">
<h2> Card3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates inventore odit qui temporibus ipsa ducimus? Corporis quasi impedit eum! Dolor placeat molestiae explicabo. Expedita praesentium excepturi cumque quidem.</p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment