Skip to content

Commit

Permalink
Footer Design
Browse files Browse the repository at this point in the history
  • Loading branch information
@GyanaPrakashSahoo7853
GyanaPrakashSahoo7853 committed Oct 20, 2024
1 parent 94dc334 commit e16d5fa
Show file tree
Hide file tree
Showing 7 changed files with 267 additions and 27 deletions.
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.
92 changes: 65 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -705,10 +705,70 @@ <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:[email protected]">[email protected]</a></p>
</div>
<footer>
<p class="m-0" style="text-align: center; padding-top: 10px;">&copy; 2024 Swasthya Point</p>
</footer>
</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>
Expand Down Expand Up @@ -757,29 +817,7 @@ <h1 class="mb-4">Have Any Query? Please Contact Us!</h1>

</main>

<footer class="bg-gray-900">
<div class="container mx-auto">
<div class="row py-4 flex justify-center">
<div class="col-md-5 text-white hover:text-blue-400">
<h5 class="text-xl font-semibold hover:text-blue-400" style="font-size: 20px;">Medical</h5><br>
<p class="hover:text-blue-300">Prioritize your health<br> with top healthcare providers,<br> personalized treatments, and <br>easy management of your health journey.</p>
</div>
<div class="col-md-4 text-white hover:text-blue-400">
<h5 class="text-xl font-semibold hover:text-blue-400">New York</h5>
<p class="hover:text-blue-300">
709 Honey Creek Dr, Delhi NY 10028,1-888-299-2000,medical.in
</p>


<h2 class="text-xl font-semibold hover:text-blue-400">Aligarh</h2>
<p class="hover:text-blue-300">
4851 Willow Greene Drive Montgomery AL 36109,1-888-299-2000,med
</p>

</div>
</div>
</div>
</footer>



<script> configObj = {
Expand Down Expand Up @@ -879,7 +917,7 @@ <h2 class="text-xl font-semibold hover:text-blue-400">Aligarh</h2>
<script>
AOS.init();
</script>
<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 @@ -761,3 +761,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 e16d5fa

Please sign in to comment.