barbie carrd

© elroseria. layout inspo by peakmars

<--------------- LINKS --------------->

https://drive.google.com/file/d/1D31WCLMA_7AgG-BwhkN7Bu7jQkAoAqZN/view?usp=drive_link (image tag)

<--------------- FONTS --------------->

@font-face {
font-family: absolute;
src: url(https://dl.dropbox.com/scl/fi/rasoiq5gnc345ecm1cw27/Absolute-Blonde.ttf?rlkey=0cv2m3nhzie7x7324ph9azqfj&dl=0);
}

@font-face {
font-family:'antre';
src: url(https://dl.dropbox.com/s/xaspbkonff6y9uf/antre.otf);
}

@font-face {
font-family: sant joan;
src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);
}

<--------------- CODES --------------->

----- (HEADER) -----

#elementID > .wrapper {
position: absolute;
right: 8em;
top: -3em;
width: 11em;
border-radius: 60%;
}

#elementID > .wrapper { /* rectangle box */
z-index: 997;
height: 27em;
}

#elementID > .wrapper { /* first box */
z-index: 998;
position: absolute;
left: 2em;
bottom: 18em;
height: 5.5em;
width: 5.5em;
}

#elementID > .wrapper { /* second box */
z-index: 998;
position: absolute;
left: 2em;
bottom: 12em;
height: 5.5em;
width: 5.5em;
}

#elementID > .wrapper { /* third box */
z-index: 998;
position: absolute;
left: 2em;
bottom: 6em;
height: 5.5em;
width: 5.5em;
}

#elementID { /* container w/ label */
z-index: 999;
position: absolute;
bottom: 0.75em;
right: 5em;
}

#elementID { /* container w/ credits & barbie logo */
z-index: 999;
position: absolute;
bottom: 0em;
right: 5em;
}

#elementID { /* container w/ icons */
z-index: 999;
position: absolute;
bottom: 7em;
right: 3.5em;
width: 4em;
}

#elementID li a { /* icons */
filter: drop-shadow( 0 0px #FF75A7) drop-shadow( 2px 0 #FF75A7) drop-shadow( 0 -2px #FF75A7) drop-shadow( -2px 0 #FF75A7) drop-shadow( 0 0px white) drop-shadow( 0px 0 white) drop-shadow( 0 0px white) drop-shadow( 0px 0 white) drop-shadow(1px 1px 0 transparent) drop-shadow(1px 1px 0 #FF75A7) drop-shadow( 0 0 0px #FF75A7);
}

#textID { /* barbie title */
z-index: 999;
font-family: absolute;
text-shadow: 5px 5px 0px #FF75A7;
rotate: -10deg;
}

#imageID { /* image tag */
z-index: 999;
position: absolute;
bottom: 20em;
right: 3em;
}


----- (HOME) -----

#elementID { /* container w/ doll */
z-index: 998;
position: absolute;
bottom: 2.5em;
right: 5em;
}


----- (ONE) -----

#elementID { /*container w/ doll */
z-index: 998;
position: absolute;
bottom: 2.5em;
right: 5em;
}

#textID { /* title text */
font-family:'antre';
filter: drop-shadow(0 1px #bcf0fd) drop-shadow(1px 0 #bcf0fd) drop-shadow(-1px 0 #bcf0fd) drop-shadow(0 -1px #bcf0fd) drop-shadow(0 1px white) drop-shadow(1px 0 white) drop-shadow(-1px 0 white) drop-shadow(0 -1px white) drop-shadow(1px 2px #0002) drop-shadow(-0px -0px #0002);
animation: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

#textID { /* scrollbox text */
overflow-y: scroll;
height: 8em;
background: rgba(255,212,227,0.859);
padding: 3px 5px 3px 5px;
border-radius: 7px;
border-color: #FF75A7;
border-width: 2px;
border-style: double;
box-shadow: inset 12px 0px 4px -10px rgb(66 66 66 / 20%), inset -13px 0px 5px -10px #ffffff, inset 0px 15px 6px -10px #ffffff, inset 0px -15px 4px -14px rgb(66 66 66 / 30%);
}

#textID mark {
font-family: sant joan;
font-size: 1.25em;
background: linear-gradient(to top, #FF78B1 2%, #FFFDFE 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #FE62B6;
}


----- TWO -----

#elementID { /* container w/ doll */
z-index: 998;
position: absolute;
bottom: 2.5em;
right: 5em;
}

#textID { /* title text */
font-family:'antre';
filter: drop-shadow(0 1px #bcf0fd) drop-shadow(1px 0 #bcf0fd) drop-shadow(-1px 0 #bcf0fd) drop-shadow(0 -1px #bcf0fd) drop-shadow(0 1px white) drop-shadow(1px 0 white) drop-shadow(-1px 0 white) drop-shadow(0 -1px white) drop-shadow(1px 2px #0002) drop-shadow(-0px -0px #0002);
animation: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

#textID { /* scrollbox text */
overflow-y: scroll;
height: 8em;
background: rgba(255,212,227,0.859);
padding: 3px 5px 3px 5px;
border-radius: 7px;
border-color: #FF75A7;
border-width: 2px;
border-style: double;
box-shadow: inset 12px 0px 4px -10px rgb(66 66 66 / 20%), inset -13px 0px 5px -10px #ffffff, inset 0px 15px 6px -10px #ffffff, inset 0px -15px 4px -14px rgb(66 66 66 / 30%);
}

#textID mark {
font-family: sant joan;
font-size: 1.25em;
background: linear-gradient(to top, #FF78B1 2%, #FFFDFE 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #FE62B6;
}

----- HIDDEN SCROLLBAR -----

html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: transparent;
}

----- ANIMATION -----

@keyframes floating {
0% {
transform: translate(0, 0px);
}
50% {
transform: translate(0, 10px);
}
100% {
transform: translate(0, -0px);
}
}