bihilism | ocean man take me by the hand

Skip to Main Content

Entry tags:

ocean man take me by the hand

LINK

LINK

LINK

LINK

LINK

LINK

code

JOLYNE CUJOH

notes

im going to murder this gradient if it misbehaves again

please dont change up the size of the box on the inside, the gradient won't like it.

CODE

<raw-code>
<div id="containerandimg" style="
margin: auto;
width: 350px;
height: 490px;
border: 2px solid #F89473;
background-image: url(IMAGE URL);
background-size: 350px 490px;
font-size: 13px;
text-transform: lowercase;
font-family: 'Century Gothic', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">

<div id="gradient" style="
width: 100%;
height: 340px;
background: linear-gradient(rgba(242, 238, 237, 0), rgba(242, 238, 237, 0.7), rgba(242, 238, 237, 1));">

<div id="box" style="
width: 250px;
height: 200px;
border: 2px solid #FAB896;
background-color: rgba(242, 238, 237, 0.8);
margin: 150px auto;
padding: 25px 10px 20px;">

<div id="block1" style="
width: 200px;
height: 20px;
margin: 0 auto 10px;
line-height: 10px;
text-align: center;
color: #0B5A81;
border-bottom: 1px solid 
">

<a href="URL" style="text-decoration: none; color: #0B5A81;">LINK</A>

</div>

<div id="block1" style="
width: 200px;
height: 20px;
margin: 0 auto 10px;
line-height: 10px;
text-align: center;
color: #0B5A81;
border-bottom: 1px solid 
">

<a href="URL" style="text-decoration: none; color: #0B5A81;">LINK</A>

</div>

<div id="block1" style="
width: 200px;
height: 20px;
margin: 0 auto 10px;
line-height: 10px;
text-align: center;
color: #0B5A81;
border-bottom: 1px solid 
">

<a href="URL" style="text-decoration: none; color: #0B5A81;">LINK</A>

</div>

<div id="block1" style="
width: 200px;
height: 20px;
margin: 0 auto 10px;
line-height: 10px;
text-align: center;
color: #0B5A81;
border-bottom: 1px solid 
">

<a href="URL" style="text-decoration: none; color: #0B5A81;">LINK</A>

</div>

<div id="block1" style="
width: 200px;
height: 20px;
margin: 0 auto 10px;
line-height: 10px;
text-align: center;
color: #0B5A81;
border-bottom: 1px solid 
">

<a href="URL" style="text-decoration: none; color: #0B5A81;">LINK</A>

</div>

<div id="block1" style="
width: 200px;
height: 20px;
margin: 0 auto 10px;
line-height: 10px;
text-align: center;
color: #0B5A81;
border-bottom: 1px solid 
">

<a href="URL" style="text-decoration: none; color: #0B5A81;">LINK</A>

</div>

<div id="block1" style="
width: 200px;
height: 20px;
margin: 0 auto 10px;
line-height: 10px;
text-align: center;
color: #0B5A81;
">

<a href="http://bihilism.dreamwidth.org" style="text-decoration: none; color: #0B5A81;">code</a>

</div>

</div>

<--! BOX END -->

<div style="
width: 200px;
margin: -120px auto 0;
color: #0B5A81;
font-weight: 300;
font-size: 20px;
text-align: center;
text-shadow: 0 0 1px #3DA8D2;">
<b>NAME</b></div>

</div>
</div>
</raw-code>

INSTRUCTIONS

background image is 350 x 490, the same color as the border or transparent

hex code to rgb value converter, with opacity for the background fill and box background.

the fourth value in the rgba determines opacity: 0 is completely transparent, 1 is completely solid, 0.5 is 50% opacity, etc.

colors are:
#F89473 - background & main border
rgba(242, 238, 237, 1) - gradient and box fill
#FAB896 - box border
#0B5A81 - text color
#3DA8D2 - name shadow

please leave the credit line

Flat | Top-Level Comments Only