initial commit
Hunter
Sunday, August 3rd, 2025 at 4:59 PM
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>zine.html</title>
7 + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎱</text></svg>">
8 + <style>
9 + * {
10 + margin: 0;
11 + padding: 0;
12 + box-sizing: border-box;
13 + }
14 + html, body {
15 + overflow: hidden;
16 + }
17 + body {
18 + font-family: Arial, sans-serif;
19 + background-color: rgb(58, 158, 183);
20 + display: flex;
21 + justify-content: center;
22 + align-items: center;
23 + }
24 + #sheet {
25 + width: 8.5in;
26 + height: 11in;
27 + background-color: white;
28 + display: grid;
29 + grid-template-columns: repeat(2, 1fr);
30 + grid-template-rows: repeat(4, 1fr);
31 + gap: 0;
32 + box-sizing: border-box;
33 + transform: rotate(-90deg);
34 + }
35 +
36 + #page3, #page4, #page5, #page6 {
37 + transform: rotate(180deg);
38 + }
39 +
40 + .zine-page {
41 + border: 1px dotted lightgrey;
42 + display: flex;
43 + align-items: center;
44 + justify-content: center;
45 + position: relative;
46 + width: 4.25in;
47 + height: 2.75in;
48 + }
49 +
50 + .zine-page-inner {
51 + width: 2.4in;
52 + height: 3.85in;
53 + transform: rotate(90deg);
54 + overflow: hidden;
55 + }
56 +
57 + p {
58 + font-size: 12px;
59 + line-height: 1.3;
60 + }
61 +
62 + /* Print styles */
63 + @media print {
64 + * {
65 + margin: 0 !important;
66 + padding: 0 !important;
67 + }
68 +
69 + body {
70 + background-color: white;
71 + padding: 0;
72 + margin: 0;
73 + height: 11in;
74 + width: 8.5in;
75 + display: flex;
76 + justify-content: center;
77 + align-items: center;
78 + }
79 + #sheet {
80 + width: 8.5in;
81 + height: 11in;
82 + margin: 0;
83 + padding: 0;
84 + page-break-after: auto;
85 + page-break-inside: avoid;
86 + box-sizing: border-box;
87 + border: none;
88 + transform: rotate(0deg);
89 + }
90 + /* .zine-page {
91 + width: 4.25in;
92 + height: 2.75in;
93 + } */
94 + /* .zine-page-inner {
95 + width: 2.4in;
96 + height: 3.85in;
97 + transform: rotate(90deg);
98 + } */
99 + @page {
100 + size: 8.5in 11in portrait;
101 + margin: 0;
102 + }
103 + }
104 + </style>
105 +</head>
106 +<body>
107 + <div id="sheet">
108 + <div id="back-cover" class="zine-page">
109 + <div class="zine-page-inner">
110 + <h1>back cover</h1>
111 + <br>
112 + <p>
113 + Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet.
114 + </p>
115 + <br>
116 + <p>
117 + Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet.
118 + </p>
119 + <p>
120 + Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet. Lorem ipsum, quia dolor, sit amet.
121 + </p>
122 + </div>
123 + </div>
124 + <div id="page6" class="zine-page">
125 + <div class="zine-page-inner">
126 + <h1>6</h1>
127 + </div>
128 + </div>
129 + <div id="front-cover" class="zine-page">
130 + <div class="zine-page-inner">
131 + <h1>front cover</h1>
132 + </div>
133 + </div>
134 + <div id="page5" class="zine-page">
135 + <div class="zine-page-inner">
136 + <h1>5</h1>
137 + </div>
138 + </div>
139 + <div id="page1" class="zine-page">
140 + <div class="zine-page-inner">
141 + <h1>1</h1>
142 + </div>
143 + </div>
144 + <div id="page4" class="zine-page">
145 + <div class="zine-page-inner">
146 + <h1>4</h1>
147 + </div>
148 + </div>
149 + <div id="page2" class="zine-page">
150 + <div class="zine-page-inner">
151 + <h1>2</h1>
152 + </div>
153 + </div>
154 + <div id="page3" class="zine-page">
155 + <div class="zine-page-inner">
156 + <h1>3</h1>
157 + </div>
158 + </div>
159 + </div>
160 +</body>
161 +</html>