Website: mankapuas.sch.id

Instagram : man_kapuas
FB : MAN Kapuas
Youtube : MAN KAPUAS
MAN KAPUAS : Akreditasi : A
Website Dalam Pengembangan

Jam CSS

 :root {

--main-bg-color: #fff;

--main-text-color: #888888;

}

[data-theme="dark"] {

--main-bg-color: #1e1f26;

--main-text-color: #ccc;

}

* {

box-sizing: border-box;

/* transition: all ease 0.2s; */

}

body {

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

font-size: 16px;

background-color: var(--main-bg-color);

position: relative;

transition: all ease 0.2s;

}

.page-header {

font-size: 2rem;

color: var(--main-text-color);

padding: 2rem 0;

font-family: monospace;

text-transform: uppercase;

letter-spacing: 4px;

transition: all ease 0.2s;

}

.clock {

min-height: 18em;

min-width: 18em;

display: flex;

justify-content: center;

align-items: center;

background-color: var(--main-bg-color);

background-image: url("https://imvpn22.github.io/analog-clock/clock.png");

background-position: center center;

background-size: cover;

border-radius: 50%;

border: 4px solid var(--main-bg-color);

box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),

inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),

inset 0 15px 15px rgba(0, 0, 0, 0.3);

transition: all ease 0.2s;

}

.clock:before {

content: "";

height: 0.75rem;

width: 0.75rem;

background-color: var(--main-text-color);

border: 2px solid var(--main-bg-color);

position: absolute;

border-radius: 50%;

z-index: 1000;

transition: all ease 0.2s;

}

.hour,

.min,

.sec {

position: absolute;

display: flex;

justify-content: center;

border-radius: 50%;

}

.hour {

height: 10em;

width: 10em;

}

.hour:before {

content: "";

position: absolute;

height: 50%;

width: 6px;

background-color: var(--main-text-color);

border-radius: 6px;

}

.min {

height: 12em;

width: 12em;

}

.min:before {

content: "";

height: 50%;

width: 4px;

background-color: var(--main-text-color);

border-radius: 4px;

}

.sec {

height: 13em;

width: 13em;

}

.sec:before {

content: "";

height: 60%;

width: 2px;

background-color: #f00;

border-radius: 2px;

}

/* Style for theme switch btn */

.switch-cont {

margin: 2em auto;

/* position: absolute; */

bottom: 0;

}

.switch-cont .switch-btn {

font-family: monospace;

text-transform: uppercase;

outline: none;

padding: 0.5rem 1rem;

background-color: var(--main-bg-color);

color: var(--main-text-color);

border: 1px solid var(--main-text-color);

border-radius: 0.25rem;

cursor: pointer;

transition: all ease 0.3s;

}



0 komentar:

Pages - Menu

Teknologi hanyalah alat. Namun, untuk menjadikan peserta didik bisa saling bekerjasama dan termotivasi, guru adalah yang paling penting.” ---Bill Gates---

Online


Powered by IT Komputer MAN Kapuas