Merhaba R10 Ailesi İnan Sırf Paylaşım olsun Diye Üşenmiyorum Elimden Geldği Kadar Birşeyler Yazmaya Çalışıyorum Kod Yazmaya Çok Hevesliyim Öğrenmek istiyorum
Bu Yüzden Derslere Bakıyorum Kendimi Deneyip Derslerdeki Yapılan Tasarımları Yazmaya Çalşıyorum Buda Bu Paylaşımım dan Birtanesi
Türkçem Çok Kötü Bundan Dolayı Özür Dilerim

Tüm R10 Ailesinin Mübarek Kurban Bayramını Kutlarım

<!DOCTYPE html>
<html lang="en" dir="ltr">
<link rel="stylesheet" href="Styles.css">
  <head>
    <meta charset="utf-8">
    <title>Saat HTML CSS Tasarım </title>
  </head>
  <body>
    <!---Saat --->
<div id="time">
  <div class="circle" style="--clr:#cc0000;">
    <div class="dots hr_dot"></div>
  <svg>
    <circle cx="70" cy="70" r="70"></circle>
    <circle cx="70" cy="70" r="70" id="hh"></circle>
    </svg>
 <!---Dakika --->
        <div id="hours">00</div>
</div>
  <div class="circle" style="--clr:#fff;">
    <div class="dots min_dot"></div>
  <svg>
    <circle cx="70" cy="70" r="70"></circle>
    <circle cx="70" cy="70" r="70" id="mm"></circle>
    </svg>
 
     <div id="minutes">00</div>
</div>
<div class="circle" style="--clr:#cc0000;">
  <div class="dots sec_dot"></div>
  <svg>
    <circle cx="70" cy="70" r="70"></circle>
    <circle cx="70" cy="70" r="70" id="ss"></circle>
    </svg>
     <div id="seconds">00</div>
    </div>
    <div class="ap">
        <div id="ampm">AM</div>
</div>

<script>

setInterval (() =>{

let hours = document.getElementById('hours');
let minutes = document.getElementById('minutes');
let seconds = document.getElementById('seconds');
let ampm = document.getElementById('ampm');

let hh = document.getElementById('hh')
let mm = document.getElementById('mm')
let ss = document.getElementById('ss')

let hr_dot = document.querySelector('.hr_dot');
let min_dot = document.querySelector('.min_dot');
let sec_dot = document.querySelector('.sec_dot');

let h = new Date () .getHours();
let m = new Date () .getMinutes();
let s = new Date () .getSeconds();
let am = h >= 24 ? "PM" : "AM" ;

if (h > 24){
 h = h - 24;

}

h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;

hours.innerHTML = h + "<br><span>Saat</span>";
minutes.innerHTML = m + "<br><span>Dakika</span>";
seconds.innerHTML = s + "<br><span>Saniye</span>";
ampm.innerHTML = am;


hh.style.strokeDashoffset = 440 - (440 * h) / 24;
// 12 hrs clock
mm.style.strokeDashoffset = 440 - (440 * m) / 60;
// 60 hrs minutes
ss.style.strokeDashoffset = 440 - (440 * s) / 60;
// 60 hrs seconds

hr_dot.style.transform = 'rotate(${h * 30}deg)';

min_dot.style.transform = 'rotate(${m * 6}deg)';

sec_dot.style.transform = 'rotate(${s * 6}deg)';

})

</script>
 </body>
</html>
@import url(https://fonts.googleapis.com/css?
family=Poppins:200,300,400,500,600,700,800,900&
disabled=swap');
*
{
   margin: 0;
   paddding: 0;
   box-sizing: border-box;
   font-family: 'Popins', sans-serif;
}
body
{
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #2f363e;
}
#time
{
 display: flex;
 gap: 40px;
 color: #fff;
}
#time .circle
{
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#time .circle svg
{
position: relative;
width: 150px;
height: 150px;
transform: rotate(270deg);
}
#time .circle svg circle
{
 width: 100%;
 height: 100%;
 fill: transparent;
 stroke: #191919;
 stroke-width: 4;
 transform: translate(5px,5px);
}
#time .circle svg circle:nth-child(2)
{
stroke: var(--clr);
stroke-dasharray: 440;
}
#time div span
{
position: absolute;
transform: translate(-50%) translateY(-0px);
font-size: 0.35em;
font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
}
#time div
{
 position: absolute;
 text-align: center;
 font-weight: 500;
 font-size: 1.5em;
}
#time .ap
{
position: relative;
font-size: 1em;
transform: translate(-20px);
}
.dots
{
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
display: flex;
justify-content: center;
}
.dots::before
{
content: '';
position: absolute;
top: -3px;
width: 15px;
height: 15px;
background: var(--clr);
border-radius: 50%;
box-shadow: 0 0 20px var(--clr),
0 0 60px var(--clr);
}