Applied basic CSS styling

parent c797500a
Pipeline #3095 failed with stages
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
{% endfor %} {% endfor %}
</ul> </ul>
<center> <center>
<a href="/bookshelf/home">Home</a> <button class="button"><a href="/bookshelf/home">Home</a></button>
<a href="/bookshelf/books">Books</a> <button class="button"><a href="/bookshelf/books">Books</a></button>
<a href="/bookshelf/authors">Authors</a> <button class="button"><a href="/bookshelf/authors">Authors</a></button>
</center> </center>
{% endblock %} {% endblock %}
\ No newline at end of file
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
<center> <center>
<a href="/bookshelf/home">Home</a> <button class="button"><a href="/bookshelf/home">Home</a></button>
<a href="/bookshelf/books">Books</a> <button class="button"><a href="/bookshelf/books">Books</a></button>
</center> </center>
{% endblock %} {% endblock %}
\ No newline at end of file
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<h3>{{ object.ISBN }}</h3> <h3>{{ object.ISBN }}</h3>
<p>{{ object.blurb }}</p> <p>{{ object.blurb }}</p>
<center> <center>
<a href="/bookshelf/home">Home</a> <button class="button"><a href="/bookshelf/home">Home</a></button>
<a href="/bookshelf/books">Books</a> <button class="button"><a href="/bookshelf/books">Books</a></button>
<a href="/bookshelf/authors">Authors</a> <button class="button"><a href="/bookshelf/authors">Authors</a></button>
</center> </center>
{% endblock %} {% endblock %}
\ No newline at end of file
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
<center> <center>
<a href="/bookshelf/home">Home</a> <button class="button"><a href="/bookshelf/home">Home</a></button>
<a href="/bookshelf/authors">Authors</a> <button class="button"><a href="/bookshelf/authors">Authors</a></button>
</center> </center>
{% endblock %} {% endblock %}
\ No newline at end of file
{% extends 'base.html' %} {% extends 'base.html' %}
{% load static %}
{% block title %}My Favorite Books and Authors{% endblock %} {% block title %}My Favorite Books and Authors{% endblock %}
{% block content %} {% block content %}
<center> <center>
<h1>Welcome to Lex's Database of Favorite Books and Authors!</h1> <h1>Welcome to Lex's Database of Favorite Books and Authors!</h1>
<img src="/static/reading.png" alt="Lazy Reading" style="width: 300pxpx;height:359px;">
<p>I don't really enjoy reading but if I were to do so, action or rom-com would be the genres I will go to.</p> <p>I don't really enjoy reading but if I were to do so, action or rom-com would be the genres I will go to.</p>
<br> <br>
<a href="/bookshelf/books">Books</a> <button class="button"><a href="/bookshelf/books">Books</a></button>
<a href="/bookshelf/authors">Authors</a> <button class="button"><a href="/bookshelf/authors">Authors</a></button>
</center> </center>
{% endblock %} {% endblock %}
\ No newline at end of file
...@@ -120,7 +120,8 @@ USE_TZ = True ...@@ -120,7 +120,8 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images) # Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/ # https://docs.djangoproject.com/en/4.1/howto/static-files/
STATIC_URL = 'static/' STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
# Default primary key field type # Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
......
...@@ -2,6 +2,50 @@ ...@@ -2,6 +2,50 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
<style>
html {height: 100%}
body {background-image: linear-gradient(#e6e7e2, #c7b698)}
h1 {
color: #374154;
font-family:'Georgia';
font-size: 30px;
}
h3 {
color: #374154;
font-family:'Georgia'
}
p {
color: #374154;
font-family: 'Palatino';
font-size: 17px;
}
ul {
color: #374154;
font-family: 'Palatino';
font-size: 17px;
}
.button {
background-color: #e6e7e2;
border: 2px solid #374154;
color: #374154;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-family: 'Palatino';
font-size: 13px;
border-radius: 8px;
transition-duration: 0.4s;
}
.button:hover {
background-color: #374154;
color: #e6e7e2;
}
</style>
</head> </head>
<body> <body>
<div id="content"> <div id="content">
......
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