Thiết kế website giá rẻ

Question

I have been trying for a good while, and looked online for how to properly align the UI of the website, but whatever I tried never managed to work on it, it either flipped it back to a vertical layout or interfered with the navbar.

First time using html and css, so there is a lot of learning involved with this. any feedback/solution would be appriciated.

Html code:

<!DOCTYPE html>

{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/styles_home.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.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=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <title>Medication reminder</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li>
                <a href="{% url 'profile_home' %}"><i class="fas fa-home"></i>Home</a>
            </li>
            <li>
                <a href="{% url 'settings' %}""><i class="fas fa-cog"></i>Settings</a>
            </li>
            <li class="end">
                <form action="{% url 'logout' %}" method="post">
                    {% csrf_token %}
                    <button type="submit"><i class="fas fa-door-open"></i>Logout</button>
                </form>
            </li>
        </ul>
    </div>

    <div class="container">
    <div class="row">
        <ul>
            <li>
                <a href="dashboard.html">
                    <i class="fas fa-border-all"></i> <br>Dashboard
                </a>
            </li>
            <li>
                <a href="calendar.html">
                    <i class="fas fa-calendar-alt"></i> <br>Schedule
                </a>
            </li>
            <li>
                <a href="events.html">
                    <i class="fas fa-circle-exclamation"></i> <br>Events
                </a>
            </li>
            <li>
                <a href="analysis.html">
                    <i class="fas fa-chart-line"></i> <br> Analysis
                </a>
            </li>
            <li>
                <a href="configuration.html">
                    <i class="fas fa-sliders"></i> <br>Configuration
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

and the css code:

:root {
    --text: #10150f;
    --background: #fafbf9;
    --primary: #799d72;
    --secondary: #aac4b7;
    --accent: #92b3a7;
    --shadow: rgba(125, 125, 125, 0.2)
}
  

body {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    background-color: var(--background);
    margin: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background); /* Adjust background color as needed */
    padding: 20px 20px; /* Adjust padding as needed */
    box-shadow: 0 4px 8px 0 var(--shadow), 0 6px 20px 0 var(--shadow);
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar li {
    margin-left: 20px;
    margin-right: 30px; /* Adjust margin between items as needed */
}

.navbar li.end {
    margin-right: 0; /* No margin for the "end" item */
    margin-left: auto; /* Push the "end" item to the right */
}

.navbar i {
    margin-right: 5px;
}

.navbar button, a {
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text); /* Adjust button text color as needed */
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
}


.navbar button:hover {
    color: #3b5447;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.row ul {
    display: flex; /* Use flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
    justify-content: center; /* Horizontally center the items */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.row li {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    border-radius: 10px;
}

.row i {
    margin-bottom: 5px;
    height: 20px;
}

.row a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    list-style-type: none;
    height: 200px;
    width: 200px;
    margin: 25px;
    padding: 10px;
    background-color: var(--primary);
    border-radius: 10px;
    color: var(--text);
}

.row a:hover {
    background-color: var(--secondary);
}

Current UI of the Website

Tried to change the display from flex to block, which didnt work, as i couldnt get a proper row direction afterwards. Tried adding a container class before the row class in html, and then tried to configure it to center, this didnt work either. Tried a bunch of small changes also, and even asked chatgpt to help, to no success.

Thiết kế website giá rẻ

Danh mục

Problem with properly aligning buttons on website