Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- NAVIGATION/TAGS PAGE #1
- by: myackles.tumblr.com / ma-themes.tumblr.com
- Editing is okay as long as you:
- DO NOT CLAIM AS YOUR OWN OR REMOVE/MOVE THE CREDIT!!
- -->
- <head>
- <link rel="shortcut icon" href="{Favicon}"/>
- <title>Navi</title> <!-- PAGE TITLE -->
- <style type="text/css">
- /* SCROLL AND HOVER */
- ::selection {background-color:white;color:gray;} /* HOVER COLORS */
- ::-moz-selection {background-color:white;color:gray;} /* HOVER COLORS */
- ::-webkit-scrollbar-thumb:vertical {
- height:10px;
- border:2px solid #fff;
- background-color: none; /* SCROLLBAR COLOR */}
- ::-webkit-scrollbar-thumb:horizontal {
- height:10px;
- background-color: #8b8a8b; /* SCROLLBAR COLOR */}
- ::-webkit-scrollbar {
- height: 10px;
- width: 3px;
- background-color:white; /* SCROLLBAR BACKGROUND COLOR */}
- body { background-color:#fbfbfb;}
- .container {overflow:auto;width:900px;margin:10px auto 0 auto;}
- a {text-decoration:none;color:#777777;font-size:10px;text-transform:uppercase;text-align:center;}
- .head {
- border:1px solid #f0f0f0;
- height:105px;
- margin-top:50px;
- /* HEADER BACKGROUND IMAGE DOWN HERE */
- background-image: url('http://25.media.tumblr.com/93df3b7ccdb205133908e514ca01e881/tumblr_mshywfg0NC1r9c5eeo1_500.png');}
- .header {
- font-weight:bold;
- color:#fac411; /* NAVI TEXT COLOUR - YELLOW */
- width:100%;
- letter-spacing:2px;
- text-shadow: 2px 2px 2px white;/* NAVI TEXT SHADOW - WHITE */
- font-family:calibri;
- font-size:30px;
- text-transform:uppercase;
- padding-bottom:20px;}
- .u {
- border-bottom:2px solid #b1df07;
- /* NAVI BOTTOM BORDER COLOUR - GREEN */
- padding-bottom:10px;padding-top:20px;}
- .u:first-letter {color:#ee6436; /* NAVI FIRST LETTER COLOUR - RED */ }
- .links {margin-top:-44px;letter-spacing:2px;}
- .a {display:inline-block;width:100px;transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;}
- .a:hover { letter-spacing:3px;transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;}
- .column1 {
- width:205px;
- float:left;
- margin:10px;}
- .column1header h4{
- font-family: calibri;
- font-size:10px;
- letter-spacing:2px;
- border:1px solid #f0f0f0;
- display:block;
- background-color:#ee6436; /* BACKGROUND COLOR: RED */
- text-transform:uppercase;
- color:#ffffff;
- text-align:center;
- padding:5px;padding-top:10px;
- width:190px;padding-bottom:10px;}
- .column1 a {
- display:block;
- padding:5px; border:1px solid #f0f0f0;
- font-family: calibri;
- font-size:10px;
- width:190px;letter-spacing:2px;
- background-color:white;
- margin:2px 0;
- border-bottom:2px solid #ee6436; /* BORDER COLOR: RED */
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- .column1 a:hover {
- border-bottom:2px solid #423a37; /* BORDER HOVER COLOR: YELLOW */
- letter-spacing:2px;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- .column2 {
- width:205px;
- float:left;
- margin:10px;}
- .column2header h4{
- font-family: calibri;
- font-size:10px;
- letter-spacing:2px;
- border:1px solid #f0f0f0;
- display:block;
- background-color:#fac411; /* BACKGROUND COLOR: YELLOW */
- text-transform:uppercase;
- color:#ffffff;
- text-align:center;
- padding:5px;padding-top:10px;
- width:190px;padding-bottom:10px;}
- .column2 a {
- display:block;
- padding:5px; border:1px solid #f0f0f0;
- font-family: calibri;
- font-size:10px;
- width:190px;letter-spacing:2px;
- background-color:white;
- margin:2px 0;
- border-bottom:2px solid #fac411; /* BORDER COLOR: YELLOW */
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- .column2 a:hover {
- border-bottom:2px solid #0090ff; /* BORDER HOVER COLOR: YELLOW */
- letter-spacing:2px;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- .column3 {
- width:205px;
- float:left;
- margin:10px;}
- .column3header h4{
- font-family: calibri;
- font-size:10px;
- letter-spacing:2px;
- border:1px solid #f0f0f0;
- display:block;
- background-color:#b1df07; /* BACKGROUND COLOR: GREEN */
- text-transform:uppercase;
- color:#ffffff;
- text-align:center;
- padding:5px;padding-top:10px;
- width:190px;padding-bottom:10px;}
- .column3 a {
- border:1px solid #f0f0f0;
- display:block;
- padding:5px;
- font-family: calibri;
- font-size:10px;
- width:190px;letter-spacing:2px;
- background-color:white;
- margin:2px 0;
- border-bottom:2px solid #b1df07; /* BORDER COLOR: GREEN */
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- .column3 a:hover {
- border-bottom:2px solid #f94290; /* BORDER HOVER COLOR: YELLOW */
- letter-spacing:2px;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- .column4 {
- width:205px;
- float:left;
- margin:10px;}
- .column4header h4{
- border:1px solid #f0f0f0;
- font-family: calibri;
- font-size:10px;
- letter-spacing:2px;
- display:block;
- background-color:#16b5df; /* BACKGROUND COLOR: BLUE */
- text-transform:uppercase;
- color:#ffffff;
- text-align:center;
- padding:5px;padding-top:10px;
- width:190px;padding-bottom:10px;}
- .column4 a {
- border:1px solid #f0f0f0;
- display:block;
- padding:5px;
- font-family: calibri;
- font-size:10px;
- width:190px;letter-spacing:2px;
- background-color:white;
- margin:2px 0;
- border-bottom:2px solid #16b5df; /* BORDER COLOR: BLUE */
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- .column4 a:hover {
- border-bottom:2px solid #423a37; /* BORDER HOVER COLOR: YELLOW */
- letter-spacing:2px;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;}
- </style>
- </head>
- <body>
- <center>
- <div class="header"><div class="head"><div class="u">navigation</div></div>
- <div class="links"> <!-- LINKS ARE DOWN HERE -->
- <div class="a"> <a href="/">HOME</a></div>
- <div class="a"> <a href="/ask">ASKBOX</a></div>
- <div class="a"><a href="/archive">HISTORY</a></div>
- <div class="a"><a href="http://www.ma-themes.tumblr.com">CREDIT</a></div>
- </div> </div> </center>
- <div class="container">
- <div class="column1"><div class="column1header">
- <h4>COLUMN 1 HEADER</h4>
- </div>
- <div class="column1links">
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- </div></div>
- <div class="column2"><div class="column2header">
- <h4>COLUMN 2 HEADER</h4>
- </div>
- <div class="column2links">
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- </div></div>
- <div class="column3"><div class="column3header">
- <h4>COLUMN 3 HEADER</h4>
- </div>
- <div class="column3links">
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- </div></div>
- <div class="column4"><div class="column4header">
- <h4>COLUMN 4 HEADER</h4>
- </div>
- <div class="column4links">
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- <a href="LINK">LINK NAME</a>
- </div></div>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement