StaticBlog/index.html at main · shubhi13/StaticBlog · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="en">

<head>
  <title>Blogs· Bootstrap v5.0</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>
<body style="background-color:rgb(230, 250, 247);"></body>

  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Blog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
            </li>
              </ul>
            </li>
        </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <section class="py-5 text-center container">
        <div class="row py-lg-5">
          <div class="col-lg-6 col-md-8 mx-auto">
            <h1>Blog example</h1>
            <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator,
              etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
          </div>
        </div>
      </section>

      <div class="py-5 bg-light">
        <div class="container">

          <div class="row">
            <div class="col-lg-4 col-sm-6 col-xs-12 pb-2">
              <div class="card">
                <img
                  src=OnlineeducationThinkstockPhotos.jpg
                  class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Blog-1</h5>
                  <p class="card-text"> As we got further and further away, it [the Earth] diminished in size. Finally it
                    shrank to the...</p>
                  <a href="blog1.html" class="btn btn-primary">Read more...</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12 pb-2">
              <div class="card">
                <img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJnLxfn_kWmL_IFfkFIG4fSBxLM7RTJMxRJQ&usqp=CAU"
                  class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Blog-2</h5>
                  <p class="card-text"> As I write this, I am thinking about how many people in this world...</p>
                  <a href="blog2.html" class="btn btn-primary">Read more...</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12 pb-2">
              <div class="card">
                <img
                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJnLxfn_kWmL_IFfkFIG4fSBxLM7RTJMxRJQ&usqp=CAU"
                  class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Blog-3</h5>
                  <p class="card-text">Hey guys, first off I wanted to say I am encouraged...</p>
                  <a href="blog3.html" class="btn btn-primary">Read more...</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-6 col-xs-12 pb-2">
              <div class="card">
                <img
                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJnLxfn_kWmL_IFfkFIG4fSBxLM7RTJMxRJQ&usqp=CAU"
                  class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Blog-4</h5>
                  <p class="card-text">As we all know, 2020 did not go the way we planned. A worldwide pandemic...</p>
                  <a href="blog4.html" class="btn btn-primary">Read more...</a>
                </div>
              </div>
            </div>
              </div>
            </div>
              </div>
            </div>
              </div>
            </div>
              </div>
            </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="text-muted py-5">
      <div class="container">
        <p class="float-end mb-1">
          <a href="#">Back to top</a>
        </p>
        <p class="mb-1">Blog example is &copy; Bootstrap, but please download and customize it for yourself!</p>
        <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a
            href="https://getbootstrap.com/docs/5.0/getting-started/introduction/" target="_blank">getting started
            guide</a>.</p>
      </div>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
      crossorigin="anonymous"></script>

  </body>

  </html>