https://github.com/id-andyyy/live-clock

🕓🌍 A website with a clock showing real time
https://github.com/id-andyyy/live-clock

adaptive-design clock css html javascript30 js scss vanilla-js

Last synced: about 1 month ago
JSON representation

🕓🌍 A website with a clock showing real time

• Host: GitHub
• URL: https://github.com/id-andyyy/live-clock
• Owner: id-andyyy
• Created: 2024-06-20T10:51:55.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-16T20:10:44.000Z (4 months ago)
• Last Synced: 2024-08-16T21:28:11.406Z (4 months ago)
• Topics: adaptive-design, clock, css, html, javascript30, js, scss, vanilla-js
• Language: SCSS
• Homepage: https://id-andyyy.github.io/Live-Clock/
• Size: 2.22 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README-ru.md

Awesome Lists containing this project

README

        
![Арт](https://i.postimg.cc/vHVs1Dkj/art.png)

![GitHub Created At](https://img.shields.io/github/created-at/id-andyyy/Live-Clock?style=flat&color=%236D8841)

![Lines Of Code](https://tokei.rs/b1/github/id-andyyy/Live-Clock?style=flat&category=code&)

![Top Language](https://img.shields.io/github/languages/top/id-andyyy/Live-Clock?style=flat)

![Website](https://img.shields.io/website?url=https%3A%2F%2Fid-andyyy.github.io%2FLive-Clock%2F&style=flat)

# Live Clock 🕔

Простой сайт в стиле минимализм с часами, показывающими текущее время ✨. Сайт адаптирован под все типы устройств 📱.

## Демонстрация

Посетите [сайт](https://id-andyyy.github.io/Live-Clock/) или посмотрите демонстрацию (клик на картинку) 👇

[![Превью](https://i.postimg.cc/15p1yX8K/preview.png)](https://youtu.be/FwWe7pnV1_M)

## Технологии и инструменты

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=white&color=yellow)

![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white&color=ad63f7)

![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white&color=f14e32)

Особенности:

- Используется особый прием для вычисления адаптивных величин ([смотреть код](https://gist.github.com/id-andyyy/92bffcaa37c60c395324fe26b1a518d6))

- Используется функция `circle-properties`, которая создаёт красивые настраиваемые полукольца ([смотреть код](scss/style.scss))

- Адаптивная вёрстка подстраивается под любое устройство

- БЭМ методология

- Чистый JS

- Указаны мета-теги

## Обратная связь

Буду признателен, если вы поставите звезду ⭐. Если вы нашли баг или у вас есть предложения по улучшению, используйте раздел [Issues](https://github.com/id-andyyy/Live-Clock/issues).

## Благодарности

Благодарность за создание макета сайта [strawberry2892 🍓](https://github.com/strawberry2892). Сайт создан в рамках челленджа [JavaScript30](https://javascript30.com/).

Читать на [английском 🇬🇧](README.md)