generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsocialisation.html
131 lines (129 loc) · 8.12 KB
/
socialisation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Better Puppers</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/2f377630da.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<!--bootstrap Navbar, button and collapse feature-->
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars" aria-hidden="true"></i></span><span>Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link" href="index.html"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="exercise.html"><i class="fas fa-paw" aria-hidden="true"></i> Exercise Guide</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="socialisation.html"><i class="fas fa-dog" aria-hidden="true"></i> Socialisation (The Four Keys)<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="feedingGuide.html"><i class="fas fa-bone" aria-hidden="true"></i> Feeding Guide </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contactUs.html"><i class="fas fa-check-double" aria-hidden="true"></i> Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container jumboBG">
<div class="row">
<div class="col-sm-12 inner-box">
<h3> Let's explore the four keys to successful socialisation. </h3>
</div>
</div>
</div>
<br>
<div class="container">
<p>Having a socialized pet means less stressful visits to the animal hospital, more pleasant trips to the dog park, and the ability to take your dog on walks
without worrying that they might snap at someone unexpectedly or begin chasing a child on a bicycle.</p>
<p>When your socialized dog faces unfamiliar people, dogs, and places without fear, they will be happier
and more confident throughout their life, making your job as a dog owner easier and more enjoyable.</p>
<p>Like everything worth doing, socialisation takes time, effort and a little bit of knowledge. The four keys are the foundation of approaching socialisation equipped to deal with set backs.</p>
</div>
<!--BOOSTRAP CARDS-->
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-2 offset-sm-0">
<div class="card">
<div class="card-body customBlue">
<h5 class="card-title">The one size fits all.</h5>
<div class="hideSocialCard" id="cardTextHideOne">
<p class="card-text">There is no one size fits all approach. Sorry, doesn't exist. Your puppers is as individual as you are.</p>
<br>
</div>
<small><button class="btn btn-outline-dark" id="cardTextHideButtonOne">Explore</button></small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body customOrange">
<h5 class="card-title">A level playing field.</h5>
<div class="hideSocialCard" id="cardTextHideTwo">
<p class="card-text">Meeting new friends should be on neutral ground (like a public park) and on equal terms (both on leads, no toys, nothing that promotes jealousy).</p>
<br>
</div>
<small><button class="btn btn-outline-dark" id="cardTextHideButtonTwo">Explore</button></small>
</div>
</div>
</div>
</div>
<br class="mediaQueryHide">
<div class="row">
<div class="col-md-4 offset-md-2 offset-sm-0">
<div class="card">
<div class="card-body customPurple">
<h5 class="card-title">Preparation.</h5>
<div class="hideSocialCard" id="cardTextHideThree">
<p class="card-text">Make sure your puppers is in the right mind frame for introductions. Not too full of energy or anxious about new surroudning.</p>
<br>
</div>
<small><button class="btn btn-outline-dark" id="cardTextHideButtonThree">Explore</button></small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body customGreen">
<h5 class="card-title">Know your puppers.</h5>
<div class="hideSocialCard" id="cardTextHideFour">
<p class="card-text">Some dogs are happy just being with you. Some dogs, for a host of reasons, are content with plodding alongside you. Others are too possessive of you, or too wary of new experiences.</p>
<br>
</div>
<small><button class="btn btn-outline-dark" id="cardTextHideButtonFour">Explore</button></small>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<p>As always, if there's something urgent we can help with feel free to nudge us directly or, there are tons of practical hints and tips in our monthly newsletter <a href="contactUs.html">here</a>.</p>
</div>
<!--FOOTER-->
<div class="container">
<footer>
<a class="footer-items" href="https://www.facebook.com" target="_blank" rel="noopener"><i class="fab fa-facebook-square" aria-hidden="true"></i><span>Facebook</span></a>
<a class="footer-items" href="https://www.twitter.com" target="_blank" rel="noopener"><i class="fab fa-twitter-square" aria-hidden="true"></i><span>Twitter</span></a>
<a class="footer-items" href="https://www.instagram.com" target="_blank" rel="noopener"><i class="fab fa-instagram" aria-hidden="true"></i><span>Instagram</span></a>
<a class="footer-items" href="https://www.dogactionwelfaregroup.ie/donate/" target="_blank" rel="noopener"><i class="fas fa-donate"></i><span>Donate</span></a>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="assets/script/script.js"></script>
</body>
</html>