gharsh24.github.io/index.html at master · gharsh24/gharsh24.github.io · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!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>Pawpal</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/public/css/styles.css">
    <script src="https://kit.fontawesome.com/8d896b96c5.js" crossorigin="anonymous"></script>
    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-dark"  >
        <div class="container-fluid" style="padding-left: 2px ;padding-right: 2px;padding-bottom: 10px;padding-top: 10px;">
        <a class="navbar-brand" href="#"> <img src="images/paw.jpeg" alt="" class="navbar-img">PAWPAL</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <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 class="nav-link active" aria-current="page" href="#">HOME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="#">NEWS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active">FIND SHELTERS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="/adopt">ADOPT A PET</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  <section class="title">
    <div class="container">
      <h1>Let them know someone cares</h1><br>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea dolores earum maxime et temporibus nisi quam animi
        quidem, laboriosam, qui sed delectus veniam esse similique numquam cumque? Ratione harum ipsa reiciendis quia.
        Doloremque vitae saepe dignissimos, consectetur necessitatibus eos ipsam. Perspiciatis animi, numquam qui velit
        inventore ratione facilis reprehenderit, itaque consequuntur, sint beatae aut. Sunt nulla aperiam voluptatem
        harum</p>

      <button type="button" class="btn btn-lg btn btn-dark ">Join now</button>
      <button type="button" class="btn btn-lg btn-light">Learn more</button>
    </div>
  </section>


  <section class="endangered">
    <div class="container ">
      <h1 style="color: #EF9A53;">Endangered species</h1>
      <div class="row">
        <div class="col-6">
          <img class="graph" src="images/end_survey.jpeg" alt="">
        </div>
        <div class="col-6 section-content">
          <h3>We need to protect them</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos tempora atque aliquam a culpa qui delectus at
            iste officia rem fugit sit enim nam est cum laudantium, accusantium eius veniam reprehenderit eveniet odio
            nobis. Praesentium dignissimos optio odio blanditiis atque similique, sapiente ullam quam fugiat culpa
            aspernatur eligendi! Consequuntur, deserunt!
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- news -->

  <section class="news">

    <h2 class="heading">News</h2>
    <section id="testimonials">
      <div id="Testimonials-carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner" style="padding:20px 150px;">
          <div class="carousel-item ">
            <h3 class="testimonial-text">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae autem tenetur deleniti rerum impedit
              nostrum adipisci nihil tempore neque amet inventore enim sunt illo suscipit quo similique hic, repellendus
              maxime asperiores, dolores consequuntur expedita animi commodi. Beatae labore rerum velit.
            </h3>
          </div>
          <div class="carousel-item active">
            <h3 class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae autem
              tenetur deleniti rerum impedit nostrum adipisci nihil tempore neque amet inventore enim sunt illo suscipit
              quo similique hic, repellendus maxime asperiores, dolores consequuntur expedita animi commodi. Beatae
              labore rerum velit.</h3>

            <em>Beverly, Illinois</em>
          </div>

        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#Testimonials-carousel"
          data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#Testimonials-carousel"
          data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>


  </section>

  <section class="community">
    <div class="container" style="text-align: left;">

      <div class="row">
        <div class="col-6">
          <h1 class="comm-heading">Join our community</h1>
        </div>
        <div class="col-6">
          <form action="/" method="post">
            <!-- <div class="mb-3"></div> -->
            <label class="form-label">First Name</label>
            <input type="text" name="fname" class="form-control">
            <label class="form-label">Last Name</label>
            <input type="text" class="form-control" name="lname">
            <label class="form-label">Email address</label>
            <input type="email" name='email' class="form-control" aria-describedby="emailHelp" >

            <!-- <div class="mb-3"></div> -->
            <button type="submit" class="btn btn-primary">Join</button>
          </form>
        </div>
      </div>
    </div>
  </section>

<footer class="footer">
    <h2 class='heading'>Follow us on</h2>
    <br>
    <i class="fa-brands fa-light fa-youtube fa-2x icon" ></i>

    <i class="fa-brands fa-light fa-twitter fa-2x icon" ></i>

    <i class="fa-brands fa-light fa-linkedin fa-2x icon" ></i>
    <i class="fa-brands fa-light fa-facebook fa-2x icon" ></i>
    <i class="fa-brands fa-light fa-instagram fa-2x icon" ></i>
</footer>

</body>
</html>