Skip to content

Instantly share code, notes, and snippets.

View vsim1964's full-sized avatar

Vladimir Siminenko vsim1964

  • Taganrog
  • 13:25 (UTC +03:00)
View GitHub Profile
@vsim1964
vsim1964 / cloudSettings
Last active May 10, 2021 20:50 — forked from neretin-trike/pug.md
Настройки VS Code
{"lastUpload":"2021-05-10T20:50:00.687Z","extensionVersion":"v3.4.3"}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
‎‎​
@vsim1964
vsim1964 / .markdown
Created March 31, 2021 07:34
Три варианта условий
@vsim1964
vsim1964 / .markdown
Created March 31, 2021 07:34
Три варианта условий
<img srcset="gaga-215w.jpg 215w, gaga-430w.jpg 430w, gaga-860w.jpg 860w" sizes="(max-width: 319px) 300px,
(max-width: 600px) 570px,
860px" src="gaga-860w.jpg" alt="Полина Гагарина" />
@vsim1964
vsim1964 / Графика.
Created September 11, 2021 12:17
object - fit & position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@vsim1964
vsim1964 / Графика.
Created September 11, 2021 12:35
Тег picture
<div class="reason__img-box reason__img-box--city">
<a href="#">
<picture>
<source type="image/webp" media="(min-width: 1200px)" srcset="img/city-desktop.webp 1x,
img/city-desktop@2x.webp 2x">
<source type="image/webp" media="(min-width: 768px)"
srcset="img/city-tablet.webp 1x, img/city-tablet@2x.webp 2x">
<source type="image/webp" srcset="img/city-mobile.webp 1x, img/city-mobile@2x.webp 2x">
<source media="(min-width: 1200px)" srcset="img/city-desktop.jpg 1x, img/city-desktop@2x.jpg 2x">
<source media="(min-width: 768px)" srcset="img/city-tablet.jpg 1x, img/city-tablet@2x.jpg 2x">
@vsim1964
vsim1964 / Графика.
Created September 11, 2021 18:49
b-image & device pixel ratio
.page__header {
position: relative;
background-image: url(img/pic.png);
width: 1440px;
height: 800px;
background-size: 1440px 800px;
margin: 0 auto;
@media (min-resolution: 2dppx) {
background-image: url(img/pic@2x.png);
@vsim1964
vsim1964 / Позиционирование
Created September 17, 2021 18:30
Как изменять ширину и высоту строчных элементов
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>