form css created

theanujdev · theanujdev · commit 6d997737b8f8 · 2021-01-30T19:44:46.000+05:30
diff --git a/create.html b/create.html
@@ -4,6 +4,30 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Create Blog</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="./js/create.js" defer></script>
   </head>
-  <body></body>
+  <body>
+    <nav class="navbar container">
+      <div class="brand">
+        <a href="./index.html"> Blog </a>
+      </div>
+      <div class="menu">
+        <a href="./index.html">Home</a>
+        <a href="./create.html">Create</a>
+      </div>
+    </nav>
+    <section class="form container">
+      <h1>Create A Blog</h1>
+      <form id="blogForm" method="post">
+        <label for="author">Author : </label>
+        <input type="text" name="author" id="author" autocomplete="off" />
+        <label for="title">Title : </label>
+        <input type="text" name="title" id="title" autocomplete="off" />
+        <label for="body">Body : </label>
+        <input type="text" name="body" id="body" autocomplete="off" />
+        <button type="submit">Create Blog</button>
+      </form>
+    </section>
+  </body>
 </html>
diff --git a/details.html b/details.html
@@ -4,6 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Blog Details</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="./js/details.js" defer></script>
   </head>
-  <body></body>
+  <body>
+    <nav class="navbar container">
+      <div class="brand">
+        <a href="./index.html"> Blog </a>
+      </div>
+      <div class="menu">
+        <a href="./index.html">Home</a>
+        <a href="./create.html">Create</a>
+      </div>
+    </nav>
+  </body>
 </html>
diff --git a/style.css b/style.css
@@ -49,11 +49,12 @@ h1 {
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
   padding: 20px 40px;
   margin-bottom: 30px;
-  transition: 0.05s;
+  transition: 0.1s;
+  border-left: 5px rgba(0, 0, 0, 0) solid;
 }
 
 .card:hover {
-  transform: scale(1.01);
+  border-left: 5px red solid;
 }
 
 .card h3 {
@@ -64,3 +65,35 @@ h1 {
 .card .author {
   text-align: end;
 }
+
+#blogForm,
+button {
+  font-size: 25px;
+  margin: 10px;
+}
+
+#blogForm label {
+  color: rgb(83, 27, 133);
+}
+#blogForm button {
+  font-size: 20px;
+  color: white;
+  background-color: blueviolet;
+  padding: 10px 20px;
+  border-radius: 9999px;
+}
+#blogForm button:focus {
+  outline: none;
+}
+#blogForm button:hover {
+  background-color: rgb(104, 32, 170);
+}
+#blogForm input {
+  font-size: 20px;
+  display: block;
+  margin: 16px 0;
+  margin-bottom: 45px;
+  padding: 6px 10px;
+  width: 100%;
+  border: 1px solid #ddd;
+}
