This is what I'm trying to do (without the white BG on the image):
with this image
I want it to sit on the bottom right of the content box. I am able to put the image on the page but it's behind the content box and not in the right position. I tried looking up how to code the position and bring it forward but I just couldn't figure it out. Can someone kindly assist me? Thanks in advance :D
Sight.
Beans range from a tan to a dark, almost black brown. Once ground, the grinds appear lighter than its original state.
Touch.
The beans start out hard but the grinds become soft yet gritty.
Sound.
*tink tink tink* as the beans are poured into the grinder. The gurgling of the milk as steam heats and foams it to the perfect consistency.
Smell.
Inhale the menagerie of aromas ranging from smoky, nutty, floral, or spicy. From the start of the beans to the completed brew, coffee's fragrance dances with your nose
Taste.
Bitter. Acrid. Acidic. Mild. Sweet. Mellow. All acceptable words to describe coffee, and yet not in a negative connotation.
Espresso
Highly concentrated coffee beverage, often the base for other coffee preparations.
Cappuccino
Made with double espresso and steamed milk foam.
Caffè Latte
also known as "latte." Made with espresso and steamed milk.
Frappé
Chilled instant coffee, either iced or slushied.
Irish Coffee
Hot coffee, irish whiskey, and sugar, topped with whipped cream.
Caffè Macchiato
Small amount of milk, often foamed, added to espresso.
Latte Macchiato
Espresso added to foamed milk, creating a layered coffee beverage.
Caffè Americano
Espresso diluted with hot water.
Caffè Mocha
Also known as mochaccino; Espresso with hot milk, cocoa powder or chocolate syrup, and sweetener.
Profile template by .
Overlay and art by
<style>
url('https://fonts.googleapis.com/css?family=Architects+Daughter');
url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
/* fonts
------------------------------------------ */
.pet_name{font-family: 'Shadows Into Light', cursive;
font-size: 40px;
font-weight: normal}
.pet_name::first-letter{font-size: 45px}
td, p, body, div{font-size: 16px;
font-family: 'Architects Daughter', cursive}
h2{font-size: 16px !important;
line-height: 16px}
.navtab{font-family: 'Shadows Into Light';
font-size: 25px}
/* backgrounds and colors
------------------------------------------ */
body{
background-color:
}
{background-color:
;
border-color:
}
,
,
{box-shadow: 0 0 7px rgba(0, 0, 0, 0.25)}
{background-color:
}
{color:
;
text-shadow: 1px 1px rgba(0, 0, 0, 0.25)}
h2{color:
;
text-shadow: 1px 1px rgba(0, 0, 0, 0.15)}
a:link, a:active, a:visited{color:
}
a:hover{color:
}
ul li:nth-child(1),
ul li:nth-child(7){color:
}
ul li:nth-child(2),
ul li:nth-child(6){color:
}
ul li:nth-child(3),
ul li:nth-child(5){color:
}
ul li:nth-child(4){color:
}
.icon.heart{color:
}
.icon.heart.red{color:
!important}
.icon.heart:hover{color:
}
.pet_name{color:
;
3px 3px rgba(0, 0, 0, 0.25)}
.hr{background: -webkit-linear-gradient(left, transparent,
, transparent)}
,
img{background-color:
;
border-color:
}
.navtab{text-shadow: 1px 1px
;
background-color:
;
border-color:
;
box-shadow: 0 0 0 1px
}
,
,
,
,
{color:
}
::-webkit-scrollbar-thumb{background: -webkit-linear-gradient(top,
,
,
);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
border: 1px solid
}
::-webkit-scrollbar-track{background-color:
;
border: 1px solid
}
.friendleft a h3, .friendright a h3{border-bottom-color:
}
/* navigation
------------------------------------------ */
{position: fixed;
top: 175px;
left: 635px;
z-index: 2}
.navtab{position: relative;
top: 0px;
padding: 10px 20px 25px 20px;
border-width: 1px;
border-style: solid;
text-align: center;
border-radius: 25px 25px 0px 0px;
margin-right: 10px}
.navtab:hover{position: relative;
top: -5px}
/* unsorted
------------------------------------------ */
{height: 195px;
width: 100%;
position: fixed;
top: 250px;
left: 0px;
border-width: 5px 0px 5px 0px;
border-style: solid;
z-index: 1}
{height: 105px;
width: 100%;
position: fixed;
top: 300px;
left: 0px;
z-index: 2}
,
,
,
,
{position: fixed;
top: 200px;
left: 600px;
height: 300px;
width: 600px;
overflow: auto;
background:
;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-radius: 20px;
padding: 10px;
box-sizing: border-box;
z-index: 4}
{z-index: 5}
:target,
:target,
:target,
:target,
:target{z-index: 6}
.pet_spotlight{height: 95px;
width: 110px;
position: fixed;
top: 307px;
left: 400px;
border-radius: 20px;
z-index: 4;
margin: 0px;
text-transform: lowercase}
.pet_spotlight img{border-radius: 10px}
/* transitions
------------------------------------------ */
a, a:hover, .icon.heart, .icon.heart:hover{transition: all 1s ease}
.navtab, .navtab:hover{transition: all .5s ease}
,
:hover{transition: all .5s ease}
/* pet info
------------------------------------------ */
{height: 300px;
width: 300px;
border-radius: 50%;
background-color:
;
background-position: center;
background-repeat: no-repeat;
position: fixed;
top: 200px;
left: 10px;
z-index: 3}
.pet_name{position: fixed;
top: 255px;
left: 300px;
width: 300px;
height: 50px;
line-height: 50px;
z-index: 5}
.pet_color_info, .owner{position: fixed;
left: 305px;
width: 290px;
z-index: 3}
.pet_color_info{top: 407px}
.owner{top: 436px}
.pet_like{position: fixed;
top: 422px;
left: 305px;
width: 290px;
margin: 0px;
font-size: 15px;
z-index: 4}
{position: fixed;
top: 455px;
left: 380px;
padding: 10px;
overflow: hidden;
margin-top: -106px;
width: 130px;
height: 116px;
box-sizing: border-box;
border-radius: 0px 0px 20px 20px;
border-style: solid;
border-width: 0px 1px 1px 1px}
:hover{margin-top: 0px}
img{border-radius: 10px;
border-width: 1px;
border-style: solid;
margin-top: -15px}
{display: none}
/* friends
------------------------------------------ */
.friendright img{float: right;
padding-left: 10px}
.friendleft img{float: left;
padding-right: 10px}
.friendright img, .friendleft img{height: 120px;
width: 120px}
.friendright, .friendleft{height: 120px;
padding: 5px}
.friendright a h3, .friendleft a h3{border-bottom-width: 1px;
border-bottom-style: dashed;
text-align: center;
width: 210px;
padding-bottom: 2px;
margin-bottom: 5px}
/* treasure chest
------------------------------------------ */
.treasure_item_name{display: block;
font-size: 10px}
.treasure_item{margin: 5px;
height: 120px;
width: 100px;
padding-top: 5px}
.treasure_item:hover{pointer-events: none}
/* misc
------------------------------------------ */
b{font-weight: normal}
::-webkit-scrollbar{width: 10px}
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb{border-radius: 8px}
.rightimg{float: right;
padding-left: 5px}
.leftimg{float: left;
padding-right: 5px}
.pet_color_info, .owner{text-transform: lowercase}
td, p, body, div{line-height: 13px}
li{line-height: 14px}
.hr{width: 100%;
margin-top: 15px;
margin-bottom: 15px;
height: 1px}
.icon.heart{opacity: 1}
.icon.heart.red{opacity: 0.5}
h2{display: inline-block;
font-weight: normal;
padding-right: 2px}
h3{display: inline-block;
font-weight: bold;
margin: 0px;
font-size: 14px !important}
/* removing the main site layout
------------------------------------------ */
,
,
,
,
,
,
h2,
h2,
h2, .statbar, .pet_wco_info_date, .pet_age_info_date,
,
,
,
,
a, .statbar,
, .hustler, .owner img,
h2{display: none}
,
-lrc,
-ban,
-ban-main,
-rrc, html{background: transparent}
{text-indent: -9999px}
a:hover{text-decoration: none}
-content{background-image: none}
{overflow: hidden;
background: transparent}
body{overflow: hidden}
</style>
