cleaning up the mess

sbonaretti · sbonaretti · commit 3cbdb68fa0b7 · 2023-10-20T11:18:02.000+02:00
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -9,8 +9,6 @@
 Current colors:
  #f39200; /*blue*/
 
-/* test */
-
 /*--------------------------------------------------------------
 # General
 --------------------------------------------------------------*/
@@ -1192,3 +1190,43 @@ section {
 #footer .credits {
   font-size: 13px;
 }
+
+/* Default styles for buttons */
+.button {
+  font-family: "Raleway", sans-serif;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 18px;
+  letter-spacing: 1px;
+  width: 275px; /* Fixed width for the buttons */
+  display: inline-block;
+  padding: 14px 40px;
+  border-radius: 0px;
+  transition: 0.5s;
+  margin-top: auto;
+  color: #fff;
+  background: #f39200;
+  outline: none; /* Remove the outline */
+  border: none;
+  text-align: center;
+}
+
+/* Style for the container that holds the buttons */
+.button-container {
+  text-align: left;
+}
+
+/* Media query for screens with a maximum width of 600px (typical mobile screens) */
+@media only screen and (max-width: 992px){
+  /* Change alignment to vertical */
+  .button-container {
+      align-items: center; /* Center horizontally */
+      justify-content: center; /* Center vertically */
+      text-align: center;
+  }
+  /* Add margin between buttons */
+  .button {
+      margin-bottom: 10px;
+
+  }
+}
diff --git a/index.html b/index.html
@@ -3,8 +3,6 @@
 
 <head>
 
-  <!-- test -->
-
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-215562771-1"></script>
   <script>
@@ -95,8 +93,10 @@ <h6>by <a href="https://sbonaretti.github.io/" target="_blank">Serena Bonaretti<
 
       <br>
       <br>
-      <a href="assets/book/learn_python_with_jupyter.pdf" class="btn-preorder">Get the free book</a>
-      <a href="https://forms.gle/iPiEc4wfW84e8QrS9" target="_blank" class="btn-preorder">Leave a feedback</a>
+      <div class="button-container">
+        <a href="assets/book/learn_python_with_jupyter.pdf" class="button">Get the free book</a>
+        <a href="https://forms.gle/iPiEc4wfW84e8QrS9" target="_blank" class="button">Leave a feedback</a>
+      </div>
       <br>
       <br>
       <h5>Read about the book on <a href="https://medium.com/p/11214f152159" target="_blank">Project Jupyter's blog</a>! </h5>
