-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNivana.html
93 lines (88 loc) · 3.57 KB
/
Nivana.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>Nivana</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/Idle.png"></div>
<div class="swiper-slide"><img src="images/Melee.png"></div>
<div class="swiper-slide"><img src="images/AirMelee.png"></div>
<div class="swiper-slide"><img src="images/Fireball.png"></div>
<div class="swiper-slide"><img src="images/Hanging.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 platformer, character has a vast amount of movement options, from sliding to climbing, the combat system is also quite expansive, from connecting attacks to shooting fireballs. The player must fight his way through to the end of the map, using different techniques to clear different sections.</p>
<p>This was a project I worked on with one other, who created the beautiful artwork you can see above, I made all the code to bring this world together.</p>
<p>Unity & Visual Studio</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>