html/ex1.html at main · Tejkumar-hacker/html · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<style>
    p,h1,span,input{
        color: blueviolet;
    }
    .nav-link{
        color: brown !important;
    }

    #hobby{
        color: antiquewhite;
    }
    a:hover{
        color: black;
    }

</style>
</head>
<body>
   <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Hobbies</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Favourite Hobbies</button>
  </li>

  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-new-tab" data-bs-toggle="pill" data-bs-target="#pills-new" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">input Types</button>
  </li>

</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
    <h1>Welcome to my home</label></h1>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
    <label for="Hobby">Hobby:</label>
    <input type="text" placeholder="add Hobby">
    <br><br>
    <button type="button" class="btn btn-primary">hobby</button>
  </div>

  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
    <label for="Hobby">Favourite:</label>
    <input type="text" placeholder="add Hobby">
    <br><br>
    <button type="button" class="btn btn-primary">hobby</button>
  </div>

   <div class="tab-pane fade" id="pills-new" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
    <label for="Hobby">Favourite:</label>
    <input type="text" placeholder="add Hobby">
    <br><br>
    <select name="" id="hobby">hi
        <optgroup label="num">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
        </optgroup>

        <optgroup label="alf">
            <option value="">a</option>
            <option value="">b</option>
            <option value="">c</option>
            <option value="">d</option>
        </optgroup>
    </select><br><br>

    <textarea name="" id=""></textarea><br><br>
    <fieldset>
        <label for=""hfidhk></label>
        <input type="text">
    </fieldset><br><br>
    <legend>hi tej kumar</legend><br><br>
    <input list="cities" id="cities">
    <datalist id="cities">
        <optgroup>
            <option value="">a</option>
            <option value="">b</option>
            <option value="">c</option>
            <option value="">d</option>
        </optgroup>
    </datalist><br><br>
    <output>hi</output><br><br>
    <br><br>
    <button type="button" class="btn btn-primary">hobby</button>
  </div>

  <div>
    <p>nieunik</p>
    <h1>jrnoerl</h1>
    <span>eubfb3icublqwbcwlhb</span>
    <a href="https://www.google.com">this is a link to google</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

</body>
</html>