Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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)