diff options
| author | s1n <[email protected]> | 2020-03-04 01:58:07 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-03-04 01:58:07 -0800 |
| commit | b1df5a6c1cd87016797a0582875ad6bd315010ff (patch) | |
| tree | cd3f6aadf7568819a70c7661f4d1d3ad63fe2d07 | |
| download | html-examples-b1df5a6c1cd87016797a0582875ad6bd315010ff.tar.xz html-examples-b1df5a6c1cd87016797a0582875ad6bd315010ff.zip | |
| -rw-r--r-- | css-gradient/css/main.css | 5 | ||||
| -rw-r--r-- | css-gradient/index.html | 16 | ||||
| -rw-r--r-- | download-test/README.md | 45 | ||||
| -rw-r--r-- | download-test/assets/downloads/Download Test.rar | bin | 0 -> 36122 bytes | |||
| -rw-r--r-- | download-test/index.html | 12 | ||||
| -rw-r--r-- | index.html | 16 | ||||
| -rw-r--r-- | made-with-love/css/main.css | 7 | ||||
| -rw-r--r-- | made-with-love/index.html | 15 | ||||
| -rw-r--r-- | scrolling-title/README.md | 7 | ||||
| -rw-r--r-- | scrolling-title/index.html | 30 | ||||
| -rw-r--r-- | scrolling-title/js/main.js | 12 |
11 files changed, 165 insertions, 0 deletions
diff --git a/css-gradient/css/main.css b/css-gradient/css/main.css new file mode 100644 index 0000000..894ddd2 --- /dev/null +++ b/css-gradient/css/main.css @@ -0,0 +1,5 @@ +body { + background-image: linear-gradient(to bottom right, #ff9eaa 0% 65%, #e860ff 95% 100%); + background-position: center; /* You can remove this, but atm it changes the colour to a blue-ish gradient. */ + background-attachment: fixed; +} diff --git a/css-gradient/index.html b/css-gradient/index.html new file mode 100644 index 0000000..0a1a917 --- /dev/null +++ b/css-gradient/index.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> + + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>s1nical - CSS Gradient</title> + <link rel="stylesheet" href="css/main.css"> + </head> + + <body> + + </body> + +</html> diff --git a/download-test/README.md b/download-test/README.md new file mode 100644 index 0000000..d9ab8a3 --- /dev/null +++ b/download-test/README.md @@ -0,0 +1,45 @@ +<!-- TABLE OF CONTENTS --> +## Table of Contents + +* [Usage](#usage) +* [License](#license) +* [Contact](#contact) + + + +<!-- USAGE EXAMPLES --> +## Usage + +This is the most basic method of creating a downloadable file, <a href="https://8cy.github.io/html-examples/download-test/">demo</a>. + +```html +<a href="/path/to/file/examplefile2.jpg" download>Link text</a> +``` +<br></br> +You can also **add text** into the `<a>` tag **to create a button.** + +```html +<a href="/path/to/file/examplefile2.jpg" download>Link text</a> +``` +<br></br> +Or you can **rename the downloadable file** using the `download=""` variable. + +```html +<a href="/path/to/file/examplefile2.jpg" download="August 31 2016 Sales Report">Download the report</a> +``` + + + +<!-- LICENSE --> +## License + +Distributed under the MIT License. See [`LICENSE`](./LICENSE) for more information. + + + +<!-- CONTACT --> +## Contact + +s1nical - [@9inny](https://twitter.com/9inny) - [email protected] + +Project Link: [https://github.com/8cy/html-examples/download-test](https://github.com/8cy/download-test) diff --git a/download-test/assets/downloads/Download Test.rar b/download-test/assets/downloads/Download Test.rar Binary files differnew file mode 100644 index 0000000..cba1231 --- /dev/null +++ b/download-test/assets/downloads/Download Test.rar diff --git a/download-test/index.html b/download-test/index.html new file mode 100644 index 0000000..ab2a32e --- /dev/null +++ b/download-test/index.html @@ -0,0 +1,12 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>s1nical - Download Test</title>
+</head>
+<body>
+ <a href="https://8cy.github.io/html-examples/download-test/assets/downloads/Download Test.rar" download></a>
+</body>
+</html>
diff --git a/index.html b/index.html new file mode 100644 index 0000000..54759b9 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>s1nical - HTML Examples</title> + </head> + <body> + <center style="word-wrap: break-word; white-space: pre-wrap;"> + <a href="https://8cy.github.io/html-examples/css-gradient/">CSS Gradient</a> + <a href="https://8cy.github.io/html-examples/download-test/">Download Test</a> + <a href="https://8cy.github.io/html-examples/made-with-love/">Made with Love</a> + <a href="https://8cy.github.io/html-examples/scrolling-title/">Scrolling Title</a> + </center> + </body> +</html> diff --git a/made-with-love/css/main.css b/made-with-love/css/main.css new file mode 100644 index 0000000..af26ded --- /dev/null +++ b/made-with-love/css/main.css @@ -0,0 +1,7 @@ +.footer{
+ position: fixed;
+ text-align: center;
+ bottom: 0px;
+ width: 100%;
+ left: 0%;
+}
\ No newline at end of file diff --git a/made-with-love/index.html b/made-with-love/index.html new file mode 100644 index 0000000..0693d41 --- /dev/null +++ b/made-with-love/index.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Made with Love</title>
+ <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+ <div class="footer"><link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />Made with <i class="icon ion-heart"></i> by <a href='https://twitter.com/9inny' target='_blank' rel='noopener noreferrer'>sin</a></div>
+
+</body>
+</html>
\ No newline at end of file diff --git a/scrolling-title/README.md b/scrolling-title/README.md new file mode 100644 index 0000000..4af7851 --- /dev/null +++ b/scrolling-title/README.md @@ -0,0 +1,7 @@ +# Scrolling Title
+ + +You can either choose to link the external Javascript to your index.html or you can include a Javascript `<script>` tag in the `<head>` or `<body>` + +*I chose to link the external Javascript but you can just comment tag it out and un-comment tag the `<script>` above it.* + diff --git a/scrolling-title/index.html b/scrolling-title/index.html new file mode 100644 index 0000000..22071bd --- /dev/null +++ b/scrolling-title/index.html @@ -0,0 +1,30 @@ +<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>s1nical - Scrolling Title</title>
+ <!--<script language="JavaScript">
+ var space = " ";
+ var speed = "60";
+ var pos = 0;
+ var msg = "// s1n.ical "; /*Enter the scrolling title as the msg variable's value.*/
+
+ function Scroll() {
+ document.title = msg.substring(pos, msg.length) + space + msg.substring(0, pos);
+ pos++;
+ if (pos > msg.length) pos = 0;
+ window.setTimeout("Scroll()", speed);
+ }
+ Scroll();
+ </script>-->
+ <script src="js/main.js"></script>
+ </head>
+
+ <body>
+
+ </body>
+
+</html>
\ No newline at end of file diff --git a/scrolling-title/js/main.js b/scrolling-title/js/main.js new file mode 100644 index 0000000..f2b20ac --- /dev/null +++ b/scrolling-title/js/main.js @@ -0,0 +1,12 @@ +var space = " ";
+var speed = "60";
+var pos = 0;
+var msg = "// s1n.ical "; /*Enter the scrolling title as the msg variable's value.*/
+
+function Scroll() {
+ document.title = msg.substring(pos, msg.length) + space + msg.substring(0, pos);
+ pos++;
+ if (pos > msg.length) pos = 0;
+ window.setTimeout("Scroll()", speed);
+}
+Scroll();
\ No newline at end of file |