guess-game/index.html at main · alihaider-dev/guess-game · 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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Guess Game V 1.0</title>
    <link rel="stylesheet" href="style.css" />

    <link
      href="https://fonts.googleapis.com/css?family=Press+Start+2P"
      rel="stylesheet"
    />
    <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
  </head>
  <body>
    <div class="content">
      <div class="nes-container">
        <!-- Header Section Start -->
      <section class="header">
        <h2>Welcome to the Guessing Number Game</h2>
        <p>Let's guess the correct number</p>
      </section>
      <!-- Header Section End -->

      <!-- Alert Message Section Start -->
      <section class="alert nes-container with-title is-centered">
        <p class="title">Notification</p>
        <section class="message-left">
            <i class="nes-bcrikko"></i>
            <!-- Balloon -->
            <div class="nes-balloon from-left">
              <p class="message">Are you good in Gussing? Let's see</p>
            </div>
          </section>


      </section>
      <!-- Alert Message Section End -->

      <!-- Content Section Start -->
      <section class="content">
        <div class="abc">
          <!-- Left Section  -->
          <div class="left">
            <div class="d-flex justify-content-center">
              <p class="secret-number" style="margin-bottom: 15px;">?</p>
            </div>
            <p class="value">(Select Number Between 1 and 20)</p>
          </div>
          <!-- Right Section -->
          <div class="right">
            <p class="label-score py-2">
              <i class="nes-icon heart is-small"></i>
              life:<span class="score">5</span>
            </p>
            <p class="label-highscore py-2">
              <i class="nes-icon trophy is-small"></i>
              Highscore: <span class="highscore">0</span>
            </p>

            <!-- Button -->
            <div class="guess-value mb-3 py-2">
              <div class="nes-field">
                <input
                  type="number"
                  class="guess-number nes-input"
                  placeholder="Guees the Number" min="1" max="20" onkeyup="if(parseInt(this.value)>20){ this.value =20; return false; }"
                />
              </div>

              <div class="buttons">
                <button class="check nes-btn is-primary" type="button">
                  Check
                </button>

                <button class="retry nes-btn is-warning">Retry</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="">
        <div class="faild d-flex justify-content-center py-5"></div>
      </div>
      <!-- Content Section End -->

      <footer class="footer">
        &copy; Guess Game V1.0 | Design & Developed by <a href="https://alihaider.dev" target="_blank">ahDev</a> <br> <br>

        <section class="icon-list">
          <!-- twitter -->

            <a href="https://twitter.com/justalihaider" target="_blank"><i class="nes-icon twitter is-small"></i></a>
          <!-- facebook -->

            <a href="https://facebook.com/justalihaider" target="_blank"><i class="nes-icon facebook is-small"></i></a>

          <!-- instagram -->

            <a href="https://instagram.com/justalihaider" target="_blank"><i class="nes-icon instagram is-small"></i></a>

          <!-- github -->

            <a href="https://github.com/ahDevGit" target="_blank"><i class="nes-icon github is-small"></i></a>

          <!-- linkedin -->
            <a href="https://linkedin.com/justalihaider" target="_blank"><i class="nes-icon linkedin is-small"></i></a>
          <!-- youtube -->

            <a href="https://youtube.com/justalihaider" target="_blank"><i class="nes-icon youtube is-small"></i></a>

        </section>
      </footer>

      <!-- Script.js File -->
      <script src="script.js"></script>
    </div>
      </div>
    </div>
  </body>
</html>