Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <title>Navigation</title>
- <!--------------------------------------------------------------------------
- ------------------------ Adrienne Law's navi page ------------------------------------------------Give credit where credit is due-------------------------------------------------------------------------------------------------->
- <style type="text/css">
- ::-webkit-scrollbar-thumb:vertical {
- background-color: #ccc; /*Change color of scroll bar*/
- height:5px;
- }
- ::-webkit-scrollbar-corner {
- background-color: transparent;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- background-color: #ccc; /*Change color of scroll bar*/
- height:5px!important;
- }
- ::-webkit-scrollbar {
- height:7px;
- width:5px;
- }
- iframe#tumblr_controls{
- position:fixed !important;
- right:0px !important;
- z-index:999;
- }
- #title {
- width: 400px;
- height: 22px;
- margin-left:auto;
- margin-right:auto;
- text-align: right;
- font-family:calibri;
- font-style:italic;
- font-size:22px;
- border-bottom:1px solid gray;
- padding-top:40px;
- }
- #links {
- width:400px;
- margin-left:auto;
- margin-right:auto;
- margin-top:10px;
- padding-bottom:0px;
- text-align: right;
- }
- #links a {
- width:96;
- padding:2px 2px 2px 3px;
- background-color:#ffffff;
- margin:2px;
- color:gray;
- font-size:10px;
- font-family:calibri;
- text-align:center;
- letter-spacing:1px;
- text-transform:uppercase;
- text-decoration:none;
- border: 1px solid #C3C3DE;
- -o-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- }
- #links a:hover {
- background-color:#C3C3DE;
- color:#ffffff;
- border: 1px solid #ffffff;
- -o-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- }
- #header {
- width:600px;
- height:50px;
- margin-right:auto;
- margin-left:auto;
- margin-top:15px;
- text-align:center;
- }
- #header img{
- width:600px;
- height:50px;
- }
- #description {
- width:200px;
- height:10px;
- padding:3px 0px 8px 0px;
- margin-right:auto;
- margin-left:auto;
- margin-top:-35px;
- text-align:center ;
- font-family:calibri;
- font-size:10px;
- text-transform:uppercase;
- background-color:#ffffff;
- opacity:.7;
- }
- #display {
- width:850px;
- height:600px;
- margin-top:10px;
- margin-bottom:10px;
- margin-left:auto;
- margin-right:auto;
- }
- #displaycontainer {
- display:inline-block;
- margin:10px;
- width:250px;
- height:280px;
- padding:5px 5px 5px 5px;
- border:1px solid #030352;
- background-color:white ;
- }
- #displaycontainer:hover #displaylinks {
- opacity:1;
- -o-transition: all 0.5s ease-in-out;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- }
- #displaylinks {
- display:block;
- width:250px;
- height:210px;
- overflow:scroll;
- opacity:0;
- padding:2px 0px 2px 0px;
- background-color:white;
- font-family:calibri;
- font-size:10px;
- letter-spacing:2px;
- text-align:center;
- text-transform:uppercase;
- margin-top:10px;
- z-index:100000000000000000000;
- -o-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- }
- #displaylinks a {
- text-decoration:none;
- display:block;
- color:gray;
- padding:0px 1px 0px 2px;
- -o-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- -moz-transition: all 0.5s ease-out;
- }
- #displaylinks a:hover {
- color:white;
- background-color:#C3C3DE;
- -o-transition: all 0.5s ease-out;
- -webkit-transition: all 0.5s ease-out;
- - -moz-transition: all 0.5s ease-out;
- }
- #displaytitle {
- background-color: white;
- height:14px;
- width:250px;
- padding:5px 0px 5px 0px;
- border:1px solid #C3C3DE;
- font-family: calibri;
- font-size:12px;
- letter-spacing:1px;
- color:black;
- text-align:center;
- text-transform:uppercase;
- text-decoration:none;
- margin-top:120px;
- z-index:1000000000000;
- transition: all 0.5s ease-out;
- -o-transition: all 0.5s ease-in-out;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- }
- #displaycontainer:hover #displaytitle {
- height:14px;
- width:250px;
- color:black;
- margin-top:20px;
- transition: all 0.5s ease-out;
- -o-transition: all 0.5s ease-in-out;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- }
- #credit a {
- display:inline-block;
- width:40px;
- background-color:#fff;
- color:gray;
- text-decoration:none;
- border-right:1px solid;
- border-left: 1px solid;
- border-color:#878787;
- padding: 2px 0px 2px 0px;
- -o-transition: all 1s ease-out;
- -webkit-transition: all 1s ease-out;
- -moz-transition: all 1s ease-out;
- }
- #credit a:hover {
- background-color:#667371;
- color:#fff;
- border-color:#fff;
- -o-transition: all 1s ease-out;
- -webkit-transition: all 1s ease-out;
- -moz-transition: all 1s ease-out;
- }
- #credit {
- display:inline-block;
- font-size:10px;
- font-family: calibri;
- text-align:center;
- letter-spacing:1px;
- width:40px;
- height:15px;
- position: fixed;
- padding-top:1px;
- right:25px;
- bottom:10px;
- }
- </style>
- <body>
- <!--Title-->
- <div id="title">Navigation</div>
- <!--Links at Top-->
- <div id="links"><a href ="/">Home</a><a href ="/ask">Ask</a><a href="/aboutme">About</a><a href ="/submit">Submit</a></div>
- <!--Picture-->
- <div id="header"><img src="http://adastra.dept.ku.edu/wordpress/wp-content/uploads/2012/06/space4banner.png">
- <div id="description">
- "Show me the stars"
- </div>
- </div>
- <!--Display/tags/whatever you care to put here I guess-->
- <!--Category 1-->
- <div id="display">
- <div id="displaycontainer" style="float:left;">
- <div id="displaytitle">Category 1</div>
- <div id="displaylinks">
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- </div>
- </div>
- <!--Category 2-->
- <div id="display">
- <div id="displaycontainer" style="float:left;">
- <div id="displaytitle">Category 2</div>
- <div id="displaylinks">
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- </div>
- </div>
- <!--Category 3-->
- <div id="display">
- <div id="displaycontainer" style="float:left;">
- <div id="displaytitle">Category 3</div>
- <div id="displaylinks">
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- </div>
- </div>
- <!--Category 4-->
- <div id="display">
- <div id="displaycontainer" style="float:left;">
- <div id="displaytitle">Category 4</div>
- <div id="displaylinks">
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- </div>
- </div>
- <!--Category 5-->
- <div id="display">
- <div id="displaycontainer" style="float:left;">
- <div id="displaytitle">Category 5</div>
- <div id="displaylinks">
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- </div>
- </div>
- <!--Category 6-->
- <div id="display">
- <div id="displaycontainer" style="float:left;">
- <div id="displaytitle">Category 6</div>
- <div id="displaylinks">
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- <a href="/tagged/1">Tag</a>
- </div>
- </div>
- <!-------------------------------------------------------------------------------- I don't care if you edit, but please for the love of god do not -----
- -------------------- remove the credit on my stuff -------------------------
- --------------------------------------------------------------------------->
- <div id="credit">
- <div style="font-size:12; font-style:italic; text-align:center; padding-left:2px; padding-right:2px;"><a href="http://theleakycauldron.co.vu"> ---a---</a></div>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement