Relacje #1

Pierwsze relacje! To znaczy pierwsze na blogu, bo narobiłam się tego czegoś kiedyś dość dużo :P
Kod na zamówienie, przerobiony trochę z kodu, który wykonywałam niedawno.
Jest dość skomplikowany dla osób które znajomość HTMLu i CSSa mają zerową, ale spokojnie wszystko wyjaśnię :P

Ogólnie działanie widać poniżej, ale wrzucając to na swoje forum warto dodać ludziom osobne kody dla każdej jednej relacji, bo wycinanie z całego kodu może się skończyć błędem i wszystko runie :P
W początkowej wersji nie było podziału na pozytyw/neutral/negatyw, więc wybrnęłam z tego nieco inaczej - kolorami. Mam nadzieję, że dało radę :roll:

Kod każdej kolejnej relacji należy wstawić za znacznikiem który jest umieszczony po opisie relacji.

Polecam wszystkie style wrzucić do kodu stylu forum, bo kod będzie zaaa długi!

Nick postaci

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pozytywek Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna dui, non ornare nisi accumsan eget. Vestibulum quis eros id justo rutrum laoreet in quis erat. Proin blandit tincidunt magna, at tincidunt nibh tempor quis. Pellentesque quis urna sapien. Neutralek Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna dui, non ornare nisi accumsan eget. Vestibulum quis eros id justo rutrum laoreet in quis erat. Proin blandit tincidunt magna, at tincidunt nibh tempor quis. Pellentesque quis urna sapien. Negatywek Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin urna dui, non ornare nisi accumsan eget. Vestibulum quis eros id justo rutrum laoreet in quis erat. Proin blandit tincidunt magna, at tincidunt nibh tempor quis. Pellentesque quis urna sapien.

@carolyn

KOD:

<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'><style>.relfot{width:300px; height:170px; border-radius:50px; border:4px double #373737;}.relim{color:#373737; font-family: 'Playball', cursive; font-size:45px; text-align:center; margin-bottom:-10px; text-shadow: 0px 0px 3px #000;} .relquo{font-family: 'Pathway Gothic One', sans-serif; text-transform:uppercase; font-size:15px; text-align:center; color:#373737;}.relfac{margin-left:10px; width:110px; height:110px; border-radius:20px; border:2px solid #373737; margin-top:20px; transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.relfac:hover{border-radius:100px; transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.relnam{width:230px; height:110px; background-color:#F5F2C6; border-radius:20px; border:2px solid #373737; margin-top:-114px; margin-left:120px; position:relative; z-index:3;transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.relnamp{width:230px; height:110px; background-color:#D5F4C5; border-radius:20px; border:2px solid #373737; margin-top:-114px; margin-left:120px; position:relative; z-index:3;transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.relnamn{width:230px; height:110px; background-color:#F5D5D5; border-radius:20px; border:2px solid #373737; margin-top:-114px; margin-left:120px; position:relative; z-index:3;transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.relnamp:hover{opacity:0;transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.relnamn:hover{opacity:0;transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.reln{font-family: 'Pathway Gothic One', sans-serif; font-size:40px; letter-spacing:3px; text-align:center; position:relative; z-index:3; margin-top:30px; color:#373737; text-shadow: 0px 0px 4px #373737;}.relnam:hover{opacity:0;transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-htm-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}.relbox{width:210px; height:90px; overflow:auto; font-family:tahoma; font-size:9px; text-transform:uppercase; text-align:justify; background-color:#E6E28E; color:#373737; padding:10px; border-radius:20px; border:2px solid #373737; margin-top:-114px; margin-left:120px; position:relative; z-index:2;}.relboxp{width:210px; height:90px; overflow:auto; font-family:tahoma; font-size:9px; text-transform:uppercase; text-align:justify; background-color:#96DC73; color:#373737; padding:10px; border-radius:20px; border:2px solid #373737; margin-top:-114px; margin-left:120px; position:relative; z-index:2;}.relboxn{width:210px; height:90px; overflow:auto; font-family:tahoma; font-size:9px; text-transform:uppercase; text-align:justify; background-color:#DC9A9A; color:#373737; padding:10px; border-radius:20px; border:2px solid #373737; margin-top:-114px; margin-left:120px; position:relative; z-index:2;}.credit{font-family:tahoma; font-size:9px; text-transform:uppercase; color:#373737; opacity:0.5; text-align:center;}</style><center><table style="background-color:#fff; width:380px; border-radius:50px; border:4px solid #373737;"><tr><td><div class="relim">Nick twojej postaci</div></td></tr><tr><td align=center><img src="linkdogifa twojej postaci" class="relfot"><div class="relquo">CYTAT TWOJEJ POSTACI</div></td></tr><tr><td><img src="fotka pozytywa" class="relfac"><div class="relnamp"><div class="reln">Nick pozytywa</div></div><div class="relboxp">OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI </div><img src="link do foty neutrala" class="relfac"><div class="relnam"><div class="reln">Nick neutral</div></div><div class="relbox">OPIS RELACJI NEUTRALNEJ TARATATATATSARSTASRSATAST AS</div><img src="link do fotki negatywa" class="relfac"><div class="relnamn"><div class="reln">Nick negatywa</div></div><div class="relboxn">OPIS NEGATYWNEJ RELACJI BLE BLE BLAB EBEHEBHASBHBE </div></td></tr><tr><td><a href="http://carolyns-workshop.blogspot.com/"><div class="credit"><b>@</b>carolyn</div></a></td></tr></table></center>

KOD POZYTYWÓW:

<img src="fotka pozytywa" class="relfac"><div class="relnamp"><div class="reln">Nick pozytywa</div></div><div class="relboxp">OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI OPIS POZYTYWNEJ RELACJI </div>


KOD NEUTRALÓW:

<img src="link do foty neutrala" class="relfac"><div class="relnam"><div class="reln">Nick neutral</div></div><div class="relbox">OPIS RELACJI NEUTRALNEJ TARATATATATSARSTASRSATAST AS</div>


KOD NEGATYWÓW:

<img src="link do fotki negatywa" class="relfac"><div class="relnamn"><div class="reln">Nick negatywa</div></div><div class="relboxn">OPIS NEGATYWNEJ RELACJI BLE BLE BLAB EBEHEBHASBHBE </div>