Skip to content

Commit

Permalink
Merge pull request #610 from GyanaPrakashSahoo7853/changes/footer
Browse files Browse the repository at this point in the history 
Changed Footer Design  [Fixes #507]
  • Loading branch information
@thakuratul2
thakuratul2 authored Oct 25, 2024
2 parents 5b6a435 + 5ff760c commit 6df025a
Show file tree
Hide file tree
Showing 7 changed files with 283 additions and 1 deletion.
Binary file added img/facebook.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/instagram.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/linkedin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/twitter.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/youtube.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 81 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -696,6 +696,82 @@ <h1 class="mb-4">Have Any Query? Please Contact Us!</h1>
<!-- Contact End -->


<footer class="footer-distributed">

<div class="footer-left">
<h3><a class="social-icon__link" href="https://tushargupta1504.github.io/Medical-Website/" target="_blank">
<img src="img/swasthya-logo.png" height="120px" width="120px" >
</a></h3>

<p class="footer-links">
<a href="#home">Home</a>
|
<a href="#about">About</a>
|
<a href="#contact">Contact</a>
|
<a href="blog.html">Blog</a>
</p>

<p class="footer-company-name">Copyright © 2024 <strong>Swasthya</strong> All rights reserved</p>
</div>

<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Swasthya Point </span>
Delhi</p>
</div>

<div>
<i class="fa fa-phone"></i>
<p>+91 9876543210</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:tusharg1540@gmail.com">tusharg1540@gmail.com</a></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
<strong>Swasthya</strong> Prioritize your healthwith top healthcare providers,personalized treatments, andeasy management of your health journey.
</p>
<div class="footer-icons">
<a class="social-icon__link" href="" target="_blank">
<img src="img/facebook.png" height="48px" width="48px" >
</a>
<a class="social-icon__link" href="">
<img src="img/instagram.png" height="40px" width="40px">
</a>
<a class="social-icon__link" href="https://www.linkedin.com/in/tushar1504/">
<img src="img/linkedin.png" height="55px" width="54px">
</a>
<a class="social-icon__link" href="" target="_blank">
<img src="img/twitter.png" height="55px" width="54px">
</a>
<a class="social-icon__link" href="" target="_blank">
<img src="img/youtube.png" height="55px" width="54px">
</a>
</div>
</div>
</footer>


</div>

</div>
</div>
</div>
</section>
<script>
var content = document.getElementsByTagName('body')[0];
var darkMode = document.getElementById('dark-change');
darkMode.addEventListener('click', function () {
darkMode.classList.toggle('active');
content.classList.toggle('night');
})
</script>
</div>
<footer>
/* <p class="m-0" style="text-align: center; ">&copy; 2024 Swasthya Point</p> */
Expand All @@ -714,7 +790,7 @@ <h1 class="mb-4">Have Any Query? Please Contact Us!</h1>
<script>
// Get the form and submit button
const form = document.querySelector('form');
const submitButton = document.querySelector(#contact);
const submitButton = document.querySelector('#contact');

// Add an event listener to the submit button
submitButton.addEventListener('click', function (event) {
Expand Down Expand Up @@ -746,6 +822,10 @@ <h1 class="mb-4">Have Any Query? Please Contact Us!</h1>

</main>





<footer class="bg-red-500 h-[30vh]">
<!-- <div class="footercolor"> -->
<section class="footer" id="footer" style="background-color: black ">
Expand Down
202 changes: 202 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -850,3 +850,205 @@ form{
transform: translateX(200px); /* Adjust the value based on how much you want to slide the image */

}
}
}
* {
padding: 0;
margin: 0;
}

body {
font-family: 'Poppins', sans-serif;
}

html {
background-color: #eaf0f2;
}

header {
text-align: center;
padding-top: 100px;
margin-bottom: 300px;
font-size: 35px;
}

header h2 {
color: #f0525f;
}

header span {
color: #eaa03f;
}

/* The footer is fixed to the bottom of the page */

footer {
position: fixed;
bottom: 0;
}

@media (max-height:800px) {
footer {
position: static;
}
header {
padding-top: 40px;
}
}

.footer-distributed {
background-color: #2d2a30;
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 50px 50px 60px 50px;
margin-top: 80px;
}

.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
display: inline-block;
vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left {
width: 30%;
}

.footer-distributed h3 {
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}


.footer-distributed h3 span {
color: #e0ac1c;
}

/* Footer links */

.footer-distributed .footer-links {
color: #ffffff;
margin: 20px 0 12px;
}

.footer-distributed .footer-links a {
display: inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}

.footer-distributed .footer-company-name {
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center {
width: 35%;
}

.footer-distributed .footer-center i {
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope {
font-size: 17px;
line-height: 38px;
}

.footer-distributed .footer-center p {
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin: 0;
}

.footer-distributed .footer-center p span {
display: block;
font-weight: normal;
font-size: 14px;
line-height: 2;
}

.footer-distributed .footer-center p a {
color: #e0ac1c;
text-decoration: none;
;
}

/* Footer Right */

.footer-distributed .footer-right {
width: 30%;
}

.footer-distributed .footer-company-about {
line-height: 20px;
color: #92999f;
font-size: 13px;
font-weight: normal;
margin: 0;
}

.footer-distributed .footer-company-about span {
display: block;
color: #ffffff;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}

.footer-distributed .footer-icons {
margin-top: 25px;
}

.footer-distributed .footer-icons a {
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}

.footer-distributed .footer-icons a:hover {
background-color: #33383b;
}

.footer-links a:hover {
color: #3F71EA;
}

@media (max-width: 880px) {
.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer-distributed .footer-center i {
margin-left: 0;
}
}

0 comments on commit 6df025a

Please sign in to comment.