Revamped website design and UI/UX

.github/ISSUE_TEMPLATE/bug_reprot.yml

@@ -0,0 +1,48 @@
+name: Bug report 🐞
+description: File a bug report
+title: "[Bug]: "
+body:
+  - type: checkboxes
+    id: existing-issue
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have searched the existing issues
+          required: true
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: A concise description of what you are experiencing.
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Add ScreenShots
+      description: Add sufficient ScreenShots to explain your issue.
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Record
+      options:
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I'm a GSSOC contributor"
+          required: False
+        - label: "I want to work on this issue"
+          required: False
+        - label: "I'm willing to provide further clarification or assistance if needed."
+          required: False

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,59 @@
+name: ✨ Feature Request
+description: Suggest a feature
+title: "[Feature Request]: "
+body:
+  - type: checkboxes
+    id: existing-issue
+    attributes:
+      label: Is there an existing issue for this?
+      description: Please search to see if an issue already exists for this feature.
+      options:
+        - label: I have searched the existing issues
+          required: true
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Feature Description
+      description: Please provide a detailed description of the feature you are requesting.
+      placeholder: Describe the new feature or enhancement you'd like to see.
+    validations:
+      required: true
+  - type: textarea
+    id: use-case
+    attributes:
+      label: Use Case
+      description: How would this feature enhance your use of the project?
+      placeholder: Describe a specific use case or scenario where this feature would be beneficial.
+    validations:
+      required: true
+  - type: textarea
+    id: benefits
+    attributes:
+      label: Benefits
+      description: What benefits would this feature bring to the project or community?
+      placeholder: Explain the advantages of implementing this feature.
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority
+      description: How important is this feature to you?
+      options:
+        - High
+        - Medium
+        - Low
+      default: 0
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Record
+      options:
+        - label: "I agree to follow this project's Code of Conduct"
+          required: true
+        - label: "I'm a GSSOC contributor"
+          required: False
+        - label: "I want to work on this issue"
+          required: False
+        - label: "I'm willing to provide further clarification or assistance if needed."
+          required: False

index.html

@@ -5,35 +5,41 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OpenTekHub Blockchain Repo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Gowun+Batang:wght@400;700&family=Mate+SC&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
-    <header>
+    <header class="header">
         <h1>OpenTekHub Blockchain Repository</h1>
-        <p>Explore the Blockchain implementation and predict the latest cryptocurrency prices.</p>
     </header>
 
+    <div class="central">
+        <p class="tagline">Explore the Blockchain implementation and predict the latest cryptocurrency prices.</p>
+
+        <section id="crypto-price-predictor">
+            <h2>Crypto Price Predictor</h2>
+            <div id="crypto-form">
+                <label for="crypto">Enter Cryptocurrency Symbol (e.g., BITCOIN(BTC), ETHERUM(ETH)):</label>
+                <input type="text" id="crypto" name="crypto">
+                <button id="predict-btn">Predict Price</button>
+            </div>
+            <div id="price-result">
+                <h3>Predicted Price:</h3>
+                <p id="price"></p>
+            </div>
+        </section>
+    </div>
+
     <section id="repo-info">
         <h2>About the Repository</h2>
         <p>This repository demonstrates blockchain prices using api and javascript.</p>
         <a href="https://github.com/OpenTekHub/blockchain" target="_blank">Visit the Repo</a>
     </section>
 
-    <section id="crypto-price-predictor">
-        <h2>Crypto Price Predictor</h2>
-        <div id="crypto-form">
-            <label for="crypto">Enter Cryptocurrency Symbol (e.g., BITCOIN(BTC), ETHERUM(ETH)):</label>
-            <input type="text" id="crypto" name="crypto">
-            <button id="predict-btn">Predict Price</button>
-        </div>
-        <div id="price-result">
-            <h3>Predicted Price:</h3>
-            <p id="price"></p>
-        </div>
-    </section>
-
     <script src="script.js"></script>
 </body>
 
-</html>
+</html>

styles.css

@@ -1,4 +1,4 @@
-body {
+/* body {
     font-family: Arial, sans-serif;
     background-color: #f4f4f4;
     color: #333;
@@ -50,4 +50,109 @@ button:hover {
 #price {
     font-size: 24px;
     color: #007BFF;
+} */
+
+body{
+    margin: 0;
+    padding: 0;
+    /* background-color: blueviolet; */
+    background: #c31432;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    color: white;
+    height: 100vh;
+
+    font-family: "Gowun Batang", serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+h1, h2, h3{
+    padding: 0;
+    margin: 0;
+}
+
+.header{
+    text-align: center;
+    background-color: #2E073F;
+    color: #EBD3F8;   
+    padding: 1.4rem;        
+    box-shadow: 0 1px 10px 2px rgb(160, 159, 159);
+    font-family: "Mate SC", serif;
+}
+
+.tagline{
+    text-align: center;
+    font-family: "Fredoka", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 3rem;
+    width: 80%;
+    color: #FFEB55;
+}
+
+.central{
+    display: flex;
+    margin: 2rem 1rem;
+    gap: 2rem;
+}
+
+#crypto-price-predictor{
+    background-color: #fff;
+    background-color: rgba(0, 0, 0, 0.281);
+    border-radius: 30px;
+    padding: 1rem 1.5rem;
+    font-size: 20px;
+    text-align: center;
+}
+
+#crypto-price-predictor h2{
+    text-align: center;
+    margin-bottom: 10px;    
+}
+#crypto{
+    display: block;
+    width: 80%;
+    font-size: 1.5rem;    
+    margin: 1rem auto;
+}
+#predict-btn{
+    -webkit-border-radius: 19;
+    -moz-border-radius: 19;
+    font-family: "Fredoka", sans-serif;
+    border-radius: 19px;    
+    color: #000000;
+    font-size: 20px;
+    background: #FFEB55;
+    padding: 10px 30px;
+    margin: 10px auto;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+}
+#predict-btn:hover {
+    background: #FBD786;
+    text-decoration: none;
+}
+
+#price{
+    margin-top: 0;
+    font-size: 1.5rem;
+    color: #ffee00;
+    font-weight: 700;
+}
+
+
+#repo-info{
+    background-color: #fffefe10;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;   
+    text-align: center; 
+}
+#repo-info p{
+    margin: 0;
 }
+#repo-info a{
+    color:#ffee00;
+}