Merge pull request #766 from hars-21/about

About section update
ChromeGaming · Aug 10, 2024 · 9372f75 · 9372f75
2 parents d82ca01 + 383935d
commit 9372f75
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/pages/about.html b/pages/about.html
@@ -34,7 +34,8 @@ <h1 class="main-heading">Dot-Box - The Strategy Game🎮</h1>
 				to create boxes. <br />
 				The player who completes the most boxes wins ⚔️
 			</p>
-			<a href="https://github.com/ChromeGaming/Dot-Box" class="cta-button">Star us ᯓ★</a>
+			<a href="https://github.com/ChromeGaming/Dot-Box" class="cta-button"><i class="fas fa-star"></i> Star Us <i
+					class="fas fa-star"></i></a>
 		</div>
 	</header>
 	<main>

diff --git a/styles/about.css b/styles/about.css
@@ -56,11 +56,13 @@ html {
 /* About section styles */
 .about-section {
 	background-color: #0a0c27;
+	padding-top: 2rem;
 }
 
 .about-content {
 	max-width: 1400px;
-	margin: 200px auto;
+	margin: 1rem auto;
+	margin-top: 12.5rem;
 }
 
 
@@ -79,18 +81,19 @@ html {
 
 .cards-container {
 	display: flex;
-	justify-content: space-around;
+	justify-content: space-evenly;
 	flex-wrap: wrap;
+	align-items: center;
 }
 
 
 .about-card {
 	background-color: #101239;
 	border-radius: 10px;
 	padding: 20px;
-	width: 25%;
+	width: 30%;
 	min-width: 160px;
-	height: 370px;
+	height: fit-content;
 	margin: 20px;
 	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 	color: #fff;
@@ -101,6 +104,7 @@ html {
 
 ul li {
 	list-style: none;
+	padding: 0.25rem;
 }
 
 .about-card:hover {
@@ -134,7 +138,7 @@ ul li {
 
 .card-title {
 	font-size: 1.6rem;
-	margin-bottom: 12px;
+	margin-bottom: 1.25rem;
 	color: orange;
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 	transition: all 0.3s ease-in;