-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
65 lines (65 loc) · 3.93 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
<!DOCTYPE html>
<html>
<head>
<title>Holotypic Occlupanids</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="O-favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--setting the viewport to make your website look good on all devices-->
</head>
<body>
<!--banner at the top of the website-->
<div style="background-color: #2c5d96; padding: 5px;">
<h3 style="text-align: center;"><i>Wow, so cool!</i></h3>
</div>
<!--Header of the website-->
<header class="header">
<div class="headertitle">
<h1>Occlupanids</h1>
<p>Bread clips with a <b><i>fancy</i></b> name</p>
</div>
</header>
<nav>
<a href="https://horg.com/horg/">Horg.com</a>
<a href="https://discord.gg/Uqdm8P8zJ4">Discord</a>
<a href="https://www.reddit.com/r/occlupanids/">Reddit</a>
</nav>
<!--the flexable grid content contains a row with two columns of info-->
<!--The side section is 30% if the width, the main is 70%-->
<!--This will change to one column if the user is on a small device-->
<article>
<div class="side">
<h2>Horg Website</h2>
<div class="imgdiv">
<img src="Pushpin.png" alt="Pin" class="pushpin" style="margin-left: 10%;">
<img src="Horg.png" alt="screenshot of Horg.com" class="img" style="width: 100%;">
</div>
<div class="sidetext">
<img src="Pushpin.png" alt="Pin" class="pushpin" style="margin-left: 35%;">
<h4>Horg stands for: Holotypic Occlupanid Research Group</h4>
<p>This site contains several years of research in the classification of occlupanids. These small objects are everywhere, dotting supermarket aisles and sidewalks with an impressive array of form and color. The Holotypic Occlupanid Research Group has taken on the mantle of classifying this most common, yet most puzzling, member of phylum Plasticae.</p>
</div>
</div>
<div class="main">
<h2>What are Occlupanids?</h2>
<h3>Title description: Jan, 25, 2010</h3>
<div style="display: inline;">
<img src="breadtags.jpg" alt="Occlupanids" style="width: 20%;">
<p><b>Occlupanids</b> are generally found as parasitoids on bagged pastries in supermarkets, hardware stores, and other large commercial establishments. Their fascinating and complex life cycle is unfortunately severely under-researched. What is known is that they take nourishment from the plastic sacs that surround the bagged product, not the product itself, as was previously thought. Notable exceptions to this habit are those living off rubber bands and on analog watch hands.In most species, they often situate themselves toward the center of the plastic bag, holding in the contents. This leads to speculation that the relationship may be more symbiotic than purely parasitic.</p>
<p>Their stunning diversity and mysterious habits have entranced many a respectable scientist into studying, collecting, and cataloging specimens late into the night.</p>
<p>For those of you who do not consume sliced bread, occlupanids do not form an important part of your life. For the rest of the world, These small objects are everywhere, dotting supermarket aisles and sidewalks with an impressive array of form and color.</p>
</div>
<p>occlupanids can include:</p>
<ul>
<li>breadtags</li>
<li>thats it</li>
</ul>
</div>
</article>
<div class="footer">
<!--footer at the bottom of the page-->
<h2>contact info: you dont get any</h2>
<p>copyright ©(there is no copyright on this website)</p>
</div>
</body>
</html>