Prettify forms with CSS

2020-06-14 04:25:11 +02:00
parent ee54f223f5
commit 650df9d0f6
5 changed files with 84 additions and 7 deletions
--- a/html/header-footer.html
+++ b/html/header-footer.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html class="no-js" lang="es">
+    <head>
+        <meta charset="utf-8">
+        <title>MDIS</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
+    </head>
+    <body>
+        <header>
+            <nav>
+                <ul class="navbar-left">
+                    <li class="list"><a href="">Home</a></li>
+                    <li class="list"><a href="">Calendar</a></li>
+                    <li class="list"><a href="">Appointments</a></li>
+                </ul>
+                <ul class="navbar-right">
+                    <li class="list"><a href="">Login</a></li>
+                </ul>
+            </nav>
+        </header>
+        <footer>
+            
+        </footer>
+    </body>
+</html>
--- a/html/static/style.css
+++ b/html/static/style.css
@@ -0,0 +1,81 @@
+* {
+    font-family: Roboto, Mono;
+    font-size: 14px;
+}
+
+table{
+    width: 50%;
+    margin: 30px auto;
+    border-collapse: collapse;
+    text-align: left;
+}
+tr {
+    border-bottom: 1px solid #cbcbcb;
+}
+th, td{
+    border: none;
+    height: 30px;
+    padding: 2px;
+}
+tr:hover {
+    background: #F5F5F5;
+}
+
+form {
+    width: 45%;
+    margin: 50px auto;
+    text-align: left;
+    padding: 20px; 
+    border: 1px solid #bbbbbb; 
+    border-radius: 5px;
+}
+
+.input-group {
+    margin: 10px 0px 10px 0px;
+}
+.input-group label {
+    display: block;
+    text-align: left;
+    margin: 3px;
+}
+.input-group input {
+    height: 30px;
+    width: 93%;
+    padding: 5px 10px;
+    font-size: 16px;
+    border-radius: 5px;
+    border: 1px solid gray;
+}
+.btn {
+    padding: 10px;
+    font-size: 15px;
+    color: white;
+    background: #5F9EA0;
+    border: none;
+    border-radius: 5px;
+}
+.edit_btn {
+    text-decoration: none;
+    padding: 2px 5px;
+    background: #2E8B57;
+    color: white;
+    border-radius: 3px;
+}
+
+.del_btn {
+    text-decoration: none;
+    padding: 2px 5px;
+    color: white;
+    border-radius: 3px;
+    background: #800000;
+}
+.msg {
+    margin: 30px auto; 
+    padding: 10px; 
+    border-radius: 5px; 
+    color: #3c763d; 
+    background: #dff0d8; 
+    border: 1px solid #3c763d;
+    width: 50%;
+    text-align: center;
+}