Add Frame Effect CSS Picture - UNPLUG.DOC

DESCRIPTI
DESCRIPTI

HTML CODE

<div>
<!-- Polaroid Frame on Images by unplug-document
https://unplug-document.blogspot.com/
-->
<h1>Single Image</h1>
<div id="polaroid">
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslUisACGbew6IcGLd2GUh01lCwags6cgxtAcRIDN_xch9sdyPQJ3gA3tQY3yFiX7-NuCUR5UlJUJCLAPgS7iB2WMlRVnELNc8ZuN6BzQ6RyrJxKWr8XO0xaMllY6myFp_D7n9aMBMW8BQ/s600/cat-3846780_1280.jpg" alt="This cat is so cute" title="This cat is so cute"/>
    <figcaption>This cat is so cute</figcaption>
  </figure>
</div>
<br/><br/>
<h1>Multiple Images</h1>
<div id="polaroid">
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslUisACGbew6IcGLd2GUh01lCwags6cgxtAcRIDN_xch9sdyPQJ3gA3tQY3yFiX7-NuCUR5UlJUJCLAPgS7iB2WMlRVnELNc8ZuN6BzQ6RyrJxKWr8XO0xaMllY6myFp_D7n9aMBMW8BQ/s250/cat-3846780_1280.jpg" alt="This cat is so cute" title="This cat is so cute"/>
    <figcaption>This cat is so cute</figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLp1vFx3QK5_nBwK2WjuqQ8wIPkOzvSx9A9Di19pMw_wOqXSzI1vhqUzXyeuciLRWf3e7mBWO1cSq27URG17V8DaOrWlFnYfoiB2vl5tmfpCWO0vjktYNOIOy6cl4boNOq8K5A9brcs0Yu/s250/grimace-388987_1280.jpg" alt="You are so funny!" title="You are so funny!"/>
    <figcaption>You are so funny </figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfM-PnvMlFdB1ar0m0nHWdHgTDoNlRCwd7Fpox09sCCk7-W4bTtcgWMGSZv1VBGic25-QYsKwOlOe8G6iiZtHx3Jc9voVkcWKvSZ1V8fPRQUzEHmjZIOS99574PPvt3QKP8XwarmyCHOn/s250/Fiksioner+01.jpg" alt="Be happy :)" title="Be happy :)"/>
    <figcaption>Be happy :) </figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslUisACGbew6IcGLd2GUh01lCwags6cgxtAcRIDN_xch9sdyPQJ3gA3tQY3yFiX7-NuCUR5UlJUJCLAPgS7iB2WMlRVnELNc8ZuN6BzQ6RyrJxKWr8XO0xaMllY6myFp_D7n9aMBMW8BQ/s250/cat-3846780_1280.jpg" alt="This cat is so cute" title="This cat is so cute"/>
    <figcaption>This cat is so cute</figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslUisACGbew6IcGLd2GUh01lCwags6cgxtAcRIDN_xch9sdyPQJ3gA3tQY3yFiX7-NuCUR5UlJUJCLAPgS7iB2WMlRVnELNc8ZuN6BzQ6RyrJxKWr8XO0xaMllY6myFp_D7n9aMBMW8BQ/s250/cat-3846780_1280.jpg" alt="This cat is so cute" title="This cat is so cute"/>
    <figcaption>This cat is so cute</figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslUisACGbew6IcGLd2GUh01lCwags6cgxtAcRIDN_xch9sdyPQJ3gA3tQY3yFiX7-NuCUR5UlJUJCLAPgS7iB2WMlRVnELNc8ZuN6BzQ6RyrJxKWr8XO0xaMllY6myFp_D7n9aMBMW8BQ/s250/cat-3846780_1280.jpg" alt="This cat is so cute" title="This cat is so cute"/>
    <figcaption>fuck</figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslUisACGbew6IcGLd2GUh01lCwags6cgxtAcRIDN_xch9sdyPQJ3gA3tQY3yFiX7-NuCUR5UlJUJCLAPgS7iB2WMlRVnELNc8ZuN6BzQ6RyrJxKWr8XO0xaMllY6myFp_D7n9aMBMW8BQ/s250/cat-3846780_1280.jpg" alt="This cat is so cute" title="This cat is so cute"/>
    <figcaption>This cat is so cute</figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFPi2g-7Xwg6vBGVoAvhOWn1ci8MxQwuR1DP_YfW-wm1G9Okrzot-HJaMVJ8SYCI7ocEDLbE_gS0rDKJ-8e_qI1m8K2fcsXo5G-qMlndfT9c5qTb6Q5kmcMnVm5NT-6T5kc7E6bOZYr1qr/s250/Fiksioner+04.jpg" alt="My camera" title="My camera"/>
    <figcaption>My camera</figcaption>
  </figure>
  <figure>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslUisACGbew6IcGLd2GUh01lCwags6cgxtAcRIDN_xch9sdyPQJ3gA3tQY3yFiX7-NuCUR5UlJUJCLAPgS7iB2WMlRVnELNc8ZuN6BzQ6RyrJxKWr8XO0xaMllY6myFp_D7n9aMBMW8BQ/s250/cat-3846780_1280.jpg" alt="This cat is so cute" title="This cat is so cute"/>
    <figcaption>This cat is so cute</figcaption>
  </figure>
</div>

DESCRIPTI

CSS CODE

@import url('https://fonts.googleapis.com/css?family=Reenie+Beanie');

BODY {
  background-color:#eee;
  padding:30px;
  margin:auto;
  font: normal 16px Arial, sans-serif;
}

/* Polaroid Frame on Images by igniel.com
https://www.igniel.com/2019/01/polaroid-photo-effect-css.html
*/
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 600px; /* Lebar maksimal gambar */
margin: 20px auto 0px;
padding: 6px 8px 10px 8px;
display:inline-block;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background-color: #eee6d8;
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden;
}
#polaroid figure:nth-child(even) {
margin:20px 18px 20px 25px;
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left: 5px;
top: -10px;
width: 75px;
height: 25px;
z-index: 1;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:unset;
right:10px;
top:-10px;
width: 55px;
height: 25px;
z-index: 1;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid figcaption{
text-align:center;
font-family: 'Reenie Beanie', cursive;
font-size:1.75em;
color:#454f40;
letter-spacing:0.09em;
margin-top:10px;
}

The social media widget is now fully built and working correctly if you follow all the steps correctly. If you have questions or steps that you do not understand, please write down the questions and concerns in the comment column below.