-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathUltraPong.html
93 lines (88 loc) · 3.52 KB
/
UltraPong.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>Joshua Briggs</title>
<link rel="stylesheet" href="style.css">
<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=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
</head>
<body>
<section class="header">
<nav>
<!-- Displays all the photos in the top left -->
<a><img src="images/HTML.svg"</a>
<a><img src="images/CSS.png"</a>
<div class="nav-links">
<ul>
<!-- Displays all the navigation tools -->
<li><a href="Portfolio.html">PORTFOLIO</a></li>
<li><a href="Contact.html">CONTACT</a></li>
</ul>
</div>
</nav>
<div class="video-header">
<h1>Ultra Pong</h1>
</div>
<div class="slide-container">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="images/UPMM.png"></div>
<div class="swiper-slide"><img src="images/UPSM.png"></div>
<div class="swiper-slide"><img src="images/UPCM.png"></div>
<div class="swiper-slide"><img src="images/UPGS.png"></div>
<div class="swiper-slide"><img src="images/UPPS.png"></div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- Displays all the text in the bottom of the page -->
<div class="video-body">
<div class="video-text">
<div class="video-info">
<div class="video-questions">
<p>Game type:</p>
<p>Process of making the game:</p>
<p>Software:</p>
<p>Coding language:</p>
</div>
<div class="video-answers">
<p>2D top down arcade game, the player can try their luck with four different game modes, easy, medium, hard and offline PVP.</p>
<p>Most of my time making this game went towards allowing for a more customizable experience, this is my second game jam submission for the Mini Jam 130, Lunar Jam and the first game I've made which allows for custom bindings, custom art assets and custom settings.</p>
<p>Unity, Visual Studio & Aseprite</p>
<p>C#</p>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>