Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In the travel.html page navbar issue is solved and footer is also added #1714

Merged
merged 5 commits into from
Oct 30, 2024
Merged

In the travel.html page navbar issue is solved and footer is also added #1714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7d95aba
In the travel.html page navbar issue is solved, issue number #1709 is…
Hemraj-7 Oct 28, 2024
c9ef90c
Merge branch 'PriyaGhosal:main' into main
Hemraj-7 Oct 28, 2024
c7fca11
In the travel.html file Footer is added, issue number #1750 is solved.
Hemraj-7 Oct 28, 2024
fcf641e
In the travel.html file Footer is added, issue number #1715 is solved.
Hemraj-7 Oct 28, 2024
c6d02d8
icons css link added in the travel.html page
Hemraj-7 Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 124 additions & 1 deletion travel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,22 @@ body {
background-color: #f8f9fa;
}

.main-head{
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #000000;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo{
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}

.space {
height: 100px;
}
Expand Down Expand Up @@ -46,9 +62,116 @@ body {
border-color: #0056b3;
}

footer {
background-color: #000000;
padding: 30px 0;
font-family: Arial, sans-serif;
color: #fff5f5;
}

.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}

.footer-container-top {
display: flex;
flex-wrap: wrap;
}

.footer-column {
flex: 1 1 25%;
padding: 10px 20px;
min-width: 200px;
text-align: center;
line-height: 2;
}

.footer-column h3 {
font-size: 18px;
margin-bottom: 15px;
color: #f9c3c3;
}

.footer-column p,
.footer-column li,
.footer-bottom p {
font-size: 14px;
margin: 5px 0;
margin-bottom: 0;
list-style: none;
}

.footer-column ul {
padding: 0;
}

.footer-column ul li {
margin: 8px 0;

}
.footer-column a {
text-decoration: none;
color: #fff5f5;
transition: color 0.3s ease;
}

.footer-column a:hover {
color: #f9c3c3;
}
.social-icons{
display: flex;
justify-content: center;
align-items: center;
}

.social-icons a {
margin-right: 15px;
margin: 0 15px;
}

.social-icons i {
font-size: 24px;
color: #fff;
transition: color 0.3s ease;
}

.social-icons i:hover {
color: #f9c3c3;
}
.footer-column img {
width: 24px;
height: 24px;
margin-right: 10px;
transition: opacity 0.3s ease;

}

.footer-column img:hover {
opacity: 0.7;
}

.footer-bottom {
text-align: center;
padding: 20px;
border-top: 1px solid #eaeaea;
font-size: 13px;
color: #e6dcdc;
background-color: #000000;
width: 100%;
}

.footer-bottom p {
margin: 0;

}

@media (max-width: 768px) {
.row-cols-md-2 > * {
flex: 0 0 100%;
max-width: 100%;
}
}
}
55 changes: 54 additions & 1 deletion travel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,20 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="travel.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link
rel= "stylesheet"
href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity= "sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin= "anonymous"
referrerpolicy= "no-referrer"
/>
</head>
<body>
<header class="main-head">
<nav>
<div class="logo">
<img src="img/logo.png" id="logo-web">
<h1 id="logo"><a href="#home">BuddyTrail</a></h1>
<h1 id="logo"><a href="/index.html">BuddyTrail</a></h1>
</div>

<!-- Hamburger button for mobile -->
Expand Down Expand Up @@ -159,6 +166,52 @@ <h6>Climate:</h6>
</div>
</div>

<footer>
<div class="footer-container">
<div style="display: flex" class="footer-container-top">
<!-- About Us Section -->
<div class="footer-column">
<h3>About Us</h3>
<p>We are a team of passionate developers creating amazing web experiences.</p>
</div>

<!-- Quick Links Section -->
<div class="footer-column">
<h3>Quick Links</h3>
<div>
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/index.html#services">Services</a></li>
<li><a href="/contact.html">Contact</a></li>
</div>
</div>

<!-- Contact Us Section -->
<div class="footer-column">
<h3>Contact Us</h3>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
</div>

<!-- Follow Us Section -->
<div class="footer-column">
<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>

<!-- Footer Bottom -->
<div class="footer-bottom">
<p>&copy; 2024 Buddy Trail. All rights reserved.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Loading