Skip to content

Enhancing Footer UI #71

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

Open
DeenuRSD wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Enhancing Footer UI #71

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb9b9c2
Update index.html
DeenuRSD Oct 18, 2024
7b451df
Update index.html
DeenuRSD Oct 19, 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
280 changes: 227 additions & 53 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,230 @@

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link
rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style>
/* General Styles */
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

<link rel="stylesheet" href="styles.css" />
/* Navigation Bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 15px;
color: white;
}

.navbar .logo img {
height: 50px;
}

.nav-links {
list-style: none;
display: flex;
}

.nav-links li {
margin: 0 15px;
}

.nav-links a {
color: white;
text-decoration: none;
transition: color 0.3s;
}

.nav-links a:hover {
color: #61dafb;
}

.btn {
padding: 10px 20px;
border: none;
background-color: #61dafb;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}

.btn:hover {
background-color: #4db8e6;
}

/* Hero Section */
.hero-section {
text-align: center;
padding: 100px 20px;
background-color: #f4f4f4;
}

/* Course Recommendations Section */
.course-recommendations {
padding: 40px 20px;
text-align: center;
}

.recommended-courses {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.course-card {
border: 1px solid #ddd;
border-radius: 8px;
margin: 10px;
overflow: hidden;
width: 250px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.course-thumbnail {
width: 100%;
height: auto;
}

.course-info {
padding: 15px;
}

.btn-secondary {
background-color: #61dafb;
border: none;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn-secondary:hover {
background-color: #4db8e6;
}

/* Search Bar */
.search-container {
margin: 20px 0;
display: flex;
justify-content: center;
}

.search-container input {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
width: 300px;
margin-right: 10px;
}

.search-container button {
padding: 10px 15px;
border: none;
background-color: #61dafb;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}

.search-container button:hover {
background-color: #4db8e6;
}

/* Footer */
.site-footer {
background-color: #282c34;
color: white;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
}

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

.footer-section {
flex: 1;
margin: 0 20px;
}

.footer-section h3 {
margin-bottom: 20px;
}

.footer-section ul {
list-style: none;
padding: 0;
}

.footer-section ul li {
margin: 10px 0;
}

.footer-section ul li a {
color: #61dafb;
text-decoration: none;
}

.footer-section ul li a:hover {
text-decoration: underline;
}

.social-icons {
display: flex;
justify-content: flex-start;
}

.social-icon {
color: white;
margin-right: 15px;
font-size: 24px;
}

.footer-bottom {
text-align: center;
margin-top: 20px;
}

/* Responsive styles */
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
align-items: center;
}

.footer-section {
margin: 10px 0;
}

.recommended-courses {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="logo">
<a href="index.html">
<img src="./Images/codex100-logo.png" alt="codeX100 logo">
<img src="./Images/codex100-logo.png" alt="codeX100 logo" />
</a>
</div>
<div class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links">
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="course.html">Courses</a></li>
<li><a href="#">Notes</a></li>
Expand All @@ -43,43 +248,29 @@ <h2>Welcome to codeX100</h2>
<a href="#" class="btn-primary">Explore Courses</a>
</section>

<!-- Course Recommendations Section -->
<section class="course-recommendations">
<!-- Course Recommendations Section -->
<section class="course-recommendations">
<h2>Your Courses</h2>
<div class="course-list">
<!-- Placeholder for purchased courses -->
<p>You haven't bought any courses yet.</p>
</div>

<h3>Recommended Courses</h3>
<div class="search-container">
<input type="text" placeholder="Search Notes..." />
<button>Search</button>
</div>
<div class="recommended-courses">
<!-- Example courses with thumbnails -->
<div class="course-card">
<img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" class="course-thumbnail">
<div class="course-info">
<h4>Basics of C++</h4>
<p>Learn the fundamentals of C++ programming.</p>
<button class="btn-secondary">View Course</button>
</div>
</div>
<div class="course-card">
<img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" class="course-thumbnail">
<div class="course-info">
<h4>Data Structures in Java</h4>
<p>Master DSA with Java from basics to advanced.</p>
<button class="btn-secondary">View Course</button>
</div>
</div>
<div class="course-card">
<img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" class="course-thumbnail">
<img src="./Images/c++-thumbnail.jpg" alt="Basics of C++" class="course-thumbnail" />
<div class="course-info">
<h4>Basics of C++</h4>
<p>Learn the fundamentals of C++ programming.</p>
<button class="btn-secondary">View Course</button>
</div>
</div>
<div class="course-card">
<img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" class="course-thumbnail">
<img src="./Images/java-thumbnail.jpg" alt="Data Structures in Java" class="course-thumbnail" />
<div class="course-info">
<h4>Data Structures in Java</h4>
<p>Master DSA with Java from basics to advanced.</p>
Expand All @@ -88,6 +279,8 @@ <h4>Data Structures in Java</h4>
</div>
</div>
</section>

<!-- Enhanced Footer -->
<footer class="site-footer">
<div class="footer-container">
<div class="footer-section">
Expand All @@ -101,28 +294,13 @@ <h3>Important Links</h3>
<div class="footer-section">
<h3>Connect With Us</h3>
<div class="social-icons">
<a
href="https://linkedin.com/"
target="_blank"
rel="noopener noreferrer"
class="social-icon linkedin"
>
<a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer" class="social-icon linkedin">
<i class="fab fa-linkedin"></i>
</a>
<a
href="https://instagram.com/"
target="_blank"
rel="noopener noreferrer"
class="social-icon instagram"
>
<a href="https://instagram.com/" target="_blank" rel="noopener noreferrer" class="social-icon instagram">
<i class="fab fa-instagram"></i>
</a>
<a
href="https://youtube.com/"
target="_blank"
rel="noopener noreferrer"
class="social-icon youtube"
>
<a href="https://youtube.com/" target="_blank" rel="noopener noreferrer" class="social-icon youtube">
<i class="fab fa-youtube"></i>
</a>
</div>
Expand All @@ -132,9 +310,5 @@ <h3>Connect With Us</h3>
<p>&copy; 2024 codeX100. All rights reserved.</p>
</div>
</footer>

<script src="script.js"></script>
</body>

</body>
</html>