commit 9f3619d6f4104f58bd1bad9c9fabce8e73fa5cce Author: nathan Date: Tue Apr 5 19:53:01 2022 +0100 Basic stuff diff --git a/clipboard.js b/clipboard.js new file mode 100755 index 0000000..ad0de6c --- /dev/null +++ b/clipboard.js @@ -0,0 +1,23 @@ +function copyToClipboard(elementId) { + + /* Get the text field */ + var copyText = document.getElementById(elementId); + + /* Select the text field */ + copyText = copyText.textContent; + + /* Copy the text inside the text field */ + navigator.clipboard.writeText(copyText); + + var tooltip = document.getElementById("myTooltip"); + tooltip.innerHTML = "Copied"; + +} + +function resetCopy() { + + var tooltip = document.getElementById("myTooltip"); + tooltip.innerHTML = "Copy to clipboard"; + +} + diff --git a/discord.png b/discord.png new file mode 100755 index 0000000..6cd0e70 Binary files /dev/null and b/discord.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..6cfb29b --- /dev/null +++ b/index.html @@ -0,0 +1,106 @@ + + + + + + aNetwork + + + + + + + + + + +
+
+ + +
+
+ +
+
+ +
+
+

Want more servers?

+

+ Let the secretaries know over in aNetwork Discord's #moar-servers channel. If there's enough want, we'll set it up. +

+ Join Discord +
+ + +
+ +
+ +

Discord

+

+ We are a toxic community +

+ Join +
+ + +
+ +

MC

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis. +

+

+ IP: + minecraft.anetwork.uk + Copy to clipboard +

+

Map: mcmap.anetwork.uk

+
+ +
+ +
+
+ +

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibu

+
+
+ +
+
+

YEEE HAAAWWW

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.

+
+
+ + +
+ + + + diff --git a/main.css b/main.css new file mode 100755 index 0000000..1cfccb9 --- /dev/null +++ b/main.css @@ -0,0 +1,185 @@ +/* + 320, 375, 425, 768, 1024, 1440, 2560 +*/ +html{ + box-sizing: border-box; + color: #1A1A1D; +} +body{ + margin: 0; +} +*, *::before, *::after{ + box-sizing: inherit; +} +img{ + max-width: 100%; + height: auto; +} +.layout-wrapper{ + margin: 0 auto; + width: 100%; + max-width: 1024px; + padding: 24px; +} +header{ + background-color: #C2CAD0; +} +header .layout-wrapper{ + display: flex; +} +.logo{ + flex: 1 0 64px; +} +.logo, nav{ + display: inline-block; +} +.home-servers{ + display: grid; + margin: 0 auto; + gap: 20px; + width: 100%; + max-width: 1024px; + +} +.home-server{ + text-align: center; + min-height: 200px; + background-color: #6BA8D7; + border-radius: 24px; + padding: 24px; +} +.home-server .button{ + margin-top: 16px; + display: inline-block; +} +.home-server-uno{ + text-align: center; + + display: flex; + row-gap: 24px; + column-gap: 12px; + flex-wrap: wrap; +} +.home-server-uno img{ + width: 100%; + max-width: 224px; + height: auto; +} +.home-server--minecraft{ + background-color: lightgreen; + color: green; +} +.home-server--discord{ + background-color: mediumpurple; + color: blueviolet; +} +.home-server .heading{ + font-size: 1.875rem; + margin: 0.5rem; + font-weight: bold; +} +.home-server--minecraft .heading{ + color: darkgreen; +} +.home-server--discord .heading{ + color: purple; +} +.centre-image{ + display: block; + margin-left: auto; + margin-right: auto; +} +.button{ + padding: 12px; + border-radius: 12px; + color: black; + background-color: lightblue; +} + +.clipboard{ + color: black; + cursor: pointer; +} +.clipboard:hover{ + cursor: pointer; +} + +.tooltipped { + position: relative; +} + +.tooltipped .tooltiptext { + visibility: hidden; + width: 100%; + max-width: 200px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 12px; + position: absolute; + z-index: 1; + bottom: 150%; + left: 50%; + margin-left: -75px; + transition: opacity 0.3s; +} + +.tooltipped .tooltiptext::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +.tooltipped:hover .tooltiptext { + visibility: visible; +} + +.moar{ + background-color: #97CAEF; +} +footer{ + background-color: #1A1A1D; + color: white; +} +.inline-list{ + margin: 0; + padding: 0; +} +.inline-list li{ + display: inline-block; + list-style-type: none; +} +.inline-list li a{ + text-decoration: none; +} +.content{ + font-size: 16px; +} + +@media (min-width: 375px){ + .home-servers{ + grid-template-columns: repeat(auto-fill, 1fr); + } + .home-server-uno div{ + flex: 1 0 200px; + } +} +@media (min-width: 768px){ + .home-servers{ + grid-template-columns: repeat(auto-fill, minmax(312px, 1fr)); + } + .home-server-uno{ + /* Use two grid spaces on tablet+ */ + grid-column-start: 1; + grid-column-end: 3; + } + .home-server-uno div{ + text-align: left; + } +} diff --git a/mc.png b/mc.png new file mode 100755 index 0000000..f286dc7 Binary files /dev/null and b/mc.png differ diff --git a/moo-cow.gif b/moo-cow.gif new file mode 100755 index 0000000..75c91ac Binary files /dev/null and b/moo-cow.gif differ diff --git a/phone.png b/phone.png new file mode 100755 index 0000000..4ee430a Binary files /dev/null and b/phone.png differ