Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

West Midlands 2 - Cecilia Baggini - HTML/CSS - Week 1 #1

Closed
cbaggini wants to merge 6 commits into from
Closed

West Midlands 2 - Cecilia Baggini - HTML/CSS - Week 1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
931022c
Created HTML structure and content
cbaggini Nov 10, 2020
94bb8fe
Styled the page
cbaggini Nov 10, 2020
21ebf16
Merge branch 'master' of https://github.com/CodeYourFuture/HTML-CSS-C…
cbaggini Nov 10, 2020
57be525
Modified navbar margins
cbaggini Nov 10, 2020
7d54b16
changed footer color
cbaggini Nov 10, 2020
3d23eac
Updated navbar margin
cbaggini Nov 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,108 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/

/** General styles */

html,
body {
margin: 0;
padding: 0;
}

main,
header,
footer {
display: flex;
text-align: center;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}

@media screen and (min-width: 800px) {
main {
width: 800px;
margin: auto;
}
}

figure {
max-width: 750px;
}

img {
width: 100%;
margin: auto;
}

article {
border: 2px solid #e6e600;
border-radius: 25px;
padding: 5%;
padding-top: 0%;
margin: 3%;
background-color: #ffffcc;
}

.links:link {
color: #1f004d;
}

.links:visited {
color: #808000;
}

.links:hover {
color: #8533ff;
}
/** Navigation styles */

nav {
justify-self: stretch;
background-color: darkblue;
flex-direction: row;
justify-content: space-between;
}

.nav-link {
text-decoration: none;
color: white;
font-weight: bold;
font-size: 120%;
}

nav li {
display: inline-block;
margin: 1%;
}

/** Header styles */

header div:last-child {
background-color: #99e6e6;
}

/** Article styles */
section article:first-child {
font-size: 130%;
border: 5px solid #800060;
}

h3 {
padding: 3%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #800060;
}

figcaption {
font-style: italic;
font-size: 90%;
}

/** Footer styles */

footer {
background-color: #99ff99;
font-size: small;
padding: 1%;
}
83 changes: 82 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>Aquatic macroinvertebrates</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -18,5 +18,86 @@
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<nav>
<ul>
<li><a class="nav-link" href="#what">What are aquatic macroinvertebrates?</a></li>
<li>
<a class="nav-link" href="#why">Why are they important?</a> </li>
<li>
<a class="nav-link" href="#id">How to identify them</a>
</li>
</ul>
</nav>
<div>
<h1>Aquatic macroinvertebrates</h1>
<p>
A short introduction to the world of aquatic macroinvertebrates.
</p>
</div>
</header>
<main>
<section>
<article id="what">
<h3>What are aquatic macroinvertebrates?</h3>
<figure>
<img alt="The River Teme close to Burrington Bridge - geograph.org.uk - 1438724"
src="https://upload.wikimedia.org/wikipedia/commons/1/1d/The_River_Teme_close_to_Burrington_Bridge_-_geograph.org.uk_-_1438724.jpg">
<figcaption>River Teme near Burrington Bridge.</figcaption>
</figure>
<p>
Aquatic macroinvertebrates are small organisms that have no internal skeletal system and live part or all of their lives
in water. They are ubiquitous in freshwater ecosystems around the world and are found in both lotic systems—systems of
flowing water, such as streams, rivers and springs, as well as in lentic systems—systems with standing or still waters,
such as lakes and ponds.
</p>
<p>
They comprise a
rich and diverse group of organisms that includes insect larvae, worms, snails, crayfish, and other crustaceans, such as
clam shrimp, fairy shrimp, and water fleas. They also include many invertebrate species that are typically associated
with terrestrial habitats, but spend some portion of their life as aquatic organisms (for example butterflies and moths
in the family Pyralidae).
</p>
<a class="links" target="_blank" href="https://www.nps.gov/articles/aquatic-macroinvertebrates-introduction.htm">Learn more</a>
</article>
<article id="why">
<h3>Why are they important?</h3>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Stonefly_nymph_%285787610055%29.png" alt="a stonefly">
<figcaption>An example of aquatic macroinvertebrate: a stonefly larva.</figcaption>
</figure>
<p>
Because different types of macroinvertebrates tolerate different stream conditions and levels of pollution, their
presence or absence is used to indicate clean or polluted water. For example, most larvae of caddisflies, mayflies, and
stoneflies cannot survive in polluted water so streams with these bugs are assumed to have good water quality. The
absence of these organisms in a water body, however, does not necessarily indicate that the water quality is poor. Other
natural factors, such as temperature and flow, also come into play.
</p>
<a class="links" target="_blank" href="https://extension.usu.edu/waterquality/learnaboutsurfacewater/propertiesofwater/aquaticmacros">Learn more</a>
</article>
<article id="id">
<h3>How to identify them</h3>
<figure>
<img src="https://3jgs2o4a02n22u73bi2gnd3l-wpengine.netdna-ssl.com/wp-content/uploads/macro-key-cover-one-logo-border-560x421.jpg" alt="key front page">
</figure>
<p>
If you want to identify an aquatic macroinvertebrate you found in a stream, you can use this
<a class="links" target="_blank"
href="https://3jgs2o4a02n22u73bi2gnd3l-wpengine.netdna-ssl.com/wp-content/uploads/StroudWebsiteMacroKeyFNL.pdf">identification key</a>
from Stroud Water Research Center.
This key is an example of a dichotomous key — at each step you choose between two mutually exclusive statements about a
characteristic. The key starts with the choice between “jointed legs” and “no jointed legs.” After you make that choice
you move to the next pair of choices in the key. Follow the page reference (e.g. “Go to Slide 3”) to jump to the next
part of key. Continue until you arrive at an identification.
</p>
<p>
Another very good interactive key, although for North America, is at <a class="links" target="_blank" href="https://www.macroinvertebrates.org/">macroinvertebrates.org</a>
</p>
</article>
</section>
</main>
<footer>
Copyright for this content rests with the original authors (referenced in links).
</footer>
</body>
</html>