MinesWeeper-Website/index.html at main · emran-ai/MinesWeeper-Website · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">  <!--to make it responsive you use this code -->
    <meta charset="UTF-8">
    <title>Minesweeper</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,
initial-scale=1.0">    <!-- this is the viewport for resizing the website -->

</head>
<body>
<header>
    <h1>Welcome To Minesweeper</h1> <!-- that contain the subtitle -->
</header>
<!-- the first section is just a welcome section and it's gonna set on the top of the screen -->

 <section class="ban">
    <img src="./media/shovel.png" alt="Minesweeper" >

     <!-- <div class="welcome">
          <h2> Welcome to <br><span>Minesweeper</span></h2>

      </div>!-->
  </section>
<!-- span tag is used because i am going to style this d/f in css -->

<!-- navigation bar -->
<embed class="emb" type="text/html" src="html/newnav.html" width="100%">  <!--to have the same navigation bar in all pages -->
<main>
    <article>
        <h2>Minesweeper: </h2>

        <p> <strong>The objective in Minesweeper: </strong><br>
            Finding and marking all the mines hidden under the grey squares, in the
            shortest time possible.
            This is done by clicking on the squares to open them.For more information click on Game Presentation<br><br>
            </article>
    <ul class="images">
        <li><img src="media/1.png" alt="minesweeper screen1"></li>
        <!-- here we need to put 6 screen shots of terminal games -->
        <li><img src="media/2.png" alt="minesweeper screen2"/></li>
        <li><img src="media/3.png" alt="minesweeper screen3"/></li>
        <li><img src="media/4.png" alt="minesweeper screen4"/></li>
        <li><img src="media/4.4.png" alt="minesweeper screen4.4"/></li>
        <li><img src="media/5.png" alt="minesweeper screen5"/></li>


    </ul>
</main>
<section class="join">
    <h2>Join Today for Free</h2>
    <p>
        Order Your Game Here By Sending Us an Email</p>
    <form>  <!-- input for the user to join this  club -->
        <!--<input type="Email" name="email" placeholder="Type your Email and Hit Enter " required>!-->
        <!-- They can send an email to us to order the game -->
        <a href="mailto:nazanin.biglari@student.kdg.be?cc=Emran.hamdard@student.kdg.be">Order your Game Here</a>
    </form>
</section>
<footer>  <!-- this is a copyright which will be shown at the end -->
    <p class="copyright">Copyright 2022 &copy minesweeper</p>
</footer>
</body>
</html>