Skip to content

Commit

Permalink
About Page Redesigned
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeropse
zeropse committed Oct 16, 2024
1 parent c9b18a9 commit 5505a74
Show file tree
Hide file tree
Showing 2 changed files with 322 additions and 59 deletions.
229 changes: 229 additions & 0 deletions about.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #1A202C;
color: #E2E8F0;
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
width: 100%;
}

header {
background-color: #2D3748;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
}

.logo {
display: flex;
align-items: center;
}

#logo-web {
width: 40px;
height: auto;
margin-right: 0.5rem;
}

#logo {
color: #ffffff;
font-size: 1.25rem;
font-weight: bold;
margin: 0;
padding: 0;
line-height: 1;
}

.nav-links {
list-style: none;
display: flex;
gap: 1.5rem;
align-items: center;
margin: 0;
padding: 0;
}

.nav-link {
text-decoration: none;
color: #CBD5E0;
padding: 0.5rem 0.75rem;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
background-color: rgba(76, 95, 191, 0.2);
color: #E2E8F0;
}

.nav-link.active {
color: #4C51BF;
font-weight: bold;
}

.btn-primary {
display: inline-block;
padding: 0.625rem 1.25rem;
background-color: #4C51BF;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
background-color: #667EEA;
transform: translateY(-2px);
}

.main-content {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
}

.content-container {
max-width: 800px;
width: 100%;
padding: 2.5rem;
background-color: white;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}

.content-container:hover {
transform: scale(1.02);
}

h1,
h2 {
color: #2D3748;
margin-bottom: 1rem;
}

h1 {
font-size: 2.25rem;
font-weight: 800;
}

h2 {
font-size: 1.875rem;
font-weight: 700;
margin-top: 2rem;
}

p {
margin-bottom: 1rem;
color: #718096;
}

footer {
background-color: #2D3748;
color: #ffffff;
padding: 2rem 1rem;
margin-top: auto;
}

.footer-content {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}


.footer-column-l {
flex: 0.2;
}

.footer-column-r {
flex: 0.2;
}

.footer-column h3 {
margin-bottom: 0.5rem;
font-size: 1.125rem;
}

.social-icons {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}

.social-icons a {
color: #E2E8F0;
transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
color: #4C51BF;
transform: translateY(-2px);
}

.copyright {
text-align: center;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: flex-start;
}

.nav-links {
flex-direction: column;
align-items: flex-start;
width: 100%;
margin-top: 1rem;
}

.nav-link,
.btn-primary {
display: block;
width: 100%;
text-align: left;
margin-bottom: 0.5rem;
}

.footer-content {
flex-direction: column;
}

.footer-column {
width: 100%;
margin-bottom: 1rem;
}
}
152 changes: 93 additions & 59 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Us - BuddyTrail</title>
<link rel="stylesheet" href="about.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo" />
<h1 id="logo">BuddyTrail</h1>
</div>
<ul class="nav-links">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="about.html" class="nav-link active">About Us</a></li>
<li><a href="team.html" class="nav-link">Team</a></li>
<li><a href="contact.html" class="nav-link">Contact</a></li>
<li><a href="auth.html" class="btn-primary">Sign In</a></li>
</ul>
</nav>
</div>
</header>

.container {
max-width: 800px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
color: #f39c12;
margin-bottom: 20px;
}

p {
margin-bottom: 15px;
color: #555;
}

/* Styles for the Back to Home link */
.back-home {
display: inline-block; /* Make it behave like a block for padding */
padding: 10px 20px; /* Add padding */
margin-top: 20px; /* Space above the button */
background-color: #007BFF; /* Button color */
color: white; /* Text color */
text-decoration: none; /* Remove underline */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s; /* Smooth transition */
}

/* Hover effect */
.back-home:hover {
background-color: #0056b3; /* Darker shade on hover */
}
</style>
</head>
<body>
<div class="container">
<main class="main-content">
<div class="content-container">
<h1>About Our Website</h1>
<p>Welcome to BuddyTrail – your ultimate travel companion! 🌍✈️ Whether you're planning a family vacation 👨‍👩‍👧‍👦 or a trip with friends 👫, BuddyTrail helps you discover and explore amazing destinations 🏖️🏰, find the best hotels 🏨, and book affordable flights 💺 with ease.</p>
<p>Our mission is to provide the best travel experiences for our customers.</p>
<a href="index.html" class="back-home">Back to Home</a>
</div>
</body>
<p>
Welcome to BuddyTrail – your ultimate travel companion! 🌍✈️ Whether
you're planning a family vacation or a trip with friends, BuddyTrail
helps you discover amazing destinations, find the best hotels, and
book affordable flights with ease.
</p>
<p>
Our mission is to provide the best travel experiences for our
customers, ensuring that every trip is memorable and hassle-free.
</p>
<p>
At BuddyTrail, we believe in the power of travel to transform lives.
Our team is dedicated to curating unique experiences, personalized
recommendations, and valuable resources that empower our users to
explore the world confidently.
</p>
<h2>Our Values</h2>
<p>
We value integrity, innovation, and community. Our goal is to build a
platform that fosters trust and connectivity among travelers, allowing
them to share their experiences and insights.
</p>
<h2>Meet Our Team</h2>
<p>
Our diverse team of travel enthusiasts and experts is passionate about
creating the best possible service for you. Together, we work
tirelessly to ensure your travel journey is seamless from start to
finish.
</p>
<a href="index.html" class="btn-primary">Back to Home</a>
</div>
</main>

<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column-l">
<h3>Contact Us</h3>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
</div>
<div class="footer-column-r">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://discord.com/invite/priyaghosal" target="_blank"
><i class="fab fa-discord"></i
></a>
<a href="https://twitter.com/PriyaGhosa39968" target="_blank"
><i class="fab fa-twitter"></i
></a>
<a href="https://github.com/PriyaGhosal/BuddyTrail" target="_blank"
><i class="fab fa-github"></i
></a>
<a href="https://www.linkedin.com/in/priya-ghosal-785771286/" target="_blank"
><i class="fab fa-linkedin-in"></i
></a>
</div>
</div>
</div>
<p class="copyright">&copy; 2024 BuddyTrail | All rights reserved.</p>
</div>
</footer>
</body>
</html>

0 comments on commit 5505a74

Please sign in to comment.