Nieuwsoverzicht | 2 Augustus 2020

2 Augustus 2020

by EvanlynnNT

HTML

<div style="position: relative; width: 688px; height: 550px; background: url('https://i.imgur.com/NIiTH2D.jpg');">

	<div class="LS_lookContainer" style="position: absolute; width: 150px; height: 260px; left: 128px; top: 245px; color: #36543c;">
		<div class="LS_subtitle" style="position: absolute; bottom: 0px; text-align: center; font-size: 9px;">
			Looks van Areximache, Chrysalism, Mercredi, Pyroclastica en Arctic.
		</div>
	</div>

	<div style="position: absolute; overflow: auto; width: 260px; height: 255px; left: 298px; top: 255px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #36543c;">
		Hee!<br><br>

		Het is alweer zondag, dus tijd voor een weekoverzicht. Vorige week zaterdag kwam het artikel en de bijbehorende competities van de derde zomeractie online. Hier kun je nog aan meedoen tot en met 5 augustus 23.59. Om snel naar de competities te gaan kun je rechts naast het artikel op de links klikken.<br><br>

		Voor de [<a href="https://virtualpopstar.com/social/forum?category=11&topic=930700" target="_blank">designcompetitie</a>] van de lange broek kon je nog tot en met gisteren wat inleveren. Dit keer was de opdracht om een lange broek van eigen ontwerp te designen. Je kon beide rode jurken van [<a href="https://virtualpopstar.com/clothing/avatarmanagement?x=set_info&set_id=medievalmoondressmasi" target="_blank">deze</a>] set winnen.<br><br>

		We zijn in augustus beland en met een nieuwe maand komt altijd een nieuwe Competitie Maandset! De sets deze maand zijn pastelkleurig met rollerskates, je kunt de vrouwenset [<a href="https://virtualpopstar.com/clothing/avatarmanagement?x=set_info&set_id=r0llerbl4des" target="_blank">hier</a>] bekijken en de mannenset [<a href="https://virtualpopstar.com/clothing/avatarmanagement?x=set_info&set_id=r0llerbl4desM" target="_blank">hier</a>].<br><br>

		Het Forumteam kondigde gister hun gameweek aan. Dertien dagen lang komen er evenveel verschillende games aan bod die gespeeld kunnen worden...

CSS

* {
	font-family: 'Arial', sans-serif;
	font-size: 11px;
}

a {
	display: inline-block;
	background: transparent;
	color: #36543c;
	text-decoration: none;
}

a:hover {
	background: linear-gradient(90deg, #36543c, #467235, #668e4b, #7fa45c, #a9c979);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.header {
	font-family: 'Patrick Hand SC', cursive;
	font-size: 16px;
	line-height: 12px;
	font-weight: bold;
	background: linear-gradient(90deg, #36543c, #467235, #668e4b, #7fa45c, #a9c979);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.LS_lookContainer {
	position: relative;
	display: flex;
	padding-bottom: 20px;
	justify-content: center;
}

.LS_looks {
	position: absolute;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #e6e6e6;
}

::-webkit-scrollbar-thumb {
	background: #8cb065;
}

::-webkit-scrollbar-thumb:hover {
	background: #6f8f4c;
}

JavaScript

$('head').append('<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap" rel="stylesheet">');

setTimeout( function lookSlideshow() {
const fadeSpeed = 1;
const showLook = 5;
const lookIMG = [
	'https://i.imgur.com/OTty75P.png', 'Areximache',
	'https://i.imgur.com/mrUz6yt.png', 'Chrysalism',
	'https://i.imgur.com/oxuslTW.png', 'Mercredi',
	'https://i.imgur.com/6QBHL5S.png', 'Pyroclastica',
	'https://i.imgur.com/umeq5pO.png', 'Arctic'
];

// DON'T TOUCH, unless you know what you're doing, thanks!
for (i = 0; i < lookIMG.length; i+=2) {
	$('.LS_lookContainer').append('<img class="LS_looks" src="' + lookIMG[i] + '" title="' + lookIMG[i+1] + '">');
}

var nthImage = 1;
var lookAmt = $('.LS_looks').length;
$('.LS_looks').slice(1).hide();

var doLookLoop = setInterval(lookLoop, fadeSpeed * 1000 + showLook * 1000);
function lookLoop() {
	if (lookAmt == 1) {
		return;
	}
	$('.LS_looks:nth-of-type(' + nthImage + ')').fadeToggle(fadeSpeed * 1000);
	if (nthImage >= lookAmt) {
		nthImage = 1;
	} else {
		nthImage++;
	}
	setTimeout(function() {
		$('.LS_looks:nth-of-type(' + nthImage + ')').fadeToggle(fadeSpeed * 1000);
	}, fadeSpeed/2);
}

$('.LS_lookContainer').hover(function() {
	clearInterval(doLookLoop);
}, function(){
	doLookLoop = setInterval(lookLoop, fadeSpeed * 1000 + showLook * 1000);
});

}, 0);