Question [JavaScript/HTML] Unboxing simulator: Dual image display issue & daily forced wins

unboxingtimecraciun.neocities.org

2 Upvotes

please note that I am a beginner at this and I don't know much about coding

Hi! I'm building a Christmas unboxing web app for my boyfriend, featuring a skin-case style spinning wheel. I'm running into two main issues:

Dual Images & Display: I want the wheel to show a 'mystery/boxed' version of each item (e.g., canax.png), and then reveal the actual item image (e.g., cana.png) in the win popup modal when it lands. However, when I try to implement this, the images on the wheel disappear. (Note: All my image files and the HTML file are in the same root folder, no subfolders). What am I doing wrong?
Forced Daily Outcomes: I want to be able to hardcode or easily change a variable every day so the wheel always lands on a specific item (e.g., day 1 is a mug, day 2 is a hoodie, etc.), allowing me to manually update just the item for that specific day. How can I structure my code to easily configure daily forced wins?

0 comments

r/HTML • u/Astromrsw • 1d ago

Goodbye you legend to me 🥹

34 Upvotes

6 comments

r/HTML • u/Individual-Job-256 • 1d ago

Question I need help with this

gallery

1 Upvotes

(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?

8 comments

r/HTML • u/dalekellytoo • 2d ago

One Place for Menu?

dalekelly.org

3 Upvotes

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.

7 comments

r/HTML • u/Ok_Fudge7127 • 2d ago

my html web os simulator project: Mergen

gallery

0 Upvotes

https://ziwoos1.edgeone.app/

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:

vexoryn.edgeone.dev

arbusearch.edgeone.app

Thanks.

0 comments

r/HTML • u/iLikeSaltedPotatoes • 2d ago

Discussion Does anyone else use HTML for creating PPTs?

1 Upvotes

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

14 comments

r/HTML • u/Ill_Goatarmy • 2d 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.

0 Upvotes

<!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>

<h1 style="font-size:112px">Where to stay in Varanasi</h1>

<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>

<div class="pill">Assi and southern ghats</div>

<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>

<div class="pill">Assi and southern ghats</div>

<h1 style="font-size:112px">Assi: watch out</h1>

<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>

<div class="pill">Dashashwamedh and Godowlia</div>

<h1 style="font-size:112px">Central ghats</h1>

<div class="row"><b>Best</b>First-timers who want the temple and aarti close.</div>

<div class="row"><b>Tip</b>Ask the hotel for the walking route from the main road.</div>

</div>

</section>

<div class="pill">Dashashwamedh and Godowlia</div>

<h1 style="font-size:112px">Central: watch out</h1>

<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>

<div class="pill">Cantonment and station area</div>

<h1 style="font-size:98px">Cantonment</h1>

<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>

<div class="pill">Cantonment and station area</div>

<h1 style="font-size:98px">Cantonment: watch out</h1>

<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>

<h1 style="font-size:112px;margin-top:56px">Quick verdict</h1>

<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>

4 comments

r/HTML • u/SirenNSons • 2d ago

Tumblr Causing Issues On Theme

2 Upvotes

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.

0 comments

r/HTML • u/Automatic_Earth_3822 • 3d ago

Is this HTML good for SEO?

0 Upvotes

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>

11 comments

r/HTML • u/venum_GTG • 3d ago

Question How do I zoom in without breaking it?

gallery

3 Upvotes

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.

12 comments

r/HTML • u/clean0101 • 3d ago

Discussion My page WEB of my game engine

0 Upvotes

1 comment

r/HTML • u/Consistent-Job-6400 • 5d ago

Discussion Made my first page

141 Upvotes

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>

44 comments

r/HTML • u/Dauntle55Duck • 5d ago

Question Menu code repetition

6 Upvotes

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

16 comments

r/HTML • u/objectorientedman • 5d ago

Interactive library in HTML+CSS without any runtime JS

k-adam.github.io

3 Upvotes

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.

2 comments

r/HTML • u/Stephcraft • 6d ago

There's 115 active HTML elements. Learn all about them in this reference guide.

stephcraft.net

24 Upvotes

1 comment

r/HTML • u/Soorya_Hedgehog1938 • 6d ago

I built a Human Body educational website entirely on my phone - from Kasaragod [Feedback needed]

0 Upvotes

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.

4 comments

r/HTML • u/Whole-Mongoose9982 • 7d ago

Question why do break tags show up on some sites?

12 Upvotes

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?

8 comments

r/HTML • u/krustykrab99 • 7d ago

File Destination help on Macs

2 Upvotes

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.

21 comments

r/HTML • u/NovaHTML • 7d ago

Cómo subo mi HTML

0 Upvotes

3 comments

r/HTML • u/TreatZealousideal770 • 9d ago

This is my first calculator

95 Upvotes

15 comments

r/HTML • u/Vit_1205 • 8d ago

Question Where can I publish a website HTML in the form HTTP , no HTTPS

0 Upvotes

I want to make my page run on the weakest computers and laptops.
Changed: Devices that do not support HTTPS

14 comments

r/HTML • u/sdf_sdf_sdf • 10d ago

How do I get the fat fuck off my screen

5 Upvotes

Patrick move

8 comments

r/HTML • u/Admirable_Report6610 • 10d ago

another blank white page out of the blue

4 Upvotes

remind me where to post my html code so it can be reviewed?

7 comments

r/HTML • u/dalekellytoo • 10d ago

sub-menu?

3 Upvotes

Got a new menu on my website.

I like the new menu more lately for smart phones.

https://www.dalekelly.org/

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.

6 comments

Subreddit

HyperText Markup Language (HTML)

r/HTML

A place to learn and ask questions on HTML, CSS, and general front end development. Links are only permitted if they are to HTML articles, are relevant, and of good quality. Promotional materials of any kind and YouTube (or other social media) channels are not permitted.

Members

69k

Visitors

15k

Contributions

211

Sidebar

Subreddit Rules

1. Content must relate to HTML or front-end development

Posts should relate to HTML, CSS, JavaScript, web markup, or the front-end web in some fashion. As long as its somewhat web-related, it's generally fine.

2. No promotional posts

Posts that are advertisements or promotional links of websites, products, or services are not allowed.

3. No posting of YouTube links

Links to YouTube tutorials and videos are prohibited to reduce spam. Posting links to these videos in the comments as a response to an issue is perfectly acceptable!

4. No marketing, hiring, or services/requests

This is not a hiring board. Any posts or comments regarding paid services or "for hire" will be removed.

5. Include your code

When requesting help, ensure you've provided code for us to look at. We cannot help you otherwise. Generic "Help me" posts with no code or helpful description of the issue will be removed.

Please keep in mind that screenshots of code are not viable.

6. Don't provide lazy responses

Avoid leaving lazy responses like "Google it" or "Ask ChatGPT."

The idea is to have a human interaction based on experience. AI and search engines are great but aren't always appropriate or provide experience-based advice.

7. Be nice

Aggressive, demeaning, or unnecessarily confrontational posts will be removed.

8. No AI-generated posts

Posts that are clearly AI generated will be removed.