<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Flexbox with Cats!</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="cat-box">
<img
src="https://github.com/kefimochi/Flexbox-with-cats/blob/master/Part%201/MyCat.png?raw=true"
alt="Illustration of a black cat staring at the user"
/>
<img
src="https://github.com/kefimochi/Flexbox-with-cats/blob/master/Part%201/MyCat.png?raw=true"
alt="Illustration of a black cat staring at the user"
/>
<img
src="https://github.com/kefimochi/Flexbox-with-cats/blob/master/Part%201/MyCat.png?raw=true"
alt="Illustration of a black cat staring at the user"
/>
</div>
</body>
</html>
body {
background-color: #7c4444;
}
.cat-box {
background-color: #f1dfd8;
height: 500px;
width: 1000px;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25),
0 0 4rem 0px rgba(100, 100, 100, 0.15);
}
img {
height: 200px;
width: auto;
border: 2.5px solid black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.