make style for main page and add some tag in hbs files

Relates #20
GSG-G7 · Aug 21, 2019 · ecd7abf · ecd7abf
1 parent 9868fd0
commit ecd7abf
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 4 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,90 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 18px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+}
+
+.main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 10vh;
+  background-color: #273c75;
+  padding: 4px 10%;
+}
+
+.main-header__logo {
+  font-family: "Kreon", serif;
+  color: #fff;
+  text-shadow: 2px 4px #0a1021;
+}
+
+.main-header_list {
+  list-style: none;
+  display: flex;
+}
+
+.main-header_list > li {
+  margin-right: 15px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.main__content {
+  min-height: 80vh;
+  width: 100%;
+  background-color: #dcdde1;
+  position: relative;
+}
+
+.all-books {
+  width: 80%;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.all-books > button {
+  width: 24%;
+  height: 150px;
+  padding: 3px 5px;
+  font-size: 20px;
+  border-radius: 5px;
+  border: 2px solid #192a56;
+  cursor: pointer;
+  font-weight: 600;
+  outline: 0;
+  box-shadow: 2px 4px 10px #000;
+}
+
+.all-books > button:hover {
+  background-color: #192a56;
+  color: #fff;
+  border: 2px solid #0a1021;
+  box-shadow: 2px 4px 10px 5px #000;
+  transition: all 0.5s ease-out;
+}
+
+.footer {
+  height: 10vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #273c75;
+}
+
+.footer p {
+  color: #fff;
+  font-size: 90%;
+}
diff --git a/src/views/home.hbs b/src/views/home.hbs
@@ -1,9 +1,10 @@
 <main class="main">
-    <h1>Books</h1>
-  <section class="all-books">
+  <div class="main__content">
+    <section class="all-books">
       <button class="add-book-btn">Add Book</button>
       <button class="all-books-btn">Get All Books</button>
       <button class="available-btn">Get Available Books</button>
       <button class="reserved-btn">Get Reserved Books</button>
-  </section>
+    </section>
+  </div>
 </main>
diff --git a/src/views/layouts/main.hbs b/src/views/layouts/main.hbs
@@ -1,21 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link href="https://fonts.googleapis.com/css?family=Kreon:400,500,600|Poppins:300,400,500,600&display=swap"
+    rel="stylesheet">
   <link rel="stylesheet" href="./css/style.css">
   <title>Books Share Center</title>
 </head>
+
 <body>
 
   {{> header}}
 
   {{{body}}}
-  
+
   {{> footer}}
 
   <script src="./js/dom.js"></script>
   <script src="./js/logic.js"></script>
 </body>
+
 </html>
diff --git a/src/views/partials/header.hbs b/src/views/partials/header.hbs
@@ -1,4 +1,5 @@
 <header class="main-header">
+  <h1 class="main-header__logo">Books Share</h1>
   <nav class="main-header_nav">
     <ul class="main-header_list">
       <li class="main-header_list-item">Home</li>