Fixed and styles headings of all pages

ChromeGaming · Jun 15, 2024 · e4d0e31 · e4d0e31
1 parent d44cce2
commit e4d0e31
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 19 deletions.
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -718,6 +718,22 @@ h3 {
   color: rgb(204, 22, 198);
 }
 
+.border-hover::after {
+  content: '';
+  display: block;
+  margin-top: 0.3rem;
+  width: 0;
+  height: 0.2rem;
+  background:rgba(0, 131, 245, 0.769);
+  transition: width .3s;
+  position: relative;
+  top: 0.7rem;
+}
+.border-hover::after {
+  width: 15%;
+}
+
+
 /* Responsive styling. */
 @media screen and (max-width: 1160px) {
   .nav {

diff --git a/server/views/about.ejs b/server/views/about.ejs
@@ -102,7 +102,7 @@
 		<a href="https://www.instagram.com/chromegamingon/" target="_blank" class="social-icon instagram"></a>
 	</div>
 
-	<div class="container">
+	<div class="container" style="margin: 5.2rem 0rem;">
 		<div class="image1">
 			<div class="logo_image">
 				<!-- Section for displaying images. -->
@@ -113,7 +113,7 @@
 			<div class="logo_head1">GAMING</div>
 		</div>
 		<div class="text" style="margin: 20px 200px 0 200px; text-align: justify; text-justify: inter-word;">
-			<h1 style="color: brown; text-align: center; padding-bottom: 30px;">About Us</h1>
+			<h1 style="color: rgb(204, 22, 198); text-align: start; padding-bottom: 30px; text-shadow: .1em .1em 0 hsl(200 50% 30%); " class="border-hover">ABOUT US</h1>
 			<p>Chrome gaming community page is an online space within the Chrome
 				browser where gamers connect, discuss games, share content, get
 				updates, troubleshoot issues, join events and interact with
@@ -127,8 +127,8 @@
 
 	<!-- <div class="line"> -->
 	<div class="line_main">
-		<div class="line1">OUR HISTORY</div>
-		<hr class="line2" />
+		<div class="line1 border-hover" style="color: rgb(204, 22, 198);  text-shadow: .1em .1em 0 hsl(200 50% 30%);">OUR HISTORY</div>
+		<!-- <hr class="line2" /> -->
 		<div class="line3">Since our establishment, we have been working to bring our
 			customers
 			the unique a comfortable website to place bids and win great products.

diff --git a/server/views/contribute.ejs b/server/views/contribute.ejs
@@ -118,12 +118,11 @@
 				<div class="logo_head1">GAMING</div>
 			</div>
 
-			<div class="text">
-				<h1 style="color: brown">Contribute to the Games</h1>
-				<br />
-				<br />
-				<h1>Our Products</h1>
-				<h3>Dot-Box</h3>
+			<div class="text" style="margin-bottom: 7.5rem" >
+				<h1 style="color:rgb(204, 22, 198); margin-top: 10rem; margin-bottom: 2rem;  text-shadow: .1em .1em 0 hsl(200 50% 30%);" class="border-hover">CONTRIBUTE TO THE GAMES</h1>
+
+				<!-- <h1 style="margin:1rem 0rem ;">Our Products</h1> -->
+				<h3 style="margin:1.5rem 0rem ;">Dot-Box</h3>
 				<p
 					>Dot-Box is a game where players take turns drawing lines between dots
 					to create boxes. The player who completes the most boxes wins. It's a

diff --git a/server/views/index.ejs b/server/views/index.ejs
@@ -675,7 +675,7 @@ a:hover{
 					<i class="bi bi-box-arrow-in-right"></i>
 				</h2>
 				<!-- Heading for procedure. -->
-				<h1 style="color: brown">
+				<h1 style="color:rgb(204, 22, 198);  text-shadow: .1em .1em 0 hsl(200 50% 30%);" class="border-hover">
 					How i will be able <br />
 					upload game?
 				</h1>
@@ -723,7 +723,7 @@ a:hover{
 				alt="Leaderboard"
 				class="mb-2"
 				src="https://d125fmws0bore1.cloudfront.net/assets/svgs/icon_trophy_leaderboard-3442a4b2312e6cdd02aa9870e636dc082890277a6267c4ed986a750fef7cbb35.svg" />
-			<h2>Top 50 Contributors Leaderboard</h2>
+			<h2 style="color: white;">Top 50 Contributors Leaderboard</h2>
 		</div>
 		<section class="ranking" style="display: inline">
 			<div class="contain" style="margin-bottom: 10px">

diff --git a/server/views/play.ejs b/server/views/play.ejs
@@ -117,12 +117,12 @@
 				<div class="logo_head1">GAMING</div>
 			</div>
 
-			<div class="text">
-				<h1 style="text-align: center; color: brown"
-					>Play Games according to your choice</h1
+			<div class="text" style="margin: 5rem;">
+				<h1 style="text-align: start; color:rgb(204, 22, 198);  text-shadow: .1em .1em 0 hsl(200 50% 30%);" class="border-hover"
+					>PLAY GAMES ACCORDING TO YOUR CHOICE</h1
 				>
 				<br />
-				<h1>Our Games</h1>
+				<h1 style="margin: 2rem 0rem;">OUR GAMES</h1>
 				<h3>Dot-Box</h3>
 				<p
 					>Dot-Box is a game where players take turns drawing lines between dots

diff --git a/server/views/products.ejs b/server/views/products.ejs
@@ -91,13 +91,17 @@
         <i class="bi bi-toggle-off" id="theme-toggle"></i>
       </div>
     </nav>
-
+<style>
+  .border-hover::after {
+  width: 45%;
+}
+</style>
 
   <section>
     <div class="container d-flex flex-column">
         <div class="text-center my-5 py-4">
-          <h1
-          class="text-uppercase heading fw-bold mb-3 letter-spacing font1 animate__animated animate__fadeIn animate__infinite infinite animate__slower	5s">
+          <h1 style="text-align: start; color:rgb(204, 22, 198); margin: 4rem 0rem;  text-shadow: .1em .1em 0 hsl(200 50% 30%);"
+          class="text-uppercase heading  fw-bold mb-3 letter-spacing font1  border-hover" >
           PRODUCTS
       </h1>
             <!-- <h2 class="text-white">Products</h2> -->