A weird website

Question

So I recently stumbled upon a very strange website:

There doesn't seem to be anything except a normal navigation-bar (which isn't working) and a cipher. Can you decrypt it? Maybe the plaintext will tell us how to log in (i.e. username, password)! I have this odd feeling that all other necessary information is hidden in the source code somewhere...

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <div id="nav-bar">
                <ul>
                    <li><a href="#" class="selected">Home</a></li>
                    <li><a href="#">Sandbox</a></li>
                    <li><a href="#">Modelling</a></li>
                </ul>
            </div>
            <div id="login-bar">
                <a id="login-button" href="#">Log in</a>
            </div>
        </nav>
        <section>
            <div id="page">
                <!-- 32-126 -->
                <span id="simple-cipher">qvqwkvnvuz$+{gppfrwwxv"n"kup""gp"g"jckc|""!!foueVbopig!sif"pucsvo#rwpv#qsl##o!ggfgp1wd#rnouxqh#oijft"k{llvwuww#jxuurffc"#gswkd|(((q||wwrwhm""rf#rq((ii"i!{hz#ienIqslkxivpm{{lmwzwpi"qx!viqlp(*wkmq1o#!qq[gqduvtm{vm(m(zph/kgwu{vzr(m((*wn}u|dX"vqnuhlpv(m( m(zhlrhqhqcv##sm|mlzt(wr##!pz"fg#0udzhxgumqG#lo""jgmpwlzpkk+#o#|xw!frl"!Mf###|{#hrfrlq!nqdjvtqsjp/#n!!!(g!betcugrjvkkggxkny."wyxwg"ugeqvgprt"gdyqnup|</span>
            </div>
        </section>
    </body>
</html>

CSS:

html {
    height: 100%;
}

body {
    height: 100%;
    background: gray;
    background: -webkit-linear-gradient(gray, silver);
    background: -moz-linear-gradient(gray, silver);
    background: -o-linear-gradient(gray, silver);
    background: linear-gradient(gray, silver);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    margin: 0;
    font-family: Arial, Sans-Serif;
}

nav {
    margin: 0 0 10px 0;
    padding: 10px;
    font-size: 24px;
    background: #202020;
    background: -webkit-linear-gradient(#202020, #050505);
    background: -moz-linear-gradient(#202020, #050505);
    background: -o-linear-gradient(#202020, #050505);
    background: linear-gradient(#202020, #050505);
    -webkit-box-shadow: 0px 5px 10px #202020;
    -moz-box-shadow: 0px 5px 10px #202020;
    box-shadow: 0px 5px 10px black;
}

#nav-bar {
    display: inline-block;
    text-align: left;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    display: inline-block;
    margin: 0 5px;
}

a {
    color: white;
    text-decoration: none;
}

li a {
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -o-transition: color 0.5s;
    transition: color 0.5s;
}

li a:hover {
    color: #aaaaaa;
}

li a.selected {
    border-bottom: 2px solid #aaaaaa;
}

#login-bar {
    float: right;
}

#login-button {
    font-size: 18px;
    border: 2px solid white;
    padding: 5px;
    border-radius: 5px;
    -webkit-transition: color 0.5s, border-color 0.5s;
    -moz-transition: color 0.5s, border-color 0.5s;
    -o-transition: color 0.5s, border-color 0.5s;
    transition: color 0.5s, border-color 0.5s;
}

#login-button:hover {
    color: #aaaaaa;
    border-color: #aaaaaa;
}

section {
    text-align: center;
}

#page {
    display: inline-block;
    width: 250px;
    background-color: white;
    color: black;
    padding: 5px;
    margin: 5px;
    font-family: "Lucida Console", monospace;
    text-align: left;
    -webkit-box-shadow: 5px 5px 10px #424242;
    -moz-box-shadow: 5px 5px 10px #424242;
    box-shadow: 5px 5px 5px #424242;
    border-radius: 5px;
    word-wrap: break-word;
}

#simple-cipher {
    width: 8;
    height: 8;
    padding: 3;
    border-width: 1;
    margin: 2;

    transform: none;
    position: static;
    /* *2 */
}

And here's a fiddle (no JavaScript included) of the website. Just because.

I added the computer-puzzle tag because basic knowledge of HTML5 and CSS3 is required. And yes, the fact that this is a website isn't just a gimmick, it's an important clue.

Hint #1

There are two stages of decryption, so don't give up if the inital decrypted ciphertext yields nonsense. However, you should give up with the method you used if the "nonsense"-text doesn't roughly match the letter frequency in standard English...

Hint #2

Look at the options in the navigation bar and keep in mind what this website was made with. There's a major clue hidden there (but also a small red herring).

Hint #3

Alconja correctly noted that the CSS box model is a part of the cipher. This image, which was posted by Wesley Situ also visually presents this. Now keep in mind that I named the cipher simple-cipher... Perform the most basic decryption method you can think of (though you still have to figure out the right key(s)) and check if you got it right with the technique I mentioned in Hint #1. *2 corresponds to the second decryption method.

Alconja · Accepted Answer · 2016-10-13T05:03:20.987

Updated, and now complete, answer...

Given the .simple-cipher styles and the fact that we have 400 characters of cipher text, we can assume we're dealing with a character based box model, which splits the cipher text into various regions (thanks to @WesleySitu for the image):

box cipher

Visually, you can see that each region contains a proportionally larger number of different "noise" characters. " for the margin, ! for the border, # for the padding and ( for the content. If we use a caesar shift (across the entire ascii range, not just A-Z), such that those special characters become spaces, we have the following shifts: margin = -2, border = -1, padding = -3, and content = -8. Given that these match up with the css values for each region, it seems likely that this is the correct shift. So, now we're working with the following block of cipher text:

otouitltsx")yenndpuu
vt l isn  en e haiaz
    entdUanohf rhe n
sarsl otms npi  l ee
deo.ta oklrune lfidr
 iziistrtt gurrocea 
!erthat   ittototgk 
 pe on  aa a sew hcl
Gorihuanhessdetwtog 
ov sfndh "ocei.l  oo
Yeparslesne e wme.ie
uszswo e  "ofuryaW t
olteimn e  e reiogof
oau  petedrl oo   nx
 df -raweudrjnD in  
helmtiwmhh( l yut dp
j  Jc   yx eocoin lo
bhusprio."m   'f acr
asephtiieevilw, uwvu
e secotenpr ebwolsnz

Given the roughly normal english distribution of letters, and the fact that we have neatly paired characters like ( + ) and 4x ", makes it look very much like a transposition cipher of some sort from here. This is further corroborated by the last bits of simple-cipher CSS: transform:none; (trans) and position:static; (position).

Not sure if there's a specifically clued way of working out the transposition used (something to do with the *2?), but we can observe that the open and close braces, as well as the quotes exist in the same or subsequent columns. Assuming the transposition isn't overly complex, this makes it seem as though we're dealing with transposed rows of text, such that we read vertically, down columns. From here, we can assume the text will start with one of the capital letters (G or Y), and it quickly produces something readable:

Gorihuanhessdetwtog 
olteimn e #e reiogof
ov sfndh "ocei.l  oo
deo.ta oklrune lfidr
 df -raweudrjnD in  
j  Jc   yx eocoin lo
otouitltsx")yenndpuu
bhusprio."m   'f acr
!erthat   ittototgk 
    entdUanohf rhe n
Yeparslesne e wme.ie
oau  petedrl oo   nx
uszswo e  "ofuryaW t
 iziistrtt gurrocea 
helmtiwmhh( l yut dp
asephtiieevilw, uwvu
vt l isn  en e haiaz
e secotenpr ebwolsnz
 pe on  aa#a#sew hcl
sarsl otms npi  l ee

^{(Note that I've marked 3 characters with #, which seem to have not survived the earlier caesar shift - not sure if that's an error on my part, or in the puzzle text)}

Or in a more readable form:

Good job! You have solved the easiest part of our puzzle series. Just a simple shift-cipher with columnar transposition and a little twist on how to determine the keys. Use the name "luxx" and the password "miner" (very secure) to log in and enjoy the full experience of our website. Don't worry we will inform you how to find the actual log in page. We wish good luck in advance for our next puzzle

You're partially on the right track with the box model, but all letters in the ciphertext are to be decrypted; Every declaration inside .simple-cipher is important. — , Oct 06 '16 at 14:34
I'm not too good with identifying ciphers, but something of note for each of the sections is that there's a high frequency of specific characters in each. — Wesley Situ, Oct 06 '16 at 18:06
The options in the navigation bar would be Sand(box Model)ling. — Wesley Situ, Oct 11 '16 at 00:43
@WesleySitu - ahh, of course, so we're just left with the 3 unused CSS lines. — Alconja, Oct 11 '16 at 00:48
@WesleySitu Though, I suspect, transform:none + position:static is just meant to hint towards "transposition"... — Alconja, Oct 11 '16 at 00:49
@Alconja That seems like a good direction. The specific values of those properties don't actually change how the div looks (if you comment those lines out). I think those are the default values of those properties. — Wesley Situ, Oct 11 '16 at 00:50
Perhaps those three lines signify that two separate transposition operations are to be done. (Of course the composition of two transpositions is still a transposition, but perhaps the two are nice simple ones.) — Gareth McCaughan, Oct 13 '16 at 00:32
@LukasRotter - updated (though I didn't actually use *2, so I'm not sure what exactly that's hinting at)... — Alconja, Oct 13 '16 at 05:04
@Alconja I think you didn't continue at ~ (ASCII 126) with the letters marked #: As indicated by <!-- 32-126 ->, an encrypted " would result in the plaintext y if the shift is 8, because " -> !,SPACE,~,},|,{,z,y. I might make a wrap-up post soon anyway where you can see the exact algorithm I used. Regarding the *2: Take the values from transform and position, none & static and then repeat them two times, i.e. nonestaticnonestatic - This is the key for the transposition with dupes numbered forwards. (9 13 10 5 15 17 1 18 7 3 11 14 12 6 16 19 2 20 8 4) — , Oct 13 '16 at 07:28
@LukasRotter - failed wrapping explains the #s (feeling stupid for not twigging), though I don't think I would've ever got the transposition key. — Alconja, Oct 13 '16 at 08:19

mr23ceec · Answer 2 · 2016-10-04T15:12:51.130

Partial answer

So,

 suggests Printable ASCII

and

/* *2 */ suggests you should double it.

and then there's this part: simple-cipher { width: 8; height: 8; padding: 3; border-width: 1; margin: 2; transform: none; position: static; /* *2 */ }

that's not valid CSS. I mean the numbers. It should be 8px, 8em or 8%.

however nothing I try helps. "IKILEKG..." was the closest to pronounceable I got...

Here are some of the tings I tried: double and mod 128:

blbnVl\ljtHVvN``LdnnplD\DVjDDNDNDTFVFxDDBBL^jJ,D^RNBfRLDjFfl^FdnlFbfXFF^BNNLNbnHFd\^jpbPF^RTLhDVvXXlnjnnFTpjjdLLFDFNfnVHxPPPbxxnndnPZDDdLFdbPPRRDRBvPtFRJ\bfXVpRlZvvXZntnRDbpBlRbXPTnVZbb^FBbb6NbHjlhZvlZPZPtP^VNnjvltdPZPPTn\zjxH0Dlb\jPXlPZP@ZPtPXdPbPbFlFFfZxZXthPndFFBtDLNFjHtPpNjZbFX^DDTNZnXtVVVF^FxpnBLdXDB▒LFFFxvFPdLdXbB\bHTlhbfT^F\BBBPNBDJhFjNdTlVVNNpV\r\DnrpnNDjNJblNdhDNHrb\jx

half (rounded down):

8;8;5;7;:==38839;;<;75:83835151>37:2+178439438:19;79;8;896733338▒;2977:<847453:5=66;;:;;5<::933139;52>8>>;;9;469398444=4=427$8965<4;86==66;=;848<;4868;568▒788-382:;:6=;66=8453;:=;=96;7>:>2,;87:468;66=46948481;96>66=:;98=33▒:2=4<3:68#675368;6=8557><;396&3>=4939687825;:89587312:1:395;5533<57<;<<;3:328;389:32<87:8>

and others.

Yang Yu · Answer 3 · 2016-10-11T07:19:40.983

0

A Updated

Maybe this is a Two-square cipher or Four-square cipher.
[none] and [static] are the keys.

edited Oct 11 '16 at 07:19

answered Oct 11 '16 at 04:17

Yang Yu

101
2

A weird website

3 Answers3

A Updated