├── README.md
├── static
    └── css
    │   └── style.css
└── templates
    ├── account
        ├── login.html
        ├── logout.html
        └── signup.html
    ├── base.html
    ├── index.html
    └── post_detail.html


/README.md:
--------------------------------------------------------------------------------
1 | ![CI logo](https://codeinstitute.s3.amazonaws.com/fullstack/ci_logo_small.png)
2 | 
3 | # Starter files for Django blog project
4 | 
5 | This repo contains the starter templates and CSS file for the Django blog project.
6 | 
7 | Copy these HTML files into your `templates` directory
8 | 
9 | Copy the `style.css` file into the `static/css` directory


--------------------------------------------------------------------------------
/static/css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background-color: #F9FAFC;
  3 | }
  4 | 
  5 | .brand {
  6 |     font-family: Lato, sans-serif;
  7 |     font-size: 1.4rem;
  8 |     font-weight: 700;
  9 |     color: #4A4A4F;
 10 | }
 11 | 
 12 | .red-o {
 13 |     color: #E84610;
 14 | }
 15 | 
 16 | .thin {
 17 |     font-weight: 300;
 18 | }
 19 | 
 20 | .light-bg {
 21 |     background-color: #fff;
 22 | }
 23 | 
 24 | .dark-bg {
 25 |     background-color: #445261;
 26 | }
 27 | 
 28 | .main-bg {
 29 |     background-color: #F9FAFC;
 30 | }
 31 | 
 32 | .card {
 33 |     border: none;
 34 |     background-color: transparent;
 35 | }
 36 | 
 37 | .image-container {
 38 |     position: relative;
 39 | }
 40 | 
 41 | .image-flash {
 42 |     position: absolute;
 43 |     bottom: 5%;
 44 |     min-width: 30%;
 45 |     left: -2px;
 46 |     background-color: #23BBBB;
 47 | }
 48 | 
 49 | .author {
 50 |     color: white;
 51 |     margin: 4px;
 52 |     text-transform: uppercase;
 53 | }
 54 | 
 55 | .masthead {
 56 |     margin-top: 10px;
 57 |     overflow: hidden;
 58 |     position: relative;
 59 |     display: inline-block;
 60 |     height: 33vh;
 61 |     width: 100%;
 62 | }
 63 | 
 64 | .masthead-text {
 65 |     background-color: #445261;
 66 |     color: white;
 67 |     position: relative;
 68 | }
 69 | 
 70 | .masthead-image {
 71 |     position: relative;
 72 |     overflow: hidden;
 73 | }
 74 | 
 75 | .masthead-image:after {
 76 |     content: "";
 77 |     position: absolute;
 78 |     top: 0;
 79 |     right: 90%;
 80 |     height: 100%;
 81 |     width: 150%;
 82 |     background: #445261;
 83 |     -webkit-transform: skew(15deg);
 84 |     -moz-transform: skew(15deg);
 85 |     transform: skew(15deg);
 86 |     z-index: 100;
 87 | }
 88 | 
 89 | .post-link {
 90 |     text-decoration: none;
 91 |     color: #445261;
 92 | }
 93 | 
 94 | .post-link:hover,
 95 | .page-link {
 96 |     color: #E84610;
 97 | }
 98 | 
 99 | .post-title {
100 |     margin-top: 20%;
101 |     margin-left: 5%;
102 | }
103 | 
104 | .post-subtitle {
105 |     margin-left: 5%;
106 |     color: lightgray;
107 | }
108 | 
109 | .btn-signup {
110 |     background-color: #23BBBB;
111 |     color: #fff;
112 | }
113 | 
114 | .btn-signup:hover,
115 | .btn-signup:active {
116 |     background-color: #fff;
117 |     color: #23BBBB;
118 | }
119 | 
120 | .link {
121 |     color: #23BBBB;
122 |     text-decoration: none;
123 | }
124 | 
125 | .link:hover,
126 | .link:active {
127 |     color: #445261;
128 |     text-decoration: underline;
129 | }
130 | 
131 | .btn-like {
132 |     color: #E84610;
133 |     border: none;
134 |     background: transparent;
135 | }
136 | 
137 | .btn-like:hover,
138 | .btn-like:active {
139 |     color: #E84610;
140 |     background: transparent;
141 |     border: none;
142 | }


--------------------------------------------------------------------------------
/templates/account/login.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% load i18n %}
 4 | {% load account socialaccount %}
 5 | 
 6 | {% block head_title %}{% trans "Sign In" %}{% endblock %}
 7 | 
 8 | {% block content %}
 9 | 
10 | <div class="container">
11 |     <div class="row">
12 |         <div class="col-md-8 mt-3 offset-md-2">
13 |             <h3>{% trans "Sign In" %}</h3>
14 | 
15 |             <p>{% blocktrans %}Welcome back to the code|star blog. To leave a comment or like a post, please log in. If
16 |                 you
17 |                 have not created an account yet, then <a class="link" href="{{ signup_url }}">sign up</a>
18 |                 first.{% endblocktrans %}</p>
19 |         </div>
20 |     </div>
21 |     <div class="row">
22 |         <div class="col-md-8 mt-3 offset-md-2">
23 |             <form class="login" method="POST" action="{% url 'account_login' %}">
24 |                 {% csrf_token %}
25 |                 {{ form.as_p }}
26 |                 {% if redirect_field_value %}
27 |                 <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
28 |                 {% endif %}
29 |                 <button class="btn btn-signup right" type="submit">{% trans "Sign In" %}</button>
30 |             </form>
31 |         </div>
32 |     </div>
33 | </div>
34 | {% endblock %}


--------------------------------------------------------------------------------
/templates/account/logout.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% load i18n %}
 4 | 
 5 | {% block head_title %}{% trans "Sign Out" %}{% endblock %}
 6 | 
 7 | {% block content %}
 8 | <div class="container">
 9 |     <div class="row">
10 |         <div class="col-md-8 mt-3 offset-md-2">
11 |             <h3>{% trans "Sign Out" %}</h3>
12 | 
13 |             <p>{% trans 'Are you sure you want to sign out?' %}</p>
14 |         </div>
15 |     </div>
16 |     <div class="row">
17 |         <div class="col-md-8 mt-3 offset-md-2">
18 | 
19 |             <form method="post" action="{% url 'account_logout' %}">
20 |                 {% csrf_token %}
21 |                 {% if redirect_field_value %}
22 |                 <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
23 |                 {% endif %}
24 |                 <button class="btn btn-signup right" type="submit">{% trans 'Sign Out' %}</button>
25 |             </form>
26 |         </div>
27 |     </div>
28 | </div>
29 | {% endblock %}


--------------------------------------------------------------------------------
/templates/account/signup.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% load i18n %}
 4 | 
 5 | {% block head_title %}{% trans "Signup" %}{% endblock %}
 6 | 
 7 | {% block content %}
 8 | <div class="container">
 9 |     <div class="row">
10 |         <div class="col-md-8 mt-3 offset-md-2">
11 |             <h3>{% trans "Sign Up" %}</h3>
12 | 
13 |             <p>{% blocktrans %}Welcome back to the code|star blog. Do you already have an account? Then please <a
14 |                     class="link" href="{{ login_url }}">sign in</a> instead.{% endblocktrans %}</p>
15 |         </div>
16 |     </div>
17 |     <div class="row">
18 |         <div class="col-md-8 mt-3 offset-md-2">
19 |             <form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
20 |                 {% csrf_token %}
21 |                 {{ form.as_p }}
22 |                 {% if redirect_field_value %}
23 |                 <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
24 |                 {% endif %}
25 |                 <button class="btn btn-signup right" type="submit">{% trans "Sign Up" %} &raquo;</button>
26 |             </form>
27 |         </div>
28 |     </div>
29 | </div>
30 | 
31 | {% endblock %}


--------------------------------------------------------------------------------
/templates/base.html:
--------------------------------------------------------------------------------
 1 | {% load static %}
 2 | 
 3 | <!DOCTYPE html>
 4 | <html class="h-100">
 5 | 
 6 | <head>
 7 |     <title>CodeStar Blog</title>
 8 | 
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com">
10 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
11 |     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;700&display=swap" rel="stylesheet">
12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
13 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
14 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
15 |         integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
16 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
17 |         integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">
18 |     </script>
19 |     <link rel="stylesheet" href="{% static 'css/style.css' %}">
20 | 
21 | </head>
22 | 
23 | <body class="d-flex flex-column h-100 main-bg">
24 | 
25 |     <!-- Navigation -->
26 | 
27 |     <nav class="navbar navbar-expand-lg navbar-light bg-white">
28 |         <div class="container-fluid">
29 |             <a class="navbar-brand" href="{% url 'home' %}"><span class="brand">c<span class="red-o">o</span>de<span
30 |                         class="thin">|star</span></span></span></a>
31 |             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
32 |                 aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
33 |                 <span class="navbar-toggler-icon"></span>
34 |             </button>
35 |             <div class="collapse navbar-collapse" id="navbarText">
36 |                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
37 |                     <li class="nav-item">
38 |                         <a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
39 |                     </li>
40 |                     {% if user.is_authenticated %}
41 |                     <li class="nav-item">
42 |                         <a class="nav-link" href="#">Logout</a>
43 |                     </li>
44 |                     {% else %}
45 |                     <li class="nav-item">
46 |                         <a class="nav-link" href="#">Register</a>
47 |                     </li>
48 |                     <li class="nav-item">
49 |                         <a class="nav-link" href="#">Login</a>
50 |                     </li>
51 |                     {% endif %}
52 |                 </ul>
53 |                 <span class="navbar-text text-muted">
54 |                     adventures of a software developer
55 |                 </span>
56 |             </div>
57 |         </div>
58 |     </nav>
59 | 
60 |     <main class="flex-shrink-0 main-bg">
61 |         {% block content %}
62 |         <!-- Content Goes here -->
63 |         {% endblock content %}
64 |     </main>
65 | 
66 |     <!-- Footer -->
67 |     <footer class="footer mt-auto py-3 dark-bg">
68 |         <p class="m-0 text-center text-white">Made by Code Instituters</p>
69 |         <p class="m-0 text-center text-white">Follow us: <i class="fab fa-facebook-square ms-3"></i>
70 |             <i class="fab fa-twitter-square ms-3"></i>
71 |             <i class="fab fa-instagram-square ms-3"></i>
72 |             <i class="fab fa-youtube-square ms-3"></i></p>
73 |     </footer>
74 | </body>
75 | 
76 | </html>


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | 
 3 | {% block content %}
 4 | 
 5 | <div class="container-fluid">
 6 |     <div class="row">
 7 | 
 8 |         <!-- Blog Entries Column -->
 9 |         <div class="col-12 mt-3 left">
10 |             <div class="row">
11 | 
12 |             </div>
13 |         </div>
14 |     </div>
15 | 
16 | </div>
17 | 
18 | {%endblock%}


--------------------------------------------------------------------------------
/templates/post_detail.html:
--------------------------------------------------------------------------------
 1 | {% extends 'base.html' %} {% block content %}
 2 | 
 3 | <div class="masthead">
 4 |     <div class="container">
 5 |         <div class="row g-0">
 6 |             <div class="col-md-6 masthead-text">
 7 |                 <!-- Post title goes in these h1 tags -->
 8 |                 <h1 class="post-title">
 9 |                 </h1>
10 |                 <!-- Post author goes before the | the post's created date goes after -->
11 |                 <p class="post-subtitle"> | </p>
12 |             </div>
13 |             <div class="d-none d-md-block col-md-6 masthead-image">
14 |                 <!-- The featured image URL goes in the src attribute -->
15 |                 {% if "placeholder" in post.featured_image.url %}
16 |                 <img src="https://codeinstitute.s3.amazonaws.com/fullstack/blog/default.jpg" width="100%">
17 |                 {% else %}
18 |                 <img src="" width="100%">
19 |                 {% endif %}
20 |             </div>
21 |         </div>
22 |     </div>
23 | </div>
24 | 
25 | <div class="container">
26 |     <div class="row">
27 |         <div class="col card mb-4  mt-3 left  top">
28 |             <div class="card-body">
29 |                 <!-- The post content goes inside the card-text. -->
30 |                 <!-- Use the | safe filter inside the template tags -->
31 |                 <p class="card-text "></p>
32 |                 <div class="row">
33 | 
34 |                     <div class="col-1">
35 |                         <!-- The number of likes goes before the closing strong tag -->
36 |                         <strong class="text-secondary"><i class="far fa-heart"></i> </strong>
37 |                     </div>
38 |                     <div class="col-1">
39 |                         {% with comments.count as total_comments %}
40 |                         <strong class="text-secondary"><i class="far fa-comments"></i>
41 |                             <!-- Our total_comments variable goes before the closing strong tag -->
42 |                         </strong>
43 |                         {% endwith %}
44 |                     </div>
45 |                 </div>
46 |             </div>
47 |         </div>
48 |     </div>
49 |     <div class="row">
50 |         <div class="col">
51 |             <hr>
52 |         </div>
53 |     </div>
54 |     <div class="row">
55 |         <div class="col-md-8 card mb-4  mt-3 ">
56 |             <h3>Comments:</h3>
57 |             <div class="card-body">
58 |                 <!-- We want a for loop inside the tags to iterate through each comment in comments -->
59 |                 {% %}
60 |                 <div class="comments" style="padding: 10px;">
61 |                     <p class="font-weight-bold">
62 |                         <!-- The commenter's name goes here. Check the model if you're not sure what that is -->
63 |                         {{ }}
64 |                         <span class=" text-muted font-weight-normal">
65 |                             <!-- The comment's created date goes here -->
66 |                             {{ }}
67 |                         </span> wrote:
68 |                     </p>
69 |                     <!-- The body of the comment goes before the | -->
70 |                     {{  | linebreaks }}
71 |                 </div>
72 |                 <!-- Our for loop ends here -->
73 |                 {% %}
74 |             </div>
75 |         </div>
76 |         <div class="col-md-4 card mb-4  mt-3 ">
77 |             <div class="card-body">
78 |                 <!-- For later -->
79 |             </div>
80 |         </div>
81 |     </div>
82 | </div>
83 | 
84 | {% endblock content %}


--------------------------------------------------------------------------------