Scribd
Upload
2 views

DOC HTML

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
2 views

DOC HTML

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
You are on page 1/ 3

---- *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=”style.css”>

<link rel=”stylesheet” href=https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/4.7.0/css/font-awesome.min.css>

</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 = document.querySelector(“.hour-indicator”);

Const minuteIndicator = document.querySelector(“.minute-indicator”);

Const secondIndicator = document.querySelector(“.second-indicator”);

updateClock();

setInterval(updateClock);

function updateClock(){

var currentTime = new Date();

var hh = currentTime.getHours();

var mm = currentTime.getMinutes();

var ss = currentTime.getSeconds() +
currentTime.getMilliseconds()/1000;

hourIndicator.style.transform = `rotate(${(hh*30)+(mm/12)}deg)`;

minuteIndicator.style.transform = `rotate(${mm*6}deg)`;

secondIndicator.style.transform = `rotate(${ss*6}deg)`;

</script>

</body>

</html>

#css :-

@import url(‘https://fonts.googleapis.com/css2?
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