Game-Jaming/Frontend/Html/ShowCase.html

85 lines
3.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../Styles/ShowCase.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="../Styles/jcarousel.responsive.css" />
<!-- CSS end -->
<!-- Header scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="../Javascript/jcarousel.responsive.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jcarousel@0.3.9/dist/jquery.jcarousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jcarousel@0.3.9/dist/jquery.jcarousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<!-- Header scripts end -->
</head>
<body>
<h1 id="gameTitle">Game Jam Name</h1>
<p id="groupId">Name Of Author</p>
<div>
<div class="row">
<div class="col-sm" id="description">
Beskrivelse
<br />
<button id="isWebBased">Play game online</button>
<button id="gameFil">Download game</button>
</div>
<div class="col-sm" id="thumbnailFile">
<img src="../Images/spil.jpg" />
</div>
</div>
</div>
<div id="suggestions">
<p>Hej dkjhhnsd hid hgndnf ghnd df</p>
</div>
<div class="jcarousel-wrapper">
<div class="jcarousel" data-jcarousel="true">
<ul style="left: 0px; top: 0px;">
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 1"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 2"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 3"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 4"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 5"></li>
<li style="width: 200px;"><img src="../Images/spil.jpg" alt="Image 6"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev" data-jcarouselcontrol="true"></a>
<a href="#" class="jcarousel-control-next" data-jcarouselcontrol="true"></a>
<p class="jcarousel-pagination" data-jcarouselpagination="true">
<a href="#1" class="active">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
<a href="#6">6</a>
</p>
</div>
<script>
$(function () {
$('.jcarousel').jcarousel();
});
$('.jcarousel-control-prev').click(function () {
$('.jcarousel').jcarousel('scroll', '-=1');
});
$('.jcarousel-control-next').click(function () {
$('.jcarousel').jcarousel('scroll', '+=1');
});
</script>
</body>
</html>