<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex card</title> <link href="stylesheet.css" rel="stylesheet"> <script src="circletype.min.js"></script> </head> <body> <section> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> <div class="card"> <p id="up" class="up">'o ccafè</p> <p id="down" class="down">the coffee</p> <img src='./images/coffee.PNG'> </div> </section> </body> <script> // new CircleType(document.getElementById("up")).radius(120); // new CircleType(document.getElementById("down")).dir(-1).radius(120); // https://www.w3schools.com/js/js_loop_for.asp var ups = document.querySelectorAll(".up"); for (let i = 0; i < ups.length; i++) { new CircleType(ups[i]).radius(160); } var downs = document.querySelectorAll(".down"); for (let i = 0; i < downs.length; i++) { new CircleType(downs[i]).dir(-1).radius(160); } </script> </html>