Untitled

<!DOCTYPE html>
<html lang="pt-br">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
	 crossorigin="anonymous">
	<link rel="stylesheet" href="../../bulma/css/bulma.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="../../asset/transition.css">
	<script src="../../js/jquery.min.js"></script>

	<title>Mariana Arndt</title>
</head>

<body>

	<header class="header is-half-desktop is-half-mobile is-half-tablet">
		<a href="../index.html">
			<h1 class="title ld ldt-slide-top-in">MARIANA ARNDT</h1>
		</a>
	</header>


	<div class="tabs is-centered is-boxed is-primary ld ldt-slide-top-in">
		<ul>
			<li class="is-active">
				<a href="../index.html">
					<span class="icon is-small">
						<i class="fa fa-image" aria-hidden="true"></i>
					</span>
					<span>Autoral</span>
				</a>
			</li>
			<li>
				<a>
					<span class="icon is-small">
						<i class="fa fa-image" aria-hidden="true"></i>
					</span>
					<span>Decorativa</span>
				</a>
			</li>
			<li>
				<a>
					<span class="icon is-small">
						<i class="fa fa-envelope" aria-hidden="true"></i>
					</span>
					<span>Contato</span>
				</a>
			</li>
			<li>
				<a>
					<span class="icon is-small">
						<i class="fa fa-address-book" aria-hidden="true"></i>
					</span>
					<span>Bio</span>
				</a>
			</li>
		</ul>
	</div>

	<div class="container is-fluid">
		<h1 class="subtitle ld ldt-slide-top-in">3,4 Graus na Escala Richter</h1>
		<div class="columns is-centered is-multiline">

		</div>

		<div class="modal" id="modal_name">
			<div class="modal-background"></div>
			<div class="modal-card">
				<header class="modal-card-head has-text-right">
					<button class="delete" aria-label="close"></button>
				</header>
				<section class="modal-card-body">
					<!-- Content ... -->
				</section>
			</div>
		</div>

	</div>

</body>
<script>

	var folder = "img/";
	$.ajax({
		url: folder,
		success: function (data) {
			$(data).find("a").attr("href", function (i, val) {
				if (val.match(/\.(jpe?g|png|gif)$/)) {
					$(".columns").append("<div class = 'column is-4' > <a data-target = 'modal_name'class = 'img-input'> <img id = 'img-card' src='" + folder + val + "'></a></div>");
				}
			});
		}
	});

</script>

<script>
	window.onload = () => {
		document.querySelectorAll('[data-target]').forEach((result) => {
			result.onclick = () => {
				let modal = document.getElementById(result.getAttribute('data-target'))
				modal.classList.toggle("is-active")
				modal.querySelector('.delete').onclick = () => { modal.classList.toggle("is-active") }
			}
		})
	}
</script>


</html>