With the use of coding skill like

HTML (Hypertext Markup Language),

CSS (Cascading Style Sheets) you can do anything on your browser.

This is another kind of new way to express the power of Frontend coding.

Here you can learn “CSS Grid & animation Slack logo”.

You just copy and paste into your code editor software and run it on your browser. You Don’t need to write manually it again. Just Copy & Paste.

If you don’t understand clearly so you can watch youtube videos which mention at the end of the page.

HTML

<ul class="grid">
    <li class="cell is-small is-blue"></li>
    <li class="cell is-large is-blue"></li>
    <li class="cell is-small is-green"></li>
    <li class="cell is-large is-green"></li>
    <li class="cell is-small is-red"></li>
    <li class="cell is-large is-red"></li>
    <li class="cell is-small is-yellow"></li>
    <li class="cell is-large is-yellow"></li>
</ul>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-size: 300px;
  background-repeat: no-repeat;
}
.grid {
  animation: spin 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 300px;
  height: 300px;
  grid-template-areas: ". blue-small green-large ." "blue-large blue-large green-large green-small" "red-small red-large yellow-large yellow-large" ". red-large yellow-small .";
}
.cell {
  align-items: end;
  justify-content: end;
  display: flex;
}
.cell::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100px;
}
.cell.is-large::before {
  animation: widen 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.cell.is-blue::before {
  background: #6ecadc;
}
.cell.is-blue.is-small {
  grid-area: blue-small;
}
.cell.is-blue.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-bottom-right-radius: 0;
}
.cell.is-blue::before {
  background: #6ecadc;
}
.cell.is-blue.is-large {
  grid-area: blue-large;
}
.cell.is-blue.is-large::before {
  animation-name: widen-w;
  margin-right: auto;
}
.cell.is-green::before {
  background: #3eb991;
}
.cell.is-green.is-small {
  grid-area: green-small;
}
.cell.is-green.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-bottom-left-radius: 0;
}
.cell.is-green::before {
  background: #3eb991;
}
.cell.is-green.is-large {
  grid-area: green-large;
}
.cell.is-green.is-large::before {
  animation-name: widen-h;
  margin-bottom: auto;
}
.cell.is-red::before {
  background: #e01563;
}
.cell.is-red.is-small {
  grid-area: red-small;
}
.cell.is-red.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-top-right-radius: 0;
}
.cell.is-red::before {
  background: #e01563;
}
.cell.is-red.is-large {
  grid-area: red-large;
}
.cell.is-red.is-large::before {
  animation-name: widen-h;
  margin-top: auto;
}
.cell.is-yellow::before {
  background: #e9a820;
}
.cell.is-yellow.is-small {
  grid-area: yellow-small;
}
.cell.is-yellow.is-small::before {
  animation: fade 2.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-top-left-radius: 0;
}
.cell.is-yellow::before {
  background: #e9a820;
}
.cell.is-yellow.is-large {
  grid-area: yellow-large;
}
.cell.is-yellow.is-large::before {
  animation-name: widen-w;
  margin-left: auto;
}
@-moz-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@-o-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(720deg);
  }
}
@-moz-keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@-webkit-keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@-o-keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@keyframes widen-w {
  0%, 100% {
    width: 100%;
  }
  50%, 70% {
    width: 60px;
  }
}
@-moz-keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@-webkit-keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@-o-keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@keyframes widen-h {
  0%, 100% {
    height: 100%;
  }
  50%, 70% {
    height: 60px;
  }
}
@-moz-keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}
@-webkit-keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}
@-o-keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}
@keyframes fade {
  0%, 100% {
    transform: scale(1);
  }
  50%, 70% {
    transform: scale(0);
  }
}

YouTube

Like Our Facebook Page For Update!

Read More

• Oneplus 10 Pro Specification
• Google New Policy Will Kill Third-Party Call Recording Apps
• WhatsApp Pay Can Now Be Rolled out to 100 Million Users
• Elon Musk Now Wants to Buy Twitter
• Things aren’t “back to normal” yet but GPU prices are…