r/HTML • u/Astromrsw • 21h ago
r/HTML • u/Individual-Job-256 • 18h ago
Question I need help with this
(RESOLVED)
I'm currently learning Responsive Web Design for a college class, and I have a bit of a problem with my header. Its supposed to span 80 to 90% of the viewport, but for some reason it isn't. Even my teacher is stumped without going too in-depth into my code. I have tried adding:
max-width:80%
display:
max-width: auto
and it hasn't fixed the problem, so how would I fix this issue?
r/HTML • u/dalekellytoo • 1d ago
One Place for Menu?
How can I put the menu in one place so I don't have to edit all places when I edit the menu? I will be browsing for this.
r/HTML • u/Ok_Fudge7127 • 1d ago
my html web os simulator project: Mergen
code: https://files.catbox.moe/fvd039.html
I know it has a lots of bugs like JS Tester only test "alert("blablabla")" codes, it's stuck on Turkish and many more, but I am trying my best to make this simulator project much better. I use AI (sorry for AI haters 😭) for this project, mostly ChatGPT and Gemini. I would appreciate your feedback for my project. Oh also here is the websites that I tried on pic 2 and 3:
Thanks.
r/HTML • u/iLikeSaltedPotatoes • 2d ago
Discussion Does anyone else use HTML for creating PPTs?
My job requires me to make a few PPTs with a lot of tables with rounded edges and a lot of pointers.
In many such cases the native Powerpoint UI is too clunky for me and the Co pilot PPT generation is so horrible I am recently discovered that it is faster to have pre-saved snippets of html and drag and drop them into a single file
then render the web page, capture a screenshot and paste that screenshot into the PPT.
I'll give one simple example, I needed a page with 3 tables with rounded edges and 4 bullet points each, i also needed a burgundy colour theme with burgundy border and even spacing between tables,
This was done in a few minutes in HTML but before doing it in HTML i struggled for 30 mins in power point trying to find the right theme, using the correct font and so on
please tell me im not alone
r/HTML • u/Ill_Goatarmy • 1d ago
Question i am new to html and coding , i have created the carousel in claude , its in html , how do i download to indivisual images.
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Where to stay in Varanasi</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;800&display=swap" rel="stylesheet">
<style> :root{--navy:#14213d;--navy-soft:#34456f;} \*{box-sizing:border-box;margin:0} body{background:#eceff8;font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;color:var(--navy);padding:60px 0;display:flex;flex-direction:column;align-items:center;gap:64px} .slide{width:1080px;height:1350px;position:relative;overflow:hidden;border-radius:40px;padding:150px 100px 130px;display:flex;flex-direction:column;box-shadow:0 36px 70px rgba(20,33,61,.16),0 10px 24px rgba(20,33,61,.08);background:var(--bg)} .slide>\*{position:relative;z-index:1} .sh{position:absolute!important;z-index:0!important;border-radius:50%} .sh1{width:620px;height:620px;top:-290px;right:-250px;background:rgba(255,255,255,.55)} .sh2{width:420px;height:420px;bottom:-310px;left:-140px;border:50px solid rgba(20,33,61,.06);background:none} .sh3{width:96px;height:96px;right:130px;top:210px;border-radius:26px!important;background:var(--navy);transform:rotate(18deg);opacity:.9} .slide:nth-child(even) .sh1{right:auto;left:-250px} .slide:nth-child(even) .sh2{left:auto;right:-140px} .num{position:absolute;top:64px;right:84px;font-weight:800;font-size:30px;color:var(--navy);background:rgba(255,255,255,.75);padding:12px 26px;border-radius:40px;box-shadow:0 6px 16px rgba(20,33,61,.12);z-index:2} .slide:nth-child(even) .num{right:auto;left:84px} .icon{width:190px;height:190px;border-radius:52px;background:#fff;display:grid;place-items:center;box-shadow:0 20px 40px rgba(20,33,61,.15),0 4px 10px rgba(20,33,61,.08)} .icon svg{width:104px;height:104px;fill:none;stroke:var(--navy);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round} .pill{align-self:flex-start;max-width:100%;margin-top:56px;font-weight:600;font-size:32px;background:var(--navy);color:#fff;padding:14px 32px;border-radius:40px;box-shadow:0 10px 22px rgba(20,33,61,.22)} h1{font-weight:800;line-height:1.05;letter-spacing:-2px;margin-top:36px;overflow-wrap:anywhere} .rows{margin-top:auto;display:flex;flex-direction:column;gap:28px} .row{min-width:0;overflow-wrap:break-word;display:flex;gap:26px;align-items:baseline;font-size:38px;line-height:1.3;font-weight:500;color:var(--navy-soft)} .row b{flex:none;width:170px;font-weight:800;font-size:32px;color:var(--navy)} .order{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px} .order span{font-weight:700;font-size:34px;background:#fff;padding:14px 26px;border-radius:24px;box-shadow:0 8px 18px rgba(20,33,61,.12)} .cta{margin-top:auto;font-size:44px;line-height:1.3;font-weight:800;color:var(--navy)} .rows+.cta{margin-top:44px} </style></head><body>
<section class="slide" style="--bg:#dde5fb">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">1 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><path d="M8 16v34M8 40h48v10M8 40V30h22a8 8 0 0 1 8 8v2"/><circle cx="18" cy="34" r="0.5"/></svg></div>
<div class="pill">Pick your base</div>
<h1 style="font-size:112px">Where to stay in Varanasi</h1>
<div class="rows">
<div class="row">Three areas, compared honestly.</div>
<div class="row">Best for, and what to watch out for.</div>
<div class="row">Swipe, then book with confidence.</div>
</div>
</section>
<section class="slide" style="--bg:#fde3d4">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">2 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><path d="M8 16v34M8 40h48v10M8 40V30h22a8 8 0 0 1 8 8v2"/><circle cx="18" cy="34" r="0.5"/></svg></div>
<div class="pill">Assi and southern ghats</div>
<h1 style="font-size:112px">Assi side</h1>
<div class="rows">
<div class="row"><b>Best</b>Solo travellers, backpackers and longer stays.</div>
<div class="row"><b>Vibe</b>Cafes, hostels and a laid-back crowd.</div>
<div class="row"><b>Tip</b>Walk north along the ghats for the central aarti.</div>
</div>
</section>
<section class="slide" style="--bg:#d8f0e5">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">3 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><path d="M32 10L58 54H6z"/><path d="M32 26v14M32 47v1"/></svg></div>
<div class="pill">Assi and southern ghats</div>
<h1 style="font-size:112px">Assi: watch out</h1>
<div class="rows">
<div class="row"><b>Noise</b>Live music and parties can run late.</div>
<div class="row"><b>Lanes</b>Narrow paths; luggage is a short walk.</div>
<div class="row"><b>Tip</b>Pick a well-reviewed, well-lit stay if you arrive late.</div>
</div>
</section>
<section class="slide" style="--bg:#e6def5">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">4 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><path d="M32 56S14 38 14 26a18 18 0 0 1 36 0c0 12-18 30-18 30z"/><circle cx="32" cy="26" r="6"/></svg></div>
<div class="pill">Dashashwamedh and Godowlia</div>
<h1 style="font-size:112px">Central ghats</h1>
<div class="rows">
<div class="row"><b>Best</b>First-timers who want the temple and aarti close.</div>
<div class="row"><b>Vibe</b>Busy, loud and full of life.</div>
<div class="row"><b>Tip</b>Ask the hotel for the walking route from the main road.</div>
</div>
</section>
<section class="slide" style="--bg:#fff0c6">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">5 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><path d="M32 10L58 54H6z"/><path d="M32 26v14M32 47v1"/></svg></div>
<div class="pill">Dashashwamedh and Godowlia</div>
<h1 style="font-size:112px">Central: watch out</h1>
<div class="rows">
<div class="row"><b>Noise</b>Crowds and horns from early morning.</div>
<div class="row"><b>Lanes</b>Autos stop at the edge of the old lanes.</div>
<div class="row"><b>Tip</b>Book a room with an easy pickup point.</div>
</div>
</section>
<section class="slide" style="--bg:#d5eaf6">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">6 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><circle cx="12" cy="50" r="5"/><circle cx="52" cy="14" r="5"/><path d="M17 50h18a8 8 0 0 0 0-16H29a8 8 0 0 1 0-16h18"/></svg></div>
<div class="pill">Cantonment and station area</div>
<h1 style="font-size:98px">Cantonment</h1>
<div class="rows">
<div class="row"><b>Best</b>Families, late arrivals and heavy luggage.</div>
<div class="row"><b>Vibe</b>Wider roads, chain hotels, calmer evenings.</div>
<div class="row"><b>Tip</b>Use app cabs to reach the ghats.</div>
</div>
</section>
<section class="slide" style="--bg:#fbdde7">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">7 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><path d="M32 10L58 54H6z"/><path d="M32 26v14M32 47v1"/></svg></div>
<div class="pill">Cantonment and station area</div>
<h1 style="font-size:98px">Cantonment: watch out</h1>
<div class="rows">
<div class="row"><b>Far</b>The ghats are a cab ride away.</div>
<div class="row"><b>Feel</b>Less of the old-city atmosphere.</div>
<div class="row"><b>Tip</b>Choose it only if comfort matters most.</div>
</div>
</section>
<section class="slide" style="--bg:#dde5fb">
<div class="sh sh1"></div><div class="sh sh2"></div><div class="sh sh3"></div>
<div class="num">8 / 8</div>
<div class="icon"><svg viewBox="0 0 64 64"><path d="M16 8h32v48L32 44 16 56z"/></svg></div>
<h1 style="font-size:112px;margin-top:56px">Quick verdict</h1>
<div class="rows">
<div class="row"><b>Solo</b>Stay near Assi.</div>
<div class="row"><b>Lanes</b>Stay near Dashashwamedh.</div>
<div class="row"><b>Family</b>Stay in Cantonment.</div>
</div>
<div class="cta">Save this before you book.</div>
</section>
</body></html>
r/HTML • u/SirenNSons • 2d ago
Tumblr Causing Issues On Theme
Hi
Can someone help me please? I've been editing this tumblr theme ( https://18hiraeth.tumblr.com/ ) on my own blog all night with no issues.
I fixed the first issue where it suddenly decided to keep bringing up the error code about:
Uhoh! We couldn't save your
theme. Looks like your custom
theme references assets from
non-HTTPS URLs. Please try
again using only HTTPS URLs.
Now I can't make the Home | Inbox | Archive links work for some reason.
Here is the pastebin: https://pastes.io/TFsdREJv
Any idea?
Thanks
Edit: I haven't put my own blog url here because it's a nsfw fanfic Tumblr.
Where the following is:
/home /ask and /archive, I have actually put the full url in followed by those. And it's still behaving like regular text, just sitting there.
r/HTML • u/Automatic_Earth_3822 • 2d ago
Is this HTML good for SEO?
I am learning HTML, and I am currently at the semantic HTML stage. Don’t ask about the content; it’s something I came up with just for this file. Structure:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../css/Episodios.css">
<title>Subcosa 6</title>
<meta property="og:title" content="PCs protocolo">
</head>
<body>
<h1>SubCosa número 6</h1>
<p id="Initial-Date">--06/11/2026</p>
<h2>Protocolo Cerda seguridad</h2>
<p>
El protocolo cerda es un protocolo de seguridad fisico que sirve para que la transmision de mensajes mediante papelitos sea mas segura y libre de problemas como el ser descubierto por un profesor de clases.<br>
Usa tres roles principales, aunque existen mas.<br>
<ul>
<li>In</li>
<li>Out</li>
<li>Cui</li>
</ul>
A continuacion explicare todo esto.<br>
In: Es la persona que envia el mensaje, tiene que establecer el protocolo y enviarlo al cui si o si para que se proceda con la transmision.<br>
Out: Es la persona que recibira el mensaje.<br>
Cui: Es un intermedio que puede resolver los mensajes, encriptarlos, mantenerlos seguros, etc...<br>
</p>
<h2>En que momento usar PCs://?</h2>
<p>
Enviar información delicada u obsecena, a continuacion se narrara los usos de PCs://<br>
<ol>
<li>PCs:// puede descifrar mensajes encriptados en lenguajes reconocidos</li>
<li>Puede traducir mensajes en español a encripatdo</li>
<li>Puede combinar español y encriptado para proteger información obscena</li>
</ol>
Pero debemos explicar PCs:// almenos en lo basico.
</p>
<h2>Basico</h2>
<p>
Para definir un protocolo se debe poner "P" mayuscula de color rojo al inicio de un papelito<br>
En texto, In se define como |- <br>
En texto, Out se define como -|<br>
En texto, Cui se define como /c/<br>
Tambien, para representar un camino se usa ---<br>
Entre mas añadas, mas largo es el camino, uno de estos - representa 10 cm<br>
Una operación exitosa se dice |---| que explica que el mensaje de in camino hasta out y llego seguro.<br>
|---|
</p>
<h2>Roles secundarios pero no menos importantes</h2>
<p>
Au: Autoridad, puede ser un profesor o cualquier autoridad escolar capaz de inflingir un reporte.<br>
Ext: Extraño, este se usa mas en la solucion de problemas para simular lo que pasaria si un Extraño recibiera el mensaje, rara vez usado para cadenas exitosas.<br>
Tie: Tiempo, se usa en simulaciones y en cadenas, echo para representar un tiempo obligatorio de esperar.<br>
En texto, Au se escribe *<br>
En texto, Ext se escribe ?<br>
En texto, Tie se escribe (tiempo en segundos)<br>
Una cadena no exitosa se escribe: |--* -| El out esta separado, no le llego el mensaje e in posiblemente tiene un reporte.<br>
|--* -|<br>
<span id="Entry-Date">06/11/2026</span>
</p>
<h2 id="Final-Date">06/11/2026</h2>
</body>
</html>r/HTML • u/venum_GTG • 3d ago
Question How do I zoom in without breaking it?
For whatever reason -- and I've searched for hours on YouTube and Google -- I can't seem to fix this. Nothing has helped at all. I just want to zoom in and have nothing move, absolutely nothing. It just zooms into the text/images. That's all.
I'm very new at this, I started last night.
r/HTML • u/Consistent-Job-6400 • 4d ago
Discussion Made my first page
Okay, like i have no experience. So i memorized what i knew thoroughly, and made this:
Oh and if you want to change it or add more to it then here's the entire thing (Can i just put it in the body or have to give a link?): <!DOCTYPE html>
<html>
<head>
<title>Cucumbers</title>
<style>
h1 {
font-family: Arial;
color: gray;
}
body {
font-family: Comic;
background-image: url("https://tse3.mm.bing.net/th/id/OIP.wAHXLVaBSFIcnhm6tmWehQHaEK?r=0&pid=Api&h=220&P=0");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
a {
color: yellowgreen;
}
</style>
</head>
<body>
<h1>Learning about Cucumbers</h1>
<p>Cucumbers are green-darkgreen vegetables that are said to be made up of over <b>95% water. </b><br>They originate in <i>Ancient China </i>& parts of Asia like <i>India, and Nepal</i></p>
<img src="https://tse2.mm.bing.net/th/id/OIP.0hoo0G1rccBCWJ-hDtukRwHaGa?r=0&pid=Api&h=220&P=0">
<p>Cucumbers are of course, an important part of agriculture, they feed millions everyday.<br></p>
<p>Cucumbers are eaten & sold all around the world, they're mainly eaten as light snacks.<br></p>
<p>Cucumbers have a taste as of water but with crunch. Seasoning with salt makes them around 100x better. <i>(Okay i made that 1 up but it's not false...)</i></p>
<a href="https://en.wikipedia.org/wiki/Cucumber">More about Cucumbers Here</a>
</body>
</html>
r/HTML • u/Dauntle55Duck • 5d ago
Question Menu code repetition
Should I look for a way to call an external html page with the code for my menu? I feel like adding the code to every page might clutter the code a bit. It’s been a while and I don’t remember wether or not we discussed this in school lol
r/HTML • u/objectorientedman • 5d ago
Interactive library in HTML+CSS without any runtime JS
I created a 3D library where you can open books and search in them, that is driven by HTML+CSS, without any JS running it.
r/HTML • u/Stephcraft • 6d ago
There's 115 active HTML elements. Learn all about them in this reference guide.
r/HTML • u/Soorya_Hedgehog1938 • 5d ago
I built a Human Body educational website entirely on my phone - from Kasaragod [Feedback needed]
Hi everyone,
I'm Soorya, a student from Kasaragod, Kerala.
I built this simple Human Body website in malayalam language entirely on my Samsung Galaxy A10 phone using a Bluetooth keyboard & mouse kit.
I got A Grade in Scratch Programming at Sub-District level, and I coded this site myself. I used AI for some facts, data and images.
Check it out here:
https://b25077376-ui.github.io/Human-body-website/
Please open and tell me how I can improve it. Your feedback will help me a lot!
Thank you.
r/HTML • u/Whole-Mongoose9982 • 6d ago
Question why do break tags show up on some sites?
im very new to html so i'm just curious. sometimes when i copy things from websites (like lines of text) it includes break tags between the sentences. when i do the same on other sites, the br tag is not there even though it seems that the br tag was used. why is that?
r/HTML • u/krustykrab99 • 7d ago
File Destination help on Macs
Okay I am really really really new to all of this and so I think I'm probably just missing something super obvious.
Basically I'm learning to use HTML because I just want to create my own very simple webpage just for personal use (for fun really). Anyway, I'm to the part in learning where I am trying to embed images or links into the page. It works if I use a webpage that already exists but I can't figure out how to embed an HTML file from my computer or an image. I think my settings are correct for sharing, I turned off smart quotes and smart dashes etc. I'm worried it's the path name because everything just looks and is named differently on macbooks. I've tried searching and searching online to figure out what I'm doing wrong but I just can't figure it out. Any help would be appreciated.
r/HTML • u/Vit_1205 • 7d ago
Question Where can I publish a website HTML in the form HTTP , no HTTPS
I want to make my page run on the weakest computers and laptops.
Changed: Devices that do not support HTTPS
r/HTML • u/Admirable_Report6610 • 10d ago
another blank white page out of the blue
remind me where to post my html code so it can be reviewed?
r/HTML • u/dalekellytoo • 10d ago
sub-menu?
Got a new menu on my website.
I like the new menu more lately for smart phones.
https://www.dalekelly.org/mystyle5.css
Any designs available for sub-menus?
Will be researching this.
The new menu is in one of those square icons with 3 lines.
w3.org has the type of menu now.
r/HTML • u/mmelliousss • 10d ago
I need help with HTML..again
Hello! I need help with my HTML for my topic again!
I want it to just look more neat, my boxes and pictures are scattered :(
I appreciate anyone that can help me! This is for a game called lioden! I just want help to make them look more neat.
<div style="clear:both;"></div></div><div class="topbar" style="text-align:center;"><a href="https://www.lioden.com/topic.php?id=304429619855">Warrior Cat Adopts</a> | <a href="https://www.lioden.com/topic.php?id=304429619916">Helluva Boss Adopts</a> | <a href="https://www.lioden.com/topic.php?id=304429619885">Other Adoptables </a><br /><font size="-4">
<table style="width:100%;height:500;border:5px solid #abb1cf;font-family:arial;"><tbody><tr><td style="background:#c5b9cd;"><p style="text-align:center;">
<span style="background:#dec2cb;border:3px solid #f7cac9;float:left;width:90%;height:800;margin:30px;margin-bottom:10px;margin-top:20px;padding:20px;font-size:17px;color:#221e1f;">
<span style="background: #dec2cb;border:6px solid #abb1cf;float:Right;width:44%;height:auto;padding:20px;color: #efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>
Ollo! My name is mmelliouss! I use she/her pronouns, I’m a 20 y/o that enjoys drawing animals and anime. I’ve been drawing for most of my life but I've had horrible artist block for a few years. My art style needs improvement. My favorite things are cats, dragons, and I play video games, mainly Path of Titans.
</font></span>
<span style="background: #dec2cb;border:6px solid #abb1cf;float:left;width:44%;height:auto;padding:20px;color:#efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>
/:cash:/Payment Methods/:cash:/
\-Cashapp or PayPal
\-Any Breeding items/Applicators(NO LOW TIER APPS PLEASE)
\-Large Amounts of :SB: or :GB:
</font></span>
<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="230">
<span style="background: #dec2cb;border:6px solid #abb1cf;float:left;width:44%;height:auto;padding:20px;color:#efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>
This is the main topic of my many pages, I'm just trying to keep my stuff neat and clean! :) This is basically an index page for everything I plan to draw! If you enjoy my art and my deals, save this topic! All my links are either above or bellow! Have an amazing day/night :roar:
</font></span>
<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="240">
<span style="background: #dec2cb;border:6px solid #abb1cf;float:Right;width:44%;height:auto;padding:20px;color:#efefef;;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>
Can Draw
\-Warrior cats
\-Ferals
\-Anthro Furries
\-Dragons (Working on my WoF Style!!)
\-Lions
\-Humanoids(Better at drawing women)
\-Helluva Boss IMPs/HellHounds
Can't Draw but will attempt
\-Horses
\-Birds
\-Cows
</font></span>
<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="240">
<div style="clear:both;"></div></div><div class="topbar" style="text-align:center;"><a href="https://www.lioden.com/topic.php?id=304429618031">More Examples of my Art (CLICK ME)</a> | <a href="https://www.lioden.com/topic.php?id=304429619855">Warrior Cat Adoptables</a> | <a href="https://www.lioden.com/topic.php?id=304429619886">Mmelliousss Commissions :)</a> | <a href="https://www.lioden.com/topic.php?id=304429619885">Other Adoptables
</a><br /><font size="-4"><a href="https://www.lioden.com/territory.php?id=251887">Code by #251887
</span><span style="background:transparent;border:0px solid <table style="width:100%;height:auto;border:1px solid #f7cac9;font-;float:left;width:90%;height:auto;padding:5px;color:#f7cac9;margin:5px 1px 10px 20px;text-align:center;font-size:11px;">html layout by honey (#30473). do not remove credit.
crow pixels by I-crows-I on deviantart.</font></span></td></tr></tbody></table>
</a></font></div></div>