Lecture 18 (Morning)

on

 Game 1


Game 2



Index.html

<!DOCTYPE html>
<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>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container">

        <div>
            <div class="fade">
                <!-- <div class="rec2"></div> -->

            </div>
        </div>
        <!-- <div class="rec">
            1
        </div> -->
        <!-- <div class="rec">2</div>
        <div class="rec">3</div>
        <div class="rec">4</div>
        <div class="rec">5</div>
        <div class="rec">6</div>
        <div class="rec">7</div>
        <div class="rec">8</div>
        <div class="rec">9</div>
        <div class="rec">10</div> -->
        <!-- <div class="rec">11</div>
        <div class="rec">12</div> -->

    </div>
</body>

</html>



Style.css


.container {
  height: 500px;
  background-color: black;
  display: flex;
  /* flex-direction: row-reverse;
    flex-wrap: wrap-reverse; */
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}

.rec {
  height: 200px;
  width: 200px;
  /* display: inline-block; */
  background-color: red;
  margin: 10px;
  color: white;
  font-size: 30px;
  padding: 20px;
}

.fade {
  height: 100px;
  width: 100px;
  margin: auto;
  background-color: green;
  animation-name: ripple;
  animation-duration: 3s;
  display: flex;

  border-radius: 50%;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }

  to {
    opacity: 0;
    transform: scale(3);
  }
}

.rec2 {
  height: 50px;
  width: 50px;

  background-color: green;
  border-radius: 50%;
}

Comments

Post a Comment