My LESS code is not working properly in my website. (LESS css)

Im trying to make a website for kfc orders but now when i change the … Read more My LESS code is not working properly in my website. (LESS css)

Im trying to make a website for kfc orders but now when i change the code, it doesnt work.
In the oder-item section i tried to change the width of the input but nothing happens.
I cant figure out why its not working.
……………………………………………………………………………………………………………………………………………………………………………

html {
    background: linear-gradient(135deg, #FC8B60 0%, #FFCC6F 100%);
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
}

body {
    position: absolute;
    width: 45rem;
    min-height: 20rem;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
}

header {
    border-radius: 1rem 1rem 0 0;
    width: 100%;
    flex-basis: 12rem;
    background: rgba(255, 73, 36, 0.83);
    text-align: center;
    position: relative;

    .logo {
        position: relative;
        top: 4rem;
        background: white;
        border-radius: 50%;
    }
}

.order {
    padding: 1.5rem;
    flex: 1;
    background: white;
    border-radius: 0 0 1rem 1rem;
    padding-top: 4rem;

    .header {
        text-align: center;
        font-size: 1.6rem;
        margin-bottom: 2rem;
        font-weight: 500;
    }

    button {
        padding: 1rem 2rem;
        border: none;
        border-radius: 0.5rem;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .order-item {
        font-size: 1.25rem;
        font-weight: 500;

        button {
            padding: 0.5rem;
            width: 20px;
            height: 20px;
            line-height: 10px;
            font-size: 2rem;
        }

        display: flex;

        .item-name {
            flex-basis: 10rem;
        }

        .item-quantity {
            flex-basis: 10rem;

            .inputt {
                width: 10px;
            }
        }

        .item-price {
            margin-left: auto;
        }
    }

    .order-summary {
        padding:1rem 1.5rem;
        margin: 2rem 0;
        background: #F4F4F6;
        border-radius: 0.5rem;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2.5rem;

        .money {
            float: right;
        }
    }

    #btn-add {
        margin-top: 1.5rem;
        border: 1px solid gray;
        width: 18rem;
        background: white;
    }

    #btn-checkout {
        width: 100%;
        background: #FF6144;
        color: white;
    }
}
<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document3</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&family=Noto+Sans:[email protected];700&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <img class="logo" src="./kfc2.png">
    </header>
    <div class="order">
        <h1 class="header">Your order from KFC</h1>

        <ul class="order-items">
            <li class="order-item"></li>
            <span class="item-name">Pizza 001</span>

            <span class="item-quantity">
                <button>-</button>
                <input class="inputt" type="number" value="1" />
                <button>+</button>
            </span>

            <span class="item-price">
                <span>$7.99</span>
                <button class="btn-delete">X</button>
            </span>
        </ul>

        <button id="btn-add">Add Food</button>

        <div class="order-summary">
            <p>Subtotal <span class="money">$15.98</span></p>
            <p>Shipping <span class="money">$2</span></p>
            <p>Total <span class="money">$17</span></p>
        </div>

        <button id="btn-checkout">Checkout</button>
    </div>
</body>

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

</html>

Source: CSS – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *

My LESS code is not working properly in my website. (LESS css)

Im trying to make a website for kfc orders but now when i change the … Read more My LESS code is not working properly in my website. (LESS css)

Im trying to make a website for kfc orders but now when i change the code, it doesnt work.
In the oder-item section i tried to change the width of the input but nothing happens.
I cant figure out why its not working.
……………………………………………………………………………………………………………………………………………………………………………

html {
    background: linear-gradient(135deg, #FC8B60 0%, #FFCC6F 100%);
    font-family: 'Noto Sans', sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
}

body {
    position: absolute;
    width: 45rem;
    min-height: 20rem;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
}

header {
    border-radius: 1rem 1rem 0 0;
    width: 100%;
    flex-basis: 12rem;
    background: rgba(255, 73, 36, 0.83);
    text-align: center;
    position: relative;

    .logo {
        position: relative;
        top: 4rem;
        background: white;
        border-radius: 50%;
    }
}

.order {
    padding: 1.5rem;
    flex: 1;
    background: white;
    border-radius: 0 0 1rem 1rem;
    padding-top: 4rem;

    .header {
        text-align: center;
        font-size: 1.6rem;
        margin-bottom: 2rem;
        font-weight: 500;
    }

    button {
        padding: 1rem 2rem;
        border: none;
        border-radius: 0.5rem;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .order-item {
        font-size: 1.25rem;
        font-weight: 500;

        button {
            padding: 0.5rem;
            width: 20px;
            height: 20px;
            line-height: 10px;
            font-size: 2rem;
        }

        display: flex;

        .item-name {
            flex-basis: 10rem;
        }

        .item-quantity {
            flex-basis: 10rem;

            .inputt {
                width: 10px;
            }
        }

        .item-price {
            margin-left: auto;
        }
    }

    .order-summary {
        padding:1rem 1.5rem;
        margin: 2rem 0;
        background: #F4F4F6;
        border-radius: 0.5rem;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 2.5rem;

        .money {
            float: right;
        }
    }

    #btn-add {
        margin-top: 1.5rem;
        border: 1px solid gray;
        width: 18rem;
        background: white;
    }

    #btn-checkout {
        width: 100%;
        background: #FF6144;
        color: white;
    }
}
<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document3</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&family=Noto+Sans:[email protected];700&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <img class="logo" src="./kfc2.png">
    </header>
    <div class="order">
        <h1 class="header">Your order from KFC</h1>

        <ul class="order-items">
            <li class="order-item"></li>
            <span class="item-name">Pizza 001</span>

            <span class="item-quantity">
                <button>-</button>
                <input class="inputt" type="number" value="1" />
                <button>+</button>
            </span>

            <span class="item-price">
                <span>$7.99</span>
                <button class="btn-delete">X</button>
            </span>
        </ul>

        <button id="btn-add">Add Food</button>

        <div class="order-summary">
            <p>Subtotal <span class="money">$15.98</span></p>
            <p>Shipping <span class="money">$2</span></p>
            <p>Total <span class="money">$17</span></p>
        </div>

        <button id="btn-checkout">Checkout</button>
    </div>
</body>

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

</html>

Source: CSS – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *