Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ------------ HTML ----------------
- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css" />
- <center>
- <div class="tablon-anuncios">
- <div id="example-popup" class="modal-content">
- <table cellspacing="0">
- <tbody>
- <tr>
- <td>
- <div class="ambientacion">
- Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. <br /><br />Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
- </div>
- </td>
- <td>
- <img src="http://goo.gl/oFJdKT" style="width: 300px;" />
- <div class="bot-negro">
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div id="admin-tab" class="modal-content">
- <div style="margin-right: 4px;" class="admin">
- <img src="http://i.imgur.com/FipfoTz.jpg" />
- <div class="info-admin">
- Thor
- </div>
- <div class="info-admin">
- Admin
- </div><a class="info-admin" href="url">Contacto</a>
- </div>
- <div style="margin-right: 4px;" class="admin">
- <img src="http://i.imgur.com/k1GF747.jpg" />
- <div class="info-admin">
- Natasha
- </div>
- <div class="info-admin">
- Admin
- </div><a class="info-admin" href="url">Contacto</a>
- </div>
- <div class="admin">
- <img src="http://i.imgur.com/akymeww.jpg" />
- <div class="info-admin">
- Bruce
- </div>
- <div class="info-admin">
- Admin
- </div><a class="info-admin" href="url">Contacto</a>
- </div>
- </div>
- <div id="links-tab" class="modal-content">
- <div style="margin-right: 4px;" class="link-title">
- Principales
- </div>
- <div class="link-title">
- Secundarios
- </div>
- <div class="links-pples">
- <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a>
- </div>
- <div class="links-sdarios">
- <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a><a href="url">Enlace 6</a><a href="url">Enlace 7</a><a href="url">Enlace 8</a><a href="url">Enlace 9</a><a href="url">Enlace 10</a>
- <div class="bot2">
- </div>
- </div>
- </div>
- <div id="news-tab" class="modal-content">
- <div class="column-tab" style="margin-right: 4px;">
- <div class="novedad">
- Última<br />novedad
- </div>
- <div class="nov-cont">
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.
- </div>
- <div style="margin-top: 64px;" class="link-title">
- Noticias anteriores
- </div>
- <div class="noticias">
- 00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.
- </div>
- </div>
- <div class="column-tab">
- <div class="link-title">
- Búsquedas
- </div>
- <marquee scrollamount="2" class="busquedas" direction="up" onmouseout="this.start()" onmouseover="this.stop()">
- <a href="url">Título de la búsqueda 1</a><br /><br /><a href="url">Título de la búsqueda 2</a><br /><br /><a href="url">Título de la búsqueda 3</a><br /><br /><a href="url">Título de la búsqueda 4</a><br /><br /><a href="url">Título de la búsqueda 5</a>
- </marquee>
- </div>
- </div>
- </div>
- </center>
- <div class="botones">
- <div class="title">
- Menu
- </div><a href="#" class="modal-link" data-modal-target="example-popup">Index</a><a href="#" class="modal-link" data-modal-target="admin-tab">Staff</a><a href="#" class="modal-link" data-modal-target="links-tab">Links</a><a style="border-bottom: 3px solid #000;" href="#" class="modal-link" data-modal-target="news-tab">News</a><span style="font-size: 10px; font-weight: 700; text-transform: uppercase; font-family: calibri; position: relative; top: 5px; text-align: center;"><a href="http://thecaptainknowsbest.tumblr.com/" style="color: #000;">© HARDROCK</a></span>
- </div>
- ------------ CSS -----------------
- .botones {
- position: fixed;
- top: 0px;
- left: 0px;
- width: 73px;
- }
- .busquedas {
- background: #e1e0e0;
- text-align: center;
- height: 146px;
- overflow: hidden;
- font-weight: bold;
- }
- .busquedas a {color: #000;}
- .tablon-anuncios {font-family: source sans pro;}
- .noticias {
- font-size: 11px;
- line-height: 100%;
- color: #000;
- font-weight: bold;
- text-align: justify;
- }
- .novedad {
- display: inline-block;
- line-height: 100%;
- position: absolute;
- top: 0px;
- left: 0px;
- width: 70px;
- background: #000;
- margin-right: 1px;
- text-align: center;
- padding-bottom: 20px;
- color: #f2f2f2;
- padding-top: 20px;
- }
- .nov-cont {
- display: inline-block;
- position: absolute;
- right: 0px;
- top: 0px;
- height: 50px;
- background: #e1e0e0;
- line-height: 100%;
- text-align: justify;
- color: #000;
- width: 186px;
- padding: 5px;
- }
- .column-tab {
- width: 270px;
- overflow: hidden;
- position: relative;
- height: 181px;
- display: inline-block;
- }
- .links-sdarios .bot2 {
- margin-top: 5px;
- width: 100%;
- height: 40px;
- background: #000;
- }
- .links-sdarios {
- height: 150px;
- overflow: hidden;
- width: 270px;
- display: inline-block;
- }
- .links-sdarios a {
- display: inline-block;
- background: #e1e0e0;
- line-height: 100%;
- color: #000;
- padding-top: 5px;
- padding-bottom: 5px;
- width: 134px;
- margin-top: 1px;
- margin-right: 1px;
- text-align: center;
- font-size: 11px;
- transition: 1s;
- }
- .links-sdarios a:hover {letter-spacing: 2px; transition: 1s;}
- .links-pples {
- width: 270px;
- height: 150px;
- overflow: hidden;
- margin-right: 5px;
- display: inline-block;
- }
- .links-pples a {
- display: block;
- background: #e1e0e0;
- line-height: 100%;
- color: #000;
- padding-top: 9px;
- padding-bottom: 9px;
- margin-top: 1px;
- text-align: center;
- font-size: 11px;
- transition: 1s;
- }
- .links-pples a:hover {transition: 1s; letter-spacing: 2px;}
- .link-title {
- display: inline-block;
- margin-bottom: 5px;
- width: 270px;
- font-size: 11px;
- text-transform: uppercase;
- text-align: center;
- line-height: 100%;
- font-family: Source Sans Pro;
- padding-top: 10px;
- padding-bottom: 10px;
- color: #f9f9f9;
- background: #000;
- }
- .admin .info-admin {
- display: block;
- width: 87px;
- text-align: center;
- margin-left: 90px;
- font-size: 11px;
- background: #000;
- border-bottom: 1px solid #F9F9F9;
- line-height: 100%;
- padding-top: 3px;
- padding-bottom: 3px;
- color: #F9F9F9;
- }
- .admin img {float: left; width: 90px; height: 181px;border-right: 1px solid #F9F9F9;}
- .admin {
- height: 181px;
- width: 178px;
- overflow: hidden;
- display: inline-block;
- background: #000;
- }
- .ambientacion {
- height: 161px;
- padding: 10px;
- color: #000;
- width: 220px;
- margin-right: 5px;
- background: #e1e0e0;
- line-height: 100%;
- font-size: 11px;
- text-align: justify;
- }
- .bot-negro {
- width: 300px;
- height: 50px;
- margin-top: 5px;
- background: #000;
- }
- .botones a {color: #eee;}
- .botones .title {
- display: block;
- text-transform: uppercase;
- font-family: Source Sans Pro;
- font-size: 13px;
- background: #000;
- width: 70px;
- text-align: center;
- color: #eee;
- font-weight: 600;
- margin-bottom: 1px;
- padding-top: 10px;
- padding-bottom: 5px;
- line-height: 100%;
- height: 20px;
- border-right: 3px solid #000;
- }
- .modal-link {
- display: block;
- text-transform: uppercase;
- font-family: Source Sans Pro;
- font-size: 13px;
- background: #21B7B8;
- width: 70px;
- text-align: center;
- font-weight: 600;
- margin-bottom: 1px;
- padding-top: 10px;
- padding-bottom: 5px;
- line-height: 100%;
- height: 20px;
- border-right: 3px solid #000;
- transition: 0.5s;
- }
- .modal-link:hover {transition: 0.5s; width: 90px;}
- .modal-content {
- display: none;
- }
- #fade-background {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: #000000;
- z-index: 2;
- }
- #modal-window {
- position: fixed;
- top: 64px;
- width: 550px;
- padding: 20px;
- left: 50%;
- height: 181px;
- overflow: hidden;
- border: 10px solid #000;
- margin: 0 0 0 -295px;
- background-color: #F9F9F9;
- z-index: 3;
- }
- /*Pop up*/
- ------------ JAVASCRIPT ----------
- // jQuery Modal Popups by Black
- // http://code.jfbs.net/?showtopic=57
- $(document).ready(function() {
- var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
- modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
- $(document.body).append(fadeBackground, modalWindow);
- $(document).on("click", ".modal-link", function(e) {
- $("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
- var newContents = $("#" + $(this).data("modal-target")).html();
- $("#modal-window").html(newContents);
- $("#modal-window").fadeIn("fast");
- e.preventDefault();
- });
- $(document).on("click", "#fade-background", function() {
- $("#fade-background").fadeOut("fast");
- $("#modal-window").fadeOut("fast");
- });
- $(document).keypress(function(e) {
- if(e.keyCode == 27) {
- $("#fade-background").fadeOut("fast");
- $("#modal-window").fadeOut("fast");
- }
- });
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement