-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
174 lines (138 loc) · 6.75 KB
/
index.html
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!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">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<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=Pacifico&family=Quicksand:wght@300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>Home</title>
</head>
<body class="index">
<!-- BEGIN HEADER -->
<header>
<div class="rounded-3">
<div id="jumbotron" class="container-fluid p-3 p-lg-5 row">
<div class="col text-sm-start text-center">
<img class="logo-lg" src="assets/logo-maximum-yellow-red.png" alt="logo">
</div>
<div class="col-12 col-sm-5 col-md-6 col-lg-7 col-xl-8 pt-sm-5">
<!--<h1 class="display-6 fw-bold">Where friends are found & families are made</h1>-->
<p class="fs-4 text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam nihil at quaerat accusamus sunt vero ab aperiam ut, asperiores beatae..</p>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<img src="/assets/logo-transparent.png" class="float-left" alt="TransparentLogo" width = 60px>
<a class="navbar-brand" href="index.html"><h1>Porto Animal Shelter</h1></a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
<a class="nav-link" href="adoption.html">Adoption</a>
<a class="nav-link" href="resources.html">Resources & Services</a>
<a class="nav-link" href="lostfound.html">Lost & Found</a>
</div>
</div>
</div>
</nav>
</header>
<!-- END HEADER -->
<!-- BEGIN HERO -->
<div class="px-4 pt-5 pb-0 my-5 text-center">
<h1 class="display-4 fw-bold">Where Friends Are Found</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi doloremque nemo quisquam aspernatur officia. Unde eveniet perspiciatis velit aut dolore sapiente esse, fugit doloribus vero itaque voluptatem ullam autem.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
<a href="adoption.html" class="btn btn-lg px-4 me-sm-3">Adoptions</a>
<a href="lostfound.html" class="btn btn-lg px-4 me-sm-3">Lost & Found</a>
</div>
</div>
<div class="overflow-hidden">
</div>
</div>
<!-- END HERO -->
<!--BEGIN OVERLAY CARDS-->
<div class="container w-75">
<div class="row g-4">
<div class="card border-0 h-100 text-white col-12 col-lg-6">
<img src="assets/index-1.jpg" class="card-img" aria-hidden="true">
<div class="card-img-overlay text-wrap">
<h5 class="card-title">Did you know?</h5>
<p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est, placeat.</p>
</div>
</div>
<div class="card border-0 h-100 text-white col-12 col-lg-6">
<img src="assets/index-2.jpg" class="card-img" aria-hidden="true">
<div class="card-img-overlay">
<h5 class="card-title">Did you know?</h5>
<p class="card-text">Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="card border-0 h-100 text-white col-12 col-lg-6">
<img src="assets/index-3.jpg" class="card-img" aria-hidden="true">
<div class="card-img-overlay">
<h5 class="card-title">Did you know?</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt voluptates officia aperiam?
</p>
</div>
</div>
<div class="card border-0 h-100 text-white col-12 col-lg-6">
<img src="assets/index-4.jpg" class="card-img" aria-hidden="true">
<div class="card-img-overlay text-wrap">
<h5 class="card-title">Did you know?</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt voluptates officia aperiam?
</p>
</div>
</div>
</div>
</div>
<!--END OVERLAY CARDS-->
<!-- BEGIN FOOTER -->
<footer>
<!--MAP & CONTACT-->
<div class="container-fluid p-3 mt-5 m-0">
<div class="row">
<div class="col col-sm-4">
<img class="w-100 p-3" src="assets/map.PNG" alt="location map">
</div>
<div class="col pt-2">
<h2>Porto Animal Shelter</h2>
<address>
123 Main St <br>
Anywhere, USA 12345 <br>
<a href="" type="email">porto@email.com</a><br>
<a href="" type="tel">1-234-5678</a>
</address>
</div>
</div>
</div>
<!--SOCIAL NAV-->
<div id="social-nav" class="container-fluid m-0">
<div class="d-flex flex-wrap justify-content-between align-items-center px-0 py-3 mb-0 my-4">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-white lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
</a>
<span class="text-white">© 2022 Company, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="https://twitter.com/" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li class="ms-3"><a class="text-muted" href="https://www.instagram.com/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li class="ms-3"><a class="text-muted" href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- SCRIPTS -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>