doqmeat.com
HTML template of a notebook with tabs
doqmeat.com/notebook/F2U/preview/notebook
doqmeat.tngl.sh
1<!DOCTYPE HTML>
2<html>
3<!--
4feel free to remove all of this!
5---
6template coded by doqmeat. last updaded on 02.dec.25
7---
8live preview: https://doqmeat.com/notebook/F2U/preview/notebook
9---
10more html and css resources @ https://www.w3schools.com/ + https://developer.mozilla.org/en-US/docs/Learn/HTML. more resources + graphics links can be found here if you need some pointers https://doqmeat.com/notebook
11---
12feel free to contact me for any questions! -->
13
14<head>
15 <meta charset="UTF-8">
16 <meta name="viewport" content="width=device-width, initial-scale=1">
17 <title>notebook template</title>
18 <link rel="icon" type="image/x-icon" href="IMG-URL-FOR-FAVICON">
19 <style>
20 html {
21 /* feel free to delete this if you just want the normal cursor! */
22 cursor: cell;
23 scrollbar-color: #c5dca0 #add8e6;
24 /* scrollbar for firefox users*/
25 }
26
27 body {
28 background: lightblue;
29 margin: 0px;
30 word-wrap: break-word;
31 font-size: 19px;
32 line-height: 25px;
33 word-spacing: 4px;
34 font-family: ms pgothic, arial;
35 /* ms pgothic is not compatible with safari or mobile devices*/
36 color: black;
37 }
38
39 mark {
40 background: lightgoldenrodyellow;
41 }
42
43 #wrapper-index {
44 /* the notebook's cover */
45 background: lightgrey;
46 position: relative;
47 margin: auto;
48 margin-top: 30px;
49 margin-bottom: 35px;
50 width: 1108px;
51 padding: 20px 10px 15px 10px;
52 border-radius: 20px;
53 border: 1px solid black;
54 }
55
56 /*this is my ugly binder spiral! feel free to remove it or change it. it wont mess the rest of the code! */
57 #tab1-wrapper:after,
58 #tab2-wrapper:after,
59 #tab3-wrapper:after,
60 #tab4-wrapper:after,
61 #tab5-wrapper:after,
62 #tab6-wrapper:after,
63 #tab7-wrapper:after,
64 #tab8-wrapper:after {
65 content: url(https://files.catbox.moe/4v6k8c.png);
66 position: absolute;
67 z-index: 10;
68 transform: translate(-50%, -50%);
69 -ms-transform: translate(-50%, -50%);
70 top: 50%;
71 left: 50%;
72 pointer-events: none;
73 }
74
75 /* PAGES CSS */
76
77 .paper {
78 /*the CSS of both "pages" boxes. you can choose the look of ALL pages here */
79 background: url(https://files.catbox.moe/evxip4.png);
80 z-index: 5;
81 position: relative;
82 display: inline-block;
83 box-sizing: border-box;
84 border: 1px solid lightblue;
85 height: 600px;
86 }
87
88 .left {
89 width: 490px;
90 margin-left: 50px;
91 margin-right: 10px;
92 border-radius: 10px 0px 0px 10px;
93 overflow: hidden;
94 }
95
96 .left-in {
97 /* the main purpose of this class if so the scrollbar of left pages arent obscured by the bind spiral */
98 padding: 15px 10px 15px 25px;
99 height: 100%;
100 margin-right: 15px;
101 overflow: auto;
102 }
103
104 .right {
105 padding: 15px 25px;
106 width: 490px;
107 margin-left: 10px;
108 border-radius: 0px 10px 10px 0px;
109 overflow: auto;
110 }
111
112 /* you can also customize the look of SPECIFIC pages. take TAB 2 for example: */
113 /* you can use .tab2-p class on both pages */
114 .tab2-p {
115 font-family: consolas;
116 font-size: 14px;
117 background: url(https://files.catbox.moe/bdbuwr.png);
118 border-color: lightcoral;
119 }
120
121 /* tab buttons CSS stuff */
122
123 .tab {
124 /* for the ones on the left */
125 width: 590px;
126 height: 50px;
127 position: absolute;
128 transform: translate(-50%, -50%);
129 -ms-transform: translate(-50%, -50%);
130 rotate: -90deg;
131 top: -10px;
132 left: -232px;
133 }
134
135 .tab2 {
136 /* for the ones on the right */
137 width: 590px;
138 height: 50px;
139 position: absolute;
140 transform: translate(-50%, -50%);
141 -ms-transform: translate(-50%, -50%);
142 rotate: 90deg;
143 top: 590px;
144 right: -232px;
145 }
146
147 .tab button,
148 .tab2 button {
149 /*this is the look of the TABS! */
150 z-index: 1;
151 position: relative;
152 vertical-align: top;
153 /* when changing fonts it might mess with the tabs and make them dissappear... change the width when that happens */
154 width: 120px;
155 margin: 0px 8px;
156 padding: 10px 0px 30px 0px;
157 /* inherits the font-family from the ones in the body */
158 font-family: inherit;
159 cursor: help;
160 font-size: 19px;
161 transition-duration: 0.5s;
162 top: 10px;
163 border-radius: 10px 10px 0 0;
164 border: 1px solid grey;
165 }
166
167 /* here you can change the color of each individual TAB button*/
168 .tab1-b {
169 background: #C5DCA0;
170 }
171
172 .tab2-b {
173 background: #B6A7DC;
174 }
175
176 .tab3-b {
177 background: #F9DAD0;
178 }
179
180 .tab4-b {
181 background: #F5F2B8;
182 }
183
184 .tab5-b {
185 background: #F1B46A;
186 }
187
188 /* hover effect of TAB*/
189 .tab button:hover,
190 .tab2 button:hover {
191 top: 0px;
192 cursor: -webkit-grab;
193 cursor: grab;
194 }
195
196 /* selected TAB effect aka when its focused */
197 .tab button.active,
198 .tab2 button.active {
199 top: 0px;
200 cursor: -webkit-grabbing;
201 cursor: grabbing;
202 box-shadow: 1px 1px 20px 1px grey;
203 outline: none;
204 }
205
206 /* custom scrollbar for chrome users, firefox users cant see this */
207 ::-webkit-scrollbar {
208 width: 8px;
209 height: 8px;
210 }
211
212 ::-webkit-scrollbar-thumb:vertical {
213 background: white;
214 border: 1px solid black;
215 border-radius: 10px;
216 }
217
218 ::-webkit-scrollbar-thumb:horizontal {
219 background: white;
220 border: 1px solid black;
221 border-radius: 10px;
222 }
223
224 ::-webkit-scrollbar-track {
225 border-radius: 10px;
226 background: transparent;
227 }
228 </style>
229</head>
230
231<body>
232
233 <!-- NOTEBOOK wrapper -->
234 <div id="wrapper-index">
235
236 <div class="tab">
237 <button class="tablinks tab4-b" onclick="openTab('tab4-wrapper')">tab 4</button>
238 <button class="tablinks tab3-b" onclick="openTab('tab3-wrapper')">tab 3</button>
239 <button class="tablinks tab2-b" onclick="openTab('tab2-wrapper')">tab 2</button>
240 <button class="tablinks tab1-b" onclick="openTab('tab1-wrapper')" id="defaultOpen">tab 1</button> <!-- id="defaultOpen" chooses which tab the notebook will have open when page is loaded -->
241 </div>
242
243 <div class="tab2">
244 <button class="tablinks tab5-b" onclick="openTab('tab5-wrapper')">tab 5</button>
245 <button class="tablinks tab6-b" onclick="openTab('tab6-wrapper')">tab 6</button>
246 <button class="tablinks tab7-b" onclick="openTab('tab7-wrapper')">tab 7</button>
247 <button class="tablinks tab8-b" onclick="openTab('tab8-wrapper')">tab 8</button>
248 </div>
249
250 <!-- TAB 1 wrapper -->
251 <div id="tab1-wrapper" class="tabcontent">
252 <div class="paper left">
253 <div class="left-in">
254 <p><img src="https://doqmeat.com/collection/cats/!g/computercat.jpg" width="40%" align="left" style="margin:10px;">Mouser turkish angora siberian mouser. Puma kitty, cornish rex so panther. Donskoy burmese bengal malkin panther. Savannah tiger havana brown yet bobcat norwegian forest. Ocicat singapura yet sphynx, but devonshire rex tomcat. Norwegian forest balinese grimalkin mouser. Munchkin bengal, but bengal american shorthair. Burmese maine coon malkin or cornish rex or birman but maine coon, but birman. Panther puma thai.</p>
255
256 <p><img src="https://doqmeat.com/collection/cats/!g/creatureofjoy.jpg" width="40%" align="right" style="margin:10px;">Mouser turkish angora siberian mouser. Puma kitty, cornish rex so panther. Donskoy burmese bengal malkin panther. Savannah devonshire rex yet egyptian mau norwegian forest singapura yet lion but ragdoll. American shorthair ragdoll so tom so persian ocicat and puma for mouser. Scottish fold norwegian forest. Savannah tiger havana brown yet bobcat norwegian forest. Ocicat singapura yet sphynx, but devonshire rex tomcat. Norwegian forest balinese grimalkin mouser. Munchkin bengal, but bengal american shorthair. Burmese maine coon malkin or cornish rex or birman but maine coon, but birman. Panther puma thai.</p>
257 <!-- TAB 1 left paper end divs -->
258 </div>
259 </div>
260 <div class="paper right">
261 <p><img src="https://doqmeat.com/collection/cats/!g/computercat.jpg" width="40%" align="left" style="margin:10px;">Mouser turkish angora siberian mouser. Puma kitty, cornish rex so panther. Donskoy burmese bengal malkin panther. Savannah tiger havana brown yet bobcat norwegian forest. Ocicat singapura yet sphynx, but devonshire rex tomcat. Norwegian forest balinese grimalkin mouser. Munchkin bengal, but bengal american shorthair. Burmese maine coon malkin or cornish rex or birman but maine coon, but birman. Panther puma thai.</p>
262
263 <p><img src="https://doqmeat.com/collection/cats/!g/creatureofjoy.jpg" width="40%" align="right" style="margin:10px;">Mouser turkish angora siberian mouser. Puma kitty, cornish rex so panther. Donskoy burmese bengal malkin panther. Savannah devonshire rex yet egyptian mau norwegian forest singapura yet lion but ragdoll. American shorthair ragdoll so tom so persian ocicat and puma for mouser. Scottish fold norwegian forest. Savannah tiger havana brown yet bobcat norwegian forest. Ocicat singapura yet sphynx, but devonshire rex tomcat. Norwegian forest balinese grimalkin mouser. Munchkin bengal, but bengal american shorthair. Burmese maine coon malkin or cornish rex or birman but maine coon, but birman. Panther puma thai.</p>
264 <!-- TAB 1 right paper end divs -->
265 </div>
266 <!-- TAB 1 wrapper end div -->
267 </div>
268
269 <!-- TAB 2 wrapper -->
270 <div id="tab2-wrapper" class="tabcontent">
271 <div class="tab2-p paper left">
272 <div class="left-in">
273 tab 2 pages
274
275 <!-- TAB 2 left paper end divs -->
276 </div>
277 </div>
278 <div class="tab2-p paper right">
279 text goes here
280
281 <!-- TAB 2 right paper end div -->
282 </div>
283 <!-- TAB 2 wrapper end div -->
284 </div>
285
286 <div id="tab3-wrapper" class="tabcontent">
287 <div class="paper left">
288 <div class="left-in">
289 text goes here
290
291 </div>
292 </div>
293 <div class="paper right">
294 tab 3 pages
295
296 </div>
297 </div>
298
299 <div id="tab4-wrapper" class="tabcontent">
300 <div class="paper left">
301 <div class="left-in">
302 tab 4 pages
303
304 </div>
305 </div>
306 <div class="paper right">
307 text goes here!
308
309
310 </div>
311 </div>
312
313
314 <div id="tab5-wrapper" class="tabcontent">
315 <div class="paper left">
316 <div class="left-in">
317 tab 5 pages
318
319 </div>
320 </div>
321 <div class="paper right">
322 text goes here!
323
324 </div>
325 </div>
326
327 <div id="tab6-wrapper" class="tabcontent">
328 <div class="paper left">
329 <div class="left-in">
330 text goes here
331
332 </div>
333 </div>
334 <div class="paper right">
335 text goes here
336
337 </div>
338 </div>
339
340 <div id="tab7-wrapper" class="tabcontent">
341 <div class="paper left">
342 <div class="left-in">
343 text goes here
344
345 </div>
346 </div>
347 <div class="paper right">
348 text goes here
349
350 </div>
351 </div>
352
353 <div id="tab8-wrapper" class="tabcontent">
354 <div class="paper left">
355 <div class="left-in">
356 text goes here
357
358 </div>
359 </div>
360 <div class="paper right">
361 text goes here
362
363 </div>
364 </div>
365
366
367 <!-- TEMPLATE for new set of TAB pages that you can copypaste
368
369 <div id="tab[num]-wrapper" class="tabcontent">
370 <div class="tab[num]-p paper left">
371 <div class="left-in">
372 text goes here
373
374 </div></div>
375 <div class="tab[num]-p paper right">
376 text goes here
377
378 </div></div>
379
380-->
381
382 <!-- NOTEBOOK wrapper end div -->
383 </div>
384
385
386 <script>
387 // awesome javascript to make everything work
388 function openTab(tabName) {
389 var i;
390 var tab = document.getElementById(tabName);
391 var otherContent = document.getElementsByClassName("tabcontent");
392 var defaultOpen = document.getElementById("defaultOpen");
393 var buttons = document.getElementsByClassName("tablinks");
394 for (i = 0; i < otherContent.length; i++) {
395 otherContent[i].style.display = "none";
396 }
397 for (i = 0; i < buttons.length; i++) {
398 buttons[i].classList.remove("active");
399 }
400 tab.style.display = "block";
401 event.currentTarget.className += " active";
402 }
403 document.getElementById("defaultOpen").click();
404
405 </script>
406</body>
407
408</html>