<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>Slack Logo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slack">
<div class="blue small"></div>
<div class="blue big"></div>
<div class="green small"></div>
<div class="green big"></div>
<div class="red small"></div>
<div class="red big"></div>
<div class="yellow small"></div>
<div class="yellow big"></div>
</div>
<div class="footer"><p>Created by <a href="https://www.rembertdesigns.co/" target="_blank">Richard Rembert</a></p>
</div>
</body>
</html>:root{
--blue: #36c5f0;
--green: #2eb67d;
--red: #e01e5a;
--yellow:#ecb22e;
--bg: #4a154b;
}
body{
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
background: var(--bg);
}
.slack{
display: grid;
width: 16rem;
height: 16rem;
gap: 0.5rem;
}
.blue{
background: var(--blue);
}
.blue.small{
grid-column-start: 2;
border-bottom-right-radius: 0;
}
.blue.big{
grid-row: 2;
grid-column: span 2;
}
.green{
background: var(--green);
}
.green.small{
grid-row: 2;
grid-column-start: 4;
border-bottom-left-radius: 0;
}
.green.big{
grid-row: span 2;
grid-column: 3;
}
.red{
background: var(--red);
}
.red.small{
grid-column-start: 1;
border-top-right-radius: 0;
}
.red.big{
grid-row: span 2;
grid-column: 2;
}
.yellow{
background: var(--yellow);
}
.yellow.small{
grid-column-start: 3;
border-top-left-radius: 0;
}
.yellow.big{
grid-row: 3;
grid-column: 3/span 2;
}
.slack>div{
border-radius: 30px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #4a154b;
text-align: center;
}
.footer p {
text-decoration: none;
color: #fff;
}
.footer a {
text-decoration: none;
color: #36c5f0;
}
.footer a:hover {
text-decoration: underline;
color: #ecb22e;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.