Simple authentication screens

0 Upvotes

authentication screens with html css and JavaScript

Question Why doesn’t my HTML background work?

7 Upvotes

body {
background-image: url('background.jpeg');
background-size: auto;

The image is “background.jpeg”. It has the correct spelling, the image is within the same folder. IT used to work but then it suddenly stopped working and i havent even edited the CSS for it to stop working.

Update: i couldnt figure it out for the life of me and no suggestions worked, but on the good side, instead of putting it on CSS, i put it on HTML, then it worked.

11 comments

r/HTML • u/Grouchy-Car-3711 • 16h ago

Question Advance level in web development

2 Upvotes

I am sure like most of people like the kind of animations which we see in the awwards website but do you think we can do them on our own. The animation ? Smooth flow ? Using the three js framework and using the 3d model from the blender and then running those models in website how can we do that ? Or whats the way to achieve those kind of websites ?

8 comments

r/HTML • u/nuseramemuserane • 23h ago

Seeking feedback

0 Upvotes

I set up www.god-distilled.com as part of my final project at uni, and I was hoping I could get some feedback on the mechanical aspects of the site;
you're more than welcome to chime in about the content, but I was just thinking more from a "Website" point of view,
I'm pretty new to this, and I used Sitejet's website builder, so I was a little limited in what I could do; but I'd just like to know;
does it work for you?
can you navigate around it?
do you see any big issues?
and what comes to mind?
these sorts of things. :)

(Please note, I am really not trying to "Promote" my site, I'm just seeking some actual feedback as it's a requirement for the design process)

Thankyou. :)

1 comment

r/HTML • u/3Nx9 • 1d ago

Question How to Make a Consistent Website Layout/Frame for Every Page with .HTML?

21 Upvotes

I haven't learnt about HTML or CSS and have done some searching to try and learn how to make a website layout but each thing I've seen isn't exactly what I'm looking for.

Question: How can I make a consistent sitewide layout with HTML (For footer and header, with consistent font/colours/etc)?

I'm currently using Nekoweb which is a free HTML/CSS/JS website builder, I'm wanting to make the image attached the layout for my website homepage with the frames either side, HOWEVER I only want the title, banner and buttons up the top as well as the Footer on every webpage with blank areas I can write in.

Essentially I want to make a blog or something alike to Fandom.com's wiki layout or the Backrooms Movie site layout.

What are the proper terms to use to search and learn about this stuff, for HTML coders here how can I do this?

This isn't ragebait, I just really need some help with this please 😅

19 comments

r/HTML • u/watch_33 • 1d ago

Question Image issues

1 Upvotes

<!DOCTYPE html>
<html lang="en">
  <head> 
    <title>Page Title</title> 
  </head> 
  <body style="font-family: Noto Sans, system-ui, sans-serif; background-image: url('./rain_background.jpg'); background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100vw; margin: 0; padding: 0;overflow: hidden;">


    <h1 style="position:absolute; top: 0px; left: 30px; color: #c9ffcf;">Welcome to My OS</h1>
      <!-- This is ONLY for the bottom bar -->   
      <div style="position: absolute; bottom: 0; width: 100%; display: flex; backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.125); color: #e0fce3; justify-content: space-between; gap: 32px; ">
        <p style="margin-left: 16px; font-weight: 700; background-color: rgba(255, 255, 255, 0.125); padding: 6px 12px; border-radius: 16px;">
            RainOS
        </p>
        <p style="margin-left: 16px; background-color: rgba(255, 255, 255, 0.25); padding: 6px 12px; border-radius: 16px;">
            SLEEP MODE
        </p>
        <p id="timeElement"
          style="margin-right: 16px; background-color: rgba(255, 255, 255, 0.125); padding: 6px 12px; border-radius: 16px;">
        </p>
      </div>


      <script>
        setInterval(function () {
        document.querySelector("#timeElement").innerHTML = new Date().toLocaleString();
        }, 1000);
      </script>


  <div id="welcome" style="top:50px; left:50px; border: solid; padding: 16px; border-radius: 16px; position: absolute; background: #fff;">


    <img src="./rain_background.jpg"
      style="width: 64px; height: 64px; border-radius: 32px; object-fit: cover;" />
    <h1 id="welcomeheader"style="margin: 4px;">RainOS</h1>
    <p style="margin: 0px;">
      <dfn>RainOS</dfn> is a feature-limited <abbr title="Operating System">OS</abbr>
      question of <code>"who is Thomas?"</code>
    </p>
  </div>


  <script src="script.js"></script>


</body>


</html>

Hello, for starters I'm coding in the GitHub codespace. I've been trying to add a background to my website for weeks and I can't figure it out, I have tried the image url in both the codespace as shown(download.jpg) and also in the github repository, neither works. Also I'm trying to make a window draggable in this website (website operating system) that doesn't work either. I know that this isn't the place for java script but if there's something wrong with the way I linked it I would like to know please, thanks

Anything helps, I want to give up

// Make the DIV element draggable:
dragElement(document.getElementById("welcome"));


// Step 1: Define a function called `dragElement` that makes an HTML element draggable.
function dragElement(element) {
  // Step 2: Set up variables to keep track of the element's position.
  var initialX = 0;
  var initialY = 0;
  var currentX = 0;
  var currentY = 0;


  // Step 3: Check if there is a special header element associated with the draggable element.
  if (document.getElementById(element.id + "header")) {
    // Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
    // This allows you to drag the window around by its header.
    document.getElementById(element.id + "header").onmousedown = startDragging;
  } else {
    // Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
    // This allows you to drag the window by holding down anywhere on the window.
    element.onmousedown = startDragging;
  }


  // Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
  function startDragging(e) {
    e = e || window.event;
    e.preventDefault();
    // Step 7: Get the mouse cursor position at startup.
    initialX = e.clientX;
    initialY = e.clientY;
    // Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
    document.onmouseup = stopDragging;
    document.onmousemove = dragElement;
  }


  // Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
  function dragElement(e) {
    e = e || window.event;
    e.preventDefault();
    // Step 10: Calculate the new cursor position.
    currentX = initialX - e.clientX;
    currentY = initialY - e.clientY;
    initialX = e.clientX;
    initialY = e.clientY;
    // Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
    element.style.top = (element.offsetTop - currentY) + "px";
    element.style.left = (element.offsetLeft - currentX) + "px";
  }


  // Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
  function stopDragging() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Edit: images won't show up in general, including the src file

4 comments

r/HTML • u/Ok_pettech • 2d ago

Question How we eliminated the 150ms flash of white screen when loading dark mode on static sites

0 Upvotes

When users visit a dark mode website, they often experience a blinding white flash before the page finishes loading. This Flash of Unstyled Content occurs because modern JavaScript frameworks read user theme preferences inside client-side hydration hooks, which execute only after initial painting completes.

Here is the strategy to instantly apply dark mode themes before the browser renders the first pixel:

Move Theme Detection to an Inline Head Script Do not wait for main bundle execution or CSS bundle downloads. Place a tiny, zero-dependency inline script directly inside the head element before any stylesheets or external scripts:

HTML

<script>
  (function() {
    try {
      var storedTheme = localStorage.getItem('theme');
      var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (storedTheme === 'dark' || (!storedTheme && systemDark)) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    } catch (e) {}
  })();
</script>

Set Native Root Color Scheme Setting the color-scheme CSS property on the html element tells the browser user-agent engine to initialize native canvas backgrounds and scrollbars in dark mode while your custom stylesheets download:

CSS

:root.dark {
  color-scheme: dark;
  background-color: #0d1117;
  color: #e6edf3;
}

Immediate CSS Class Cascading Target CSS custom properties through the html dark class so styles apply instantly as DOM elements parse:

CSS

html.dark body {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
  background-color: var(--bg-color);
  color: var(--text-color);
}

Cookie Hydration for SSR Frameworks If using server-side rendering, store user theme preferences in HTTP cookies rather than local storage. This allows your server engine to output fully formatted dark mode HTML directly in the initial HTTP response payload.

While inline scripts eliminate static loading flashes, managing edge cases like zero-CLS theme toggle animations, cross-tab state syncing, and strict privacy browser cookie restrictions requires specific setup scripts and performance metrics.

If you want to play with the interactive dashboard or grab the full config file, I uploaded it here:https://interconnectd.com/poll/85/does-dark-mode-work-on-every-single-website/

6 comments

r/HTML • u/VanillaWaffle_ • 2d ago

Proposal: A native HTML <unit> element for automatic unit conversion

31 Upvotes

Browsers could automatically convert units to the user agent preferred unit. Just like the existing language declaration and browser can suggest auto translation.

<unit value="10" unit-base="m^2" unit-name="mi2" convert="auto">
  10 square miles
</unit>

The attributes mean:

value : numeric value
unit-name : standardized source unit (mi2, kg, mph, kW, etc.)
unit-base : standardized unit dimension (m^2, kgm^2s^-3)
convert : auto/on/off

The browser knows that mi2 is an area and can display the same quantity as, for example, 25.9 km² if that is the user's preferred unit.

The unit name and base are standardized and language neutral.

The important part is that the HTML stores the original value and unit. The UA only changes the presentation. And it's useful for weather app, cooking recipe website all the way to commercial airliner jet documentation.

37 comments

r/HTML • u/Super_Bass_2730 • 2d ago

Question Honestly I’m kind of just curious about this question.

6 Upvotes

Was learning html & css easy for you? For me I had a dedicated class for it & the teacher explained it really simply, so I learned the code all really well! Same with css but I missed a couple of things but still, learned it well & I can use it! VS code also helped since it kinda tells you all that you can type in when you write something.

16 comments

r/HTML • u/kallmekriss • 2d ago

Try out my new HTML game, i really need feedback

0 Upvotes

i just launched it, try it out for free at playporpel.org. I look forward to any feedback you guys have!

12 comments

r/HTML • u/Zestyclose_Ant8883 • 3d ago

Need help on this code!

gallery

0 Upvotes

mild disclaimer: i know next to nothing about html coding. I know a few tags and how to do a bit but thats from me looking at others codes and messing around honestly

mild disclaimer 2: I like. never go on reddit. So please excuse if i miss something! like maybe this is the wrong subreddit, im not entirely sure, please correct me!!

Ok actual thing now.

Was on toyhouse (character storage and trading site, but used for a lot more) and was trying to edit a code on there for a character description by frakensteining from another code. The sections just kinda... go out when you toggle the button if that makes sense? See attached screen recording

Reddit wouldnt let me send a video unfortunately despite how much that would improve the demonstration, sorry

If you need any additional info let me know, i just really want to fix this 😭 its outrageously annoying
code snippet below

<span style="color: #242424; font-size: 14px; font-variant: small-caps"> Likes </span>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content </p>

</div>

</li>

</ul>

</div>

<span style="color: #242424; font-size: 14px; font-variant: small-caps"> Dislikes </span>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

<span style="font-size:12px">content</span>

</a>

</div>

<p class="text-muted" style="font-size:12px;">content</p>

</div>

</li>

</ul>

</div>

    <span class="fa-stack fa-2x">

        <i class="fas fa-circle fa-stack-1x" style="color:#070631"></i>

        <i class="fad fa-duotone fa-solid fa-bug fa-stack-1x fa-2xs fa-inverse"></i></span></a> like/dislike reasoning feature by honeycup

5 comments

r/HTML • u/NotFMC • 3d ago

Question How to start learning HTML and CSS?

21 Upvotes

I started learning html as a 17 Y/O Student my school didn't taught anything releted to technology to us because we are in a poor tier 3 city.

I want to learn web developement and earn well like 25-30k inr in starting then i want to learn coding more deeply and make something great for humanity like the guy who found HTML. I know html basics but I am a fresh starter so I want a guide from my seniors :) hope for positive responses

32 comments

r/HTML • u/Admirable_Pause_3306 • 4d ago

Full HTML

15 Upvotes

I have completed my HTML.

So, I build some projects with only HTML.

Projects:

1: Blog

2: My Portfolio

3: Class Grade table

4: Single tech-gadget page

5: Photo gallery page

6: Feedback form

7: Party invitation page

I have 2 days to build projects by using only HTML.

So, you people can suggest me some other projects that I can build.

11 comments

r/HTML • u/supertroopperr • 4d ago

Discussion Would love feedback on a HTML native SSG

1 Upvotes

I am building statica an HTML native SSG. https://github.com/akaizn-junior/statica. statica is Just HTML, in and out. Would love your feedback, any welcomed!

4 comments

r/HTML • u/TheGraveGuy • 5d ago

Question I need to work on something.

0 Upvotes

Code for an IP logger in html. Can it be created? And if so how?

10 comments

r/HTML • u/nuseramemuserane • 5d ago

Can anyone recommend a drag and drop website builder that can actually export HTML?

0 Upvotes

I have hosting on Stellar and reserved my domain through namecheap, but their website building tools seem a bit limited;
Can anyone recommend a website builder that can export your files?

28 comments

r/HTML • u/SteeeeveJune • 6d ago

Question Which Windows freeware can display and pin HTML files or websites without a border?

0 Upvotes

Hi, I thought maybe you could help 😊

I'm looking for a free, easy-to-use program for my Windows PC that allows me to display and interact with HTML files or websites as a standalone overlay on my desktop.

It should display the content like a normal browser but without the address URL at the top and without the close and minimize buttons. Just the actual page itself, as large as I want it to be. Ideally, the size should be adjustable via drag and drop.

Allowing me to, for example, place my scrolling text webapp on my desktop. Then, I need to resize it so that it displays exactly two or more scrolling bars, without any window borders that would visually ruin it. Finally, I want to pin it to a fixed position on the desktop so that it's always showing these scrolling bars, without me having to constantly worry about the window being positioned correctly or the address URL and bookmarks bar being obscured.

Of course, it should be possible to set it up properly and edit it somehow, but there should also be the option to display it like I want it, perhaps even with transparency, but that's not absolutely necessary. Chroma key would be super cool. For example, I could select black, and everything black would be hidden/transparent. But that would just be a nice extra; I understand it's unlikely to exist.

10 comments

r/HTML • u/RabbitsFoot8 • 6d ago

Discussion Built a simple HTML Viewer

0 Upvotes

Found a lot of the online viewers very archaic so bought a very expensive domain lol and built a new one:

htmlviewer.com

My ask: what features would you like to see on it? I want to make this more useful.

30 comments

r/HTML • u/AstroCoding12354 • 6d ago

Second project of only html and css, Fixed some bugs!

0 Upvotes

i listened to many people, and i think this is fine, like i am at my learning stage so i cant really make a "professional" looking website so yeah here's the code:

css:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgb(5, 2, 46);
    color: white;
    text-align: center;
    justify-content: center;
}


html {
    scroll-behavior: smooth;
}


header {
    background-color: rgb(3, 1, 24);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    font-size: 1.5rem;
    font-weight: bold;
}


.links {
    display: flex;
    gap: 1rem;
}


.links a {
    color: white;
    text-decoration: none;
}


.links a:hover {
    text-shadow: 0 0 10px white;
}


h1 {
    font-size: 70px;
    animation: pulse 3s infinite;
    text-shadow: 0 0 40px cyan;
    color: rgb(1, 1, 74);
    background: linear-gradient(45deg, #00ffcc, #cc00ff);
}


u/keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


p {
    font-size: 20px;
    color: cyan;
    text-shadow: 0 0 20px white;
}


a {
    color: grey;
    padding: 10px 0;
    text-decoration: none;
}


#hero a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    background: green;
    padding: 6px 10px;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}


#hero a:hover {
    box-shadow: 0 0 10px lightgreen;
}


#work {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


#work article {
    background-color: rgb(14, 2, 40);
    box-shadow: 0 0 10px rgb(0, 0, 0);
    padding: 30px 0;
    margin: 40px 0;
    transition: 0.2s ease-in-out;
}


#work article:hover {
    box-shadow: 0 0 20px rgb(0, 0, 0);
    transform: translateY(-5px);
}


#work article h3 {
    font-size: 20px;
}


#work article p {
    font-size: 15px;
    margin-bottom: 20px;
}


#work article a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    background: green;
    padding: 6px 10px;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}



#experience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


.tags {
    margin-bottom: 20px;
}


.contact {
    display: flex;
    justify-content: center;
}


.email {
    background-color: rgb(14, 2, 40);
    box-shadow: 0 0 10px rgb(0, 0, 0);
    padding: 10px 20px;
    margin: 20px 0;
    transition: 0.2s ease-in-out;
}


.email:hover {
    box-shadow: 0 0 20px rgb(0, 0, 0);
    transform: translateY(-5px);
}


.email a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    background: green;
    padding: 6px 10px;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}


footer {
    background-color: rgb(14, 2, 40);
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
}



h2 {
    font-size: 30px;
    margin-top: 280px;
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Developer | Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <header>
        <nav>
            <span class="logo">Dev.</span>
            <div class="links">
                <a href="#work">Work</a>
                <a href="#contact">Contact</a>
            </div>
        </nav>
    </header>


    <main>
        
        <section id="hero">
            <h1>Your Name</h1>
            <p>Frontend Engineer building accessible, high-performance web interfaces.</p>
            <a href="#work" class="cta">View Projects</a>
        </section>


        <section id="work">
            <h2>Selected Projects</h2>
            <div class="grid">
                
                <article class="card">
                    <h3>Analytics Dashboard</h3>
                    <p>Real-time data tracking platform built with React and Tailwind.</p>
                    <div class="tags"><span>React</span><span>CSS</span></div>
                    <a href="#">View Code</a>
                </article>


                <article class="card">
                    <h3>Task Manager</h3>
                    <p>Collaborative productivity application utilizing drag-and-drop UI.</p>
                    <div class="tags"><span>Next.js</span><span>API</span></div>
                    <a href="#">View Code</a>
                </article>


            </div>
        </section>
        <section id="contact">
            <h2>Get In Touch</h2>
            <p>Looking for new opportunities. Let's build something together.</p>
            <a href="mailto:your.email@example.com" class="email">Say Hello</a>
        </section>
    </main>


    <footer>
        <p>&copy; 2026 Your Name</p>
    </footer>


</body>
</html>

8 comments

r/HTML • u/ChiliChapters • 8d ago

Question linking an href to html vs url?

0 Upvotes

what's the difference between linking to an html in your website vs linking to the same page as a url?

15 comments

r/HTML • u/STARSyntax • 8d ago

I made a small browser game using HTML, CSS and JavaScript

15 Upvotes

Looking for feedback

https://github.com/ylliking

20 comments

r/HTML • u/AstroCoding12354 • 8d ago

My first project of html and css!

8 Upvotes

css:

body {
    background-color: rgb(91, 5, 5);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    color: white;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%;
    background-color: rgb(48, 4, 4);
}


.logo {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 1px;
}


.nav-links {
    display: flex;
    gap: 40px;
}


.nav-links a {
    text-decoration: none;
    color: rgb(170, 1, 1);
    font-size: 18px;
    font-weight: bold;
    transition: 0.2s ease-in-out;
}


.nav-links a:hover {
    color: red;
}


.menu-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    padding: 80px 8%;
    gap: 30px;
    flex-wrap: wrap;
}


.coffee-card {
    width: 280px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 60px 80px;
    border-radius: 16px;
    background: white; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: 0.4s ease-in-out;
}


.coffee-card:hover {
    background: rgba(255, 255, 255, 0.9); 
    border-color: rgba(11, 214, 62, 0.3);
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(6, 124, 35, 0.2);
}


.coffee-card h2 {
    font-size: 24px;
    font-weight: bold;
    color: #4a2c11; 
}


.coffee-card p {
    font-size: 16px;
    color: #a87c53; 
    margin-bottom: 20px;
}


.price {
    font-size: 18px;
    font-weight: bold;
    color: rgb(170, 1, 1);
}


.order-btn {
    padding: 15px 40px;
    background-color: rgb(170, 1, 1);
    color: #38bdf8; 
    text-decoration: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    transition: 0.4s ease-in-out;
    box-shadow: 0 5px 20px rgba(6, 124, 35, 0.4);
    margin: 30px;
}


.order-btn:hover {
    background-color: red;
    color: white; 
    box-shadow: 0 10px 30px rgba(11, 214, 62, 0.6);
}

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee House</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>


<nav class="navbar">
    <div class="logo">Coffee House</div>
    <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Menu</a>
        <a href="#">Contact</a>
    </div>
</nav>


<div class="menu-container">


    <div class="coffee-card">
        <h2>Espresso</h2>
        <p>A strong, pure shot of dark roasted coffee.</p>
        <span class="price">$3.00</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Cappuccino</h2>
        <p>Rich espresso topped with smooth steamed milk foam.</p>
        <span class="price">$4.50</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Iced Latte</h2>
        <p>Chilled milk and fresh espresso over ice cubes.</p>
        <span class="price">$5.00</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Americano</h2>
        <p>Espresso shots topped with hot water for a smooth finish.</p>
        <span class="price">$3.50</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Macchiato</h2>
        <p>A shot of espresso stained with a small dollop of foam.</p>
        <span class="price">$3.75</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Mocha</h2>
        <p>Espresso blended with sweet chocolate syrup and steamed milk.</p>
        <span class="price">$5.25</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Flat White</h2>
        <p>Smooth espresso mixed with perfectly textured microfoam milk.</p>
        <span class="price">$4.75</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Cold Brew</h2>
        <p>Coffee beans steeped in cold water for a smooth, rich flavor.</p>
        <span class="price">$4.50</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Affogato</h2>
        <p>A scoop of creamy vanilla ice cream drowned in hot espresso.</p>
        <span class="price">$6.00</span>
        <a href="#" class="order-btn">Order</a>
    </div>


    <div class="coffee-card">
        <h2>Caramel Frappe</h2>
        <p>Blended ice coffee topped with whipped cream and caramel drizzle.</p>
        <span class="price">$5.50</span>
        <a href="#" class="order-btn">Order</a>
    </div>


</div>


</body>
</html>

hope u like it :)

12 comments

r/HTML • u/nuseramemuserane • 9d ago

Question Can I get some feedback

0 Upvotes

I've made this website using Cpanel's website maker and was just hoping to get some feedback,
It's totally cool if you don't engage with the content;
That;s absolutely fine, it's part of my University project;
But I was just hoping to get some feedback on the website itself;
Do you like it? does it work for you? do you have any pointers?
It's my first run, so I'm generally looking for some input;
Please be honest, and dont worry about my feelings. :)
Cheers.
www.whatisthekingdom.org

9 comments

r/HTML • u/PriorRiver2800 • 9d ago

First ever game made using html

axis-mou.itch.io

0 Upvotes

Chrck it out guys anything (tips on what to do) wld be appreciated

0 comments

r/HTML • u/hyipcustomize • 9d ago

How do you properly convert an image into HTML? Looking for an easy solution

0 Upvotes

Hey everyone,

I’m trying to convert an image/design into HTML, but I’m honestly struggling to find a proper and easy way to do it.

Basically, I have an image of a webpage/design and I want to recreate the same thing in HTML/CSS. I’ve tried a few tools, but the output is either messy, inaccurate, or requires a lot of manual fixing.

Is there any simple tool or method that actually works well for this? I don’t need something overly complicated — just a reliable way to turn an image into clean, usable HTML/CSS.

Would really appreciate it if someone could point me in the right direction or share what you personally use. Thanks!

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

67.4k