{"id":69913,"date":"2026-11-08T15:10:09","date_gmt":"2026-11-08T09:40:09","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/tools\/one-page-website-maker\/"},"modified":"2026-11-08T15:10:09","modified_gmt":"2026-11-08T09:40:09","slug":"one-page-website-maker","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/tools\/one-page-website-maker\/","title":{"rendered":"One-Page Website Maker: Free Personal Site in Minutes"},"content":{"rendered":"<p>This free <strong>one-page website maker<\/strong> builds a simple personal website for you in a few minutes. Pick a layout and colours, type your name, bio and contact details, add a photo if you like, and download a finished site as a zip. No coding, no sign-up and no monthly fee: the site is yours to put on any web host.<\/p>\n<div class=\"qt-tool\" id=\"qt-ops\"><p class=\"qt-label\" style=\"font-size:1.15em;margin:0 0 10px\"><strong>Step 1:<\/strong> Choose a layout<\/p><div id=\"qt-ops-tpls\" style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px\"><\/div><p class=\"qt-label\" style=\"font-size:1.15em;margin:22px 0 10px\"><strong>Step 2:<\/strong> Choose colours<\/p><div id=\"qt-ops-sws\" style=\"display:flex;flex-wrap:wrap;gap:10px\"><\/div><p style=\"margin:12px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap\"><label class=\"qt-label\" for=\"qt-ops-acc\" style=\"margin:0\">Accent colour<\/label><input type=\"color\" id=\"qt-ops-acc\" value=\"#f08a24\" style=\"width:52px;height:38px;padding:2px;cursor:pointer\"><span class=\"qt-note\" style=\"margin:0\">Pick any colour you like.<\/span><\/p><p class=\"qt-label\" style=\"font-size:1.15em;margin:22px 0 6px\"><strong>Step 3:<\/strong> Type your details<\/p><p class=\"qt-note\" style=\"margin:0 0 12px\">The boxes hold an example. Replace it with your own words. Leave a box empty to hide it.<\/p><div id=\"qt-ops-form\"><div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 16px\"><div><label class=\"qt-label\" for=\"qt-ops-nm\">Your name<\/label><input type=\"text\" id=\"qt-ops-nm\" maxlength=\"60\" value=\"Maya Fernandes\"><\/div><div><label class=\"qt-label\" for=\"qt-ops-tg\">One line about you<\/label><input type=\"text\" id=\"qt-ops-tg\" maxlength=\"90\" value=\"Wedding and portrait photographer in Goa\"><\/div><\/div><div style=\"margin-top:12px\"><label class=\"qt-label\" for=\"qt-ops-bio\">Short bio<\/label><textarea id=\"qt-ops-bio\" rows=\"5\" maxlength=\"1500\">I photograph weddings, families and small businesses across Goa and Mumbai. For twelve years I have kept the same promise: relaxed shoots, honest light and photos you will still love in thirty years.\n\nMost of my clients find me through friends, so the best compliment is a referral.<\/textarea><p class=\"qt-note\" style=\"margin:4px 0 0\">A blank line starts a new paragraph.<\/p><\/div><p class=\"qt-label\" style=\"margin:16px 0 6px\">Your photo (optional)<\/p><label class=\"qt-drop\" id=\"qt-ops-drop\" for=\"qt-ops-file\"><input type=\"file\" class=\"qtx-file\" id=\"qt-ops-file\" accept=\"image\/jpeg,image\/png,image\/webp\"><span class=\"qtx-big\">Click to choose a photo, or drop it here<\/span><span class=\"qtx-small\">JPG, PNG or WebP, up to 20 MB. No photo? Your initials are shown instead.<\/span><\/label><div class=\"qtx-thumb\" id=\"qt-ops-prev\" hidden><span style=\"position:relative;display:inline-block\"><img id=\"qt-ops-img\" alt=\"Your photo\" style=\"max-width:160px;border-radius:12px\"><button type=\"button\" id=\"qt-ops-x\" aria-label=\"Remove this photo\" title=\"Remove this photo\" style=\"position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#dc2626;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);font-size:22px;line-height:34px;padding:0;cursor:pointer\">\u00d7<\/button><\/span><\/div><p class=\"qt-label\" style=\"margin:16px 0 6px\">Three boxes<\/p><div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px\"><div><label class=\"qt-label\" for=\"qt-ops-b1t\">Box 1 title<\/label><input type=\"text\" id=\"qt-ops-b1t\" maxlength=\"50\" value=\"Weddings\"><label class=\"qt-label\" for=\"qt-ops-b1x\" style=\"margin-top:6px\">Box 1 text<\/label><textarea id=\"qt-ops-b1x\" rows=\"3\" maxlength=\"300\">Full-day coverage, a second shooter and an online album within three weeks.<\/textarea><\/div><div><label class=\"qt-label\" for=\"qt-ops-b2t\">Box 2 title<\/label><input type=\"text\" id=\"qt-ops-b2t\" maxlength=\"50\" value=\"Portraits\"><label class=\"qt-label\" for=\"qt-ops-b2x\" style=\"margin-top:6px\">Box 2 text<\/label><textarea id=\"qt-ops-b2x\" rows=\"3\" maxlength=\"300\">One-hour sessions at the beach, at home or in my studio in Panaji.<\/textarea><\/div><div><label class=\"qt-label\" for=\"qt-ops-b3t\">Box 3 title<\/label><input type=\"text\" id=\"qt-ops-b3t\" maxlength=\"50\" value=\"Business photos\"><label class=\"qt-label\" for=\"qt-ops-b3x\" style=\"margin-top:6px\">Box 3 text<\/label><textarea id=\"qt-ops-b3x\" rows=\"3\" maxlength=\"300\">Team headshots, menus and product shots, ready for your website.<\/textarea><\/div><\/div><p class=\"qt-label\" style=\"margin:16px 0 6px\">Contact details<\/p><div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px\"><div><label class=\"qt-label\" for=\"qt-ops-em\">Email<\/label><input type=\"text\" id=\"qt-ops-em\" inputmode=\"email\" maxlength=\"120\" value=\"hello@example.com\"><\/div><div><label class=\"qt-label\" for=\"qt-ops-pn\">Phone<\/label><input type=\"text\" id=\"qt-ops-pn\" inputmode=\"tel\" maxlength=\"30\" value=\"+91 98765 43210\"><\/div><div><label class=\"qt-label\" for=\"qt-ops-ws\">Website<\/label><input type=\"text\" id=\"qt-ops-ws\" inputmode=\"url\" maxlength=\"200\" placeholder=\"https:\/\/\"><\/div><div><label class=\"qt-label\" for=\"qt-ops-lc\">Location<\/label><input type=\"text\" id=\"qt-ops-lc\" maxlength=\"60\" value=\"Panaji, Goa\"><\/div><\/div><div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;margin-top:12px\"><div><label class=\"qt-label\" for=\"qt-ops-l1n\">Link 1 name<\/label><input type=\"text\" id=\"qt-ops-l1n\" maxlength=\"30\" value=\"Portfolio\"><label class=\"qt-label\" for=\"qt-ops-l1u\" style=\"margin-top:6px\">Link 1 address<\/label><input type=\"text\" id=\"qt-ops-l1u\" inputmode=\"url\" maxlength=\"200\" value=\"https:\/\/example.com\/portfolio\"><\/div><div><label class=\"qt-label\" for=\"qt-ops-l2n\">Link 2 name<\/label><input type=\"text\" id=\"qt-ops-l2n\" maxlength=\"30\" placeholder=\"e.g. LinkedIn\"><label class=\"qt-label\" for=\"qt-ops-l2u\" style=\"margin-top:6px\">Link 2 address<\/label><input type=\"text\" id=\"qt-ops-l2u\" inputmode=\"url\" maxlength=\"200\" placeholder=\"https:\/\/\"><\/div><div><label class=\"qt-label\" for=\"qt-ops-l3n\">Link 3 name<\/label><input type=\"text\" id=\"qt-ops-l3n\" maxlength=\"30\" placeholder=\"e.g. Instagram\"><label class=\"qt-label\" for=\"qt-ops-l3u\" style=\"margin-top:6px\">Link 3 address<\/label><input type=\"text\" id=\"qt-ops-l3u\" inputmode=\"url\" maxlength=\"200\" placeholder=\"https:\/\/\"><\/div><\/div><div style=\"margin-top:12px\"><label class=\"qt-label\" for=\"qt-ops-ft\">Footer line<\/label><input type=\"text\" id=\"qt-ops-ft\" maxlength=\"120\" value=\"\u00a9 2026 Maya Fernandes. All rights reserved.\"><\/div><p style=\"margin:12px 0 0\"><label for=\"qt-ops-cr\" style=\"display:inline-flex;gap:8px;align-items:center;cursor:pointer\"><input type=\"checkbox\" id=\"qt-ops-cr\" checked> Show a small \"Made with QuickOnlineTips\" credit at the bottom<\/label><\/p><\/div><p class=\"qt-label\" style=\"font-size:1.15em;margin:22px 0 10px\"><strong>Step 4:<\/strong> Press Generate<\/p><div class=\"qt-row\"><button type=\"button\" class=\"qt-btn qt-btn-big\" id=\"qt-ops-go\">Generate my site<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost qtx-nomark\" id=\"qt-ops-reset\" style=\"background:#e8f0fb;border-color:#1d5fb8;color:#174ea6\">\u21ba Start over<\/button><\/div><p class=\"qt-status\" id=\"qt-ops-status\" aria-live=\"polite\"><\/p><div id=\"qt-ops-result\" hidden><div style=\"border:1px solid #cbd5e1;border-radius:12px;overflow:hidden;background:#fff\"><iframe id=\"qt-ops-frame\" title=\"Preview of your site\" style=\"width:100%;height:620px;border:0;display:block\"><\/iframe><\/div><p class=\"qt-label\" style=\"font-size:1.15em;margin:22px 0 10px\"><strong>Step 5:<\/strong> Download your site<\/p><div class=\"qt-row\"><button type=\"button\" class=\"qt-btn qt-btn-big\" id=\"qt-ops-dl\">Download zip<\/button><button type=\"button\" class=\"qt-btn qt-btn-ghost\" id=\"qt-ops-cp\" style=\"background:#e8f0fb;border-color:#1d5fb8;color:#174ea6\">Copy HTML<\/button><\/div><p class=\"qt-status\" id=\"qt-ops-dlmsg\" aria-live=\"polite\"><\/p><p class=\"qt-note\">The zip holds <strong>index.html<\/strong> (your whole site, photo included) and a short guide to putting it online.<\/p><\/div><p class=\"qt-note\" style=\"font-size:1rem\"><strong>Private by design:<\/strong> everything happens in your browser. Your details and photo are never uploaded to QuickOnlineTips.<\/p><\/div>\n<script>(function () { function qtReady(fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn); } else { fn(); } } qtReady(function () { var root = document.getElementById('qt-ops'); if (!root) { return; } var L = String.fromCharCode(60), A = String.fromCharCode(38); function T(s) { return s.split('\u2039').join(L); } function $(id) { return document.getElementById('qt-ops-' + id); } var TPL = [{ id: 'classic', name: 'Classic', desc: 'Banner, round photo, three boxes' }, { id: 'sidebar', name: 'Sidebar', desc: 'Photo and contacts on the left' }, { id: 'bold', name: 'Bold', desc: 'Big name beside a tall photo' }]; var SCH = [ { id: 'navy', name: 'Navy', hd: '#14213d', acc: '#f08a24', bg: '#f6f7f9', card: '#ffffff', ink: '#1b1f2a', soft: '#5b6475' }, { id: 'forest', name: 'Forest', hd: '#1f3d2b', acc: '#c9a227', bg: '#f4f5f0', card: '#ffffff', ink: '#1d241f', soft: '#5d685f' }, { id: 'plum', name: 'Plum', hd: '#3b1f3f', acc: '#e0679a', bg: '#f8f4f7', card: '#ffffff', ink: '#251a27', soft: '#6a5c6c' }, { id: 'ocean', name: 'Ocean', hd: '#0e4a5c', acc: '#2bb3a3', bg: '#f2f7f8', card: '#ffffff', ink: '#13262c', soft: '#56707a' }, { id: 'graphite', name: 'Graphite (dark)', hd: '#0d0f13', acc: '#7aa2ff', bg: '#181b21', card: '#21252d', ink: '#e9ebf0', soft: '#a3a9b6' } ]; var st = { tpl: 'classic', sch: 'navy', acc: '#f08a24', photo: '', done: false, html: '', t: 0 }; var TINT = 'background:#e8f0fb;border-color:#1d5fb8;color:#174ea6', SOLID = 'background:#1d5fb8;border-color:#1d5fb8;color:#ffffff'; function sch() { for (var i = 0; SCH.length > i; i++) { if (SCH[i].id === st.sch) { return SCH[i]; } } return SCH[0]; } function thumb(id, acc, hd) { var g = '#c7cfdb', b = '\u2039svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 120 84\">\u2039rect width=\"120\" height=\"84\" fill=\"#eef1f5\"\/>'; if (id === 'classic') { b += '\u2039rect width=\"120\" height=\"26\" fill=\"' + hd + '\"\/>\u2039circle cx=\"60\" cy=\"26\" r=\"10\" fill=\"' + acc + '\" stroke=\"#fff\" stroke-width=\"2\"\/>\u2039rect x=\"40\" y=\"40\" width=\"40\" height=\"4\" rx=\"2\" fill=\"' + g + '\"\/>\u2039rect x=\"30\" y=\"47\" width=\"60\" height=\"3\" rx=\"1.5\" fill=\"' + g + '\"\/>\u2039rect x=\"10\" y=\"56\" width=\"31\" height=\"16\" rx=\"3\" fill=\"#fff\"\/>\u2039rect x=\"45\" y=\"56\" width=\"31\" height=\"16\" rx=\"3\" fill=\"#fff\"\/>\u2039rect x=\"80\" y=\"56\" width=\"30\" height=\"16\" rx=\"3\" fill=\"#fff\"\/>\u2039circle cx=\"52\" cy=\"78\" r=\"2\" fill=\"' + acc + '\"\/>\u2039circle cx=\"60\" cy=\"78\" r=\"2\" fill=\"' + acc + '\"\/>\u2039circle cx=\"68\" cy=\"78\" r=\"2\" fill=\"' + acc + '\"\/>'; } if (id === 'sidebar') { b += '\u2039rect width=\"38\" height=\"84\" fill=\"' + hd + '\"\/>\u2039rect x=\"9\" y=\"8\" width=\"20\" height=\"20\" rx=\"4\" fill=\"' + acc + '\"\/>\u2039rect x=\"7\" y=\"33\" width=\"24\" height=\"3\" rx=\"1.5\" fill=\"#fff\"\/>\u2039rect x=\"7\" y=\"44\" width=\"20\" height=\"2\" rx=\"1\" fill=\"#8b97ab\"\/>\u2039rect x=\"7\" y=\"50\" width=\"22\" height=\"2\" rx=\"1\" fill=\"#8b97ab\"\/>\u2039rect x=\"7\" y=\"56\" width=\"18\" height=\"2\" rx=\"1\" fill=\"#8b97ab\"\/>\u2039rect x=\"46\" y=\"10\" width=\"40\" height=\"4\" rx=\"2\" fill=\"' + g + '\"\/>\u2039rect x=\"46\" y=\"18\" width=\"64\" height=\"3\" rx=\"1.5\" fill=\"' + g + '\"\/>\u2039rect x=\"46\" y=\"24\" width=\"58\" height=\"3\" rx=\"1.5\" fill=\"' + g + '\"\/>\u2039rect x=\"46\" y=\"34\" width=\"66\" height=\"13\" rx=\"3\" fill=\"#fff\"\/>\u2039rect x=\"46\" y=\"50\" width=\"66\" height=\"13\" rx=\"3\" fill=\"#fff\"\/>\u2039rect x=\"46\" y=\"66\" width=\"66\" height=\"13\" rx=\"3\" fill=\"#fff\"\/>'; } if (id === 'bold') { b += '\u2039rect x=\"8\" y=\"12\" width=\"56\" height=\"9\" rx=\"2\" fill=\"' + hd + '\"\/>\u2039rect x=\"8\" y=\"24\" width=\"42\" height=\"9\" rx=\"2\" fill=\"' + hd + '\"\/>\u2039rect x=\"8\" y=\"38\" width=\"46\" height=\"3\" rx=\"1.5\" fill=\"' + acc + '\"\/>\u2039rect x=\"74\" y=\"8\" width=\"38\" height=\"44\" rx=\"4\" fill=\"' + acc + '\"\/>\u2039rect x=\"8\" y=\"58\" width=\"31\" height=\"14\" rx=\"2\" fill=\"#fff\"\/>\u2039rect x=\"8\" y=\"58\" width=\"31\" height=\"2\" fill=\"' + acc + '\"\/>\u2039rect x=\"45\" y=\"58\" width=\"31\" height=\"14\" rx=\"2\" fill=\"#fff\"\/>\u2039rect x=\"45\" y=\"58\" width=\"31\" height=\"2\" fill=\"' + acc + '\"\/>\u2039rect x=\"82\" y=\"58\" width=\"30\" height=\"14\" rx=\"2\" fill=\"#fff\"\/>\u2039rect x=\"82\" y=\"58\" width=\"30\" height=\"2\" fill=\"' + acc + '\"\/>\u2039rect y=\"76\" width=\"120\" height=\"8\" fill=\"' + hd + '\"\/>'; } return 'data:image\/svg+xml,' + encodeURIComponent(T(b + '\u2039\/svg>')); } function drawPickers() { var s = sch(), t = $('tpls'), w = $('sws'); t.textContent = ''; TPL.forEach(function (p) { var on = p.id === st.tpl, bt = document.createElement('button'); bt.type = 'button'; bt.className = 'qt-btn qt-btn-ghost qtx-nomark'; bt.setAttribute('aria-pressed', on ? 'true' : 'false'); bt.style.cssText = (on ? SOLID : TINT) + ';display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;height:auto;padding:10px;text-align:left;white-space:normal'; var im = document.createElement('img'); im.alt = ''; im.src = thumb(p.id, st.acc, s.hd); im.style.cssText = 'width:100%;height:auto;border-radius:6px;display:block'; var nm = document.createElement('strong'); nm.textContent = p.name; var ds = document.createElement('span'); ds.textContent = p.desc; ds.style.cssText = 'font-weight:400;font-size:.9em'; bt.appendChild(im); bt.appendChild(nm); bt.appendChild(ds); bt.addEventListener('click', function () { st.tpl = p.id; drawPickers(); regen(); }); t.appendChild(bt); }); w.textContent = ''; SCH.forEach(function (c) { var on = c.id === st.sch, bt = document.createElement('button'); bt.type = 'button'; bt.className = 'qt-btn qt-btn-ghost qtx-nomark'; bt.setAttribute('aria-pressed', on ? 'true' : 'false'); bt.style.cssText = (on ? SOLID : TINT) + ';display:inline-flex;align-items:center;gap:8px'; var dot = document.createElement('span'); dot.style.cssText = 'width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px #94a3b8;background:linear-gradient(135deg,' + c.hd + ' 50%,' + c.acc + ' 50%)'; bt.appendChild(dot); bt.appendChild(document.createTextNode(c.name)); bt.addEventListener('click', function () { st.sch = c.id; st.acc = c.acc; $('acc').value = c.acc; drawPickers(); regen(); }); w.appendChild(bt); }); } $('acc').addEventListener('input', function () { st.acc = this.value; drawPickers(); regen(); }); function say(id, t, bad) { var m = $(id); m.textContent = t; m.classList.toggle('qt-error', !!bad); } var prevUrl = null; function clearPhoto(quiet) { st.photo = ''; $('file').value = ''; $('prev').hidden = true; $('drop').hidden = false; $('img').removeAttribute('src'); if (prevUrl) { URL.revokeObjectURL(prevUrl); prevUrl = null; } if (!quiet) { say('status', 'Photo removed. Your initials will show instead.'); regen(); } } $('x').addEventListener('click', function () { clearPhoto(false); }); function sniff(buf) { var b = new Uint8Array(buf); if (b[0] === 255) { if (b[1] === 216) { return 'jpg'; } } if (b[0] === 137) { if (b[1] === 80) { if (b[2] === 78) { return 'png'; } } } if (b[0] === 82) { if (b[1] === 73) { if (b[8] === 87) { if (b[9] === 69) { return 'webp'; } } } } return ''; } function useFile(f) { if (!f) { return; } if (f.size > 20 * 1048576) { say('status', 'That file is ' + (f.size \/ 1048576).toFixed(1) + ' MB. Please choose a photo under 20 MB.', true); $('file').value = ''; return; } f.slice(0, 16).arrayBuffer().then(function (buf) { if (!sniff(buf)) { say('status', 'This does not look like a JPG, PNG or WebP photo. Please choose a photo file.', true); $('file').value = ''; return; } if (prevUrl) { URL.revokeObjectURL(prevUrl); } prevUrl = URL.createObjectURL(f); var im = new Image(); im.onload = function () { var w = im.naturalWidth, h = im.naturalHeight, m = Math.max(w, h), k = m > 800 ? 800 \/ m : 1; var cv = document.createElement('canvas'); cv.width = Math.max(1, Math.round(w * k)); cv.height = Math.max(1, Math.round(h * k)); var cx = cv.getContext('2d'); cx.fillStyle = '#ffffff'; cx.fillRect(0, 0, cv.width, cv.height); cx.drawImage(im, 0, 0, cv.width, cv.height); st.photo = cv.toDataURL('image\/jpeg', 0.86); $('img').src = prevUrl; $('prev').hidden = false; $('drop').hidden = true; say('status', 'Photo added. It stays on your device.'); regen(); }; im.onerror = function () { say('status', 'Your browser could not open this photo. Try a JPG or PNG.', true); }; im.src = prevUrl; }, function () { say('status', 'Could not read that file.', true); }); } $('file').addEventListener('change', function () { useFile(this.files[0]); }); var drop = $('drop'); ['dragenter', 'dragover'].forEach(function (ev) { drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('qt-hover'); }); }); ['dragleave', 'drop'].forEach(function (ev) { drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('qt-hover'); }); }); drop.addEventListener('drop', function (e) { var f = e.dataTransfer.files[0]; if (f) { useFile(f); } }); function esc(s) { return String(s).split(A).join(A + 'amp;').split(L).join(A + 'lt;').split('>').join(A + 'gt;').split('\"').join(A + 'quot;').split(\"'\").join(A + '#39;').split('\u2039').join(A + '#8249;'); } function v(id) { return $(id).value.trim(); } function safeUrl(u) { u = (u || '').trim(); if (!u) { return ''; } if (u.length > 300) { return ''; } if (!\/^https?:\\\/\\\/\/i.test(u)) { u = 'https:\/\/' + u; } try { var x = new URL(u); if (x.protocol === 'http:') { return x.href; } if (x.protocol === 'https:') { return x.href; } } catch (e) { return ''; } return ''; } var IC = { mail: '\u2039svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u2039path d=\"M3 6h18v12H3z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\u2039path d=\"M3 7l9 7 9-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\u2039\/svg>', phone: '\u2039svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u2039path d=\"M6 3h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/>\u2039\/svg>', web: '\u2039svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u2039circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\u2039path d=\"M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\u2039\/svg>', pin: '\u2039svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u2039path d=\"M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\u2039circle cx=\"12\" cy=\"9\" r=\"2.5\" fill=\"currentColor\"\/>\u2039\/svg>', link: '\u2039svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u2039path d=\"M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1-1\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\u2039\/svg>' }; function data() { var d = { name: v('nm'), tag: v('tg'), bio: v('bio'), foot: v('ft'), loc: v('lc'), credit: $('cr').checked, boxes: [], contacts: [] }; [1, 2, 3].forEach(function (n) { var t = v('b' + n + 't'), x = v('b' + n + 'x'); if (t || x) { d.boxes.push({ t: t, x: x }); } }); var em = v('em'); if (\/^[^\\s@\"'>]+@[^\\s@\"'>]+\\.[^\\s@\"'>]+$\/.test(em)) { if (em.indexOf(L) === -1) { d.contacts.push({ ic: 'mail', label: em, href: 'mailto:' + em }); } } var pn = v('pn'), pd = pn.replace(\/[^\\d+]\/g, ''); if (pd.length > 5) { d.contacts.push({ ic: 'phone', label: pn, href: 'tel:' + pd }); } var ws = safeUrl(v('ws')); if (ws) { d.contacts.push({ ic: 'web', label: ws.replace(\/^https?:\\\/\\\/(www\\.)?\/, '').replace(\/\\\/$\/, ''), href: ws }); } [1, 2, 3].forEach(function (n) { var nm = v('l' + n + 'n'), u = safeUrl(v('l' + n + 'u')); if (u) { d.contacts.push({ ic: 'link', label: nm || u.replace(\/^https?:\\\/\\\/\/, ''), href: u }); } }); return d; } function initials(n) { var p = n.split(\/\\s+\/).filter(Boolean); return ((p[0] || '?').charAt(0) + (p.length > 1 ? p[p.length - 1].charAt(0) : '')).toUpperCase(); } function paras(t) { return t.split(\/\\n\\s*\\n\/).map(function (p) { return '\u2039p>' + esc(p).split('\\n').join('\u2039br>') + '\u2039\/p>'; }).join(''); } function photoHtml(d, cls) { return st.photo ? '\u2039img class=\"' + cls + '\" src=\"' + st.photo + '\" alt=\"' + esc(d.name || 'Photo') + '\">' : '\u2039div class=\"' + cls + ' ini\" aria-hidden=\"true\">' + esc(initials(d.name || '?')) + '\u2039\/div>'; } function contactsHtml(d, mode) { var out = ''; d.contacts.forEach(function (c) { var ext = (c.ic === 'web' || c.ic === 'link') ? ' target=\"_blank\" rel=\"noopener noreferrer\"' : ''; out += '\u2039a class=\"ct\" href=\"' + esc(c.href) + '\"' + ext + (mode === 'icons' ? ' title=\"' + esc(c.label) + '\" aria-label=\"' + esc(c.label) + '\"' : '') + '>' + IC[c.ic] + (mode === 'icons' ? '' : '\u2039span>' + esc(c.label) + '\u2039\/span>') + '\u2039\/a>'; }); if (d.loc) { out += '\u2039span class=\"ct loc\">' + IC.pin + '\u2039span>' + esc(d.loc) + '\u2039\/span>\u2039\/span>'; } return out; } function boxesHtml(d) { return d.boxes.map(function (b) { return '\u2039div class=\"card\">' + (b.t ? '\u2039h3>' + esc(b.t) + '\u2039\/h3>' : '') + (b.x ? '\u2039p>' + esc(b.x) + '\u2039\/p>' : '') + '\u2039\/div>'; }).join(''); } function credit(d) { return d.credit ? '\u2039p class=\"credit\">Made with the free \u2039a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/one-page-website-maker\/\" target=\"_blank\" rel=\"noopener\">one-page website maker\u2039\/a> at QuickOnlineTips\u2039\/p>' : ''; } function build() { var d = data(), s = sch(), acc = st.acc; var vars = ':root{--hd:' + s.hd + ';--acc:' + acc + ';--bg:' + s.bg + ';--card:' + s.card + ';--ink:' + s.ink + ';--soft:' + s.soft + ';--onhd:#ffffff}'; var base = \"*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px\/1.6 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}h1,h2,h3{line-height:1.15;margin:0;text-wrap:balance}p{margin:0 0 .9em}a{color:inherit}img{max-width:100%}.ct{display:inline-flex;align-items:center;gap:8px;text-decoration:none}.ct svg{width:20px;height:20px;flex:none;color:var(--acc)}.ct:hover span{text-decoration:underline}.ini{display:grid;place-items:center;background:var(--acc);color:#fff;font-weight:700}.ph.ini{display:grid}.card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}.card h3{font-size:1.1rem;margin-bottom:6px}.card p{margin:0;color:var(--soft)}.foot{text-align:center;color:var(--soft);font-size:14px;padding:24px 16px 32px}.credit{font-size:12px;margin:6px 0 0;opacity:.8}\"; var css = '', body = '', title = esc(d.name || 'My site'), desc = esc(d.tag || ''); var bioH = d.bio ? '\u2039section class=\"bio\">' + paras(d.bio) + '\u2039\/section>' : ''; var boxH = d.boxes.length ? '\u2039section class=\"boxes\">' + boxesHtml(d) + '\u2039\/section>' : ''; var tagH = desc ? '\u2039p class=\"tag\">' + desc + '\u2039\/p>' : ''; var footH = (d.foot ? esc(d.foot) : '') + credit(d); if (st.tpl === 'classic') { css = '.hero{background:var(--hd);color:var(--onhd);padding:56px 16px 90px;text-align:center}.hero h1{font-size:clamp(2rem,6vw,3rem)}.hero .tag{opacity:.85;margin:8px 0 0;font-size:1.15rem}.ph{width:160px;height:160px;border-radius:50%;object-fit:cover;border:5px solid var(--bg);margin:-80px auto 0;display:block;font-size:3rem}main{max-width:900px;margin:0 auto;padding:24px 16px}.bio{max-width:680px;margin:0 auto 32px;text-align:center;font-size:1.08rem}.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:36px}.cts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;padding-top:24px;border-top:1px solid rgba(127,127,127,.25)}.card{border-top:4px solid var(--acc)}'; body = '\u2039header class=\"hero\">\u2039h1>' + title + '\u2039\/h1>' + tagH + '\u2039\/header>' + photoHtml(d, 'ph') + '\u2039main>' + bioH + boxH + '\u2039nav class=\"cts\">' + contactsHtml(d, 'text') + '\u2039\/nav>\u2039\/main>\u2039footer class=\"foot\">' + footH + '\u2039\/footer>'; } if (st.tpl === 'sidebar') { css = '.page{display:grid;grid-template-columns:320px 1fr;min-height:100vh}aside{background:var(--hd);color:var(--onhd);padding:40px 28px;display:flex;flex-direction:column;gap:14px}.ph{width:160px;height:160px;border-radius:18px;object-fit:cover;font-size:3rem}aside h1{font-size:2rem;margin-top:10px}aside .tag{opacity:.8;margin:0}.cts{display:flex;flex-direction:column;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);overflow-wrap:anywhere}main{padding:48px 40px;max-width:760px}main h2{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:0 0 12px}.bio{font-size:1.08rem;margin-bottom:34px}.boxes{display:grid;gap:14px;margin-bottom:24px}.card{border-left:4px solid var(--acc)}.foot{text-align:left;padding:24px 0 0}@media(max-width:760px){.page{grid-template-columns:1fr}main{padding:32px 18px}}'; body = '\u2039div class=\"page\">\u2039aside>' + photoHtml(d, 'ph') + '\u2039h1>' + title + '\u2039\/h1>' + tagH + '\u2039nav class=\"cts\">' + contactsHtml(d, 'text') + '\u2039\/nav>\u2039\/aside>\u2039main>' + (bioH ? '\u2039h2>About\u2039\/h2>' + bioH : '') + (boxH ? '\u2039h2>What I do\u2039\/h2>' + boxH : '') + '\u2039footer class=\"foot\">' + footH + '\u2039\/footer>\u2039\/main>\u2039\/div>'; } if (st.tpl === 'bold') { css = '.top{max-width:1040px;margin:0 auto;padding:56px 20px 32px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}.top h1{font-size:clamp(2.6rem,8vw,5rem);letter-spacing:-.02em}.top .tag{font-size:1.25rem;color:var(--soft);margin:16px 0 22px;padding-left:14px;border-left:4px solid var(--acc)}.ph{width:100%;aspect-ratio:4\/5;object-fit:cover;border-radius:16px;font-size:5rem}.cts{display:flex;flex-wrap:wrap;gap:12px}.cts .ct{width:44px;height:44px;justify-content:center;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.1)}.cts .loc{width:auto;border-radius:22px;padding:0 14px}main{max-width:1040px;margin:0 auto;padding:16px 20px 48px}.bio{font-size:1.15rem;max-width:720px;margin-bottom:36px}.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.card{border-radius:4px;border-top:6px solid var(--acc)}.foot{background:var(--hd);color:var(--onhd)}.foot .credit a{color:var(--onhd)}@media(max-width:760px){.top{grid-template-columns:1fr;padding-top:36px}.ph{max-width:360px}}'; body = '\u2039header class=\"top\">\u2039div>\u2039h1>' + title + '\u2039\/h1>' + tagH + '\u2039nav class=\"cts\">' + contactsHtml(d, 'icons') + '\u2039\/nav>\u2039\/div>' + photoHtml(d, 'ph') + '\u2039\/header>\u2039main>' + bioH + boxH + '\u2039\/main>\u2039footer class=\"foot\">' + footH + '\u2039\/footer>'; } var head = '\u2039!doctype html>\\n\u2039html lang=\"en\">\\n\u2039head>\\n\u2039meta charset=\"utf-8\">\\n\u2039meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\\n\u2039title>' + title + (desc ? ' | ' + desc : '') + '\u2039\/title>\\n\u2039meta name=\"description\" content=\"' + desc + '\">\\n\u2039!-- Made with the free one-page website maker at QuickOnlineTips. Edit the text below in any text editor. -->\\n\u2039style>' + vars + base + css + '\u2039\/style>\\n\u2039\/head>\\n\u2039body>\\n'; return T(head + body + '\\n\u2039\/body>\\n\u2039\/html>\\n'); } function gen() { if (!v('nm')) { say('status', 'Step 3 first: type your name.', true); $('nm').focus(); return false; } st.html = build(); $('frame').srcdoc = st.html; $('result').hidden = false; say('dlmsg', ''); return true; } function regen() { if (st.done) { gen(); } } $('go').addEventListener('click', function () { st.done = true; if (gen()) { say('status', 'Step 4 done. Check the preview, then press Step 5: Download zip.'); } }); Array.prototype.forEach.call($('form').querySelectorAll('input,textarea'), function (el) { if (el.type === 'file') { return; } el.addEventListener('input', function () { if (st.done) { clearTimeout(st.t); st.t = setTimeout(gen, 400); } }); el.addEventListener('change', function () { regen(); }); }); $('reset').addEventListener('click', function () { Array.prototype.forEach.call($('form').querySelectorAll('input[type=text],textarea'), function (el) { el.value = ''; }); st.done = false; st.html = ''; clearPhoto(true); $('result').hidden = true; $('frame').removeAttribute('srcdoc'); say('dlmsg', ''); say('status', 'Cleared. Start again from Step 1.'); }); var GUIDE = 'HOW TO PUT YOUR SITE ONLINE\\r\\n===========================\\r\\n\\r\\nYour whole site is the file index.html (your photo is built into it).\\r\\nDouble-click it to check it in your browser. To change a word later,\\r\\nopen index.html in a text editor (Notepad, TextEdit), edit the text and save.\\r\\n\\r\\nOPTION 1: You already have web hosting\\r\\n  1. Open your host\\'s File Manager (or use FTP).\\r\\n  2. Go to the public folder (often public_html or www).\\r\\n  3. Upload index.html there. Your site is live at your domain.\\r\\n\\r\\nOPTION 2: Free hosting for a one-page site\\r\\n  Free static hosts such as Cloudflare Pages and Netlify let you create\\r\\n  a free account and drag in the folder that holds index.html.\\r\\n  They give you a free web address, and you can connect your own domain later.\\r\\n\\r\\nMade with the free one-page website maker at\\r\\nhttps:\/\/www.quickonlinetips.com\/archives\/tools\/one-page-website-maker\/\\r\\nQuickOnlineTips is not affiliated with the hosting companies named above.\\r\\n'; function slug() { return (v('nm') || 'my-site').toLowerCase().replace(\/[^a-z0-9]+\/g, '-').replace(\/^-|-$\/g, '') || 'my-site'; } function loadZip() { return new Promise(function (res, rej) { if (window.JSZip) { res(window.JSZip); return; } var s = document.createElement('script'); s.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js'; s.onload = function () { res(window.JSZip); }; s.onerror = function () { rej(new Error('zip')); }; document.head.appendChild(s); }); } $('dl').addEventListener('click', function () { if (!st.html) { say('dlmsg', 'Press Generate first.', true); return; } say('dlmsg', 'Building your zip...'); var folder = slug() + '-site', name = folder + '.zip'; loadZip().then(function (Z) { var z = new Z(), f = z.folder(folder); f.file('index.html', st.html); f.file('HOW-TO-PUT-IT-ONLINE.txt', GUIDE); return z.generateAsync({ type: 'blob' }); }).then(function (blob) { var u = URL.createObjectURL(blob), a = document.createElement('a'); a.href = u; a.download = name; document.body.appendChild(a); a.click(); a.remove(); setTimeout(function () { URL.revokeObjectURL(u); }, 4000); say('dlmsg', 'Downloaded ' + name + '. Unzip it and follow the guide inside.'); }).catch(function () { say('dlmsg', 'The zip maker did not load. Check your connection and try again, or use Copy HTML.', true); }); }); $('cp').addEventListener('click', function () { if (!st.html) { say('dlmsg', 'Press Generate first.', true); return; } var done = function () { say('dlmsg', 'HTML copied. Paste it into a new file called index.html.'); }; var fallback = function () { var t = document.createElement('textarea'); t.value = st.html; document.body.appendChild(t); t.select(); try { document.execCommand('copy'); done(); } catch (e) { say('dlmsg', 'Could not copy. Use Download zip instead.', true); } t.remove(); }; if (navigator.clipboard) { navigator.clipboard.writeText(st.html).then(done, fallback); } else { fallback(); } }); drawPickers(); }); })();<\/script>\n<div class=\"qt-next\"><p class=\"qt-next-h\">Try another free tool<\/p><div class=\"qt-next-g\"><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/qr-code-generator\/\">QR Code Generator<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/color-palette-generator\/\">Color Palette Generator<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-resizer\/\">Image Resizer<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/image-compressor\/\">Image Compressor<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/slug-generator\/\">URL Slug Generator<\/a><a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/color-picker-from-image\/\">Color Picker From Image<\/a><\/div><\/div>\n<p><strong>Quick answer:<\/strong> Step 1, choose a layout. Step 2, choose colours. Step 3, type your details. Step 4, press <strong>Generate my site<\/strong> and check the preview. Step 5, press <strong>Download zip<\/strong>, then upload the <strong>index.html<\/strong> file inside it to your web host.<\/p>\n<h2>How to make your one-page website<\/h2>\n<ol>\n<li><strong>Step 1: choose a layout.<\/strong> <strong>Classic<\/strong> has a coloured banner, a round photo and three boxes in a row. <strong>Sidebar<\/strong> keeps your photo and contact details in a column on the left. <strong>Bold<\/strong> puts your name in large type beside a tall photo.<\/li>\n<li><strong>Step 2: choose colours.<\/strong> Pick one of five colour schemes, then change the accent colour to any colour you like.<\/li>\n<li><strong>Step 3: type your details.<\/strong> Replace the example with your name, a one-line description, a short bio, three boxes (for services, skills or projects), your contact details and up to three links. Leave any box empty to hide it.<\/li>\n<li><strong>Step 4: press Generate my site.<\/strong> A full preview appears. Change anything above and the preview updates.<\/li>\n<li><strong>Step 5: press Download zip.<\/strong> You get one folder with your site and a short guide. Press <strong>Start over<\/strong> any time to clear everything.<\/li>\n<\/ol>\n<h2>How to put your site online<\/h2>\n<p>Your whole website is a single file called <strong>index.html<\/strong>, with your photo built into it. Double-click it to open it in your browser and check it.<\/p>\n<ul>\n<li><strong>If you already have web hosting:<\/strong> open your host&#8217;s File Manager, go to the public folder (often <em>public_html<\/em>), and upload index.html. Your site is live at your domain.<\/li>\n<li><strong>If you have no hosting yet:<\/strong> free static hosts such as Cloudflare Pages and Netlify let you create a free account and drag in the folder that holds index.html. They give you a free web address, and you can connect your own domain later. QuickOnlineTips is not affiliated with these companies.<\/li>\n<\/ul>\n<h2>Who it is for<\/h2>\n<ul>\n<li><strong>Freelancers and consultants<\/strong> who need a simple page to share with clients.<\/li>\n<li><strong>Photographers, artists, tutors and coaches<\/strong> who want a clean page with their services and contact details.<\/li>\n<li><strong>Job seekers<\/strong> who want a personal page to link from a CV.<\/li>\n<li><strong>Small shops and home businesses<\/strong> that need a one-page site without a monthly website builder fee.<\/li>\n<\/ul>\n<h2>FAQ<\/h2>\n<h3>Is the one-page website maker free?<\/h3>\n<p>Yes. It is free with no sign-up, and the site you download is yours to use however you like.<\/p>\n<h3>Do you keep my details or photo?<\/h3>\n<p>No. Everything happens in your browser. Your details and photo are never uploaded to QuickOnlineTips.<\/p>\n<h3>Can I edit my site later?<\/h3>\n<p>Yes. Open index.html in a text editor such as Notepad or TextEdit and change the words, or come back here, fill in the boxes again and download a new zip.<\/p>\n<h3>Does my site need WordPress or a database?<\/h3>\n<p>No. It is a plain HTML page, so it loads fast, works on any web host, and needs no updates or plugins.<\/p>\n<h3>Can I remove the QuickOnlineTips credit?<\/h3>\n<p>Yes. Untick the credit box in Step 3 before you generate your site.<\/p>\n<p>Need a colour scheme of your own first? Try the <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/color-palette-generator\/\">color palette generator<\/a>, or make a <a href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/qr-code-generator\/\">QR code<\/a> that links to your new site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This free one-page website maker builds a simple personal website for you in a few minutes. Pick a layout and colours, type your name, bio and contact details, add a photo if you like, and download a finished site as a zip. No coding, no sign-up and no monthly fee: the site is yours to&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":65595,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-69913","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/69913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=69913"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/69913\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/65595"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=69913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}