Soctopia: Where Socks Go to Play

Soctopia: A Land of Missing Socks

The Missing Sock Purgatory

A vast expanse of solo socks, lost forever in the void.

Learn more

The Sock Island of Lost Hope

A land of mismatched socks, where singles roam free.

Read the legend

The Land of Sock Gnosis

A realm of enlightenment, where socks achieve ultimate pairage.

Practice sockyoga

The Sockpocalypse Crater

A vast impact zone, where single socks are tossed into the void.

Watch the sockyammering
/* CSS */ body { background-color: #333; font-family: 'Arial, sans-serif'; margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } header { background-color: #ff0000; color: #fff; padding: 1em 2em; text-align: center; border: 4px solid #000; width: 50%; height: 10vh; position: fixed; top: 0; left: 0; box-shadow: 0 0 10px #000; } main { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; height: 90vh; background-color: #fff; padding: 2em; margin: 1em; border: 4px solid #000; box-shadow: 0 0 10px #000; } h1 { font-size: 3em; color: #000; font-weight: bold; text-align: center; margin: 1em 0 0.5em 0; } h2 { font-size: 2em; color: #000; font-weight: bold; text-align: center; margin: 1em 0 0.5em 0; } h3 { font-size: 1.5em; color: #000; font-weight: bold; text-align: center; margin: 0.5em 0 0 0; } a { text-decoration: none; color: #000; font-size: 1em; text-align: center; margin: 0 0 0 0; } a:hover { text-decoration: underline; } .map-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80%; height: 70vh; background-color: #333; padding: 2em; margin: 1em; border: 4px solid #000; box-shadow: 0 0 10px #000; } .map { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1em; width: 100%; height: 100%; padding: 1em; margin: 1em; border: 4px solid #000; box-shadow: 0 0 10px #000; } .continent { display: grid; grid-column: 1; width: 100%; height: 100%; padding: 1em; margin: 0 0 1em 0; } .sockyammering { display: block; position: relative; width: 100%; height: 100%; background-color: #fff; border: 4px solid #000; box-shadow: 0 0 10px #000; } /* Sockyammering animation */ .sockyammering { animation: sockyammering 2s infinite; } @keyframes sockyammering { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } } /* Sockyammering animation end */ @media only screen and (min-width: 600px) { .map { grid-template-columns: repeat(2, 1fr); } .sockyammering { transform: none; } } /* Responsive design */ @media only screen and (max-width: 600px) { .map { grid-template-columns: repeat(1, 1fr); } } /* Sockyammering animation on small screens */ @media only screen and (max-width: 600px) { .sockyammering { transform: none; } } /* Sockyammering animation on small screens */ @media only screen and (max-width: 600px) { .sockyammering { animation: none; } }