Hello World! Popup (html, LESS)

HTML
<a class="button" href="#openModal">"Click Me!"</a> <div id="openModal" class="modalbg"> <div class="dialog"> <a href="#close" title="Close" class="close">X</a> <h2>Hello World!</h2> <p><b>I'm Sena, nice to meet you</b></p> <p><b><a href="https://twitter.com/_anesena" target="_blank">Twitter</a> | <a href="https://instagram.com/_anesena" target="_blank">Instagram</a> | <a href="https://anesena.github.io/" target="_blank">Github</a></b></p> <p class="fineprint"> ------------------------------------------------- </a></p> <p class="fineprint">© <a href="https://twitter.com/_anesena" target="_blank">Tiesna Sulistiana</a></p> </div> </div>
LESS
@import url(https://fonts.googleapis.com/css?family=Amatic+SC); .transition (@time: .5s, @range: all, @ease: ease-out) { -moz-transition: @range @time @ease; -webkit-transition: @range @time @ease; -o-transition: @range @time @ease; transition: @range @time @ease; } .transition-delay (@time: .4s) { -webkit-transition-delay: @time; -moz-transition-delay: @time; -o-transition-delay: @time; -transition-delay: @time; } .border-radius(@radius) { -moz-border-radius:@radius; -webkit-border-radius:@radius; border-radius: @radius; } .gradient (@coler1: #fff, @coler2: #ccc) { background: @coler1; background: -moz-linear-gradient(@coler1, @coler2); background: -webkit-linear-gradient(@coler1, @coler2); background: -o-linear-gradient(@coler1, @coler2); } .box-shadow(@dims:0 0 10px, @color:#000) { box-shadow: @dims @color; // Opera, FFX4 -moz-box-shadow:@dims @color; // FFX3.5 -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit .ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); } } .inset(@dims:1px 1px 1px, @color:#fff) { box-shadow: @dims @color; // Opera, FFX4 -moz-box-shadow:@dims @color; // FFX3.5 -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit } body { width: 100%; background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe; } .button { margin: 40px auto; font-size: 75px; font-family: 'Amatic SC'; text-decoration: none; text-shadow: 1px 1px 0px #fff; font-weight: 400; color: #666; border: 1px solid #ccc; cursor: pointer; padding: 20px 70px 30px; position: relative; top: 50px; background: #eee; width: 300px; display: block; text-align: center; .inset; .border-radius(3px); .transition; &:hover{ color: #333; background: #eeffff; .transition;} } .modalbg { position: fixed; font-family: Amatic SC; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0); z-index: 99999; .transition(2s); .transition-delay(.2s); display: block; pointer-events: none; .dialog { width: 400px; position: relative; top: -1000px; margin: 10% auto; padding: 5px 20px 13px 20px; .border-radius(10px); .gradient; .box-shadow; } } .modalbg:target { display: block; pointer-events: auto; background: rgba(57, 57 ,57, .8); .transition(); .dialog { top: -20px; .transition(.8s); .transition-delay; } } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; .box-shadow; .transition; .transition-delay(.2s); &:hover { background: #00d9ff; .transition; } } .fineprint { font-style: italic; font-size: 10px; color: #646; } a { color: #333; text-decoration: none; }
JAVASCRIPT
Expand for more options Login