Paws/index.html at main · Monia1801/Paws · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paws Home</title>
    <link rel="stylesheet" href="styles/index.css">
</head>
<body>
  <div class="navbar">
    <div class="left-navbar">
      <img src="./images/logo.jpg" id="logo">
      <h1>Paws</h1>
    </div>
    <div class="right-navbar">
      <button id="home">Home</button>
      <button id="how-it-works">How It Works</button>
      <button id="testimonials">Testimonials</button>
      <button id="login-btn">Get Started</button>
    </div>
  </div>

  <div class="zeroeth-scroll">
    <div class="zeroeth-scroll-container">
      <div class="left-half">

        <h1 style="color:#4E3629">Every Paw</h1>
        <h1 style="color:#F29133">Deserves Love</h1>

        <h3>Connect with loving pet owners. Adopt a new family member, find temporary care, or give your pet a loving new home.</h3>

        <div class="left-half-btns">
          <button id="find-a-pet">Find a pet</button>
          <button id="post-your-pet">Post your pet</button>
        </div>
      </div>
      <div class="right-half">

        <img src="./images/home.png">

      </div>
    </div>
  </div>

  <div class="about">
    <div class="about-container">
      <div class="about-container-headings">
        <h1>How this works</h1>
        <h3>Connecting pet owners with loving adopters and caretakers has never been easier.</h3>
      </div>
      <div class="about-container-cards">

        <div class="card card1">
          <div class="circular-icon">1</div>
          <h2>Post your pet</h2>
          <p>Upload photos and details of your pet. Whether for adoption or temporary car, reach thousands of pet lovers.</p>
        </div>

        <div class="card card2">
          <div class="circular-icon">2</div>
          <h2>Request to Connect</h2>
          <p>Interested in a pet? Send a connection request. The owner reviews your profile and decides to connect.</p>
        </div>

        <div class="card card3">
          <div class="circular-icon">3</div>
          <h2>Safe Communication</h2>
          <p>Once connected, share contact details or chat directly through our secure platform.</p>
        </div>

        <div class="card card4">
          <div class="circular-icon">4</div>
          <h2>Temporary Care</h2>
          <p>Going on vacation? Find trusted caretakers who'll love your pet while you're away.</p>
        </div>

      </div>
    </div>
  </div>

  <div class="testimonials">

    <div class="testimonials-container">

      <div class="testimonials-container-headings">
        <h1>Happy Tails & Happy Hearts</h1>
        <h3>See what our community has to say about their Paws experience</h3>
      </div>

      <div class="testimonials-container-cards">
        <div class="testimonialCard card1">
          <div class="stars">★★★★★</div>
          <p>"Found my best friend through Paws! The connection process was so smooth, and the previous owner was wonderful. Max has brought so much joy to our family."</p>
          <div class="profile-section">
            <div class="circular-icon profile-sj">SJ</div>
            <div class="profile-info">
              <h4>Sarah Johnson</h4>
              <span>Pet Adopter</span>
            </div>
          </div>
        </div>

        <div class="testimonialCard card2">
          <div class="stars">★★★★★</div>
          <p>"I love being a temporary caretaker! It's perfect for my lifestyle - I get to spend time with adorable pets while helping owners who need to travel."</p>
          <div class="profile-section">
            <div class="circular-icon profile-sj">SJ</div>
            <div class="profile-info">
              <h4>Sarah Johnson</h4>
              <span>Pet Adopter</span>
            </div>
          </div>
        </div>

        <div class="testimonialCard card3">
          <div class="stars">★★★★★</div>
          <p>"When I had to travel for work, Paws connected me with the sweetest caretaker for my cat Luna. She was in amazing hands!"</p>
          <div class="profile-section">
            <div class="circular-icon profile-sj">SJ</div>
            <div class="profile-info">
              <h4>Sarah Johnson</h4>
              <span>Pet Adopter</span>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>
  <script src="scripts/index.js"></script>
</body>
</html>