<img src="https://www.w3cplus.com/sites/default/files/blogs/2021/2109/srcset-x1.png" srcset="
https://www.w3cplus.com/sites/default/files/blogs/2021/2109/srcset-x1.png 1x,
https://www.w3cplus.com/sites/default/files/blogs/2021/2109/srcset-x2.png 2x,
https://www.w3cplus.com/sites/default/files/blogs/2021/2109/srcset-x3.png 3x
" alt="">
img {
max-width: 100%;
height: auto;
}
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: rgb(237 242 247);
display: grid;
place-items: center;
padding: 2rem;
}
img {
max-width: 70vmin;
max-height: 70vmin;
border: 10px solid white;
box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.2);
transform: rotate(3deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.