Added css styling for the pages

parent a5bde947
* {
box-sizing: border-box;
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
body {
background-color: teal;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
'header header header header'
'content content content content'
'. booklink authorlink .'
'. addbooklink addauthorlink .';
text-align: center;
color: black;
line-height: 1;
}
.header {
grid-area: header;
color: red;
}
.content {
grid-area: content;
color: orange;
}
.booklink {
grid-area: booklink;
background-color: yellow;
align-self: center;
}
.addbooklink {
grid-area: addbooklink;
background-color: green;
align-self: center;
}
.authorlink {
grid-area: authorlink;
background-color: blue;
align-self: center;
}
.addauthorlink {
grid-area: addauthorlink;
background-color: violet;
align-self: center;
}
a {
color: black;
}
h1 {
border-style:solid;
border-width: 3px;
padding: 3px;
border-color: black;
}
button, input {
background-color: orangered;
}
\ No newline at end of file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %} {% endblock %}</title>
{% block styles %}{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
{% block styles %} {% endblock %}
</head>
<body>
<div id="content">
......
......@@ -12,6 +12,6 @@
</li>
</ul>
<a href="/books">Books</a>
<a href="/home">Home</a>
<a href="/authors">Authors</a>
{% endblock %}
\ No newline at end of file
{% extends 'base.html' %}
{% load static %}
{% block title %} My Favorite Books & Authors {% endblock %}
{% block content %}
<h1> Welcome to {{ name }}'s Database of Favorite Books and Authors!</h1>
<br>
<h3> Throughout high school, reading books became one of my hobbies
<div class="grid">
<div class="header">
<h1> Welcome to {{ name }}'s Database of Favorite Books and Authors!</h1>
</div>
<div class="content">
<h3> Throughout high school, reading books became one of my hobbies
whenever I was bored. I usually enjoy young adult adventure books
back then which is why I became obsessed with Rick Riordan's novels.
Generally, it adventure or motivational (like Mitch Albom's) books
were my go-to when it comes to genres. Authors comes second in mind,
but I won't hesitate to stop patronizing their works the second I
find out that they have problematic views as a person. </h3>
find out that they have problematic views as a person. </h3> <br>
</div>
<a href="/books">Books</a>
<a href="/authors">Authors</a><br>
<a href="/books/add">Add Book</a>
<a href="/authors/add">Add Author</a>
<div class="booklink"> <a href="/books">Books</a> </div>
<div class="authorlink"> <a href="/authors">Authors</a> </div>
<div class="addbooklink"> <a href="/books/add">Add Book</a> </div>
<div class="addauthorlink"> <a href="/authors/add">Add Author</a></div>
</div>
{% endblock %}
\ No newline at end of file
......@@ -41,7 +41,7 @@ INSTALLED_APPS = [
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'bookshelf'
'bookshelf',
]
MIDDLEWARE = [
......@@ -120,7 +120,8 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/
STATIC_URL = 'static/'
STATIC_URL = 'bookshelf/static/'
# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment