CSS Playground - Страница Профиля Шаг 5: Online Interpreter, Compiler & Editor

html

<html>
<head>
  <title>John Doe's Profile</title>
</head>
<body>
  <ul id="profile">
    <img src="https://blob.sololearn.com/courses/ava.png">
    <h2>John Doe</h2>
    <p>🇺🇸USA</p>
    <li>25 Followers</li>
    <li>20 Following</li>
    <li>⭐️1581 XP</li>
  </ul>
  <div id="streak">Streak
    <ul>
      <li class="active-day">M</li>
      <li class="active-day">T</li>
      <li class="active-day">W</li>
      <li class="inactive-day">T</li>
      <li class="inactive-day">F</li>
      <li class="inactive-day">S</li>
      <li class="inactive-day">S</li>
    </ul>
    <p>Current Streak: 3</p>
    <p>Longest Streak: 16</p>
  </div>
</body>
</html>

css

body{
    background-color: DarkSlateGrey;
    text-align:center;
    color: white;
    font-family:Arial, sans-serif;
}
#profile {
    text-align:center;
    color:  #FFF;
}
.active-day{
    color: #00CC00;
    animation-name:pulse;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes pulse{
0% {transform:scale(1);
color: #fff;}
50% {transform:scale(1.2);
color: #00CC00;}
100%{transform:scale(1);
color:  #fff;}
}
.inactive-day{
    color:  #CCCCCC;
}

BROWSER

Console