Bootstrap/header.html at master · shubhammane555/Bootstrap · 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
<!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>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/header.css">
</head>
<body>
    <div class="container my-2 header">
        <div class="row">
            <div class="col-2">
                <a class="text-dark" href="home ">HOME</a>
            </div>
            <div class="col-2">
                <a href="home">PROJECT</a>
            </div>
            <div class="col-2">
                <a href="home">TASK</a>
            </div>
            <div class="col-2">
                <a href="home">CONTACT</a>

            </div>
            <div class="col-4">

                <input type="text" placeholder="Search Query" >
                <button>!GO</button>
            </div>
        </div>
    </div>

    <div class="container my-3 ">
<div class="row">
    <div class="col-8 main">
        <artical>
        <h1 class="display-4">Artical</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, reprehenderit adipisci! Nesciunt at rerum tenetur sed blanditiis fugit fugiat, quod quaerat saepe aperiam, et odit culpa explicabo molestiae asperiores voluptatum?</p>
    </artical>
    <section>
        <h1>subsection</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, adipisci. Distinctio adipisci ducimus eius esse aliquid, quod impedit sunt omnis quo necessitatibus quaerat ipsam dolorem mollitia doloremque veritatis suscipit nobis?</p>
    </section>
    <div>
        <h1>last section</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur explicabo impedit minus repellat quo iste odit ipsam doloremque, dignissimos ipsa. Dolore soluta labore obcaecati eum saepe! Inventore dolorum consectetur provident.</p>
    </div>
    </div>

<div class="offset-1 col-3 sidebar">
    <h4>SIDEBAR</h4>
    <ul>
        <li>
         section 1
        </li>
        <li>section 2</li>
        <li>section 3</li>
    </ul>
</div>
 </div>
</div>

<div class="container my-3 footer">
<div class="row">
    <div class="col-12">
        <h2> This is footer of 12 col</h2>
    </div>
</div>
</div>
</body>
</html>