feat: style and elements
This commit is contained in:
parent
3e999c83b5
commit
48054b28e0
715
footer.html
715
footer.html
@ -1,399 +1,376 @@
|
|||||||
<!DOCTYPE html>
|
<style>
|
||||||
<html lang="en">
|
.footer {
|
||||||
<head>
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
||||||
<meta charset="UTF-8">
|
color: white;
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
padding: 60px 0 30px 0;
|
||||||
<title>Kode Pilot Footer</title>
|
font-size: 14px;
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
}
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
.footer-container {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
max-width: 1200px;
|
||||||
background-color: #f5f5f5;
|
margin: 0 auto;
|
||||||
padding: 50px 0;
|
padding: 0 20px;
|
||||||
}
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer-section h3 {
|
||||||
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
font-size: 18px;
|
||||||
color: white;
|
font-weight: 600;
|
||||||
padding: 60px 0 30px 0;
|
margin-bottom: 20px;
|
||||||
font-size: 14px;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer-section ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section ul li {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section ul li a {
|
||||||
|
color: #cbd5e1;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section ul li a:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-section {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-section .logo {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-section .tagline {
|
||||||
|
color: #cbd5e1;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.company-section .tagline .heart {
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item i {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons a {
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 20px;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons a:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-section {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-section h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-section p {
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-form {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-form input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 12px 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px 0 0 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-form button {
|
||||||
|
background-color: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 0 6px 6px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newsletter-form button:hover {
|
||||||
|
background-color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: #475569;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid #475569;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-links a {
|
||||||
|
color: #94a3b8;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom-links a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiring-badge {
|
||||||
|
background-color: #10b981;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
.footer-container {
|
.footer-container {
|
||||||
max-width: 1200px;
|
grid-template-columns: 1fr;
|
||||||
margin: 0 auto;
|
gap: 30px;
|
||||||
padding: 0 20px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
gap: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section ul li {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section ul li a {
|
|
||||||
color: #cbd5e1;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section ul li a:hover {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-section {
|
|
||||||
grid-column: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-section .logo {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-section .tagline {
|
|
||||||
color: #cbd5e1;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.company-section .tagline .heart {
|
|
||||||
color: #ef4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-info h4 {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #cbd5e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item i {
|
|
||||||
margin-right: 10px;
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-icons {
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-icons a {
|
|
||||||
color: #cbd5e1;
|
|
||||||
font-size: 20px;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-icons a:hover {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-section {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-section h4 {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-section p {
|
|
||||||
color: #cbd5e1;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.newsletter-form {
|
.newsletter-form {
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form input {
|
|
||||||
flex: 1;
|
|
||||||
padding: 12px 15px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px 0 0 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.newsletter-form input,
|
||||||
.newsletter-form button {
|
.newsletter-form button {
|
||||||
background-color: #3b82f6;
|
border-radius: 6px;
|
||||||
color: white;
|
margin-bottom: 10px;
|
||||||
border: none;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-radius: 0 6px 6px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form button:hover {
|
|
||||||
background-color: #2563eb;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-section company-section">
|
||||||
|
<div class="logo">Kode Pilot</div>
|
||||||
|
<p class="tagline">Built with <span class="heart">❤</span> in India for the world</p>
|
||||||
|
|
||||||
.btn {
|
<div class="contact-info">
|
||||||
padding: 10px 20px;
|
<h4>Stay Connected</h4>
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
<div style="margin-bottom: 20px;">
|
||||||
background-color: #3b82f6;
|
<strong style="color: white; font-size: 14px;">Sales Inquiries</strong>
|
||||||
color: white;
|
<div class="contact-item">
|
||||||
}
|
<i class="fas fa-envelope"></i>
|
||||||
|
sales@kodepilot.com
|
||||||
.btn-secondary {
|
|
||||||
background-color: #475569;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom {
|
|
||||||
border-top: 1px solid #475569;
|
|
||||||
margin-top: 40px;
|
|
||||||
padding-top: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #94a3b8;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom-links {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom-links a {
|
|
||||||
color: #94a3b8;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom-links a:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hiring-badge {
|
|
||||||
background-color: #10b981;
|
|
||||||
color: white;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.footer-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form input,
|
|
||||||
.newsletter-form button {
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="footer-container">
|
|
||||||
<!-- Company Section -->
|
|
||||||
<div class="footer-section company-section">
|
|
||||||
<div class="logo">Kode Pilot</div>
|
|
||||||
<p class="tagline">Built with <span class="heart">❤</span> in India for the world</p>
|
|
||||||
|
|
||||||
<div class="contact-info">
|
|
||||||
<h4>Stay Connected</h4>
|
|
||||||
|
|
||||||
<div style="margin-bottom: 20px;">
|
|
||||||
<strong style="color: white; font-size: 14px;">Sales Inquiries</strong>
|
|
||||||
<div class="contact-item">
|
|
||||||
<i class="fas fa-envelope"></i>
|
|
||||||
sales@kodepilot.com
|
|
||||||
</div>
|
|
||||||
<div class="contact-item">
|
|
||||||
<i class="fas fa-phone"></i>
|
|
||||||
+91-9311777388 <span style="font-size: 12px;">(Mon to Fri, 9 AM to 6 PM)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
<div>
|
<i class="fas fa-phone"></i>
|
||||||
<strong style="color: white; font-size: 14px;">Support Inquiries</strong>
|
+91-9311777388 <span style="font-size: 12px;">(Mon to Fri, 9 AM to 6 PM)</span>
|
||||||
<div class="contact-item">
|
|
||||||
<i class="fas fa-envelope"></i>
|
|
||||||
support@kodepilot.com
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="social-icons">
|
<div>
|
||||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
<strong style="color: white; font-size: 14px;">Support Inquiries</strong>
|
||||||
<a href="#"><i class="fab fa-linkedin"></i></a>
|
<div class="contact-item">
|
||||||
<a href="#"><i class="fab fa-facebook"></i></a>
|
<i class="fas fa-envelope"></i>
|
||||||
<a href="#"><i class="fab fa-telegram"></i></a>
|
support@kodepilot.com
|
||||||
<a href="#"><i class="fab fa-discord"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-youtube"></i></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="newsletter-section">
|
|
||||||
<h4>Stay Updated</h4>
|
|
||||||
<p>We'll send you updates on the latest courses and coding opportunities to enhance your skills and advance your career.</p>
|
|
||||||
|
|
||||||
<div class="newsletter-form">
|
|
||||||
<input type="email" placeholder="Subscribe to our newsletter!">
|
|
||||||
<button type="submit">></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-buttons">
|
|
||||||
<a href="#" class="btn btn-primary">Start Learning Now</a>
|
|
||||||
<a href="#" class="btn btn-secondary"><i class="fas fa-code"></i> View Courses</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Courses Section -->
|
<div class="social-icons">
|
||||||
<div class="footer-section">
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
||||||
<h3>Courses</h3>
|
<a href="#"><i class="fab fa-linkedin"></i></a>
|
||||||
<ul>
|
<a href="#"><i class="fab fa-facebook"></i></a>
|
||||||
<li><a href="#">Web Development</a></li>
|
<a href="#"><i class="fab fa-telegram"></i></a>
|
||||||
<li><a href="#">Full Stack Development</a></li>
|
<a href="#"><i class="fab fa-discord"></i></a>
|
||||||
<li><a href="#">Frontend Development</a></li>
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||||
<li><a href="#">Backend Development</a></li>
|
<a href="#"><i class="fab fa-youtube"></i></a>
|
||||||
<li><a href="#">JavaScript Mastery</a></li>
|
|
||||||
<li><a href="#">React & Next.js</a></li>
|
|
||||||
<li><a href="#">Node.js & Express</a></li>
|
|
||||||
<li><a href="#">Database Management</a></li>
|
|
||||||
<li><a href="#">API Development</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 style="margin-top: 30px;">Learning Paths</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Beginner to Pro</a></li>
|
|
||||||
<li><a href="#">Career Switcher</a></li>
|
|
||||||
<li><a href="#">Skill Enhancement</a></li>
|
|
||||||
<li><a href="#">Project-Based Learning</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Resources & Support Section -->
|
<div class="newsletter-section">
|
||||||
<div class="footer-section">
|
<h4>Stay Updated</h4>
|
||||||
<h3>Resources</h3>
|
<p>We'll send you updates on the latest courses and coding opportunities to enhance your skills and
|
||||||
<ul>
|
advance your career.</p>
|
||||||
<li><a href="#">Coding Tutorials</a></li>
|
|
||||||
<li><a href="#">Blog Articles</a></li>
|
<div class="newsletter-form">
|
||||||
<li><a href="#">Code Challenges</a></li>
|
<input type="email" placeholder="Subscribe to our newsletter!">
|
||||||
<li><a href="#">Live Workshops</a></li>
|
<button type="submit">></button>
|
||||||
<li><a href="#">Student Projects</a></li>
|
</div>
|
||||||
<li><a href="#">Career Guidance</a></li>
|
|
||||||
<li><a href="#">Interview Preparation</a></li>
|
<div class="action-buttons">
|
||||||
</ul>
|
<a href="#" class="btn btn-primary">Start Learning Now</a>
|
||||||
|
<a href="#" class="btn btn-secondary"><i class="fas fa-code"></i> View Courses</a>
|
||||||
<h3 style="margin-top: 30px;">Community</h3>
|
</div>
|
||||||
<ul>
|
|
||||||
<li><a href="#">Student Forum</a></li>
|
|
||||||
<li><a href="#">Code Reviews</a></li>
|
|
||||||
<li><a href="#">Study Groups</a></li>
|
|
||||||
<li><a href="#">Success Stories</a></li>
|
|
||||||
<li><a href="#">Mentorship Program</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-bottom">
|
<!-- Courses Section -->
|
||||||
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
|
<div class="footer-section">
|
||||||
<div class="footer-bottom-links">
|
<h3>Courses</h3>
|
||||||
<a href="#">About Us</a>
|
<ul>
|
||||||
<a href="#">Contact Us</a>
|
<li><a href="#">Web Development</a></li>
|
||||||
<a href="#">Careers</a>
|
<li><a href="#">Full Stack Development</a></li>
|
||||||
<a href="#" style="color: #10b981;">We're hiring <span class="hiring-badge">•</span></a>
|
<li><a href="#">Frontend Development</a></li>
|
||||||
<a href="#">Instructors</a>
|
<li><a href="#">Backend Development</a></li>
|
||||||
<a href="#">Become an Instructor</a>
|
<li><a href="#">JavaScript Mastery</a></li>
|
||||||
</div>
|
<li><a href="#">React & Next.js</a></li>
|
||||||
<div class="footer-bottom-links" style="margin-top: 10px;">
|
<li><a href="#">Node.js & Express</a></li>
|
||||||
<a href="#">Student Reviews</a>
|
<li><a href="#">Database Management</a></li>
|
||||||
<a href="#">FAQs</a>
|
<li><a href="#">API Development</a></li>
|
||||||
<a href="#">Course Catalog</a>
|
</ul>
|
||||||
<a href="#">Certificates</a>
|
|
||||||
<a href="#">Student Support</a>
|
<h3 style="margin-top: 30px;">Learning Paths</h3>
|
||||||
</div>
|
<ul>
|
||||||
<div class="footer-bottom-links" style="margin-top: 10px;">
|
<li><a href="#">Beginner to Pro</a></li>
|
||||||
<a href="#">Affiliate Program</a>
|
<li><a href="#">Career Switcher</a></li>
|
||||||
<a href="#">Corporate Training</a>
|
<li><a href="#">Skill Enhancement</a></li>
|
||||||
<a href="#">Bulk Enrollment</a>
|
<li><a href="#">Project-Based Learning</a></li>
|
||||||
<a href="#">Student Discount</a>
|
</ul>
|
||||||
</div>
|
|
||||||
<div class="footer-bottom-links" style="margin-top: 10px;">
|
|
||||||
<a href="#">Terms & Conditions</a>
|
|
||||||
<a href="#">Privacy Policy</a>
|
|
||||||
<a href="#">Refund Policy</a>
|
|
||||||
<a href="#">Sitemap</a>
|
|
||||||
</div>
|
|
||||||
<p style="margin-top: 20px;">
|
|
||||||
Copyright © 2025 <a href="#" style="color: #10b981;">Kode Pilot Learning Pvt Ltd</a> - All rights reserved.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
|
||||||
</body>
|
<div class="footer-section">
|
||||||
</html>
|
<h3>Resources</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Coding Tutorials</a></li>
|
||||||
|
<li><a href="#">Blog Articles</a></li>
|
||||||
|
<li><a href="#">Code Challenges</a></li>
|
||||||
|
<li><a href="#">Live Workshops</a></li>
|
||||||
|
<li><a href="#">Student Projects</a></li>
|
||||||
|
<li><a href="#">Career Guidance</a></li>
|
||||||
|
<li><a href="#">Interview Preparation</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3 style="margin-top: 30px;">Community</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Student Forum</a></li>
|
||||||
|
<li><a href="#">Code Reviews</a></li>
|
||||||
|
<li><a href="#">Study Groups</a></li>
|
||||||
|
<li><a href="#">Success Stories</a></li>
|
||||||
|
<li><a href="#">Mentorship Program</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
|
||||||
|
<div class="footer-bottom-links">
|
||||||
|
<a href="#">About Us</a>
|
||||||
|
<a href="#">Contact Us</a>
|
||||||
|
<a href="#">Careers</a>
|
||||||
|
<a href="#" style="color: #10b981;">We're hiring <span class="hiring-badge">•</span></a>
|
||||||
|
<a href="#">Instructors</a>
|
||||||
|
<a href="#">Become an Instructor</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom-links" style="margin-top: 10px;">
|
||||||
|
<a href="#">Student Reviews</a>
|
||||||
|
<a href="#">FAQs</a>
|
||||||
|
<a href="#">Course Catalog</a>
|
||||||
|
<a href="#">Certificates</a>
|
||||||
|
<a href="#">Student Support</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom-links" style="margin-top: 10px;">
|
||||||
|
<a href="#">Affiliate Program</a>
|
||||||
|
<a href="#">Corporate Training</a>
|
||||||
|
<a href="#">Bulk Enrollment</a>
|
||||||
|
<a href="#">Student Discount</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom-links" style="margin-top: 10px;">
|
||||||
|
<a href="#">Terms & Conditions</a>
|
||||||
|
<a href="#">Privacy Policy</a>
|
||||||
|
<a href="#">Refund Policy</a>
|
||||||
|
<a href="#">Sitemap</a>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top: 20px;">
|
||||||
|
Copyright © 2025 <a href="#" style="color: #10b981;">Kode Pilot Learning Pvt Ltd</a> - All rights
|
||||||
|
reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
231
index.html
231
index.html
@ -13,7 +13,6 @@
|
|||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar */
|
|
||||||
.navbar {
|
.navbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -66,77 +65,121 @@
|
|||||||
|
|
||||||
/* Hero */
|
/* Hero */
|
||||||
.hero {
|
.hero {
|
||||||
text-align: center;
|
text-align: start;
|
||||||
padding: 50px 20px;
|
padding: 50px 20px;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: 42px;
|
font-size: 42px;
|
||||||
|
color: #383838;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 .blue {
|
.hero h1 .blue_text {
|
||||||
color: #007bff;
|
color: #1c4980;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero p {
|
.hero p {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #666;
|
color: #717171;
|
||||||
margin: 15px 0 40px;
|
font-size: 16px;
|
||||||
|
line-height: 140%;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
width: 470px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cards */
|
/* Cards */
|
||||||
|
.hero_container {
|
||||||
|
display: flex;
|
||||||
|
gap: 40px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards_box {
|
||||||
|
margin-top: 80px;
|
||||||
|
flex: 1 1 300px;
|
||||||
|
}
|
||||||
|
|
||||||
.cards {
|
.cards {
|
||||||
|
flex: 2 1 60px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
max-width: 1000px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
padding: 25px;
|
position: relative;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-size: 18px;
|
cursor: pointer;
|
||||||
color: #fff;
|
padding: 12px 16px;
|
||||||
font-weight: bold;
|
overflow: hidden;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
height: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.card small {
|
.card small {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
.green {
|
.green {
|
||||||
background: #2ecc71;
|
background: #9BE6C1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orange {
|
.orange {
|
||||||
background: #e67e22;
|
background: #fec192;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue {
|
.blue {
|
||||||
background: #3498db;
|
background: #9bc9ff;
|
||||||
|
background-image: url('https://d8it4huxumps7.cloudfront.net/uploads/images/67724b0c0d0f7_img1.png?d=211x163');
|
||||||
|
background-size: 140px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: bottom right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.purple {
|
.purple {
|
||||||
background: #9b59b6;
|
background: #c8bbff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow {
|
.yellow {
|
||||||
background: #f1c40f;
|
background: #ffdd80;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pink {
|
.pink {
|
||||||
background: #e84393;
|
background: #ffb1cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Users */
|
/* Users */
|
||||||
.users {
|
.users {
|
||||||
padding: 60px 20px;
|
padding: 0px 20px;
|
||||||
text-align: center;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.users_box {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.know-cards {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-cards {
|
.user-cards {
|
||||||
@ -147,6 +190,62 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button_blue_box {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 8px 25px 8px 10px;
|
||||||
|
border: 0px solid #717171;
|
||||||
|
background-color: #ebe8fd;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nameContainer {
|
||||||
|
display: flex;
|
||||||
|
color: #717171;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crd {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crd img {
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
height: 79px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crd .h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 140%;
|
||||||
|
color: #383838;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crd p {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 140%;
|
||||||
|
color: #383838;
|
||||||
|
}
|
||||||
|
|
||||||
|
.knon_more {
|
||||||
|
margin-left: 50%;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.user-card {
|
.user-card {
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@ -177,28 +276,86 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<h1><span class="blue">Unlock</span> Your Career</h1>
|
<div class="hero_container">
|
||||||
<p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired by your
|
<div class="cards_box">
|
||||||
dream company.</p>
|
<h1><span class="blue_text">Unlock</span> Your Career</h1>
|
||||||
|
<p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired by
|
||||||
<div class="cards">
|
your
|
||||||
<div class="card green">Internships<br><small>Gain Practical Experience</small></div>
|
dream company.</p>
|
||||||
<div class="card orange">Mentorships<br><small>Guidance From Top Mentors</small></div>
|
<button class="button_blue_box"><img
|
||||||
<div class="card blue">Jobs<br><small>Explore Diverse Careers</small></div>
|
src="https://d8it4huxumps7.cloudfront.net/uploads/images/655edc8c1fab9_diamond_1.png?d=82x84"
|
||||||
<div class="card purple">Practice<br><small>Refine Skills Daily</small></div>
|
width="41" height="42" alt="diamond" loading="lazy"><span><span
|
||||||
<div class="card yellow">Competitions<br><small>Battle For Excellence</small></div>
|
class="nameContainer">Aditya</span><strong> Just Went
|
||||||
<div class="card pink">More<br><small>Explore More Options</small></div>
|
Kodepilot!</strong></span></button>
|
||||||
|
</div>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card green">Internships<br><small>Gain Practical Experience</small></div>
|
||||||
|
<div class="card orange">Mentorships<br><small>Guidance From Top Mentors</small></div>
|
||||||
|
<div class="card blue">Jobs<br><small>Explore Diverse Careers</small></div>
|
||||||
|
<div class="card purple">Practice<br><small>Refine Skills Daily</small></div>
|
||||||
|
<div class="card yellow">Competitions<br><small>Battle For Excellence</small></div>
|
||||||
|
<div class="card pink">More<br><small>Explore More Options</small></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="users">
|
<section class="users">
|
||||||
<h2>Who's using Kodepilot?</h2>
|
<div class="users_box">
|
||||||
<div class="user-cards">
|
<h2>Who's using Unstop?</h2>
|
||||||
<div class="user-card">Students and Professionals<br><small>Compete, Build Resume & Get Hired</small></div>
|
<div class="know-cards">
|
||||||
<div class="user-card">Companies and Recruiters<br><small>Hire, Engage & Brand</small></div>
|
<div>
|
||||||
<div class="user-card">Colleges<br><small>Empower Students with Opportunities</small></div>
|
<div class="crd">
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<div class="h4">Students and Professionals</div>
|
||||||
|
<p><strong>Unlock
|
||||||
|
Your
|
||||||
|
Potential:</strong> Compete, Build Resume, Grow and get Hired! </p>
|
||||||
|
</div><img
|
||||||
|
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67724b0c0d0f7_img1.png?d=211x163"
|
||||||
|
alt="Students and Professionals" width="105" height="81" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="crd">
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<div class="h4">Companies and Recruiters</div>
|
||||||
|
<p><strong>Discover
|
||||||
|
Right
|
||||||
|
Talent:</strong> Hire, Engage, and Brand Like Never Before! </p>
|
||||||
|
</div><img
|
||||||
|
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67727626b861a_img2.png?d=211x163"
|
||||||
|
alt="Companies and Recruiters" width="105" height="81" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="crd">
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<div class="h4">Colleges</div>
|
||||||
|
<p><strong>Bridge
|
||||||
|
Academia
|
||||||
|
and Industry:</strong> Empower Students with Real-World Opportunities! </p>
|
||||||
|
</div><img
|
||||||
|
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67724b2a99511_img3.png?d=211x163"
|
||||||
|
alt="ridge Academia and Industry" width="105" height="81" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div role="button" tabindex="0" class="knon_more"> Know How <un-icon _nghost-serverapp-c3674528818=""><img
|
||||||
|
style="--size: 18px;" src="https://cdn.unstop.com/assets/icons/chevron_down.svg" height="18"
|
||||||
|
width="18" alt="chevron_down" class="ng-star-inserted"></un-icon>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<div id="footer-placeholder"></div>
|
||||||
|
<script>
|
||||||
|
fetch("footer.html")
|
||||||
|
.then(res => res.text())
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById("footer-placeholder").innerHTML = data;
|
||||||
|
})
|
||||||
|
.catch(err => console.error("Failed to load footer:", err));
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user