bootstrap-m1-01/index.html at main · gravity-coding/bootstrap-m1-01 · 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 name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <nav class="navbar navbar-expanded-lg navbar-dark bg-dark">
      <div class="container">
        <a href="#" class="navbar-brand">Bootstrap Site</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">About</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Service</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Hero Section -->

    <section class="bg-light text-dark text-center py-5" id="home">
      <div class="container">
        <h1 class="display-1">Welcome to My Beginner Website of Bootstrap</h1>
        <p class="lead">
          This is a simple website of Bootstrap by learning begginers things.
        </p>
        <a href="#" class="btn btn-primary btn-lg mt-3">Learn More</a>
      </div>
    </section>

    <!-- About Section -->

    <section class="py-5" id="about">
      <div class="container">
        <h2 class="text-center mb-4">About Us</h2>
        <p class="text-center lead">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet velit
          iste incidunt, necessitatibus corrupti ratione voluptatem itaque
          excepturi eveniet. Eligendi est mollitia quisquam corporis et. Lorem,
          ipsum dolor sit amet consectetur adipisicing elit. Cum dicta quaerat
          eos optio minus itaque voluptates sunt porro distinctio eius eum
          quisquam omnis exercitationem sint expedita, ut nulla quasi amet?
        </p>
      </div>
    </section>

    <!-- Services -->
    <section class="bg-dark py-5" id="services">
      <div class="container">
        <h2 class="text-light text-center">Our Services</h2>
        <div class="row text-center">
          <div class="col-md-4">
            <div class="card shadow-sm p-3">
              <h5>Web Design</h5>
              <p>Clean and responsive website design using bootstrap.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card shadow-sm p-3">
              <h5>Web Design</h5>
              <p>Clean and responsive website design using bootstrap.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card shadow-sm p-3">
              <h5>Web Design</h5>
              <p>Clean and responsive website design using bootstrap.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact -->

    <section class="py-5" id="contact">
        <div class="container">
            <h2 class="text-center mb-4">Contact Us</h2>
            <form class="w-50 mx-auto">
                <div class="mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control" placeholder="Enter your name">
                </div>
                <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" placeholder="Enter your email">
                </div>
                <div class="mb-3">
                    <label class="form-label">Message</label>
                    <textarea class="form-control" placeholder="Enter your message"></textarea>
                </div>
                <button class="btn btn-primary w-100">Send</button>
            </form>
        </div>
    </section>


    <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>