폴라로이드 이미지 / 카드

예

div.polaroid {

    width: 80%;

    background-color: white;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

img {width: 100%}

div.container {

    text-align: center;

    padding: 10px 20px;

}

[전체소스]

<!DOCTYPE html>

<html>

<head>

<style>

body {margin:25px;}

div.polaroid {

  width: 80%;

  background-color: white;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  margin-bottom: 25px;

}

div.container {

  text-align: center;

  padding: 10px 20px;

}

</style>

</head>

<body>

<h2>Responsive Polaroid Images / Cards</h2>

<div class="polaroid">

  <img src="rock600x400.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>The Troll's tongue in Hardanger, Norway</p>

  </div>

</div>

<div class="polaroid">

  <img src="lights600x400.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>Northern Lights in Norway</p>

  </div>

</div>

</body>

</html>