hw 2

1. Проект пересобран под фреймворк django
2. Все html переделаны под шаблоны
3. Прокинуты urls
4. Добавлена пагинация
5. Мелкие улучшения проекта
6. Добавлены Dockerfile и docker compose

questions/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

questions/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class QuestionsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'questions'

questions/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

questions/static/core/css/bootstrap.min.css

@@ -0,0 +1,6 @@
+@charset "UTF-8";/*!
+ * Bootstrap  v5.3.8 (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherLine truncated
+/*# sourceMappingURL=bootstrap.min.css.map */

questions/static/core/css/style.css

@@ -0,0 +1,383 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #e8f0f7 0%, #f7f7f7 100%);
+    color: #1f2d3a;
+    font-family: Verdana, Arial, sans-serif;
+    min-height: 100vh;
+}
+
+a {
+    color: #1d57d4;
+    text-decoration: underline;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+.page {
+    width: 96%;
+    max-width: 60rem;
+    margin: 3vh auto;
+    background: #ffffff;
+    border: 0.125rem solid #1f2d3a;
+    border-radius: 0.9rem;
+    box-shadow: 0 0.75rem 1.5rem rgba(20, 40, 60, 0.12);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh - 6vh);
+}
+
+.site-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 0.125rem solid #1f2d3a;
+    gap: 1rem;
+    flex-wrap: wrap;
+    background: #f2f7f7;
+}
+
+.logo {
+    font-size: 1.6rem;
+    font-weight: 700;
+    letter-spacing: 0.03rem;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.search {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex: 1;
+    min-width: 40%;
+}
+
+.search input {
+    flex: 1;
+    min-width: 45%;
+    padding: 0.4rem 0.75rem;
+    border: 0.125rem solid #1f2d3a;
+    border-radius: 1.5rem;
+    background: #fff;
+    font-family: inherit;
+}
+
+.button {
+    border: 0.125rem solid #1f2d3a;
+    background: #fff;
+    padding: 0.35rem 0.9rem;
+    font-weight: 700;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.04rem;
+}
+
+.button--ask {
+    background: #ff8a00;
+    color: #fff;
+}
+
+.user-block {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.user-links {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    font-size: 0.9rem;
+}
+
+.user-links a {
+    text-decoration: underline;
+}
+
+.user-auth {
+    display: flex;
+    gap: 0.6rem;
+    font-size: 0.9rem;
+}
+
+.content {
+    display: grid;
+    grid-template-columns: 1fr 28%;
+    gap: 1.5rem;
+    padding: 1.1rem 1.25rem 1.5rem;
+}
+
+.main-title {
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+    margin: 0 0 0.8rem;
+}
+
+.main-title h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.card {
+    border: 0.125rem solid #1f2d3a;
+    padding: 0.75rem;
+    display: grid;
+    grid-template-columns: 18% 1fr;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    background: #fcfcfc;
+    box-shadow: 0.25rem 0.25rem 0 rgba(31, 45, 58, 0.08);
+}
+
+.avatar-box {
+    width: 4.4rem;
+    height: 4.4rem;
+    border: 0.125rem solid #1f2d3a;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    background: #fff;
+}
+
+.avatar-box.small {
+    width: 2.9rem;
+    height: 2.9rem;
+    font-size: 0.65rem;
+}
+
+.vote-box {
+    margin-top: 0.5rem;
+    border: 0.125rem solid #1f2d3a;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    padding: 0.25rem 0.4rem;
+    width: fit-content;
+    background: #f2f7f7;
+}
+
+.vote-arrows {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.65rem;
+    line-height: 1;
+}
+
+.question-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 0.3rem;
+    display: inline-block;
+    color: #2b7a78;
+}
+
+.meta {
+    margin-top: 0.4rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.tag {
+    color: #1d57d4;
+}
+
+.sidebar {
+    background: #f2f7f7;
+    border: 0.125rem solid #1f2d3a;
+    padding: 0.75rem;
+    height: fit-content;
+    box-shadow: 0.25rem 0.25rem 0 rgba(31, 45, 58, 0.08);
+}
+
+.sidebar h2 {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-family: Verdana, Arial, sans-serif;
+}
+
+.sidebar-section {
+    margin-bottom: 1.5rem;
+}
+
+.tag-cloud {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.tag-cloud .tag-red {
+    color: #d4332f;
+    font-weight: 700;
+}
+
+.tag-cloud .tag-green {
+    color: #2f9e44;
+    font-weight: 700;
+}
+
+.tag-cloud .tag-orange {
+    color: #e67a2f;
+    font-weight: 700;
+}
+
+.member-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.form {
+    display: grid;
+    gap: 0.6rem;
+    max-width: 32rem;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 30% 1fr;
+    gap: 0.6rem;
+    align-items: center;
+}
+
+.form input,
+.form textarea {
+    padding: 0.4rem 0.6rem;
+    border: 0.125rem solid #1f2d3a;
+    font-family: inherit;
+    background: #fff;
+}
+
+.form textarea {
+    min-height: 9rem;
+    resize: vertical;
+}
+
+.error {
+    color: #d4332f;
+    font-weight: 700;
+}
+
+.pagination {
+    display: flex;
+    gap: 0.6rem;
+    margin: 0.6rem 0 1rem;
+}
+
+.page-link {
+    border: 0.125rem solid #1f2d3a;
+    padding: 0.2rem 0.5rem;
+    min-width: 1.6rem;
+    text-align: center;
+    color: #111;
+    text-decoration: none;
+    background: #fff;
+}
+
+.answer-card {
+    border: 0.125rem solid #1f2d3a;
+    padding: 0.6rem;
+    display: grid;
+    grid-template-columns: 16% 1fr;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    background: #fcfcfc;
+    box-shadow: 0.25rem 0.25rem 0 rgba(31, 45, 58, 0.08);
+}
+
+.answer-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: 0.4rem;
+}
+
+.footer {
+    border-top: 0.125rem solid #1f2d3a;
+    padding: 0.6rem 1.1rem;
+    background: #f2f7f7;
+    text-align: center;
+    font-size: 0.85rem;
+    margin-top: auto;
+}
+
+
+@media (max-width: 768px) {
+    .content {
+        grid-template-columns: 1fr;
+    }
+
+    .sidebar {
+        order: 2;
+    }
+
+    .search {
+        width: 100%;
+    }
+}
+
+
+@media (max-width: 375px) {
+    .site-header {
+        padding: 0.8rem;
+        gap: 0.6rem;
+    }
+
+    .logo {
+        font-size: 1.3rem;
+    }
+
+    .search {
+        min-width: 100%;
+    }
+
+    .search input {
+        min-width: 100%;
+    }
+
+    .content {
+        padding: 0.8rem;
+        gap: 1rem;
+    }
+
+    .card,
+    .answer-card {
+        grid-template-columns: 1fr;
+    }
+
+    .avatar-box,
+    .avatar-box.small {
+        width: 3.2rem;
+        height: 3.2rem;
+    }
+}
+
+@media (min-width: 1200px) {
+    .page {
+        max-width: 72rem;
+    }
+
+    .content {
+        grid-template-columns: 1fr 24%;
+        gap: 2rem;
+    }
+
+    .logo {
+        font-size: 1.8rem;
+    }
+}

questions/templates/core/ask.html

@@ -0,0 +1,27 @@
+{% extends 'core/layout/base.html' %}
+{% load static %}
+
+{% block content %}
+
+<div class="main-title">
+    <h1>Ask a Question</h1>
+</div>
+
+<form class="form">
+    <div class="form-row">
+        <label for="title">Title</label>
+        <input id="title" type="text" value="How to build a moon park ?">
+    </div>
+    <div class="form-row">
+        <label for="text">Text</label>
+        <textarea id="text">Really, how ? Have no idea about it</textarea>
+    </div>
+    <div class="form-row">
+        <label for="tags">Tags</label>
+        <input id="tags" type="text" value="moon, park, puzzle">
+    </div>
+    <div>
+        <button class="button" type="button">ASK IT</button>
+    </div>
+</form>
+{% endblock %}

questions/templates/core/base.html

@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>VkDesk | Fresh Questions</title>
+    <meta name="description" content="VkDesk Q&A">
+    <link rel="stylesheet" href="../../static/core/css/style.css">
+</head>
+<body>
+    <header class="site-header">
+        <div class="logo">VkDesk</div>
+        <form class="search">
+            <input type="text" placeholder="Search">
+            <a class="button button--ask" href="index">ASK IT</a>
+        </form>
+        <div class="user-block">
+            <div class="avatar-box small">avatar</div>
+            <div class="user-links">
+                <div class="user-name">Dr. Pepper</div>
+                <div>
+                    <a href="profile">settings</a>
+                    <a href="login">log out</a>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <div class="content">
+        <main>
+            <div class="main-title">
+                <h1>Fresh Questions</h1>
+                <a href="#">Top Today</a>
+            </div>
+
+            <article class="card">
+                <div>
+                    <div class="avatar-box">avatar</div>
+                    <div class="vote-box">
+                        <span>5</span>
+                        <span class="vote-arrows">^<span>'</span></span>
+                    </div>
+                </div>
+                <div>
+                    <a class="question-title" href="question.html">How to build a moon park ?</a>
+                    <p>Guys, i have trouble with a moon park. Cant find the black-jack...</p>
+                    <div class="meta">
+                        <a href="question.html">answer (3)</a>
+                        <span>Tags:</span>
+                        <a class="tag" href="#">black-jack</a>
+                        <a class="tag" href="#">bender</a>
+                    </div>
+                </div>
+            </article>
+
+            <article class="card">
+                <div>
+                    <div class="avatar-box">avatar</div>
+                    <div class="vote-box">
+                        <span>5</span>
+                        <span class="vote-arrows">^<span>'</span></span>
+                    </div>
+                </div>
+                <div>
+                    <a class="question-title" href="question">How to build a moon park ?</a>
+                    <p>Guys, i have trouble with a moon park. Can't find the black-jack...</p>
+                    <div class="meta">
+                        <a href="question">answer (3)</a>
+                        <span>Tags:</span>
+                        <a class="tag" href="#">black-jack</a>
+                        <a class="tag" href="#">bender</a>
+                    </div>
+                </div>
+            </article>
+
+            <article class="card">
+                <div>
+                    <div class="avatar-box">avatar</div>
+                    <div class="vote-box">
+                        <span>5</span>
+                        <span class="vote-arrows">^<span>'</span></span>
+                    </div>
+                </div>
+                <div>
+                    <a class="question-title" href="question.html">How to build a moon park ?</a>
+                    <p>Guys, i have trouble with a moon park. Can't find the black-jack...</p>
+                    <div class="meta">
+                        <a href="question.html">answer (3)</a>
+                        <span>Tags:</span>
+                        <a class="tag" href="#">black-jack</a>
+                        <a class="tag" href="#">bender</a>
+                    </div>
+                </div>
+            </article>
+
+            <nav class="pagination">
+                <a class="page-link" href="#">1</a>
+                <a class="page-link" href="#">2</a>
+                <a class="page-link" href="#">3</a>
+                <span class="page-link">...</span>
+                <a class="page-link" href="#">53</a>
+            </nav>
+        </main>
+
+        <aside class="sidebar">
+            <div class="sidebar-section">
+                <h2>Trending Tags</h2>
+                <div class="tag-cloud">
+                    <span>perl</span>
+                    <span class="tag-red">c++</span>
+                    <span>TechnoPark</span>
+                    <span class="tag-red">RUST</span>
+                    <span class="tag-green">django</span>
+                    <span>Mail.Ru</span>
+                    <span>Java</span>
+                    <span class="tag-orange">TS</span>
+                </div>
+            </div>
+
+            <div class="sidebar-section">
+                <h2>Top Members</h2>
+                <div class="member-list">
+                    <a href="#">Mr. Freeman</a>
+                    <a href="#">Dr. House</a>
+                    <a href="#">Bender</a>
+                    <a href="#">Queen Victoria</a>
+                    <a href="#">V. Pupkin</a>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+    <footer class="footer">2026</footer>
+</body>
+</html>
+
+
+
+
+
+

questions/templates/core/index.html

@@ -0,0 +1,16 @@
+{% extends 'core/layout/base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="main-title">
+    <h1>Fresh Questions</h1>
+    <a href="#">Top Today</a>
+</div>
+
+{% for question in questions %}
+{% include 'core/partials/question.html' %}
+{% endfor %}
+{% include 'core/partials/pagination.html' %}
+
+
+{% endblock %}

questions/templates/core/layout/base.html

@@ -0,0 +1,68 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>VkDesk | Fresh Questions</title>
+    <meta name="description" content="VkDesk Q&A">
+    <link rel="stylesheet" href="{% static 'core/css/style.css' %}">
+</head>
+<body>
+    <header class="site-header">
+        <div class="logo">VkDesk</div>
+        <form class="search">
+            <input type="text" placeholder="Search">
+            <a class="button button--ask" href="ask">ASK IT</a>
+        </form>
+        <div class="user-block">
+            <div class="avatar-box small">avatar</div>
+            <div class="user-links">
+                <a href="profile" class="user-name">Dr. Pepper</a>
+                <div>
+                    <a href="profile">settings</a>
+                    <a href="login">log out</a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <div class="content">
+        <main>
+            {% block content %}
+            {% endblock %}
+        </main>
+        <aside class="sidebar">
+            <div class="sidebar-section">
+                <h2>Trending Tags</h2>
+                <div class="tag-cloud">
+                    <span>perl</span>
+                    <span class="tag-red">python</span>
+                    <span>TechnoPark</span>
+                    <span class="tag-red">MySQL</span>
+                    <span class="tag-green">django</span>
+                    <span>Mail.Ru</span>
+                    <span>Voloshin</span>
+                    <span class="tag-orange">Firefox</span>
+                </div>
+            </div>
+
+            <div class="sidebar-section">
+                <h2>Top Members</h2>
+                <div class="member-list">
+                    <a href="#">Mr. Freeman</a>
+                    <a href="#">Dr. House</a>
+                    <a href="#">Bender</a>
+                    <a href="#">Queen Victoria</a>
+                    <a href="#">V. Pupkin</a>
+                </div>
+            </div>
+        </aside>
+    </div>
+    <footer class="footer">2026</footer>
+</body>
+</html>
+
+
+
+
+
+

questions/templates/core/login.html

@@ -0,0 +1,31 @@
+{% extends 'core/layout/base.html' %}
+{% load static %}
+
+{% block content %}
+
+
+<div class="main-title">
+    <h1>Sign In</h1>
+</div>
+
+<p class="error">Sorry, wrong password!</p>
+
+<form class="form">
+    <div class="form-row">
+        <label for="login">Login</label>
+        <input id="login" type="text" placeholder="Enter your login here">
+    </div>
+    <div class="form-row">
+        <label for="password">Password</label>
+        <input id="password" type="password" value="********">
+    </div>
+    <div>
+        <button class="button" type="button">Sign In!</button>
+    </div>
+    <a href="signup">create new account</a>
+</form>
+
+
+{% endblock %}
+
+

questions/templates/core/partials/pagination.html

@@ -0,0 +1,9 @@
+<nav class="pagination">
+    {% if page_obj.has_previous %}
+        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
+    {% endif %}
+    <a class="page-link" href="#">{{ page_obj.number }}</a>
+    {% if page_obj.has_next %}
+        <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
+    {% endif %}
+</nav>

questions/templates/core/partials/question.html

@@ -0,0 +1,20 @@
+
+<article class="card">
+    <div>
+        <div class="avatar-box">avatar</div>
+        <div class="vote-box">
+            <span>5</span>
+            <span class="vote-arrows">^</span>
+        </div>
+    </div>
+    <div>
+        <p class="question-title" href="question">{{ question.title }}</p>
+        <p>{{ question.text }}</p>
+        <div class="meta">
+            <a href="question">answer (3)</a>
+            <span>Tags:</span>
+            <a class="tag" href="#">black-jack</a>
+            <a class="tag" href="#">bender</a>
+        </div>
+    </div>
+</article>

questions/templates/core/profile.html

@@ -0,0 +1,35 @@
+{% extends 'core/layout/base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="main-title">
+    <h1>Profile: Dr. Pepper</h1>
+</div>
+
+<form class="form">
+    <div class="form-row">
+        <label for="login">Login</label>
+        <input id="login" type="text" value="dr_pepper">
+    </div>
+    <div class="form-row">
+        <label for="email">Email</label>
+        <input id="email" type="email" value="drpepper@mail.ru">
+    </div>
+    <div class="form-row">
+        <label for="nickname">NickName</label>
+        <input id="nickname" type="text" value="Dr. Pepper">
+    </div>
+    <div class="form-row">
+        <label>Upload avatar</label>
+        <div class="avatar-box">avatar</div>
+    </div>
+    <div class="form-row">
+        <span></span>
+        <input type="file">
+    </div>
+    <div>
+        <button class="button" type="button">Save</button>
+    </div>
+</form>
+
+{% endblock %}

questions/templates/core/question.html

@@ -0,0 +1,66 @@
+{% extends 'core/layout/base.html' %}
+{% load static %}
+
+{% block content %}
+
+<article class="card">
+    <div>
+        <div class="avatar-box">avatar</div>
+        <div class="vote-box">
+            <span>5</span>
+            <span class="vote-arrows">^<span>'</span></span>
+        </div>
+    </div>
+    <div>
+        <div class="question-title">How to build a moon park ?</div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
+        <div class="meta">
+            <span>Tags:</span>
+            <a class="tag" href="#">black-jack</a>
+            <a class="tag" href="#">bender</a>
+        </div>
+    </div>
+</article>
+
+<article class="answer-card">
+    <div>
+        <div class="avatar-box">avatar</div>
+        <div class="vote-box">
+            <span>5</span>
+            <span class="vote-arrows">^<span>'</span></span>
+        </div>
+    </div>
+    <div>
+        <p>First of all I would like to thank you for the invitation to participate in such a ... Russia is the huge territory which in many respects needs to be render habitable.</p>
+        <div class="answer-controls">
+            <input type="checkbox" checked>
+            <span>Correct!</span>
+        </div>
+    </div>
+</article>
+
+<article class="answer-card">
+    <div>
+        <div class="avatar-box">avatar</div>
+        <div class="vote-box">
+            <span>3</span>
+            <span class="vote-arrows">^<span>'</span></span>
+        </div>
+    </div>
+    <div>
+        <p>First of all I would like to thank you for the invitation to participate in such a ... Russia is the huge territory which in many respects needs to be render habitable.</p>
+        <div class="answer-controls">
+            <input type="checkbox">
+            <span>Correct!</span>
+        </div>
+    </div>
+</article>
+
+<form class="form">
+    <label for="answer">Enter your answer here..</label>
+    <textarea id="answer"></textarea>
+    <button class="button" type="button">Answer</button>
+</form>
+
+
+{% endblock %}

questions/templates/core/signup.html

@@ -0,0 +1,46 @@
+{% extends 'core/layout/base.html' %}
+{% load static %}
+
+{% block content %}
+
+<div class="main-title">
+    <h1>Create Account</h1>
+</div>
+
+<p class="error">Sorry, this email address already registered!</p>
+
+<form class="form">
+    <div class="form-row">
+        <label for="login">Login</label>
+        <input id="login" type="text" value="dr_pepper">
+    </div>
+    <div class="form-row">
+        <label for="email">Email</label>
+        <input id="email" type="email" value="drpepper@mail.ru">
+    </div>
+    <div class="form-row">
+        <label for="nickname">NickName</label>
+        <input id="nickname" type="text" value="Dr. Pepper">
+    </div>
+    <div class="form-row">
+        <label for="password">Password</label>
+        <input id="password" type="password" value="********">
+    </div>
+    <div class="form-row">
+        <label for="repeat">Repeat password</label>
+        <input id="repeat" type="password" value="********">
+    </div>
+    <div class="form-row">
+        <label>Upload avatar</label>
+        <input type="file">
+    </div>
+    <div>
+        <button class="button" type="button">Register!</button>
+    </div>
+</form>
+
+{% endblock %}
+
+
+
+

questions/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

questions/urls.py

@@ -0,0 +1,12 @@
+from django.urls import path
+
+from questions import views
+
+urlpatterns = [
+    path('', views.index, name='index'),
+    path('login', views.login, name='login'),
+    path('ask', views.ask, name='ask'),
+    path('profile', views.profile, name='profile'),
+    path('question', views.question, name='question'),
+    path('signup', views.signup, name='signup'),
+]

questions/views.py

@@ -0,0 +1,38 @@
+from django.shortcuts import render
+from django.core.paginator import Paginator
+
+
+QUESTIONS = [
+    {
+        "id": i,
+        "title": f'Question number {i}',
+        "text": f'Some text {i}',
+    }
+    for i in range(10)
+]
+
+def index(request):
+    try:
+        page_number = int(request.GET.get('page', 1))
+    except ValueError:
+        page_number = 1
+    page = Paginator(QUESTIONS, 4)
+    page_obj = page.page(page_number)
+    return render(request, 'core/index.html', context={'questions': page_obj.object_list, 'page_obj': page_obj})
+
+
+def ask(request):
+    return render(request, 'core/ask.html', context={'questions': QUESTIONS})
+
+
+def login(request):
+    return render(request, 'core/login.html', context={'questions': QUESTIONS})
+
+def profile(request):
+    return render(request, 'core/profile.html', context={'questions': QUESTIONS})
+
+def question(request):
+    return render(request, 'core/question.html', context={'questions': QUESTIONS})
+
+def signup(request):
+    return render(request, 'core/signup.html', context={'questions': QUESTIONS})