[dohtml]
<center>
<div class='doodles1'><div class='doodles2'>

<div class='bg1'></div><div class='title1'>NAME 1</div><div class='bg1p'><div class='text1'>DESCRIPTION 1</div></div><div class='bg1img'></div>

<div class='bg2'></div><div class='title2'>NAME 2</div><div class='bg2p'><div class='text1'>DESCRIPTION 2</div></div><div class='bg2img'></div>

<div class='bg3'></div><div class='title3'>NAME 3</div><div class='bg3p'><div class='text1'>DESCRIPTION 3</div></div><div class='bg3img'></div>

</div></div>
<div class='skcred'><a href="http://cttw.jcink.net/index.php?showuser=18286">sarahkik</a></div></center>

<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Montserrat&display=swap" rel="stylesheet">
<style>

.doodles1 {
background-color: var(--color1);
border: 5px solid #fff;
width: 500px;
height: 920px;
margin: 10px;
--color1: #c0a3e6;
--bg1: url(https://i.pinimg.com/originals/6e/fa/23/6efa23d3964f6be49b7b09a84a759acb.jpg);
--bg2: url(https://snworksceo.imgix.net/slt/6f0488b5-c13d-4fd0-b84e-2d5abf46fa26.sized-1000x1000.png);
--bg3: url(https://pagesix.com/wp-content/uploads/sites/3/2013/08/bllfpmccaaah1qg114748-300x300.jpg);
}

.doodles2 {
background-image: url(https://files.jcink.net/uploads/frozenmemoirs//doodles7.png);
background-size: cover;
width: 500px;
height: 920px;
}

.bg1 {
background-image: url(https://files.jcink.net/uploads/frozenmemoirs//polaroid.png);
width: 200px;
height: 240px;
rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);
background-size: cover;
position: absolute; z-index: 5;
margin-top: 100px;
margin-left: 200px;
}

.title1 {
rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);
position: absolute; z-index: 999;
margin-top: 295px;
margin-left: 200px;
color: var(--color1);
font-size: 25px;
font-family: 'Architects Daughter', cursive;
}

.bg1p {
background-color: var(--color1);
padding: 20px;
width: 130px;
height: 140px;
rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);
background-size: cover;
position: absolute;
z-index: 6;
margin-top: 115px;
margin-left: 220px;
opacity: 0;
font-family: 'Montserrat', sans-serif;
transition: 1s;
}

.text1 {
width: 130px;
height: 140px;
padding-right: 5px;
color: #fff;
overflow: auto;
}

.text1::-webkit-scrollbar {width: 4px; background: transparent; }
.text1::-webkit-scrollbar-track {background: rgba(0,0,0,.04); border-radius: 3px; mix-blend-mode: overlay;}
.text1::-webkit-scrollbar-thumb {background: #fff; border-radius: 3px; border: 1px solid transparent;}


.bg1p:hover {
opacity: 1;
}

.bg1img {
background-image: var(--bg1);
width: 180px;
height: 200px;
rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);
background-size: cover;
position: absolute; z-index: 3;
margin-top: 110px;
margin-left: 210px;
}

.bg2 {
background-image: url(https://files.jcink.net/uploads/frozenmemoirs//polaroid.png);
width: 200px;
height: 240px;
rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);
background-size: cover;
position: absolute;
margin-top: 370px;
margin-left: 100px;
Z-index: 5;
}

.title2 {
rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);
position: absolute; z-index: 999;
margin-top: 565px;
margin-left: 170px;
color: var(--color1);
font-size: 25px;
font-family: 'Architects Daughter', cursive;
}

.bg2img {
background-image: var(--bg2);
width: 180px;
height: 200px;
rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);
background-size: cover;
position: absolute; z-index: 3;
margin-top: 380px;
margin-left: 100px;
}

.bg2p {
background-color: var(--color1);
padding: 20px;
color: #fff;
width: 130px;
height: 140px;
rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);
background-size: cover;
position: absolute;
z-index: 6;
margin-top: 385px;
margin-left: 110px;
opacity: 0;
font-family: 'Montserrat', sans-serif;
transition: 1s;
}

.bg2p:hover {
opacity: 1;
}

.bg3 {
background-image: url(https://files.jcink.net/uploads/frozenmemoirs//polaroid.png);
width: 200px;
height: 240px;
rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);
background-size: cover;
position: absolute;
margin-top: 645px;
margin-left: 200px;
Z-index: 5;
}

.title3 {
rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);
position: absolute; z-index: 999;
margin-top: 850px;
   margin-left: 220px;
color: var(--color1);
font-size: 25px;
font-family: 'Architects Daughter', cursive;
}

.bg3img {
background-image: var(--bg3);
width: 180px;
height: 200px;
rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);
background-size: cover;
position: absolute; z-index: 3;
margin-top: 650px;
margin-left: 210px;
}

.bg3p {
background-color: var(--color1);
padding: 20px;
color: #fff;
width: 130px;
height: 140px;
rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg);
background-size: cover;
position: absolute;
z-index: 6;
margin-top: 660px;
margin-left: 217px;
opacity: 0;
font-family: 'Montserrat', sans-serif;
transition: 1s;
}

.bg3p:hover {
opacity: 1;
}

.skcred, .skcred a {
font-family: 'calibri';
font-size: 8px;
text-transform: uppercase;
letter-spacing: 5px;
text-decoration: none;
}

</style>[/dohtml]