I need assistance in placing the website name above the navigation bar on my webpage. I have included HTML and CSS codes below.
The {load static} command within the HTML code loads CSS files in a Django project, but in this case, there is no Django involved, just visual styling using HTML and CSS.
If you have any queries, feel free to ask me!
Here is my HTML code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li, a {
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252A;
justify-content: center;
}
.nav__logo {
justify-content: center;
text-align: center;
}
.nav__links{
list-style: none;
}
.nav__links li {
padding: 0px 20px;
display: inline;
margin-right: 60px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #008Ba9
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
{% load static %}
<link rel = "stylesheet" href="{% static 'css/styles.css' %}">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<header>
<a class= "nav__logo" href="#">Rose</a>
<nav>
<ul class="nav__links">
<li><a href="#">Women</a></li>
<li><a href="#">Deals & Contests</a></li>
<li><a href="#">Gifts</a></li>
</ul>
</nav>
</header>
</body>
</html>And here is my CSS code: