сделал страничку с профилем красивой

CineSync/films/migrations/0003_film_description.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2 on 2024-04-14 17:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("films", "0002_alter_film_genres"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="film",
+            name="description",
+            field=models.CharField(
+                default="", help_text="Описание фильма", max_length=1000
+            ),
+            preserve_default=False,
+        ),
+    ]

CineSync/static/css/header.css

@@ -1,27 +0,0 @@
-.header_icon {
-    width: 5vw;
-    border-radius: 1.5vw;
-    padding:1vw;
-}
-.header_row, .auth_row, header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
-}
-header {
-    justify-content: space-between;
-    background-color: #ffffff;
-    position: fixed;
-    margin: 1%;
-    width: 98%;
-    border-radius: 0.8vw;;
-}
-.header_container {
-    width: 100%;
-    z-index: 103;
-}
-.nav-item {
-    margin: 5px;
-}
-

CineSync/static/css/includes/header.css

@@ -15,6 +15,7 @@ header {
     margin: 1%;
     width: 98%;
     border-radius: 0.8vw;;
+    border: 2px solid #0d1d3a;
 }
 .header_container {
     width: 100%;
@@ -29,3 +30,7 @@ header {
 .auth_row {
     margin-right: 1vw;
 }
+.user_link {
+    text-decoration: none;
+    color: #424242;
+}

CineSync/static/css/users/profile.css

@@ -0,0 +1,23 @@
+.profile_block, form {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+.profile_block {
+    margin-left: 30%;
+    margin-right: 30%;
+    margin-top: 4vw;
+    margin-bottom: 4vw;
+    border-radius: 3vw;
+    background-color: #eaeaea;
+    padding-top: 2vw;
+    padding-bottom: 2vw;
+    width: 40%;
+}
+.form_item {
+    width: 30vw !important;
+}
+.btn {
+    margin: 5px !important;
+}

CineSync/templates/includes/header.html

@@ -22,7 +22,14 @@
         </div>
         <div class="auth_row">
             {% if user.is_authenticated %}
-
+            <a class="user_link" href="{% url 'users:profile' %}">{{ user }}</a>
+            <a class="user_link" href="{% url 'users:profile' %}">
+                {% if user.image %}
+                {{ user.image_tmb }}
+                {% else %}
+                <img src="{% static 'img/user.png' %}" class="header_icon col-4">
+                {% endif %}
+            </a>
             {% else %}
             <ul class="nav nav-pills">
                 <li class="nav-item">

CineSync/templates/users/profile.html

@@ -2,8 +2,10 @@
 {% load static %}
 {% block title %}{{ user.username }}: изменить профиль{% endblock %}
 {% block content %}
-<h1>{{ user.username }}</h1>
+<link href="{% static 'css/users/profile.css' %}" rel="stylesheet">
-<form method="post" enctype="multipart/form-data">
+<div class="profile_block">
+    <h1>{{ user.username }}</h1>
+    <form method="post" enctype="multipart/form-data">
         {% csrf_token %}
         {% if user_form.non_field_errors %}
         <div class="alert alert-danger" role="alert">
@@ -13,7 +15,7 @@
         </div>
         {% endif %}
         {% for field in user_form %}
-    <div class="mb-3">
+        <div class="mb-3 form_item">
             <label for="fieldInput" class="form-label">{{ field.label }}</label>
             <p id="fieldInput" aria-describedby="help">{{ field }}</p>
             {% for error in field.errors %}
@@ -25,7 +27,7 @@
         </div>
         {% endfor %}
         {% for field in profile_form %}
-    <div class="mb-3">
+        <div class="mb-3 form_item">
             <label for="fieldInput" class="form-label">{{ field.label }}</label>
             <p id="fieldInput" aria-describedby="help">{{ field }}</p>
             {% for error in field.errors %}
@@ -45,4 +47,5 @@
     </form>
     <a class="btn btn-primary" type="submit" href="{% url 'users:logout' %}">Выйти</a>
     <a href="{% url "users:password_change" %}">Сменить пароль</a>
-{% endblock content %}
+    {% endblock content %}
+</div>