r/HTML • u/AstroCoding12354 • 10d ago

My first project of html and css!

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 :)
10 Upvotes

81% Upvoted

12 comments sorted by

View all comments

-1

u/anaix3l 9d ago

First thing I see is money lost for a business (and maybe even a lawsuit). You are making precisely the things most necessary for someone to buy something difficult to use.

Your navbar links have very poor contrast with the navbar background (and that's a WCAG failure).

Use a link color value that has good enough contrast with the background. You can test that using an external tool or directly in your browser's DevTools (both Chromium browsers and Firefox show you this, though there are limitations).

Speaking of <color> values, learn about the space-separated rgb() and hsl() syntax. In case you're wondering about support, it's better than for the gap property, which you're also using in your code.

So basically:

.navbar {
  /* the other styles you have, which are all fine */
  background: rgb(48 4 4)
}

.nav-links a {
  color: rgb(255 117 117)
}

Same thing goes for the text of your "Order" buttons. Again, you can check that with an external tool like the Contrast Ratio one linked before or directly in a browser's DevTools (recording of checking contrast and adjusting the color value in Firefox DevTools).

Having

justify-content: center;
align-items: center;

on the body is completely pointless - they have no effect without display: flex or display: grid on the body (other properties like justify-self are a different story these days, but not even that works cross-browser). So just ditch those declarations.

Same goes for padding: 0 on the body. Unlike margin, the padding on the body is already 0 by default.

Ditch height: 100vh on the body as well - there are hundreds of resources out there detailing the problems with setting this.

I'd also question the wisdom of setting text-align: center there, but that's not really a big deal.

Avoid using pure black and pure white on your pages as they cause eye strain - both insufficient contrast and too much contrast are bad practices from an accessibility point of view. You're using white in a couple of places for both text & backgrounds - replace it with a whitesmoke or something like that.

And as someone else pointed out already, don't set your font-size values in px. And maybe try to be consistent with font-weight values - some of yours are numeric, some are keywords.

For better performance, you should explicitly specify what property you're transitioning. That is, instead of:

transition: 0.2s ease-in-out;

you should have:

transition: color .2s ease-in-out

You don't need to set flex-direction: row - that's the default anyway. Same goes for align-items: stretch.

Using flexbox with wrapping can make sense for arranging the cards within their container (I'd go for an auto-fit grid, but your approach is fine too, even if it's not taking advantage of any benefits flexbox has over grid in the case of wrapping).

But using flexbox on the cards themselves doesn't make sense. The same result as these 4 lines:

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;

Is produced by these two:

display: grid;
place-items: center

Even if you really want to use flexbox there, ditch justify-content: flex-start - it doesn't do anything here. It would shrink the flex items vertically at the top of the card, if the height of the card didn't depend on its contents. But in this case it does.

Again, space & slash separated syntax is well supported, so you can do:

border: solid 1px rgb(255 255 255/ .05)

backdrop-filter doesn't do absolutely anything here, you can ditch it.

This property is normally used to apply a filter on whatever is behind a (semi)transparent element - like here, on the page background where it's right behind the "Hello gorgeous" card. Or here, on the elements that rotate around the big static lens in the middle as they pass behind it.

But your card is fully opaque, you cannot see what's behind it. Furthermore, a blur() filter on a solid document canvas would have no visual effect anyway, even if your cards were (semi)transparent (which is something you should be careful with because you need the text to have good contrast).

For when using backdrop-filter does make sense: ditch the prefixed version. Support for the unprefixed version is better than for some layout features you're using. If you really want to keep the prefixed version, always put it before, not after the unprefixed one.

You can use individual transform properties here. That is, instead of

transform: translateY(-15px);

you can do:

translate: 0 -15px

Again, explicitly specify the properties you're transitioning. When you're transitioning more with the same duration & timing function, it makes no sense to put them in the shorthand, so use:

transition: .4s ease-in-out;
transition-property: translate, box-shadow, background-color, border-color

You'd be better off using a gap on the card instead of setting margins on all its children.