Be Our Guest 2021 | Uitslag

27 April 2021

by EvanlynnNT

HTML

<div style="position: relative; width: 708px; height: 650px; background: url(https://i.imgur.com/645XnpP.jpg);">

	<div style="position: absolute; overflow: hidden; width: 652px; height: 184px; left: 28px; top: 138px;">
		<img class="boxImg one" src="https://i.imgur.com/2S3jMAa.png" draggable="false">
		<div class="blackBox"></div>
		<img class="boxImg two" src="https://i.imgur.com/scI9yLc.png" draggable="false">
		<div class="blackBox"></div>
		<img class="boxImg three" src="https://i.imgur.com/cHCFAKG.png" draggable="false">
		<div class="blackBox dark noShow"></div>
		<img class="boxImg four" src="https://i.imgur.com/dRgWV9s.png" draggable="false">
		<img class="boxImg newMembers_click noShow" src="https://i.imgur.com/UjxjFgi.png" draggable="false">
		<img class="boxImg newMembers_names noShow" src="https://i.imgur.com/9acn5kf.png" draggable="false">
	</div>
	
	<div class="textBox" style="width: 200px; height: 234px; left: 53px; top: 353px;">
		<span class="title">BOG Ronde 1</span>
		<a class="articleBox" href="https://virtualpopstar.com/home/dailynews?x=read&id=6516" target="_blank">#1 Victoria Schwab <i>door Rye</i></a>
		<a class="articleBox" href="https://virtualpopstar.com/home/dailynews?x=read&id=6515" target="_blank">#2 Mocro Maffia <i>door Tropics</i></a>
		<a class="articleBox" href="https://virtualpopstar.com/home/dailynews?x=read&id=6514" target="_blank">#3 Revenge <i>door Ursela</i></a>
	</div>
	<div class="textBox" style="width: 397px; height: 238px; left: 258px; top: 353px; color: #f3e1b8;">
		Be Our Guest, onze NieuwsTeam traditie. Dit jaar kregen wij in de eerste ronde zeven leuke inzendingen binnen van Cereza, Elysia, MissLisjex, Rye, Tropics, Ursela, Varamyr. De top drie van deze artikelen kun je hier links nog een keer bekijken.<br><br>
		
		Ronde twee duurde onverwacht wat langer, maar ook hier hebben we weer leuke inzendingen mogen ontvangen. De top drie zal, zoals gewoonlijk, de komende dagen online komen te staan. Zoals gezegd is dit de...

CSS

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');

* {
	font-family: 'Arial', sans-serif;
	font-size: 12px;
	box-sizing: border-box;
}

.textBox {
	position: absolute;
	overflow: auto;
	text-align: justify;
	padding-right: 5px;
}

.boxImg {
	position: absolute;
	top: 205px;
}

.boxImg.one {
	margin-top: -21px;
	transition: all 3s ease-out;
}

.boxImg.two {
	transition: all 2.5s ease-out;
}

.boxImg.three {
	transition: all 2s ease-out;
}

.boxImg.four {
	transition: all 5s ease-out;
}

.boxImg.noShow {
	top: 0px;
}

.boxImg.newMembers_click {
	cursor: pointer;
}

.blackBox {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgba(0, 0, 0, 0.15);
}

.blackBox.dark {
	background: rgba(0, 0, 0, 0.4);
}

.noShow {
	display: none;
}

.title {
	font-family: 'Patrick Hand SC', sans-serif;
	font-size: 22px;
	color: #f3e1b8;
}

.articleBox {
	display: block;
	width: 100%;
	height: 24px;
	line-height: 24px;
	border-radius: 5px;
	margin-bottom: 5px;
	padding: 0px 5px;
	background: #f3e1b8;
	color: #10151b;
	text-decoration: none;
	transition: all 0.7s ease;
}

.articleBox:hover {
	background: #d7c190;
}

.articleBox i {
	opacity: 0.5;
}

JavaScript

$(document).ready(function () {
	$('.boxImg.one').css('top', '0px');
	setTimeout(function () {
		$('.boxImg.two').css('top', '0px');
	}, 500);
	setTimeout(function () {
		$('.boxImg.three').css('top', '0px');
	}, 1000);
	setTimeout(function () {
		$('.blackBox.dark').fadeIn(1500);
	}, 3000);
	setTimeout(function () {
		$('.boxImg.newMembers_click').fadeIn(700);
	}, 4500);
	
	$('.boxImg.newMembers_click').click(function () {
		$('.boxImg.newMembers_click').fadeOut(700);
		setTimeout(function () {
			$('.boxImg.four').css('top', '0px');
		}, 700);
		setTimeout(function () {
			$('.boxImg.newMembers_names').fadeIn(2000);
		}, 5700);
	});
});