JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<script src="thoughtrender.com/new/script/jquery.js"></script>
 <div class='holder'>
    	<div class='mainimage'></div>
    	<div class='multi'>Multimedia
        	<!--<a = href="http://google.com">Multimedia
            	<span class="underlink"></span>
         	</a> -->
         </div>
         <div class='music'>
         	<a = href="http://thoughtrender.com/music">Record Label
            	<span class="underlink"></span>
         	</a>
         </div>
    </div>
    <div class='ref'>
			<a href="mailto:[email protected]">[email protected]</a>
	</div>

CSS

html, body {
  	height: 95%;
  	width: 95%;
  	padding: 0;
  	margin: 0;
 	background: black url(http://thoughtrender.com/new/images/home_bk_sm.jpg) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.mainimage {
	opacity:0;
	width:60%;
	height:449px;
    margin-left: 20%;
	margin-top:5px;
	background-image: url(http://thoughtrender.com/new/images/logo_thr_circle.png);
	background-repeat: no-repeat; 
	background-position:center top;
	background-size:contain;
	-webkit-transition : all 2s;
    -moz-transition    : all 2s;
    transition         : all 2s;
}

.holder {
	position:absolute;
	left:5px;
	opacity:1;
	width:98%;
	height:90%;
	border-style:solid;
	border-width:thin;
	border-color:#fff;
	margin-top:10px;
	text-align:center;
}

.multi {
	position:absolute;
	opacity:0.5;
	width:90%;
	margin-left:5%;
	height:50px;
	top:75%;
	right:0;
	left:0;
	margin-left: auto;
    margin-right: auto;
	text-align:center;
	font-size:26px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	vertical-align:middle;
	line-height:50px;
	border-style:solid;
	border-width:thin;
	border-color:#fff;
	-webkit-transition : all 1s;
    -moz-transition    : all 1s;
    transition         : all 1s;
}

.music:hover {
	border-top-right-radius:60%;
	border-bottom-right-radius:60%;
	
}
.music {
	position:absolute;
	opacity:1;
	width:90%;
	margin-left:5%;
	height:50px;
	top:60%;
	right:0;
	left:0;
	margin-left: auto;
    margin-right: auto;
	text-align:center;
	font-size:26px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	vertical-align:middle;
	line-height:50px;
	border-style:solid;
	border-width:thin;
	border-color:#fff;
	-webkit-transition : all 1s;
    -moz-transition    : all 1s;
    transition         : all 1s;
}

.underlink { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
  background-image: url('empty.gif');
} 

.ref...

JavaScript

$( window ).resize(function() {
	if($(window).width() < 480)
	{
		$('.multi').css('left',0);
		$('.music').css('left',0);
	}
	else
	{
		$('.multi').css('opacity', .5);
		$('.music').css('opacity', 1);
		$('.multi').css('left',20);
		$('.music').css('left', $('.holder').width() - 220);
	}
});

$(document).ready(function() {
	
	setTimeout(function(){
		$('.mainimage').css('opacity',1);
		if($(window).width() > 481){
			setTimeout(function(){
				$('.multi').css('left', 20);
				$('.multi').css('opacity', .5);
				$('.music').css('left', $('.holder').width() - 220);
				$('.music').css('opacity', 1);
			},1000);
		}
	},100);
});