Created
August 13, 2015 17:34
-
-
Save aolko/367380e7770d4639dc33 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>LockLegion v8 look and feel prototype v1</title> | |
| <link rel="stylesheet" href="assets/styles/styles.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="header-wrap"> | |
| <div class="header"> | |
| <!--<ul class="nav"> | |
| <li><a class="➐" href="http://thelocklegion.com">◀ V7</a></li> | |
| </ul>--> | |
| <div class="logo">LLNext</div> | |
| <!--<marquee behavior="scroll" direction="right" width="300" scrolldelay="50" class="ticker">This style is parametric.</marquee>--> | |
| <ul class="nav"> | |
| <li><a href="#">Animations</a></li> | |
| <li><a href="#">Locks</a></li> | |
| <li><a href="#">Forums</a></li> | |
| <li><a href="#">Storage</a></li> | |
| <li><a href="#">Resources</a></li> | |
| <li><a href="#">Draw</a></li> | |
| </ul> | |
| <ul class="nav right"> | |
| <li><a href="#">Explosive</a></li> | |
| <li><a class="orange" href="#">✉ 5</a></li> | |
| <li><a href="#">logout</a></li> | |
| </ul> | |
| <!--<ul class="nav-mobile"> | |
| <li><a href="#">Animations</a></li> | |
| <li><a href="#">Locks</a></li> | |
| <li><a href="#">Forums</a></li> | |
| <li><a href="#">Storage</a></li> | |
| <li><a href="#">Resources</a></li> | |
| <li><a href="#">Draw</a></li> | |
| </ul>--> | |
| </div> | |
| <div class="subheader"> | |
| <ul class="nav"> | |
| <li><a href="#">Ticker</a></li> | |
| <li><a href="#">Awards</a></li> | |
| <li><a class="green" href="#">45LP</a></li> | |
| </ul> | |
| <ul class="nav right"> | |
| <li><a href="#"><span id="hidesub" title="What's hidden can't be shown">▴</span></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="body"> | |
| <div class="block featured"> | |
| <div class="heading"> | |
| Featured flash | |
| </div> | |
| <div class="content"> | |
| No flashes yet.<br> | |
| <span id="⋈" title="it is a mystery">👻</span> | |
| </div> | |
| </div> | |
| <div class="block news"> | |
| <div class="heading"> | |
| Nüz | |
| </div> | |
| <div class="content"> | |
| text <span id="☭">what</span> <span id="∗wrap"><span id="⚒">are</span> <span id="✋">you</span> <span id="⌛">doing? Please st</span> <span id="⋄">oo͏̧̺̫͎̰̩͡o̶̬͍̠̭̣o̱͎̻̹̭̠̰͔̭͟͟o̶͙̜̦̲̖̗͍͜o҉҉̼͚͕͡o̷̴͇̺̜͜╩┬┕┍╇┃╗▓╄┽╲╚┯▓┍┚╹╀╿┩╘╖┝┙┶┾╏╌╖┃═┲┙┼╲┋▉╧┶┸▉</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--Base scripts--> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="assets/js/modernizr-2.8.3.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> | |
| <!--More scripts--> | |
| <script> | |
| $( "#hidesub" ).click(function() { | |
| if ( $( "div.subheader" ).is( ":hidden" ) ) { | |
| $("div.subheader").slideDown( "fast" ).css("display","flex"); | |
| } else { | |
| $( "div.subheader" ).slideUp( "fast" ); | |
| } | |
| }); | |
| //non obfuscated | |
| $("#☭").click(function(){ | |
| alert("Do you believe in the brighter future?") | |
| }); | |
| $("#⚒").click(function(){ | |
| alert("Sharks aren't balls") | |
| }); | |
| $("#✋").click(function(){ | |
| alert("W͞elçom̸e t̕o̢ ͟my̵ mee̸t͞i̵nģ,͜ ͠r͜ec͘yc҉led ca̴mèǫs̷") | |
| }); | |
| $("#⌛").click(function(){ | |
| alert("Y̴͈̒̐̓̈́͋̌͌o̢̳̠̲ũ̳̯̬̪̖̯͑ ̽͌ͭͩ̔̂̈́̀ņ͕̙̤͎̝ͩͭ̓̃̊̂e̎̓̇ͣ͂ͮ͜ë́̕d͌̅͏̞͔ͅ ͈̙͖̤̌ͥͪ̇ͨ̌͗t̢̒̔̓̓ͪ̒ͨo̮͔̻͍ͥ̄̓̊ͯ̌̍ͅ ̻̲͈ͪͤ̉̈͊u̱̖͎̯͂͑͛̊̈n̦̲̩͔̤ͥͦl͗̐̎̈̾҉̺̞͖͓ọ̹͖͇̱͉̎̃͑̔̇c̠̙̼̺̫̖̍̄ͦͅk̲̲̬") | |
| }); | |
| $("#⋄").click(function(){ | |
| alert("T͎̳͔̦̓̉̐ͭ̔̈ͩͮ̋̎̈̃̉̄͒̔͜͝h̡̛̛͖̲͚̝̝ͩ̅̐̎̿̀̂̒͂ͭ̐ͯ͊ͥͮ͟e̝̘͇͉̖̩͇͉͂̾͋̉ͭ̅ͤ̓͂̅͌ͨ̍̒̀͜ ̴̨̤̪͈̼̪̐ͤͥ̇̈ͧͯ̀͌̅́̇ͣ̚̕͡n̨͈̺̫̫̫̩͆͊͛ͤͬ̅̍͛̉͂̇ͥ͢ͅę̴̢̹̟̭̤̲͓͓̯͎̙̝̞̘̮̬ͪ̈́͒̓̒͐̆̓͆̄̓̈́͐̔͌̈́̓͊͒̀͠ͅͅw̧̛͙̙̤̳̘̤̝͍̰͕͙͙͍̬̱̪̠̻̗ͬͦͭ͛̓ͦ̍ͥ͟͢͞ ̵̘̹̦̤̲̯̞̠̳̞̰͕̹͈̘̪ͦ̽̔̈́̾͛̇̋̂ͤͪ̈́̈̉ͧ̈̀͜͞ͅͅw̛̪̪̪̼̞̭̤̺ͯ̇ͫ̾ͣͧ̐̓͊ͬͩ̽̉̀̚͘͡a̷̠̞̜̙̝̟̙͙̤̺̜̹͙̝̗̬̍̉̿̔̓̌ͮ̏͋ͫy̴͈͚̬̖̭̯͇̲͈͕͆̋̓̍͋͂̐̊̈͟͠ͅ") | |
| }); | |
| $("#⋈").click(function(){ | |
| location.href = "https://www.youtube-nocookie.com/embed/YQpLNCRIxWA?rel=0&controls=0&showinfo=0&autoplay=1"; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.2.5) | |
| // ---- | |
| //Imports | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,cyrillic); | |
| @import "normalize.css"; | |
| //Variables & Mixins | |
| @function set-text-color($bgcolor) { | |
| @if (lightness( $bgcolor ) > 50) { | |
| @return #000000; // Lighter color, return black | |
| } | |
| @else { | |
| @return #FFFFFF; // Darker color, return white | |
| } | |
| } | |
| @mixin notify-color($color){ | |
| color:set-text-color($color); | |
| background-color: $color; | |
| &:hover{ | |
| background-color: lighten($color,5%); | |
| } | |
| } | |
| //Colors & Fonts | |
| $black: black; | |
| $white: white; | |
| $base-color: #373241; //dark theme | |
| //$base-color: #9b5b00; //orange theme | |
| //--- | |
| @if (lightness($base-color) > 50){ | |
| $bg-header: darken($base-color,5%); | |
| $bg-nav: darken($bg-header,10%); | |
| $bg-nav-hover: darken($bg-nav,1%); | |
| $bg-subnav: darken($bg-header,5%); | |
| $bg-subnav-hover: darken($bg-subnav,5%); | |
| $bg-ticker: darken($base-color,10%); | |
| $bg-body: lighten($base-color,10%); | |
| $bg-block-heading: darken($bg-body,10%); | |
| $bg-block-body: darken($bg-block-heading,5%); | |
| } | |
| @else{ | |
| $bg-header: lighten($base-color,5%); | |
| $bg-nav: lighten($bg-header,10%); | |
| $bg-nav-hover: lighten($bg-nav,1%); | |
| $bg-subnav: lighten($bg-header,5%); | |
| $bg-subnav-hover: lighten($bg-subnav,5%); | |
| $bg-ticker: lighten($base-color,10%); | |
| $bg-body: darken($base-color,10%); | |
| $bg-block-heading: lighten($bg-body,10%); | |
| $bg-block-body: lighten($bg-block-heading,5%); | |
| } | |
| $header-height: 50px; | |
| $subheader-height: 30px; | |
| //Styles | |
| * { | |
| margin:0; | |
| padding:0; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| background-color: $bg-body; | |
| } | |
| //forming some styles | |
| .header-wrap{ | |
| -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| } | |
| //very recycled header styles | |
| /*.header{ | |
| display:table; | |
| width:100%; | |
| //lol123 | |
| height:50px; | |
| color: $white; | |
| background-color: $bg-header; | |
| //lol | |
| .logo{ | |
| vertical-align: middle; | |
| display: table-cell; | |
| padding: 0 5px; | |
| color:set-text-color($bg-header); | |
| } | |
| .ticker{ | |
| height:50px; | |
| vertical-align: middle; | |
| display: table-cell; | |
| width:300px; | |
| //margin:0 5px; | |
| padding: 0 5px; | |
| background-color: $bg-ticker; | |
| color:set-text-color($bg-ticker); | |
| } | |
| .nav{ | |
| height:50px; | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| vertical-align: middle; | |
| display: table; | |
| //background-color: lighten($black,30%); | |
| li{ | |
| //margin-right:5px; | |
| //display:table; | |
| a{ | |
| vertical-align: middle; | |
| display: table-cell; | |
| height: 50px; | |
| padding:0 5px; | |
| color:gold; | |
| text-decoration: none; | |
| &.red{ | |
| @include notify-color(red); | |
| } | |
| &.green{ | |
| @include notify-color(green); | |
| } | |
| &.orange{ | |
| @include notify-color(orange); | |
| //lol | |
| } | |
| &.gray{ | |
| @include notify-color(#3c3c3c); | |
| } | |
| &.➐{ | |
| @include notify-color(#141216); | |
| } | |
| //lol | |
| //powpow | |
| &:hover{ | |
| //text-decoration: underline; | |
| background-color: $bg-nav-hover; | |
| } | |
| } | |
| } | |
| &.right{ | |
| //float:right; | |
| margin-left: auto; //for flexbox | |
| list-style-type: none; | |
| padding: 0; | |
| display: inline-flex; | |
| li{ | |
| //margin-right:5px; | |
| a{ | |
| //color:white; | |
| //text-decoration: none; | |
| &:hover{ | |
| //text-decoration: underline; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .nav-mobile{ | |
| display: none; | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| height:50px; | |
| li{ | |
| } | |
| a{ | |
| display:block; | |
| width:100%; | |
| } | |
| } | |
| }*/ | |
| .header{ | |
| height:$header-height; | |
| color: $white; | |
| background-color: $bg-header; | |
| .logo{ | |
| //1st approach | |
| line-height:$header-height; | |
| float:left; | |
| padding: 0 5px; | |
| color:set-text-color($bg-header); | |
| } | |
| ul.nav{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| display: inline-block; | |
| li{ | |
| //float: left; | |
| display: inline-block; | |
| a{ | |
| display: inline-block; | |
| line-height:$header-height; | |
| height: $header-height; | |
| padding:0 5px; | |
| color:gold; | |
| text-decoration: none; | |
| &:hover{ | |
| //text-decoration: underline; | |
| background-color: $bg-nav-hover; | |
| } | |
| } | |
| } | |
| &.right{ | |
| display: inline-block; | |
| float:right; | |
| li{ | |
| display: inline-block; | |
| a{ | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //lol | |
| .subheader{ | |
| //height:30px; | |
| background-color: $bg-subnav; | |
| ul.nav{ | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| display: inline-block; | |
| li{ | |
| //float: left; | |
| display: inline-block; | |
| a{ | |
| display: inline-block; | |
| line-height:$subheader-height; | |
| height: $subheader-height; | |
| padding:0 5px; | |
| color:gold; | |
| text-decoration: none; | |
| &:hover{ | |
| //text-decoration: underline; | |
| background-color: $bg-nav-hover; | |
| } | |
| } | |
| } | |
| &.right{ | |
| display: inline-block; | |
| float:right; | |
| width: auto; | |
| li{ | |
| //float:right; | |
| display: inline-block; | |
| a{ | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .body{ | |
| width: 60%; | |
| margin: 0 auto; | |
| .block{ | |
| -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| //padding:5px; | |
| margin:10px; | |
| .heading{ | |
| display:flex; | |
| align-items: center; | |
| height:30px; | |
| padding:0 5px; | |
| color:set-text-color($bg-block-heading); | |
| background-color: $bg-block-heading; | |
| } | |
| .content{ | |
| padding:5px; | |
| color:set-text-color($bg-block-body); | |
| background-color: $bg-block-body; | |
| word-wrap: break-word; | |
| } | |
| &.featured{ | |
| } | |
| &.news{ | |
| } | |
| } | |
| } | |
| .notify{ | |
| display: inline; | |
| padding:3px 3px; | |
| margin:0 2px; | |
| &.red{ | |
| @include notify-color(red); | |
| } | |
| &.green{ | |
| @include notify-color(green); | |
| } | |
| &.orange{ | |
| @include notify-color(orange); | |
| //lol | |
| } | |
| } | |
| //mobile friendliness | |
| /* Small screens */ | |
| @media all and (max-width: 700px){ | |
| .wrap{ | |
| //overflow-x: hidden; | |
| } | |
| .header{ | |
| .nav{ | |
| overflow: hidden; | |
| //display: none; | |
| width:100%; | |
| li,a{ | |
| width:100%; | |
| } | |
| }; | |
| .ticker{ | |
| display: none; | |
| }; | |
| }; | |
| .header,.subheader>*{ | |
| overflow: hidden; | |
| } | |
| .body{ | |
| width:100%; | |
| } | |
| } | |
| @media all and (max-width: 500px) { | |
| .wrap{ | |
| display: flex; | |
| flex-direction: column; | |
| //overflow-x: hidden; | |
| }; | |
| .wrap > *{ | |
| order: 99999; | |
| }; | |
| .header>*{ | |
| width:100%; | |
| } | |
| .header{ | |
| .nav{ | |
| overflow: hidden; | |
| //display: none; | |
| width:100%; | |
| li,a{ | |
| width:100%; | |
| } | |
| }; | |
| .ticker{ | |
| display: none; | |
| }; | |
| }; | |
| .body{ | |
| width:100%; | |
| } | |
| } | |
| //34423 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "UTF-8"; | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,cyrillic); | |
| @import url(normalize.css); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| background-color: #1f1c24; | |
| } | |
| .header-wrap { | |
| -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| } | |
| /*.header{ | |
| display:table; | |
| width:100%; | |
| //lol123 | |
| height:50px; | |
| color: $white; | |
| background-color: $bg-header; | |
| //lol | |
| .logo{ | |
| vertical-align: middle; | |
| display: table-cell; | |
| padding: 0 5px; | |
| color:set-text-color($bg-header); | |
| } | |
| .ticker{ | |
| height:50px; | |
| vertical-align: middle; | |
| display: table-cell; | |
| width:300px; | |
| //margin:0 5px; | |
| padding: 0 5px; | |
| background-color: $bg-ticker; | |
| color:set-text-color($bg-ticker); | |
| } | |
| .nav{ | |
| height:50px; | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| vertical-align: middle; | |
| display: table; | |
| //background-color: lighten($black,30%); | |
| li{ | |
| //margin-right:5px; | |
| //display:table; | |
| a{ | |
| vertical-align: middle; | |
| display: table-cell; | |
| height: 50px; | |
| padding:0 5px; | |
| color:gold; | |
| text-decoration: none; | |
| &.red{ | |
| @include notify-color(red); | |
| } | |
| &.green{ | |
| @include notify-color(green); | |
| } | |
| &.orange{ | |
| @include notify-color(orange); | |
| //lol | |
| } | |
| &.gray{ | |
| @include notify-color(#3c3c3c); | |
| } | |
| &.➐{ | |
| @include notify-color(#141216); | |
| } | |
| //lol | |
| //powpow | |
| &:hover{ | |
| //text-decoration: underline; | |
| background-color: $bg-nav-hover; | |
| } | |
| } | |
| } | |
| &.right{ | |
| //float:right; | |
| margin-left: auto; //for flexbox | |
| list-style-type: none; | |
| padding: 0; | |
| display: inline-flex; | |
| li{ | |
| //margin-right:5px; | |
| a{ | |
| //color:white; | |
| //text-decoration: none; | |
| &:hover{ | |
| //text-decoration: underline; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .nav-mobile{ | |
| display: none; | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| height:50px; | |
| li{ | |
| } | |
| a{ | |
| display:block; | |
| width:100%; | |
| } | |
| } | |
| }*/ | |
| .header { | |
| height: 50px; | |
| color: white; | |
| background-color: #433d4f; | |
| } | |
| .header .logo { | |
| line-height: 50px; | |
| float: left; | |
| padding: 0 5px; | |
| color: #FFFFFF; | |
| } | |
| .header ul.nav { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| display: inline-block; | |
| } | |
| .header ul.nav li { | |
| display: inline-block; | |
| } | |
| .header ul.nav li a { | |
| display: inline-block; | |
| line-height: 50px; | |
| height: 50px; | |
| padding: 0 5px; | |
| color: gold; | |
| text-decoration: none; | |
| } | |
| .header ul.nav li a:hover { | |
| background-color: #5e556f; | |
| } | |
| .header ul.nav.right { | |
| display: inline-block; | |
| float: right; | |
| } | |
| .header ul.nav.right li { | |
| display: inline-block; | |
| } | |
| .subheader { | |
| background-color: #4f485e; | |
| } | |
| .subheader ul.nav { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| display: inline-block; | |
| } | |
| .subheader ul.nav li { | |
| display: inline-block; | |
| } | |
| .subheader ul.nav li a { | |
| display: inline-block; | |
| line-height: 30px; | |
| height: 30px; | |
| padding: 0 5px; | |
| color: gold; | |
| text-decoration: none; | |
| } | |
| .subheader ul.nav li a:hover { | |
| background-color: #5e556f; | |
| } | |
| .subheader ul.nav.right { | |
| display: inline-block; | |
| float: right; | |
| width: auto; | |
| } | |
| .subheader ul.nav.right li { | |
| display: inline-block; | |
| } | |
| .body { | |
| width: 60%; | |
| margin: 0 auto; | |
| } | |
| .body .block { | |
| -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); | |
| margin: 10px; | |
| } | |
| .body .block .heading { | |
| display: flex; | |
| align-items: center; | |
| height: 30px; | |
| padding: 0 5px; | |
| color: #FFFFFF; | |
| background-color: #373241; | |
| } | |
| .body .block .content { | |
| padding: 5px; | |
| color: #FFFFFF; | |
| background-color: #433d4f; | |
| word-wrap: break-word; | |
| } | |
| .notify { | |
| display: inline; | |
| padding: 3px 3px; | |
| margin: 0 2px; | |
| } | |
| .notify.red { | |
| color: #000000; | |
| background-color: red; | |
| } | |
| .notify.red:hover { | |
| background-color: #ff1a1a; | |
| } | |
| .notify.green { | |
| color: #FFFFFF; | |
| background-color: green; | |
| } | |
| .notify.green:hover { | |
| background-color: #009a00; | |
| } | |
| .notify.orange { | |
| color: #000000; | |
| background-color: orange; | |
| } | |
| .notify.orange:hover { | |
| background-color: #ffae1a; | |
| } | |
| /* Small screens */ | |
| @media all and (max-width: 700px) { | |
| .header .nav { | |
| overflow: hidden; | |
| width: 100%; | |
| } | |
| .header .nav li, .header .nav a { | |
| width: 100%; | |
| } | |
| .header .ticker { | |
| display: none; | |
| } | |
| .header, .subheader > * { | |
| overflow: hidden; | |
| } | |
| .body { | |
| width: 100%; | |
| } | |
| } | |
| @media all and (max-width: 500px) { | |
| .wrap { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .wrap > * { | |
| order: 99999; | |
| } | |
| .header > * { | |
| width: 100%; | |
| } | |
| .header .nav { | |
| overflow: hidden; | |
| width: 100%; | |
| } | |
| .header .nav li, .header .nav a { | |
| width: 100%; | |
| } | |
| .header .ticker { | |
| display: none; | |
| } | |
| .body { | |
| width: 100%; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>LockLegion v8 look and feel prototype v1</title> | |
| <link rel="stylesheet" href="assets/styles/styles.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="header-wrap"> | |
| <div class="header"> | |
| <!--<ul class="nav"> | |
| <li><a class="➐" href="http://thelocklegion.com">◀ V7</a></li> | |
| </ul>--> | |
| <div class="logo">LLNext</div> | |
| <!--<marquee behavior="scroll" direction="right" width="300" scrolldelay="50" class="ticker">This style is parametric.</marquee>--> | |
| <ul class="nav"> | |
| <li><a href="#">Animations</a></li> | |
| <li><a href="#">Locks</a></li> | |
| <li><a href="#">Forums</a></li> | |
| <li><a href="#">Storage</a></li> | |
| <li><a href="#">Resources</a></li> | |
| <li><a href="#">Draw</a></li> | |
| </ul> | |
| <ul class="nav right"> | |
| <li><a href="#">Explosive</a></li> | |
| <li><a class="orange" href="#">✉ 5</a></li> | |
| <li><a href="#">logout</a></li> | |
| </ul> | |
| <!--<ul class="nav-mobile"> | |
| <li><a href="#">Animations</a></li> | |
| <li><a href="#">Locks</a></li> | |
| <li><a href="#">Forums</a></li> | |
| <li><a href="#">Storage</a></li> | |
| <li><a href="#">Resources</a></li> | |
| <li><a href="#">Draw</a></li> | |
| </ul>--> | |
| </div> | |
| <div class="subheader"> | |
| <ul class="nav"> | |
| <li><a href="#">Ticker</a></li> | |
| <li><a href="#">Awards</a></li> | |
| <li><a class="green" href="#">45LP</a></li> | |
| </ul> | |
| <ul class="nav right"> | |
| <li><a href="#"><span id="hidesub" title="What's hidden can't be shown">▴</span></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="body"> | |
| <div class="block featured"> | |
| <div class="heading"> | |
| Featured flash | |
| </div> | |
| <div class="content"> | |
| No flashes yet.<br> | |
| <span id="⋈" title="it is a mystery">👻</span> | |
| </div> | |
| </div> | |
| <div class="block news"> | |
| <div class="heading"> | |
| Nüz | |
| </div> | |
| <div class="content"> | |
| text <span id="☭">what</span> <span id="∗wrap"><span id="⚒">are</span> <span id="✋">you</span> <span id="⌛">doing? Please st</span> <span id="⋄">oo͏̧̺̫͎̰̩͡o̶̬͍̠̭̣o̱͎̻̹̭̠̰͔̭͟͟o̶͙̜̦̲̖̗͍͜o҉҉̼͚͕͡o̷̴͇̺̜͜╩┬┕┍╇┃╗▓╄┽╲╚┯▓┍┚╹╀╿┩╘╖┝┙┶┾╏╌╖┃═┲┙┼╲┋▉╧┶┸▉</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--Base scripts--> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
| <script src="assets/js/modernizr-2.8.3.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> | |
| <!--More scripts--> | |
| <script> | |
| $( "#hidesub" ).click(function() { | |
| if ( $( "div.subheader" ).is( ":hidden" ) ) { | |
| $("div.subheader").slideDown( "fast" ).css("display","flex"); | |
| } else { | |
| $( "div.subheader" ).slideUp( "fast" ); | |
| } | |
| }); | |
| //non obfuscated | |
| $("#☭").click(function(){ | |
| alert("Do you believe in the brighter future?") | |
| }); | |
| $("#⚒").click(function(){ | |
| alert("Sharks aren't balls") | |
| }); | |
| $("#✋").click(function(){ | |
| alert("W͞elçom̸e t̕o̢ ͟my̵ mee̸t͞i̵nģ,͜ ͠r͜ec͘yc҉led ca̴mèǫs̷") | |
| }); | |
| $("#⌛").click(function(){ | |
| alert("Y̴͈̒̐̓̈́͋̌͌o̢̳̠̲ũ̳̯̬̪̖̯͑ ̽͌ͭͩ̔̂̈́̀ņ͕̙̤͎̝ͩͭ̓̃̊̂e̎̓̇ͣ͂ͮ͜ë́̕d͌̅͏̞͔ͅ ͈̙͖̤̌ͥͪ̇ͨ̌͗t̢̒̔̓̓ͪ̒ͨo̮͔̻͍ͥ̄̓̊ͯ̌̍ͅ ̻̲͈ͪͤ̉̈͊u̱̖͎̯͂͑͛̊̈n̦̲̩͔̤ͥͦl͗̐̎̈̾҉̺̞͖͓ọ̹͖͇̱͉̎̃͑̔̇c̠̙̼̺̫̖̍̄ͦͅk̲̲̬") | |
| }); | |
| $("#⋄").click(function(){ | |
| alert("T͎̳͔̦̓̉̐ͭ̔̈ͩͮ̋̎̈̃̉̄͒̔͜͝h̡̛̛͖̲͚̝̝ͩ̅̐̎̿̀̂̒͂ͭ̐ͯ͊ͥͮ͟e̝̘͇͉̖̩͇͉͂̾͋̉ͭ̅ͤ̓͂̅͌ͨ̍̒̀͜ ̴̨̤̪͈̼̪̐ͤͥ̇̈ͧͯ̀͌̅́̇ͣ̚̕͡n̨͈̺̫̫̫̩͆͊͛ͤͬ̅̍͛̉͂̇ͥ͢ͅę̴̢̹̟̭̤̲͓͓̯͎̙̝̞̘̮̬ͪ̈́͒̓̒͐̆̓͆̄̓̈́͐̔͌̈́̓͊͒̀͠ͅͅw̧̛͙̙̤̳̘̤̝͍̰͕͙͙͍̬̱̪̠̻̗ͬͦͭ͛̓ͦ̍ͥ͟͢͞ ̵̘̹̦̤̲̯̞̠̳̞̰͕̹͈̘̪ͦ̽̔̈́̾͛̇̋̂ͤͪ̈́̈̉ͧ̈̀͜͞ͅͅw̛̪̪̪̼̞̭̤̺ͯ̇ͫ̾ͣͧ̐̓͊ͬͩ̽̉̀̚͘͡a̷̠̞̜̙̝̟̙͙̤̺̜̹͙̝̗̬̍̉̿̔̓̌ͮ̏͋ͫy̴͈͚̬̖̭̯͇̲͈͕͆̋̓̍͋͂̐̊̈͟͠ͅ") | |
| }); | |
| $("#⋈").click(function(){ | |
| location.href = "https://www.youtube-nocookie.com/embed/YQpLNCRIxWA?rel=0&controls=0&showinfo=0&autoplay=1"; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment