Formatted the contents of all the pages using styles.css

gabigarrero_reading/bookshelf/templates/bookshelf/author_details.html

@@ -22,8 +22,10 @@
         {% endfor %}    
     </ul>
 
-    <a href = '/bookshelf/home/'>Home</a>
-    <a href = '/bookshelf/books/'>Books</a>
-    <a href = '/bookshelf/authors/'>Authors</a>
+    <div class = "links">
+        <a class = "flex-items" href = '/bookshelf/home/'>Home</a>
+        <a class = "flex-items" href = '/bookshelf/books/'>Books</a>
+        <a class = "flex-items" href = '/bookshelf/authors/'>Authors</a>
+    </div>
 
 {% endblock %}
\ No newline at end of file

gabigarrero_reading/bookshelf/templates/bookshelf/authors.html

@@ -16,7 +16,9 @@
         {% endfor %}
     </ul>
 
-    <a href = '/bookshelf/home/'>Home</a>
-    <a href = '/bookshelf/books/'>Books</a>
+    <div class = "links">
+        <a class = "flex-items" href = '/bookshelf/home/'>Home</a>
+        <a class = "flex-items" href = '/bookshelf/books/'>Books</a>
+    </div>
     
 {% endblock %}
\ No newline at end of file

gabigarrero_reading/bookshelf/templates/bookshelf/book_details.html

@@ -6,13 +6,15 @@
 
 {% block content %}
     <h1> {{ object.title }} </h1>
-    <a href = '{{ object.author.get_absolute_url }}'>{{ object.author }}</a>
+    <a class = "authorLink" href = '{{ object.author.get_absolute_url }}'>{{ object.author }}</a>
     <p>{{ object.publisher }}</p>
     <p>{{ object.year_published }}</p>
     <p>{{ object.ISBN }}</p>
     <p>{{ object.blurb }}</p>
 
-    <a href = '/bookshelf/home/'>Home</a>
-    <a href = '/bookshelf/books/'>Books</a>
-    <a href = '/bookshelf/authors/'>Authors</a>
+    <div class = "links">
+        <a class = "flex-items" href = '/bookshelf/home/'>Home</a>
+        <a class = "flex-items" href = '/bookshelf/books/'>Books</a>
+        <a class = "flex-items" href = '/bookshelf/authors/'>Authors</a>
+    </div>
 {% endblock %}
\ No newline at end of file

gabigarrero_reading/bookshelf/templates/bookshelf/books.html

@@ -15,7 +15,9 @@
         {% endfor %}
     </ul>
 
-    <a href = '/bookshelf/home/'>Home</a>
-    <a href = '/bookshelf/authors/'>Authors</a>
+    <div class = "links">
+        <a class = "flex-items" href = '/bookshelf/home/'>Home</a>
+        <a class = "flex-items" href = '/bookshelf/authors/'>Authors</a>
+    </div>
 
 {% endblock %}
\ No newline at end of file

gabigarrero_reading/bookshelf/templates/bookshelf/home.html

@@ -7,8 +7,11 @@
 {% block content %}
     <h1>Welcome to Gabi's Database of Favorite Books and Authors!</h1>
 
-    <p>I don't read books.</p>
+    <p>I don't actually read books so I ended up just putting some of the most famous books and authors for my data.</p>
+
+    <div class = "links">
+        <a class = "flex-items" href='/bookshelf/books/'>Books</a>
+        <a class = "flex-items" href='/bookshelf/authors/'>Authors</a>
+    </div>
     
-    <a href='/bookshelf/books/'>Books</a>
-    <a href='/bookshelf/authors/'>Authors</a>
 {% endblock %}
\ No newline at end of file

gabigarrero_reading/static/styles.css

+/* HTML */
+
+html {
+    scroll-behavior: smooth;
+    background-color: #181818;
+    font-size: 24px;
+    color: white;
+    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+/* Body */
+body {
+    padding: 5% 15% 5% 15%;
+}
+
+/* Text */
+
+h1 {
+    text-align: center;
+}
+
+h2 {
+    text-align: center;
+}
+
+p {
+    text-align: center;
+}
+
+/* Links */
+
+.authorLink {
+    text-align: center;
+    display: block;
+}
+
+.links {
+    padding-top: 5%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-items {
+    width: 100px;
+    text-align: center;
+}
+
+a:link {
+    color: #ffa31a;
+    text-decoration: none;
+    transition: 0.5s;
+}
+
+a:visited {
+    color: #ffa31a;
+    text-decoration: none;
+}
+
+a:hover {
+    color: white;
+    text-decoration: none;
+    transition: 0.5s;
+}
+
+a:active {
+    color: #ffa31a;
+    text-decoration: none;
+}
\ No newline at end of file