melvinlauber

## iframe hack.css
.youtube-container iframe {
    width: 100vw;
    height: calc(100vw * 0.5625);
    border: 0;
}

## font.html
<!-- Embed Google Font: Poppins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">

## set job cookie counter
// Set job cookie
var mediamatiker = [
    { 'job' : 'Mediamatiker', 'value' : 0},
];
$.cookie('Mediamatiker', JSON.stringify(mediamatiker));

// Add value +1
var get_value = $.parseJSON($.cookie("Mediamatiker"));
var mediamatiker = [
    { 'job' : 'Mediamatiker', 'value' : get_value[0]['value'] + 1},

## script.js
// START define functions (no execute)

// toogle (add & remove) class expanded from element with id=main-nav (header)
function toggleMainNav() {
    let element = document.getElementById('main-nav');
    element.classList.toggle('expanded')
}

// add/remove toggleMainNav to/from a-Tag with class link depending on window-width
function addtoggleMainNav(){

## randomize children in swiper-js
var parent = $(".swiper-wrapper");
var divs = parent.children();
while (divs.length) {
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}

## super fancy cookie banner
<div class="cookie_banner">
    <h1 class="cookie_title">Cookies</h1>
    <p class="cookie_text">We use cookies to ensure that we give you the best experience on our website</p>
    <a class="button">Accept</a>
</div>

<style>
    .cookie_banner {
        display: flex;
        flex-direction: column;

## firefox 3D transform bugfix.css
/* Firefox 3d transform bugfix */
@-moz-document url-prefix() {
	.swiper-3d .swiper-wrapper {
		transform-style: unset;
	}
}

## Livedemo_05
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Schleifen</title>
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>

## Livedemo_06
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Arrays</title>
</head>
<body>

    <h1>Einkaufsliste</h1>

## Livedemo_07.php
<?php

    // Diese Daten kommen in Zukunft dann aus einer Datenbank
    $people = array(

        array(
            'prename' => 'Reto',
            'lastname' => 'Schild',
            'picture' => 'reto.jpg',
        ),
	.youtube-container iframe {
	width: 100vw;
	height: calc(100vw * 0.5625);
	border: 0;
	}
	<!-- Embed Google Font: Poppins -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
	// START define functions (no execute)

	// toogle (add & remove) class expanded from element with id=main-nav (header)
	function toggleMainNav() {
	let element = document.getElementById('main-nav');
	element.classList.toggle('expanded')
	}

	// add/remove toggleMainNav to/from a-Tag with class link depending on window-width
	function addtoggleMainNav(){
	var parent = $(".swiper-wrapper");
	var divs = parent.children();
	while (divs.length) {
	parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
	}
	/* Firefox 3d transform bugfix */
	@-moz-document url-prefix() {
	.swiper-3d .swiper-wrapper {
	transform-style: unset;
	}
	}
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="UTF-8">
	<title>Schleifen</title>
	<style>
	table, th, td {
	border: 1px solid black;
	}
	</style>
	<?php

	// Diese Daten kommen in Zukunft dann aus einer Datenbank
	$people = array(

	array(
	'prename' => 'Reto',
	'lastname' => 'Schild',
	'picture' => 'reto.jpg',
	),