Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>startpage</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="trimmedcss.css">
    </head>
    <body>
        <div id="container">
            <div id="cell">
                <div class="sqr">
					<span>4chan</span>
						<div class="crcl">

							<div class="linq1">
								<br>
								<br>
								<a href="http://boards.4chan.org/b/">/b/</a>
							</div>

							<div class="linq2">
								<br>
								<br>
								<a href="http://boards.4chan.org/wg/">/wg/</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://boards.4chan.org/w/">/w/</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="http://boards.4chan.org/g/">/g/</a>
							</div>

							<div class="linq5">
								<br>
								<br>
								<a href="http://boards.4chan.org/v/">/v/</a>
							</div>

						</div>
                </div>
				<div class="sqr">
					<span>Daily</span>
						<div class="crcl">

							<div class="linq1">
								<br>
								<br>
								<a href="https://twitter.com/">Twitter</a>
							</div>

							<div class="linq2">
								<br>
								<br>
								<a href="https://www.tumblr.com/login">Tumblr</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://www.youtube.com/">YouTube</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="https://soundcloud.com/stream">Soundcloud</a>
							</div>

							<div class="linq5">
								<br>
								<br>
								<a href="https://web.whatsapp.com/">What's App</a>
							</div>

						</div>
                </div>
				<div class="sqr">
					<span>Forums</span>
						<div class="crcl">

							<div class="linq1">
								<br>
								<br>
								<a href="http://www.backbeard.es/index.php">BackBeard</a>
							</div>

							<div class="linq2">
								<br>
								<br>
								<a href="http://redlinesp.org/newrlsp/index.php?action=forum">RLSP</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://www.yoyo4all.com/news.php">Yoyo4All</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="http://www.penspinning.es/index.php">SPSC</a>
							</div>

							<div class="linq5">
								<br>
								<br>
								<a href="http://www.shufflespain.es/foro/index.php">Shuffle Spain</a>
							</div>

						</div>
                </div>
				<div class="sqr">
					<span>Torrent</span>
						<div class="crcl">

							<div class="linq5">
								<br>
								<br>
								<a href="https://thepiratebay.mn/">TPB</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://kat.cr/">Kickass</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="http://www.nyaa.se/">Nyaa</a>
							</div>

						</div>
                </div>
			</div>
		</div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>startpage</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="trimmedcss.css">
    </head>
    <body>
        <div id="container">
            <div id="cell">
                <div class="sqr">
					<span>4chan</span>
						<div class="crcl">

							<div class="linq1">
								<br>
								<br>
								<a href="http://boards.4chan.org/b/">/b/</a>
							</div>

							<div class="linq2">
								<br>
								<br>
								<a href="http://boards.4chan.org/wg/">/wg/</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://boards.4chan.org/w/">/w/</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="http://boards.4chan.org/g/">/g/</a>
							</div>

							<div class="linq5">
								<br>
								<br>
								<a href="http://boards.4chan.org/v/">/v/</a>
							</div>

						</div>
                </div>
				<div class="sqr">
					<span>Daily</span>
						<div class="crcl">

							<div class="linq1">
								<br>
								<br>
								<a href="https://twitter.com/">Twitter</a>
							</div>

							<div class="linq2">
								<br>
								<br>
								<a href="https://www.tumblr.com/login">Tumblr</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://www.youtube.com/">YouTube</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="https://soundcloud.com/stream">Soundcloud</a>
							</div>

							<div class="linq5">
								<br>
								<br>
								<a href="https://web.whatsapp.com/">What's App</a>
							</div>

						</div>
                </div>
				<div class="sqr">
					<span>Forums</span>
						<div class="crcl">

							<div class="linq1">
								<br>
								<br>
								<a href="http://www.backbeard.es/index.php">BackBeard</a>
							</div>

							<div class="linq2">
								<br>
								<br>
								<a href="http://redlinesp.org/newrlsp/index.php?action=forum">RLSP</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://www.yoyo4all.com/news.php">Yoyo4All</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="http://www.penspinning.es/index.php">SPSC</a>
							</div>

							<div class="linq5">
								<br>
								<br>
								<a href="http://www.shufflespain.es/foro/index.php">Shuffle Spain</a>
							</div>

						</div>
                </div>
				<div class="sqr">
					<span>Torrent</span>
						<div class="crcl">

							<div class="linq5">
								<br>
								<br>
								<a href="https://thepiratebay.mn/">TPB</a>
							</div>

							<div class="linq3">
								<br>
								<br>
								<a href="http://kat.cr/">Kickass</a>
							</div>

							<div class="linq4">
								<br>
								<br>
								<a href="http://www.nyaa.se/">Nyaa</a>
							</div>

						</div>
                </div>
			</div>
		</div>
    </body>
</html>
==========================================================================
End of HTML
==========================================================================

body
	{
		overflow: hidden;
		font-family: "Segoe UI Light";
		color: #999999;
		background-image: url(wall.jpg);
		background-size: 1920px 1080px;
	}

a
	{
		text-decoration: none;
		color: #999999;
		line-height: 25px;
	}

#bgimg
	{
		z-index: -10;
		position: fixed;
		background-size: cover;
		background-repeat: no-repeat;
	}

#container
	{
		width: 100%;
		display: table;
	}

span
	{
		width: inherit;
		height: inherit;
		line-height: 145px;
		font-size: 30px;
		color: #999999;
	}

#cell
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}

.sqr
	{
		display: inline-block;
		width: 150px;
		height: 150px;
		margin: 350px 8% 0% 8%;
		border-radius: 100px;
		background-color: #121212;
		font-size: 20px;
		position: relative;
	}

.crcl
	{
		border-radius: 1000px;
		position: relative;
		z-index: 1;
		bottom: 300px;
		right: 155px;
		width: 450px;
		height: 450px;
		/*border: 1px solid black;*/
	}

.crcl [class^='linq']
	{
		position: absolute;
		width: 150px;
		height: 150px;
		border-radius: 100px;
		background-color: #121212;
		visibility: hidden;
		/*border: solid 1px #00ff00;*/
	}


/*==================Div Arriba a la izquierda==============*/

.linq1
	{
		top: 75px;
		left: 75px;
		animation-name: move;
		animation-duration: 0.5s;
		animation-play-state: paused;
	}

@keyframes move1
		{
			0%
				{
					transform: translate( 0px, 0px );
					opacity: 0;
				}

			100%
				{
					transform: translate(-95px, 0px);
					opacity: 1;
				}
		}

.crcl:hover .linq1
	{
		animation-name: move1;
		transition-timing-function: ease-out;
		visibility: inherit;
		animation-play-state: running;
		animation-fill-mode: forwards;
	}

/*==================Div Arriba a la derecha==============*/

.linq2
	{
		top: 75px;
		left: 230px;
		animation-name: move;
		animation-duration: 0.5s;
		animation-play-state: paused;
	}

@keyframes move2
		{
			0%
				{
					transform: translate( 0px, 0px );
					opacity: 0;
				}

			100%
				{
					transform: translate( 95px, 0px );
					opacity: 1;
				}
		}

.crcl:hover .linq2
	{
		animation-name: move2;
		transition-timing-function: ease-out;
		visibility: inherit;
		animation-play-state: running;
		animation-fill-mode: forwards;
	}

/*==================Div Abajo a la izquierda==============*/

.linq3
	{
		top: 225px;
		left: 75px;
		animation-name: move;
		animation-duration: 0.5s;
		animation-play-state: paused;
	}

@keyframes move3
		{
			0%
				{
					transform: translate( 0px, 0px );
					opacity: 0;
				}

			100%
				{
					transform: translate( -35px, 75px );
					opacity: 1;
				}
		}

.crcl:hover .linq3
	{
		animation-name: move3;
		transition-timing-function: ease-out;
		visibility: inherit;
		animation-play-state: running;
		animation-fill-mode: forwards;
	}

/*==================Div Abajo a la derecha==============*/

.linq4
	{
		top: 225px;
		left: 230px;
		animation-name: move;
		animation-duration: 0.5s;
		animation-play-state: paused;
	}

@keyframes move4
		{
			0%
				{
					transform: translate( 0px, 0px );
					opacity: 0;
				}

			100%
				{
					transform: translate( 35px, 75px );
					opacity: 1;
				}
		}

.crcl:hover .linq4
	{
		animation-name: move4;
		transition-timing-function: ease-out;
		visibility: inherit;
		animation-play-state: running;
		animation-fill-mode: forwards;
	}

/*==================Div Entre los 2 de arriba, usar linq5==============*/


.linq5
	{
		top: 75px;
		left: 155px;
		animation-name: move;
		animation-duration: 0.5s;
		animation-play-state: paused;
	}

@keyframes move5
		{
			0%
				{
					transform: translate( 0px, 0px );
					opacity: 0;
				}

			100%
				{
					transform: translate( 0px, -115px );
					opacity: 1;
				}
		}

.crcl:hover .linq5
	{
		animation-name: move5 	;
		transition-timing-function: ease-out;
		visibility: inherit;
		animation-play-state: running;
		animation-fill-mode: forwards;
	}

/*==================Div Entre los 2 de abajo, usar linq6==============*/