Home
by -pressure March 15th 2015, 9:33 pmHello, i need some help. I will try to explain my problem.
I wanna make my header like this one ;
Befor;
and after i move my mouse over;
Okay i want to make it like this but i dont know how my forum is phpbb3
and the other question is how to make the profiles to look like this one
Befor :
and after i move the mouse over'
for that one i have code, but the code dosen't work in the forum i think so becouse i try so many times to put it but it dosen't work.
this is the code :Â
1;
2;
Can you help me ?
I wanna make my header like this one ;
Befor;
and after i move my mouse over;
Okay i want to make it like this but i dont know how my forum is phpbb3
and the other question is how to make the profiles to look like this one
Befor :
and after i move the mouse over'
for that one i have code, but the code dosen't work in the forum i think so becouse i try so many times to put it but it dosen't work.
this is the code :Â
1;
- Code:
/* MINI PROFILE BY DARREN CRISS AKA BECKY */
.sledge { width: 250px; height: 350px; position: relative; overflow: hidden; margin: auto; }
.sledgeh
{ width: 210px; padding: 20px; font-family: 'Raleway', sans-serif;
margin: auto; font-weight: 900; text-transform: uppercase; text-align:
center; line-height: 100%; font-size: 30px; color: #fff;
background-color: #222; }
.sledgeh a { font-family: 'Raleway',
sans-serif; margin: auto; font-weight: 900; text-transform: uppercase;
text-align: center; line-height: 100%; font-size: 30px; }
mmb {
font-family: 'Roboto Slab', sans-serif; font-size: 7px; text-transform:
uppercase; line-height: 100%; color: #fff; letter-spacing: 1px;
margin-top: 1px; display: block;}
mmb:before, mmb:after { content:
"//"; vertical-align: middle; font-size: 4px; margin-left: 5px;
margin-right: 5px; line-height: 100%; }
.sledge .sledge1 { width:
250px; height: 350px; position: absolute; top: 0px; left: 0px;
transition-duration: .6s; -webkit-transition-duration: .6s;
-moz-transition-duration: .6s; -ms-transition-duration: .6s;
-o-transition-duration: .6s; }
.sledge:hover .sledge1 { left: -150px;
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:
grayscale(100%); filter: url(grayscale.svg); filter: gray; }
.sledge
.sledge2 { width: 110px; padding: 20px; height: 310px; background-color:
#222; position: absolute; bottom: -400px; right: 0px;
 transition-duration: .6s; -webkit-transition-duration: .6s;
-moz-transition-duration: .6s; -ms-transition-duration: .6s;
-o-transition-duration: .6s; }
.sledge:hover .sledge2 { bottom: 0px; }
.sledgei { width: 98px; padding: 5px; border: 1px solid #fff; margin-bottom: 10px;}
.sledgei img { width: 98px; height: 98px; }
.sledgehh
{ font-family: 'Roboto Slab', sans-serif; font-size: 7px;
text-transform: uppercase; line-height: 100%; color: #fff;
letter-spacing: 1px; text-align: left; margin-bottom: 5px;}
.sledgehh:after { content: "//"; }
.sledgehhi:before { content: "//"; }
.sledgehhi
{ font-family: 'Roboto Slab', sans-serif; font-size: 7px;
text-transform: uppercase; line-height: 100%; color: #fff;
letter-spacing: 1px; text-align: right; margin-bottom: 5px;}
.sledgehh
a, .sledgehhi a { Â font-family: 'Roboto Slab', sans-serif; font-size:
7px; text-transform: uppercase; line-height: 100%; color: #fff;
letter-spacing: 1px }
.hammer { border-top: 1px solid #555;
margin-top: 10px; height: 25px; overflow: hidden; font-family: 'Roboto
Slab', sans-serif; font-size: 5px; letter-spacing: 2px; line-height:
100%; text-align: justify; padding-top: 5px; color: #555;
text-transform: uppercase; }
2;
- Code:
<link href='http://fonts.googleapis.com/css?family=Raleway:900'
rel='stylesheet' type='text/css'><link
href='http://fonts.googleapis.com/css?family=Roboto+Slab'
rel='stylesheet' type='text/css'><div class="sledge"><div
class="sledge1"><!-- |avatar| --></div><div
class="sledge2"><div class="sledgei"><img src="<!--
|field_1| -->"/></div><div class="sledgehh"> <!--
|field_2| --> years </div><div class="sledgehhi"> <!--
|field_3| --></div><div class="sledgehh"> <!--
|field_4| --> </div><div class="sledgehhi"> <!--
|field_5| --></div><div class="sledgehh"> <a
href="<!-- |field_6| -->"><!-- |field_7| --></a>
</div><div class="sledgehhi"> <!-- |field_8| -->
</div><div class="sledgehh"> <!-- |field_9| -->
</div><div class="sledgehhi"> <!-- |posts| --> posts
</div><div class="sledgehh"> <!-- |field_10| --> //
<!-- |status| --> </div><div class="sledgehhi"> <a
href="<!-- |field_11| -->">application</a>
</div><div class="sledgehh"> <a href="<!-- |field_12|
-->">shipping</a> </div><div class="sledgehhi">
<a href="<!-- |field_13| -->">request</a>
</div><div class="sledgehh"> <a href="<!-- |field_14|
-->">development</a> </div><div class="hammer">
<!-- |field_15| --> </div><object
type="application/x-shockwave-flash"
data="http://flash-mp3-player.net/medias/player_mp3_mini.swf"
width="110" height="10"><param name="movie"
value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"
/><param name="bgcolor" value="#222222" /><param
name="FlashVars" value="mp3=<!-- |field_16|
-->&bgcolor=222222&slidercolor=555555&buttoncolor=ffffff"
/></object></div></div><div
class="sledgeh"><!-- |name| --><mmb><!-- |g_title|
--></mmb></div>
Can you help me ?
