Как сверстать такое с помощью Html и Css?

Question

[Максим Ладный]

Здравствуйте! Мне нужно создать олимпийские кольца с помощью Html и Css.
У меня вроде как получилось, но при просмотре на другом компьютере, круги превратились в овалы. А на телефоне вообще всё разъехалось.

Answer 1

[Иван Татауш]

https://codepen.io/AllThingsSmitty/pen/cHjIC/

Comments

[Максим Ладный]

Я всё скопировал. Html в Html, Css в Css. Сохранил и получил пустой экран.

[alex]

Максим Ладный: там SCSS а не CSS
P.S. ваши кольца я нагуглил менее чем за минуту после прочтения вашего вопроса.

[Astrohas]

Максим Ладный: нажмите на стрелочку и выберите View compiled css

[Максим Ладный]

Хасан Истамкулов: Не помогло( Лишь 9 точек по левому краю появились.

[Astrohas]

Максим Ладный: https://pastebin.com/bR5KUKKV

[Максим Ладный]

Хасан Истамкулов: Всё получилось, спасибо, но почему это работает только тогда, когда стили находятся внутри Html документа?

[Иван Татауш]

Максим Ладный: проверь подключен ли css файл на странице

[Максим Ладный]

Иван Татауш: Подключен.

[Иван Татауш]

Максим Ладный: Ну видимо что то делаешь не так. Экстрасенсом не являюсь, смотреть нужно

Answer 2

[Олег]

Смотри куча вариантов codepen.io/search/pens?q=Olympic%20rings&limit=all...

Answer 3

[Артур]

приложи код на codepen, чтобы можно было яснее понять проблему

Comments

[Максим Ладный]

https://jsfiddle.net/w7px46ah/

[Андрей Токмаков]

Максим Ладный: ну там же бред полный, как могло быть "у меня вроде как получилось"!?