<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Instagram Logo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="instagram"><span></span></div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/heatherduvall/instagram-logo-aNxZXX */
body {
display: flex;
justify-content: center;
min-height: 100vh;
}
.instagram {
position: relative;
margin: 0 auto;
width: 250px;
height: 250px;
align-self: center;
border-radius: 55px;
background: radial-gradient(circle at 30% 110%, #ffdb8b 0%, #ee653d 25%, #d42e81 50%, #a237b6 75%, #3e5fbc 100%);
box-shadow: 0 15px 40px 1px rgba(0, 0, 0, 0.3);
}
.instagram span {
display: block;
border: 15px solid #fff;
width: 150px;
height: 150px;
border-radius: 55px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.instagram span:before, .instagram span:after {
content: "";
position: absolute;
}
.instagram span:before {
width: 60px;
height: 60px;
border-radius: 50%;
border: 15px solid #fff;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.instagram span:after {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
top: 16px;
right: 16px;
}