Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
- <link rel="icon" href="images/favicon.ico" sizes="16x16 32x32 48x48 150x150" type="image/vnd.microsoft.icon" />
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- <title>Homepage</title>
- <!--Here's a preview of what this is suppose to look like: http://mokocchi.com/dropdown -->
- <style type="text/css">
- html, body {
- /*background: url('images/bg/grid.png') fixed center;*/
- background-size: repeat;
- width: 98%; height: 95%;
- font-family: open sans semibold;
- font-size: 14px;
- background-color: #1d1e2a;
- color: #8a7b70;
- }
- a, a:link, a:visited {
- color: #556b82;
- text-decoration: none;
- transition: .2s ease-out;
- }
- a:hover, a:active {
- color: #8a7b70;
- }
- video {
- opacity: 0.9;
- /*width:900px;
- height:450px;*/
- width: 55%;
- height: 100%;
- margin-left: 430px;
- margin-top: -50px;
- border: 0;
- padding: 0px;
- box-shadow: 3px 3px 3px 2px rgba(0,0,0,0);
- /*filter: grayscale(80%);*/
- }
- img:hover {
- opacity: 0.9;
- }
- ul{
- padding: 0;
- list-style: none;
- background: #14151f;
- width: 420px;
- color: #8a7b70;
- box-shadow: 3px 3px 8px 4px rgba(0,0,0,0.2);
- display: inline-block;
- top: 50%;
- margin-left: 700px;
- margin-top: -70px;
- border: 0px solid #1a1b26;
- }
- ul li{
- display: inline-block;
- position: relative;
- text-align: center;
- color: #8a7b70;
- width: 80px;
- }
- ul li a{
- display: block;
- padding: 18px 45px;
- color: #556b82;
- text-decoration: none;
- text-align: center;
- width: 25px;
- }
- ul li a:hover{
- color: #74857c;
- background-color: #1a1b26;
- }
- ul li {
- border-bottom: 0px solid #556b82;
- }
- ul li ul.dropdown{
- min-width: 115px; /* Set width of the dropdown */
- background: #14151f;
- color: #8a7b70;
- display: none;
- z-index: 999;
- width: 40px;
- top: 54%;
- margin-left: -30px;
- margin-top: 150px;
- }
- ul li:hover ul.dropdown{
- display: block; /* Display the dropdown */
- position: fixed;
- }
- ul li ul.dropdown li{
- display: block;
- color: #181310;
- }
- </style>
- <video id="video">
- <source src="video.mp4" type="video/mp4" />
- <source src="video.ogg" type="video/ogg" />
- </video>
- <script>
- function getRandomInt(min, max) {
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
- var video = document.getElementById('video');
- var sources = video.getElementsByTagName('source');
- var videoUrlsMp4=["http://puu.sh/pXNok/b1c511e966.webm", "http://puu.sh/pXNqu/d9b35782cc.webm", "http://puu.sh/pXNrP/bb8ec388d3.webm", "http://puu.sh/pXNWG/7420e4beca.webm"];
- var videoUrlsOgg4=["URL1.ogg", "URL2.ogg", "URL3.ogg"];
- var random_nr = getRandomInt(0, videoUrlsMp4.length-1);
- sources[0].src = videoUrlsMp4[random_nr ];
- sources[1].src = videoUrlsOgg4[random_nr ];
- video.load();
- </script>
- <ul>
- <!--4chin-->
- <li>
- <p>🍀</p>
- <ul class="dropdown">
- <li><a href="http://boards.4chan.org/a/#catalog">/a/</a></li>
- <li><a href="http://boards.4chan.org/g/#catalog">/g/</a></li>
- <li><a href="http://boards.4chan.org/w/#catalog">/w/</a></li>
- <li><a href="http://boards.4chan.org/wg/#catalog">/wg/</a></li>
- </ul>
- </li>
- <!--weab-->
- <li>
- <p>💢</p>
- <ul class="dropdown">
- <li><a href="http://anichart.net/">Ani</a></li>
- <li><a href="https://bakabt.me/">Baka</a></li>
- <li><a href="http://myanimelist.net/">Mal</a></li>
- <li><a href="http://nyaa.se/">Nyaa</a></li>
- </ul>
- </li>
- <!--music-->
- <li>
- <p> 🎧</p>
- <ul class="dropdown">
- <li><a href="http://www.last.fm/">Last.fm</a></li>
- <li><a href="http://rutracker.org/forum/tracker.php">Rutr</a></li>
- <li><a href="http://newalbumreleases.net/">Nar</a></li>
- <li><a href="http://www.youtube-mp3.org/ ">YT</a></li>
- <li><a href="http://scdownloader.net/">SC</a></li>
- </ul>
- </li>
- <!--vidya-->
- <li>
- <p>🎮</p>
- <ul class="dropdown">
- <li><a href="http://ffxivclock.com/#/">XIVclock</a></li>
- <li><a href="https://secure.square-enix.com/account/app/svc/mogstation">Mog</a></li>
- <li><a href="http://www.xenoveritas.org/static/ffxiv/timer.html">XIVtimer</a></li>
- <li><a href="http://www.gog.com/">Gog</a></li>
- <li><a href="http://bundlestars.com/">Bundle</a></li>
- </ul>
- </li>
- <!--misc-->
- <li>
- <p>🌍</p>
- <ul class="dropdown">
- <li><a href="http://decagonal.deviantart.com/" class="link">DA</a></li>
- <li><a href="https://userstyles.org/users/268662">US</a></li>
- <li><a href="https://github.com/decagonal/">GitHub</a></li>
- <li><a href="http://www.ebay.com.au/" class="link">eBay</a></li>
- <li><a href="http://tumblr.com/">tmblr</a></li>
- </ul>
- </li>
- </ul>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement