diff options
| author | Oxbian <oxbian@mailbox.org> | 2024-10-13 14:21:34 -0400 |
|---|---|---|
| committer | Oxbian <oxbian@mailbox.org> | 2024-10-13 14:21:34 -0400 |
| commit | 157468b84553c47d0f5ba312d815ea7195b0d6b5 (patch) | |
| tree | 2e367f441239f61f53307855d96e9f40b02e95ac /HTML | |
| parent | 633bf74a3ecb66760010ce8b958356523bd75a4b (diff) | |
| download | web-template-157468b84553c47d0f5ba312d815ea7195b0d6b5.tar.gz web-template-157468b84553c47d0f5ba312d815ea7195b0d6b5.zip | |
feat: components (buttons, inputfields, dropdowns, quotes / codes)
Diffstat (limited to 'HTML')
| -rw-r--r-- | HTML/buttons.html | 34 | ||||
| -rw-r--r-- | HTML/dropdowns.html | 38 | ||||
| -rw-r--r-- | HTML/inputfields.html | 65 | ||||
| -rw-r--r-- | HTML/quotes-code.html | 47 |
4 files changed, 184 insertions, 0 deletions
diff --git a/HTML/buttons.html b/HTML/buttons.html new file mode 100644 index 0000000..d2aebf9 --- /dev/null +++ b/HTML/buttons.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <!-- Metadata --> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- CSS & Atom --> + <link rel="stylesheet" href="../CSS/default.css"> + <link rel="stylesheet" href="../CSS/button.css"> + + <title>Button</title> +</head> +<body> + <div style="margin: 5px"> + <a class="button">Default a button</a> + <button class="button">Default button</button> + </div> + + <div style="margin: 5px"> + <a class="button-reversed">Reversed a button</a> + <button class="button-reversed">Reversed button</button> + </div> + + <div style="margin: 5px"> + <a class="link">Link</a> + </div> + + <div style="margin: 5px"> + <button class="button" disabled>Disabled default button</button> + <button class="button-reversed" disabled>Disabled reversed button</button> + </div> +</body> +</html> diff --git a/HTML/dropdowns.html b/HTML/dropdowns.html new file mode 100644 index 0000000..6c921cc --- /dev/null +++ b/HTML/dropdowns.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <!-- Metadata --> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- CSS & Atom --> + <link rel="stylesheet" href="../CSS/default.css"> + <link rel="stylesheet" href="../CSS/dropdown.css"> + + <title>Dropdown</title> +</head> +<body> + <div style="margin: 5px"> + <select name="cars" id="cars"> + <option value="volvo">Volvo</option> + <option value="saab">Saab</option> + <option value="opel">Opel</option> + <option value="audi">Audi</option> + </select> + </div> + + + <div style="margin: 5px"> + <select name="cars" id="cars"> + <optgroup label="Swedish Cars"> + <option value="volvo">Volvo</option> + <option value="saab">Saab</option> + </optgroup> + <optgroup label="German Cars"> + <option value="mercedes">Mercedes</option> + <option value="audi">Audi</option> + </optgroup> + </select> + </div> +</body> +</html> diff --git a/HTML/inputfields.html b/HTML/inputfields.html new file mode 100644 index 0000000..c2263ae --- /dev/null +++ b/HTML/inputfields.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <!-- Metadata --> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- CSS & Atom --> + <link rel="stylesheet" href="../CSS/default.css"> + <link rel="stylesheet" href="../CSS/inputfield.css"> + + <title>Inputfield</title> +</head> +<body> + <div style="margin: 5px"> + <input type="text" id="username"> + </div> + + <div style="margin: 5px"> + <input type="checkbox"> + </div> + + <div style="margin: 5px"> + <input type="color"> + </div> + + <div style="margin: 5px"> + <input type="date"> + </div> + + <div style="margin: 5px"> + <input type="file"> + </div> + + <div style="margin: 5px"> + <input type="radio"> + </div> + + <div style="margin: 5px"> + <input type="range"> + </div> + + <div style="margin: 5px"> + <textarea id="text-zone" rows="4" cols="50"> + Text zone, text area... + </textarea> + </div> + + <div style="margin: 5px"> + <input list="browsers" name="browser" id="browser" type="text"> + + <datalist id="browsers"> + <option value="Edge"> + <option value="Firefox"> + <option value="Chrome"> + <option value="Opera"> + <option value="Safari"> + </datalist> + </div> + + <div style="margin: 5px"> + <input type="submit" value="Submit"> + </div> +</body> +</html> diff --git a/HTML/quotes-code.html b/HTML/quotes-code.html new file mode 100644 index 0000000..355f1c9 --- /dev/null +++ b/HTML/quotes-code.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <!-- Metadata --> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <!-- CSS & Atom --> + <link rel="stylesheet" href="../CSS/default.css"> + <link rel="stylesheet" href="../CSS/quote-code.css"> + + <title>Quotes and code</title> +</head> +<body> + <div style="margin: 5px"> + <code>#include <stdio.h> + int main(void) { + printf("Hello world !"); + } + </code> + + </div> + + <div style="margin: 5px"> + <pre> +#include <stdio.h> + +int main(void) { + printf("Hello world !"); +} + </pre> + </div> + + <div style="margin: 5px"> + <blockquote cite="http://www.worldwildlife.org/who/index.html"> + For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. + </blockquote> + </div> + + <div style="margin: 5px"> + <details> + <summary>Epcot Center</summary> + <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> + </details> + </div> +</body> +</html> |