Bojan Cvjetković b0c0de

3D Social Media Animated Links

Using scss mixins and 3d transforms to make social links with a cool hover effect to show usernames

	<nav id="navbar">
	<header>JS Documentation</header>
	<ul>
	<li><a class="nav-link" href="#Introduction">Introduction</a></li>
	<li>
	<a class="nav-link" href="#What_you_should_already_know"
	>What you should already know</a
	>
	</li>
	<li>

	<div class="wrap">
	<div class="wrap-in">
	<div class="rw">
	<div class="t-l inline push green unclickable" id='3' ></div><div class="t-r inline push red but unclickable" id='2'></div>
	</div>
	<div class="rw">
	<div class="b-l inline push yellow unclickable" id='1'></div><div class="b-r inline push blue but unclickable" id='0'></div>
	</div>
	</div>
	<div class="center">

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tic-tac-toe Game</title>
	<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
	</head>
	<body onload="initialize()">
	<h1>Tic-Tac-Toe Game</h1>
	<table id="table_game">

	.container
	.header
	%svg#gradient{"style" => "width: auto;"}
	%defs
	%linearGradient#linearGradient{ "x1"=>"0%", "y1"=>"0%", "x2"=>"100%", "y2"=>"100%" }
	%stop{ "offset"=>"0%", "stop-color"=>"#B8D087" }
	%stop{ "offset"=>"100%", "stop-color" =>"#00996D" }
	%text{"y"=>"36px", "fill-opacity"=>"1"}
	Pomodoro Clock
	.timer

	<div class="loading">
	<h1>Using the Twitchtv JSON API</h1>
	<div><i class="fa fa-spin fa-spinner"></i></div>
	<p>Loading...</p>
	<p class="info">Please Wait...</p>
	</div>
	<div class="container">
	<header>
	<h1>Use the Twitchtv JSON API Project</h1>
	<p>Twitch Streams by BoCode</p>

	<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

	<h1> Wikipedia Viewer </h1>

	<div class="col-md-12">
	<div class="container-fluid">

	<div class="row text-center" id="searchbar">
	<form action="/search" id="search_form">
	<input id="search_box" type="text" placeholder=" Search for..." value="">

	<div class='container'>
	<div id='calculator'>

	<!-- TITLE -->

	<div id='title' class='text-center'>
	<h5><b>BASIC CALCULATOR</b></h5>
	</div>

	<!-- ENTRY BOX -->

	<header>
	<h3>Random Quote Machine</h3>
	</header>
	<body>
	<center style="margin: 30px;">
	<div id="intro"></div><br>
	<div>
	<img id="getQuote" src="https://preview.ibb.co/ia7Gqd/quote.jpg" width=10%/>
	</div>
	<div id="quote"></div>