selectivebreeding/index.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
<!DOCTYPE html>
<html>
  <head>
    <title>SELECTIVE BREEDING</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="./suzy.jpg" alt="Photo by Bella Ott" width="1500">
    <div class="w3-display-bottomleft w3-padding-large w3-padding-64">
      <h3 class="w3-text-white">The DAMAGE 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">DIVE DEEPER</h2>
      <p class="w3-center w3-white w3-text-black">
        Follow the links below to learn more about the history of selective breeding on the "Background" page, its negative health effects on dogs on
        the "Examples" page, or to donate to a local shelter on the "Solutions" page.
      </p>
      </div>

      <div class="w3-row-padding" style="margin:0 -16px">
        <div class="w3-third">
          <img src="./pexels-dominika-roseclay-2023384.jpg" alt="Photo by Dominika Roseclay" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Background</b></p>
            <p>Discover how selective breeding of dogs started out, evolved over time, and affects modern dog breeds.</p>
            <button class="w3-button w3-round w3-margin-bottom" style="background-color: #AC6244" onclick="location.href = './background.html'">LEARN MORE</button>
          </div>
        </div>
        <div class="w3-third">
          <img src="./pexels-anna-shvets-4587998.jpg" alt="Photo by Anna Shvets" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Examples</b></p>
            <p>Find how selective breeding has negatively affected your favorite breeds.</p>
            <button class="w3-button w3-round w3-margin-bottom" style="background-color: #AC6244" onclick="location.href = './examples.html'">LEARN MORE</button>
          </div>
        </div>
        <div class="w3-third">
          <img src="./pexels-mikhail-nilov-7474576.jpg" alt="Photo by Mikhail Nilov" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>Solutions</b></p>
            <p>Explore local shelters and rescues and donate to them today.</p>
            <button class="w3-button w3-round w3-margin-bottom" style="background-color: #AC6244" onclick="location.href = './resources.html'">LEARN MORE</button>
          </div>
        </div>
      </div>
    </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>