- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shadow Art – 3</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logo">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
</body>
</html>
CSS
body {
padding: 20px;
background-color: white;
}
.logo {
margin: 50px auto;
width: 280px;
}
.logo div {
position: absolute;
}
.logo .c1 {
margin-left: 0;
}
.logo .c2 {
margin-left: 60px;
}
.logo .c3 {
margin-left: 120px;
}
.logo .c4 {
margin-left: 180px;
}
.circle {
margin: 10px auto;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow:
inset 2px 2px 2px 0 white,
inset 0 0 0 4px #4f5054,
inset 0 0 0 5px black,
inset -5px -5px 5px 3px white,
inset 0 0 0 9px #6c6d70,
inset 0 0 0 10px black;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Add the circle class to the elements with the following classes:
c1,c2,c3,c4.
Comments