mirror of
https://github.com/swc-project/swc.git
synced 2024-12-22 05:01:42 +03:00
53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport"
|
||
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<title>Document</title>
|
||
|
|
<link href="mobile.css" rel="stylesheet" media=" screen and (max-width: 600px) ">
|
||
|
|
<style media=" all and (max-width: 500px) ">
|
||
|
|
p {
|
||
|
|
color: blue;
|
||
|
|
background-color: yellow;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<img srcset="elva-fairy-480w.jpg 480w,
|
||
|
|
elva-fairy-800w.jpg 800w"
|
||
|
|
sizes="(max-width: 600px) 480px,
|
||
|
|
800px"
|
||
|
|
src="elva-fairy-800w.jpg"
|
||
|
|
alt="Elva dressed as a fairy">
|
||
|
|
<img srcset="elva-fairy-320w.jpg,
|
||
|
|
elva-fairy-480w.jpg 1.5x,
|
||
|
|
elva-fairy-640w.jpg 2x"
|
||
|
|
src="elva-fairy-640w.jpg"
|
||
|
|
alt="Elva dressed as a fairy">
|
||
|
|
<picture>
|
||
|
|
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
|
||
|
|
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
|
||
|
|
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
|
||
|
|
</picture>
|
||
|
|
<picture>
|
||
|
|
<source media=" (min-width: 1200px) " srcset=" elva-480w-close-portrait.jpg ">
|
||
|
|
<img src="mdn-logo-narrow.png" alt="MDN">
|
||
|
|
</picture>
|
||
|
|
<svg width="500" height="250">
|
||
|
|
<defs>
|
||
|
|
<clipPath id="circleView">
|
||
|
|
<circle cx="250" cy="125" r="125" fill="#FFFFFF" />
|
||
|
|
</clipPath>
|
||
|
|
</defs>
|
||
|
|
<image
|
||
|
|
width="500"
|
||
|
|
height="250"
|
||
|
|
srcset=" any value "
|
||
|
|
xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg"
|
||
|
|
clip-path="url(#circleView)"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</body>
|
||
|
|
</html>
|