Scribd
Upload
7 views3 pages

Criar Dark Clock com HTML e CSS

The document provides a complete HTML and CSS code for creating a dark-themed clock. It includes the structure for the clock's face and indicators for hours, minutes, and seconds, along with JavaScript to update the clock in real-time. The CSS styles ensure a visually appealing design with a centered layout and a dark background.

Uploaded by

alcada300
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views3 pages

Criar Dark Clock com HTML e CSS

The document provides a complete HTML and CSS code for creating a dark-themed clock. It includes the structure for the clock's face and indicators for hours, minutes, and seconds, along with JavaScript to update the clock in real-time. The CSS styles ensure a visually appealing design with a centered layout and a dark background.

Uploaded by

alcada300
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

---- *EXERCÍCIO CRIAR UM DARK-CLOCK COM HTML & CSS* ----

<!DOCTYPE html>

<html lang=”pt-br”>

<head>

<meta charset=”utf-8”>

<meta author=”Hernany Manuel” content=”Relógio”>

<title>Relógio com HTML e CSS</title>

<link rel=”stylesheet” type=”text/css” href=”[Link]”>

<link rel=”stylesheet” href=[Link]


awesome/4.7.0/css/[Link]>

</head>

<body>

<div class=”clock”>

<div class=”face”>

<span>12</span>

<span>3</span>

<span>6</span>

<span>9</span>

</div>

<div class=”hour”>

<div class=”hour-indicator”></div>

</div>

<div class=”minute”>

<div class=”minute-indicator”></div>

</div>

<div class=”second”>

<div class=”second-indicator”></div>

</div>
</div>

<script>

Const hourIndicator = [Link](“.hour-indicator”);

Const minuteIndicator = [Link](“.minute-indicator”);

Const secondIndicator = [Link](“.second-indicator”);

updateClock();

setInterval(updateClock);

function updateClock(){

var currentTime = new Date();

var hh = [Link]();

var mm = [Link]();

var ss = [Link]() +
[Link]()/1000;

[Link] = `rotate(${(hh*30)+(mm/12)}deg)`;

[Link] = `rotate(${mm*6}deg)`;

[Link] = `rotate(${ss*6}deg)`;

</script>

</body>

</html>

#css :-

@import url(‘[Link]
family=Roboto:wght@100;300;400;500;700;900&display=swap’);
*{

Box-sizing: border-box;

Margin: 0;

Padding: 0;

Body{

Padding: 100px;

Display: flex;

Justify-content: center;

Align-items: center;

Background: #121922;

Font-family: “Roboto”, sans-serif;

.clock{

Position: relative;

Width: 350px;

Height: 350px;

Display: fl

You might also like