selectivebreeding/examples.html at main · bellao314/selectivebreeding · 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 <!DOCTYPE html>
<html>
  <head>
    <title>EXAMPLES</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      html {
      scroll-behavior: smooth;
    }
    h1,h2,h3,h4,h5,h6 {font-family: "Roboto"}
    body {font-family: "Source Sans Pro"}
    </style>
  </head>
<body class="w3-light-white w3-margin">

<!-- Navigation bar with links -->
<div class="w3-bar w3-white w3-text-black">
  <!-- <h2 class="w3-left w3-tag w3-light-green w3-round">DOG BREEDING</h2> -->
  <a href="./index.html" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-left" style="margin-top:10px; background-color: #AC6244">HOME</a>
  <a href="./background.html" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-left" style="margin-top:10px; background-color: #AC6244">BACKGROUND</a>
  <a href="./examples.html" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-left" style="margin-top:10px; background-color: #AC6244">EXAMPLES</a>
  <a href="./resources.html" class="w3-hide-small w3-bar-item w3-button w3-mobile w3-medium w3-left" style="margin-top:10px; background-color: #AC6244">SOLUTIONS</a>
  <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-medium w3-hide-large" style="margin-top:10px;" onclick="myFunction()">&#9776;</a>
</div>

<div id="demo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-small">
  <a href="./index.html" class="w3-bar-item w3-button">HOME</a>
  <a href="./background.html" class="w3-bar-item w3-button">BACKGROUND</a>
  <a href="./examples.html" class="w3-bar-item w3-button">EXAMPLES</a>
  <a href="./resources.html" class="w3-bar-item w3-button">SOLUTIONS</a>
</div>

<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1600px">

  <!-- Image header -->
  <header class="w3-display-container w3-wide" style="padding-bottom:32px;" id="Home">
    <img class="w3-image" src="./sleepyGus.jpg" alt="Photo by Bella Ott" width="1500">
    <div class="w3-display-bottomleft w3-padding-large w3-padding-64">
      <h3 class="w3-text-white">EXAMPLES of</h3>
      <h1 class="w3-text-white w3-hide-small"><b>SELECTIVE BREEDING</b></h1>
    </div>
  </header>

<!-- Activities section -->
  <div class="w3-white" id="Activities">
    <div class="w3-container">
      <div class="w3-center w3-padding-32">
      <h2 class="w3-wide">COMMON SELECTIVELY BRED DOG BREEDS</h2>
      <p class="w3-left-align w3-white w3-text-black w3-center">
    All dog breeds we have today are a result of selective breeding. Unfortunately, many have suffered from genetic mutations and diseases
    because of the practice. Below are some examples of specific problems various breeds have developed over time from excessive inbreeding.
      </p>
      </div>

      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-third">
          <img class="w3-image" src="pexels-miguel-constantin-montes-2623968.jpg" alt="Photo by Miguel Constantin Montes">
          <h4>Shih Tzu</h4>
          <ul>
            <li><p>Proptosis ("eye popping")</p></li>
          </ul>
        </div>
        <div class="w3-third">
          <p></p>
        </div>
        <div class="w3-third">
          <img class="w3-image" src="pexels-rrrinna-2071555.jpg" alt="Photo by @rrrinna .">
          <h4>German Shepherd</h4>
          <ul>
            <li><p>Hip and elbow dysplasia</p></li>
          </ul>
        </div>
      </div>

      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-third">
          <p></p>
        </div>
        <div class="w3-third">
          <img class="w3-image" src="pexels-pixabay-162193.jpg" alt="Photo by Pixabay">
          <h4>King Charles Cavalier Spaniel</h4>
          <ul>
            <li><p>Headaches</p></li>
            <li><p>Cardiovascular issues</p></li>
            <li><p>Vision problems</p></li>
          </ul>
        </div>
        <div class="w3-third">
          <p></p>
        </div>
      </div>

      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-third">
          <img class="w3-image" src="pexels-thierry-rossier-16024347.jpg" alt="Photo by Thierry Rossier">
          <h4>Shar-pei</h4>
          <p>Due to excessive skin:</p>
          <ul>
            <li><p>Allergies</p></li>
            <li><p>Bacterial infections</p></li>
            <li><p>Eye irritations</p></li>
          </ul>
        </div>
        <div class="w3-third">
          <p></p>
        </div>
        <div class="w3-third">
          <img class="w3-image" src="pexels-craig-adderley-1503537.jpg" alt="Photo by Craig Adderley">
          <h4>Bulldog</h4>
          <ul>
            <li><p>Breathing problems</p></li>
            <li><p>Heart disease</p></li>
            <li><p>Inability to give birth naturally</p></li>
            <li><p>Skin and joint problems</p></li>
          </ul>
        </div>
      </div>

      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-third">
          <p></p>
        </div>
        <div class="w3-third">
          <img class="w3-image" src="pexels-dominika-roseclay-2679682.jpg" alt="Photo by Dominika Roseclay">
          <h4>Dachshund</h4>
          <ul>
            <li><p>Spinal issues (intervertebral disc disease, or IVDD)</p></li>
            <li><p>Learn more about IVDD and its effects <a class="w3-hover-text-light-green" href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7708201/">here</a>.</p></li>
          </ul>
        </div>
        <div class="w3-third">
          <p></p>
        </div>
      </div>
      <br><br>
      <div class="w3-center w3-padding-32">
        <h3 style="font-family:'Segoe UI',Arial,sans-serif;font-weight:400;margin:10px 0">For further reading:</h3>
        <p><a class="w3-hover-text-light-green" href="https://onlinelibrary.wiley.com/doi/full/10.1111/rda.13335">Ethics in animal breeding by Wenche Farstad</a></p>
        <p><a class="w3-hover-text-light-green" href="https://link.springer.com/article/10.1007/s10806-017-9673-8?fbclid=IwAR3p6KyTT7IleDRq03NJxAmflLAUqgsX3QT03al8slvdMQiYTqOK2dW-GzA%3Cbr%3E">The Pedigree Dog Breeding Debate in Ethics and Practice: Beyond Welfare Arguments by Bernice Bovenkerk and Hanneke J. Nijland</a></p>
        <p><a class="w3-hover-text-light-green" href="https://www.thelocal.no/20220222/norway-bans-breeding-of-bulldogs-and-cavaliers">Norway bans breeding of bulldogs and cavaliers by AFP</a></p>
      </div>
      <br><br>
    </div>
  </div>

  <!-- Footer. This section contains an ad for W3Schools Spaces. You can leave it to support us. -->
  <footer class="w3-container w3-center w3-margin-top" style="background-color: #AC6244">
    <p class="w3-small">This website was made with W3schools Spaces. Make your own free website today!</p>
    <a class="w3-button w3-round-xxlarge w3-small w3-white w3-margin-bottom" href="https://www.w3schools.com/spaces" target="_blank">Start now</a> <!-- End footer -->
  </footer>

<script>
function myFunction() {
  var x = document.getElementById("demo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html>