improve overflow and scroll bar

ANSHIKA-26 · Oct 21, 2024 · d2ec2ed · d2ec2ed
1 parent b1cf70b
commit d2ec2ed
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 19 deletions.
diff --git a/blog.html b/blog.html
@@ -17,9 +17,9 @@
 
   <!--css-->
   <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> -->
-
-  <link rel="stylesheet" href="Scroll_and_progressbar.css">
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="Scroll_and_progressbar.css">
+
 
 
 
@@ -946,7 +946,7 @@ <h5 class="commenter-name">${comment.name}</h5>
 }
 
 /* Custom scrollbar */
-::-webkit-scrollbar {
+/* ::-webkit-scrollbar {
   width: 8px;
 }
 
@@ -961,7 +961,7 @@ <h5 class="commenter-name">${comment.name}</h5>
 
 ::-webkit-scrollbar-thumb:hover {
   background: #f4978e;
-}
+} */
 
 /* Animated background */
 @keyframes gradient {

diff --git a/category.html b/category.html
@@ -19,8 +19,9 @@
     <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> -->
 
     <link rel="stylesheet" href="category.css">
-    <link rel="stylesheet" href="Scroll_and_progressbar.css">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="Scroll_and_progressbar.css">
+
 
     <style>
         * {

diff --git a/fashion.html b/fashion.html
@@ -12,7 +12,7 @@
   <title>The Art of Fashion</title>
   <style>
     body { background-color: #f8b5b5; color: #333; font-family: Arial, sans-serif; margin: 0; padding: 0; }
-    .container { max-width: 900px; margin: 40px auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
+    .container { max-width: 900px; margin: 40px auto; margin-top: 10rem; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
     h1 { color: #d9534f; text-align: center; }
     p, h2 { line-height: 1.6; }
     img { width: 100%; border-radius: 10px; margin: 20px 0; }
@@ -80,7 +80,7 @@
     });
     </script>
 
-    <header>
+    <header style="top: -4rem ;">
 
 
 

diff --git a/food.html b/food.html
@@ -7,13 +7,14 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
 
   <link rel="stylesheet" href="category.css">
-  <link rel="stylesheet" href="Scroll_and_progressbar.css">
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="Scroll_and_progressbar.css">
+
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>A Journey Through Food</title>
   <style>
     body { background-color: #f8b5b5; color: #333; font-family: Arial, sans-serif; margin: 0; padding: 0; }
-    .container { max-width: 900px; margin: 40px auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
+    .container { max-width: 900px; margin: 40px auto; margin-top: 10rem; background-color: white; padding: 20px ; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
     h1 { color: #d9534f; text-align: center; }
     p, h2 { line-height: 1.6; }
     img { width: 100%; border-radius: 10px; margin: 20px 0; }
@@ -81,7 +82,7 @@
 
 </head>
 <body>
-    <header>
+    <header style="top: -4rem ;">
 
 
 

diff --git a/health.html b/health.html
@@ -12,7 +12,7 @@
   <title>Health & Wellness</title>
   <style>
     body { background-color: #f8b5b5; color: #333; font-family: Arial, sans-serif; margin: 0; padding: 0; }
-    .container { max-width: 900px; margin: 40px auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
+    .container { max-width: 900px; margin: 40px auto; margin-top: 10rem; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
     h1 { color: #d9534f; text-align: center; }
     p, h2 { line-height: 1.6; }
     img { width: 100%; border-radius: 10px; margin: 20px 0; }
@@ -82,7 +82,7 @@
 
 </head>
 <body>
-    <header>
+    <header style="top: -4rem ;">
 
 
 

diff --git a/life.html b/life.html
@@ -12,7 +12,7 @@
   <title>Living Your Best Life</title>
   <style>
     body { background-color: #f8b5b5; color: #333; font-family: Arial, sans-serif; margin: 0; padding: 0; }
-    .container { max-width: 900px; margin: 40px auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
+    .container { max-width: 900px; margin: 40px auto; margin-top: 10rem; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
     h1 { color: #d9534f; text-align: center; }
     p, h2 { line-height: 1.6; }
     img { width: 100%; border-radius: 10px; margin: 20px 0; }
@@ -79,7 +79,7 @@
 
 </head>
 <body>
-    <header>
+    <header style="top: -4rem ;">
 
 
 

diff --git a/tech.html b/tech.html
@@ -11,8 +11,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>The Future of Technology</title>
   <style>
-    body { background-color: #f8b5b5; color: #333; font-family: Arial, sans-serif; margin: 0; padding: 0; }
-    .container { max-width: 900px; margin: 40px auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
+    body {  background-color: #f8b5b5; color: #333; font-family: Arial, sans-serif; margin: 0; padding: 0; }
+    .container {  max-width: 900px; margin: 40px auto;margin-top: 10rem; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
     h1 { color: #d9534f; text-align: center; }
     p, h2 { line-height: 1.6; }
     img { width: 100%; border-radius: 10px; margin: 20px 0; }
@@ -78,7 +78,7 @@
 
 </head>
 <body>
-    <header>
+    <header style="top: -4rem ;">
 
 
 

diff --git a/travel.html b/travel.html
@@ -24,7 +24,7 @@
   <title>Explore the World: Travel Adventures</title>
   <style>
     body { background-color: #f8b5b5; color: #333; font-family: Arial, sans-serif; margin: 0; padding: 0; }
-    .container { max-width: 900px; margin: 40px auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
+    .container { max-width: 900px; margin: 40px auto; margin-top: 10rem; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
     h1 { color: #d9534f; text-align: center; }
     p, h2 { line-height: 1.6; }
     img { width: 100%; border-radius: 10px; margin: 20px 0; }
@@ -94,7 +94,7 @@
 
 </head>
 <body>
-    <header>
+    <header style="top: -4rem ;">