Blog-Frissítések-Főoldal

TEMPLATE

perfect illusion

subtitle
a few more
lines of short
info can go in this space
bold text. body text.
BY MITZI
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Prompt:800" rel="stylesheet">
<center><div id="perfectillusion">
 
 <div class="tri1"></div>
 <div class="keep"><div class="pic" style="background: url(http://i.imgbox.com/hsPdqIsh.png);"></div></div>
 <div class="tri2"></div>
 
 <h1>perfect illusion</h1>
 
 <div class="littleinfo">
 <b>subtitle</b>
 <br>a few more 
 <br>lines of short
 <br>info can go in this space
 </div>
 
 <div class="text"><div class="scroll">
 
   <b>bold text.</b> body text.
   
 </div></div>
 
</div><a href="http://shine.jcink.net/index.php?showuser=8549"><span style="font: bold 8px/20px calibri; opacity: .5; text-align:center;">BY MITZI</span></a>
</center>
 
<style>
 
 /*** ACCENT COLOUR ***/
 #perfectillusion h1 { color: #HEXCODE; }
 #perfectillusion b { color: #HEXTCODE;}
 
@import 'https://fonts.googleapis.com/css?family=Inconsolata:400,700|Prompt:800';
 
 #perfectillusion {
   background: #fff; width: 350px; height: 450px; overflow: hidden;
   padding: 5px; border: solid 1px #DEDEDE; box-shadow: 0px 0px 4px #DEDEDE;
 }
 
 #perfectillusion .pic {
   width: 350px; height: 450px; transition: .9s;
 }
 
 #perfectillusion .keep {
   width: 350px; height: 450px; overflow: hidden;
 }
 
 #perfectillusion .tri1 {
   width: 0; height: 0;
   border-style: solid; border-width: 0 350px 130px 0;
   border-color: transparent #ffffff transparent transparent;
   margin-bottom: -130px; position: relative; z-index: 200;
   transition: .6s; transition-delay: .9s;
 }
 
 #perfectillusion .tri2 {
   width: 0; height: 0;
   border-style: solid;
   border-width: 130px 0 0 350px;
   border-color: transparent transparent transparent #ffffff;
   margin-top: -130px; position: relative; z-index: 200;
   transition: .6s; transition-delay: .9s;
 }
 
 #perfectillusion h1 {
   text-align: right!important; font: bold 45px/35px prompt;
   text-transform: uppercase;  letter-spacing: 8px;
   padding: 10px; height: 200px; overflow: hidden;
   margin-top: -450px; position: relative; z-index: 250;
   text-shadow: -1px 2px #fff;
   transition: .6s; transition-delay: 1.2s;
 }
 
 #perfectillusion .littleinfo {
   margin-top: 135px; position: relative; z-index: 200;
   color: #222; font: 16px/20px inconsolata; text-align: left;
   text-transform: uppercase; padding: 10px; letter-spacing: 2px;
   transition: .6s; transition-delay: 1.6s;
 }
 
 #perfectillusion .text {
   margin: -430px 20px 0 20px;
   border: solid 1px #fff;
   background: rgba(255,255,255,.5);
   position: relative; z-index: 2000;
   opacity: 0; transition: 1.3s;
 }
 
 #perfectillusion .scroll {
   color: #222; text-shadow: 0px 0px 1px #fff;
   font: 11px/16px inconsolata; margin: 25px; 
   text-align: justify; 
   height: 350px; overflow: auto;
 }
 
 #perfectillusion .scroll::-webkit-scrollbar {
   width: 15px!important; background: transparent!important;
   border: none!important;
 }
 
 #perfectillusion .scroll::-webkit-scrollbar-track {
   width: 15px!important; background: transparent!important;
   border: none!important;
 }
 
  #perfectillusion .scroll::-webkit-scrollbar-thumb {
   width: 15px!important; background: transparent!important;
   border-right: solid 2px #fff!important;
 }
 
 #perfectillusion:hover .pic {
   -webkit-filter: blur(100px);
   overflow: hidden; transition-delay: .7s;
 }
 
 #perfectillusion:hover .tri1 {
   margin-right: -700px; transition-delay: .7s;
 }
 
 #perfectillusion:hover .tri2{
   margin-left: -700px; transition-delay: .7s;
 }
 
 #perfectillusion:hover h1 {
   opacity: 0; transition-delay: 0s;
 }
 
 #perfectillusion:hover .littleinfo {
   opacity: 0; transition-delay: 0s;
 }
 
 #perfectillusion:hover .text {
   opacity: 1; transition-delay: .7s;
 }
 
</style>
2017.10.31. 16:23, Virág Vissza a bloghoz
Még nincs hozzászólás.
 
Blog(havi)
 
Blog(éves)
ARCHÍVUM

 

 
Oldal info

Virág

.
www.jegvirag.gportal.hu

Ez az oldal a www.jegvirag.gportal.hu MINTA oldala,az oldalon tesztelem a design-et ,kódokat...

Elérhetőségem: virag-78@gportal.hu

Vendégkönyv      Képtár      Blog

 

 
Menü
 
Számláló
Indulás: 2014-07-11
 
Bejelentkezés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 
Csskod

 

 
Copyright © 2005-2023 Virág Design /www.jegvirag.gportal.hu/virag-78@gportal.hu

Szeretnél egy jó receptet? Látogass el oldalamra, szeretettel várlak!    *****    Minõségi Homlokzati Hõszigetelés. Vállaljuk családi házak, lakások, nyaralók és egyéb épületek homlokzati szigetelését.    *****    Amway termék elérhetõ áron!Tudta, hogy az általános tisztítószer akár 333 felmosásra is alkalmas?Több info a weboldalon    *****    Florence Pugh magyar rajongói oldal. Ismerd meg és kövesd az angol színésznõ karrierj&#232;t!    *****    Fele királyságomat nektek adom, hisz csak rátok vár ez a mesebirodalom! - Új menüpont a Mesetárban! Nézz be te is!    *****    DMT Trip napló, versek, történetek, absztrakt agymenés:)    *****    Elindult a Játék határok nélkül blog! Részletes információ az összes adásról, melyben a magyarok játszottak + egyéb infó    *****    Florence Pugh Hungary - Ismerd meg az Oppenheimer és a Dûne 2. sztárját.    *****    Megnyílt az F-Zero Hungary! Ismerd meg a Nintendo legdinamikusabb versenyjáték-sorozatát! Folyamatosan bõvülõ tartalom.    *****    A Cheer Danshi!! nem futott nagyot, mégis érdemes egy esélyt adni neki. Olvass róla az Anime Odyssey blogban!    *****    A 1080° Avalanche egy méltatlanul figyelmen kívül hagyott játék, pedig a Nintendo egyik remekmûve. Olvass róla!    *****    Gundel Takács Gábor egy különleges könyvet adott ki, ahol kiváló sportolókkal a sport mélységébe nyerhetünk betekintést.    *****    21 napos életmódváltás program csatlakozz hozzánk még!Január 28-ig 10% kedvezménnyel plusz ajándékkal tudod megvásárolni    *****    Szeretne egy olyan általános tisztítószert ami 333 felmosásra is elegendõ? Szeretne ha csíkmentes lenne? Részletek itt!!    *****    Új játék érkezett a Mesetárba! Elõ a papírral, ollóval, és gyertek barkácsolni!    *****    Tisztítószerek a legjobb áron! Hatékonyság felsõfoka! 333 felmosásra elengedõ általános tisztítószer! Vásároljon még ma!    *****    Hayashibara Megumi és Okui Masami rajongói oldal! Albumok, dalszövegek, és sok más. Folyamatosan frissülõ tartalom.    *****    A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom.    *****    333 Felmosásra elegendõ! Szeretne gazdaságosan felmosni? Szeretne kiváló általános tisztítószert? Kiváló tisztítószerek!    *****    Ha tél, akkor téli sportok! De akár videojáték formájában is játszhatjuk õket. A 1080°Snowboarding egy kiváló példa erre