Skip to content

Commit

Permalink
Footer in Pricing Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ojas-Arora
Ojas-Arora committed Jan 15, 2025
1 parent 3274297 commit 145b9ee
Show file tree
Hide file tree
Showing 2 changed files with 230 additions and 4 deletions.
113 changes: 111 additions & 2 deletions pricing.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,116 @@ text-align: left; /* Adjusts text alignment, optional */

footer {
padding: 10px;
background-color: #f0cd9e66;
background-color: var(--primary-color);
color: var(--footer-text);
text-align: center;
border: 4px solid #faebd7;
}

@media(max-width:768px) {
.image-icon1{
width: 50px;
height: 50px;
top: 10px;
}

.navbar .logo h2 {
font-size: 1.7em;
margin-left: 117%;
}

.image-icon{
width: 78px;
height: 78px;
}
}

@media(max-width:425px) {
.about-box h1{
font-size: 2rem;
}

.back-button {
left: 8px;
}
}
.quick-link ul li:hover,
.resources ul li:hover {
text-decoration: underline;
}

.social-icons div a {
transition: all 0.3s ease;
}

.social-icons div a:hover {
scale: 1.3;
rotate: 15deg;
}
.social-icons div a i.fa-facebook-f:hover {
color: rgb(51, 51, 199);
}
.social-icons div a i.fa-twitter:hover {
color: rgb(51, 98, 199);
}
.social-icons div a i.fa-linkedin-in:hover {
color: rgb(51, 132, 199);
}
.social-icons div a i.fa-instagram:hover {
color: rgb(199, 51, 167);
}
.subscribe-section form input[type="email"] {
border-radius: 4px;
height: 4vh;
border: none;
padding: 10px;
}
.subscribe-button {
padding: 10px 62px;
border: none;
border-radius: 5px;
background-color: #d6a52b;
color: #222;
font-weight: 600;
cursor: pointer;
}

.subscribe-button:hover {
background-color: #d7b96b;
}

.goog-te-gadget-simple {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.subscribe-section form input[type="email"] {
height: 5vh;
width: 69%;
}
.subscribe-button {
width: 69%;
}
}

@media (max-width: 426px) {
.subscribe-section form input[type="email"] {
text-align: center;
padding: 16px 42px;
}
.subscribe-button {
padding: 10px 90px;
}

.option {
width: 100%;
}
}
.orange, h3{
color: #d6a52b;
}
.footer-section h3{
font-size: 1rem;
margin-bottom: 0.5rem;
}
121 changes: 119 additions & 2 deletions pricing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,10 +221,127 @@ <h3>Premium Plan</h3>
</button>

<!-- Footer -->
<footer>
<p>&copy; 2024 Ajivika™. All rights reserved.</p>


<!-- Footer -->
<footer style="background-color: #222; color: #fff; padding: 20px 10px">
<div class="footer-container" style="
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: 1200px;
margin: auto;
">
<!-- About Section -->
<div class="footer-section" style="flex: 1; min-width: 200px">
<h3>About Ajivika</h3>
<p style="font-size: 14px; line-height: 1.6">
Ajivika is your one-stop destination for career growth and learning.
From creating professional resumes to applying for top jobs, we
provide tools and resources for every career stage.
</p>
</div>

<!-- Quick Links -->
<div class="footer-section quick-link" style="flex: 1; min-width: 200px">
<h3>Quick Links</h3>
<ul style="
list-style: none;
padding: 0;
font-size: 14px;
line-height: 1.8;
">
<li>
<a href="./index.html" style="color: #fff; text-decoration: none">Home</a>
</li>
<li>
<a href="./about.html" style="color: #fff; text-decoration: none">About Us</a>
</li>
<li>
<a href="./contact.html" style="color: #fff; text-decoration: none">Contact</a>
</li>
<li>
<a href="./pricing.html" style="color: #fff; text-decoration: none">Go Pro</a>
</li>
</ul>
</div>

<!-- Resources -->
<div class="footer-section resources" style="flex: 1; min-width: 200px">
<h3>Resources</h3>
<ul style="
list-style: none;
padding: 0;
font-size: 14px;
line-height: 1.8;
">
<li>
<a href="./blog.html" style="color: #fff; text-decoration: none">Blog</a>
</li>
<li>
<a href="./testimonial.html" style="color: #fff; text-decoration: none">Testimonial</a>
</li>
<li>
<a href="./faq.html" style="color: #fff; text-decoration: none">FAQs</a>
</li>
<li>
<a href="./terms.html" style="color: #fff; text-decoration: none">Terms & Conditions</a>
</li>
<li>
<a href="./privacy.html" style="color: #fff; text-decoration: none">Privacy Policy</a>
</li>
</ul>
</div>

<!-- Social Media -->
<div class="footer-section social-icons" style="flex: 1; min-width: 200px">
<h3>Follow Us</h3>
<div style="
display: flex;
justify-content: center;
gap: 10px;
font-size: 20px;
">
<a href="https://facebook.com" target="_blank" style="color: #fff; text-decoration: none">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com" target="_blank" style="color: #fff; text-decoration: none">
<i class="fab fa-twitter"></i>
</a>
<a href="https://linkedin.com" target="_blank" style="color: #fff; text-decoration: none">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://instagram.com" target="_blank" style="color: #fff; text-decoration: none">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>

<!-- Subscribe Section -->
<div class="footer-section subscribe-section" style="flex: 1; min-width: 200px">
<h3>Subscribe to Our Newsletter</h3>
<form action="#" method="POST" style="
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
">
<input id="email" type="email" name="email" placeholder="Enter your email" />
</button>
<button type="submit" class="subscribe-button">Subscribe</button>
</form>
</div>
</div>

<hr style="margin: 20px 0; border: 0; border-top: 1px solid #444" />
<div style="text-align: center; font-size: 14px; color: #aaa">
<p>&copy; 2024 Ajivika™. All rights reserved.</p>
<p>Designed and developed with ❤️ by the Ajivika Team.</p>
</div>
</footer>


<script>
// hamburger menu js
function toggleMenu() {
Expand Down

0 comments on commit 145b9ee

Please sign in to comment.