-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (72 loc) · 4 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="assets/favicon/favicon.ico" type="image/x-icon">
<title>Games by Igor Dinuzzi</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Stylesheet -->
<link href="styles/styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<header class="top-header">
<div class="logo-container">
<img src="assets/logo/game-logo.svg" alt="Minesweeper game logo">
</div>
<div class="home-link-container">
<a href="minesweeper/minesweeper.html" aria-label="Play minesweeper">Minesweeper</a>
<a href="stacker/stacker.html" aria-label="Play stacker">Stacker</a>
<a href="ducker/ducker.html" aria-label="Play ducker">Ducker</a>
</div>
</header>
<div class="container my-5">
<!-- Intro Section -->
<div class="row mb-4">
<div class="col-12">
<h1 class="intro-title animate__animated animate__fadeIn">Welcome to Igor's Arcade!</h1>
<p class="intro-paragraph animate__animated animate__fadeIn">Explore a world of entertainment with our exciting game collection. From "Minesweeper" to "Sticker Stacker" and "Ducker", each game promises unique challenges and endless fun. Begin your adventure and enjoy the thrill of Igor Dinuzzi's arcade classics!</p>
</div>
</div>
<!-- Game Columns -->
<div class="row">
<!-- Column 1 -->
<div class="col-md-4 mb-4 animate__animated animate__slideInLeft">
<a href="minesweeper/minesweeper.html"><img src="assets/games/game-minesweeper.jpg" alt="Minesweeper game" class="img-fluid"></a>
<h2>Minesweeper</h2>
<p>Minesweeper, the classic game of strategy and luck! Unearth hidden mines and win by logic and concentration in this exciting challenge. Good luck!</p>
<a href="minesweeper/minesweeper.html" class="btn btn-primary">Play Minesweeper</a>
</div>
<!-- Column 2 -->
<div class="col-md-4 mb-4 animate__animated animate__slideInUp">
<a href="stacker/stacker.html"><img src="assets/games/game-stacker.jpg" alt="Minesweeper game" class="img-fluid"></a>
<h2>Stacker</h2>
<p>Stacker, a thrilling game of skill and precision! Stack blocks to build a tower, challenging your reflexes for the highest score. Ready to reach the top?</p>
<a href="stacker/stacker.html" class="btn btn-primary">Play Stacker</a>
</div>
<!-- Column 3 -->
<div class="col-md-4 mb-4 animate__animated animate__slideInRight">
<a href="ducker/ducker.html"><img src="assets/games/game-ducker.jpg" alt="Ducker game" class="img-fluid"></a>
<h2>Ducker</h2>
<p>Ducker, an exciting arcade adventure where agility and strategy merge! Navigate through treacherous
obstacles and evade dangers to progress. </p>
<a href="ducker/ducker.html" class="btn btn-primary">Play Ducker</a>
</div>
</div>
</div>
<footer class="bottom-footer">
<a href="https://github.com/igordinuzzi" target="_blank" aria-label="Visit Igor's GitHub profile">
<i class="fa-brands fa-github"></i> Made by Igor
</a>
</footer>
<!-- JavaScript -->
<script src="./script.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>