-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtextbox.html
128 lines (93 loc) · 6.23 KB
/
textbox.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en" class="normal green">
<head>
<meta charset="UTF-8">
<meta name="description" content="Textbox, urbo C/C++ simple basic web site theme." />
<meta name="author" content="Fatih Tatoğlu" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Turbo C Theme - Textbox</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link rel="canonical" href="https://blog.tatoglu.net/blog-theme-turboc" />
<link rel="home" href="https://blog.tatoglu.net/blog-theme-turboc" />
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/main.css">
<script src="node_modules/mustache/mustache.min.js"></script>
<script src="./js/main.js"></script>
<style>
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
textarea {
min-width: 250px;
}
</style>
</head>
<body>
<header>
<span class="site-name">Turbo C Theme - Textbox</span>
</header>
<nav id="navigation"></nav>
<main>
<article>
<header>
<h1>Textbox</h1>
<button>#</button>
</header>
<h2>Colors</h2>
<p>Color options of the textbox. For details, you can hold your mouse cursor on <strong>TEXT</strong>
content.</p>
<div class="color-box textbox" title="normal: Textbox'ın normal şekli.">
<pre class="normal">TEXT TEXT</pre>
<pre class="normal">TEXT TEXT</pre>
</div>
<div class="color-box textbox" title="volatile: Textbox'ın içindeki metin seçildiğindeki hali.">
<pre class="volatile">TEXT TEXT</pre>
<pre class="volatile">TEXT TEXT</pre>
</div>
<div class="color-box textbox" title="selected: Textbox'a focus olunduğundaki hali.">
<pre class="selected">TEXT TEXT</pre>
<pre class="selected">TEXT TEXT</pre>
</div>
<div class="color-box textbox" title="disabled: Textbox kullanılmadığında atanacak.">
<pre class="disabled">TEXT TEXT</pre>
<pre class="disabled">TEXT TEXT</pre>
</div>
<h2>Normal Textbox</h2>
<input type="text" title="text" value="Normal Textbox" />
<h2>Textbox with Different Types</h2>
<p><input type="password" title="password" value="password" /></p>
<p><input type="email" title="email" value="[email protected]" /></p>
<p><input type="tel" pattern="\([0-9]{3}\) [0-9]{3} [0-9]{4}" title="telephone" value="(123) 456 7890" />
</p>
<p><input type="number" title="number" min="-100" max="100" value="95" /></p>
<h2>Disabled Textbox</h2>
<input type="text" title="text" value="Disabled textbox" disabled />
<h2>Textarea</h2>
<textarea></textarea>
<h2>Textarea With Scroll</h2>
<textarea id="txtScroll" name="scroll"
style="overflow: scroll;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dicta perferendis nemo voluptate nostrum, quas exercitationem tempora cumque, consequuntur blanditiis dolorem itaque? Dolores eum laudantium dolor consequuntur quae unde voluptatibus quo rerum? Accusantium fuga corrupti, facere vitae distinctio blanditiis eos temporibus, architecto excepturi maxime impedit unde, mollitia ipsa quasi natus dolorum provident. Quisquam doloremque earum facere obcaecati, temporibus ratione non vero aspernatur deserunt optio et accusantium in aut officiis debitis ipsum iste consectetur atque exercitationem culpa iure ipsam officia amet assumenda! Ipsum harum beatae facilis ad blanditiis debitis maxime ea velit quaerat amet odio porro iusto eum fugiat quo optio, sint asperiores tenetur magnam atque. Nam libero, quis laborum sed fugit eligendi architecto sequi, soluta quidem sunt, nesciunt doloribus deleniti adipisci? Ullam aut quia aliquid accusantium voluptatum ipsam dolorum a, similique, rerum eius necessitatibus. Aperiam neque deserunt dolorem beatae excepturi eius animi, repellendus obcaecati modi quibusdam nostrum, doloribus non ex.</textarea>
<textarea id="txtScroll" name="scroll"
style="overflow: scroll; white-space: nowrap;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquam reiciendis veniam tempora harum repellat et illum necessitatibus explicabo iure minima fugit tempore pariatur voluptates ipsam laboriosam, assumenda praesentium hic reprehenderit quo voluptatibus, obcaecati placeat fugiat? Modi ipsa, voluptatem perferendis maxime soluta vel est ex eligendi commodi ullam sit aperiam aliquid, adipisci dolorem. Beatae velit non accusantium, inventore repellat est facilis illum laboriosam? Illo doloribus iusto eum, tempore dicta vitae quisquam voluptate sequi incidunt minima? Repellendus facere quae dolor perferendis voluptates iste, consequuntur beatae natus. Iste in obcaecati error saepe quam fugit quas magnam provident velit, hic magni tenetur eum.</textarea>
<h2>Disabled Textarea</h2>
<textarea disabled>Disabled Textarea</textarea>
</article>
</main>
<footer>
<span class="credits">By <a href="https://github.com/fatihtatoglu" target="_new" rel="external"
title="Developed by Fatih Tatoğlu">Fatih
Tatoğlu</a> - 2022</span>
</footer>
</body>
</html>