Skip to content

Commit

Permalink
Merge pull request #241 from abhishekdumaniya/changes
Browse files Browse the repository at this point in the history 
Improved UI of footer
  • Loading branch information
Anishka Gupta authored May 20, 2024
2 parents 0274ff3 + 5097535 commit 8f54ccf
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 149 deletions.
129 changes: 72 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -617,74 +617,89 @@ <h1>Give Us Your Valuable Feedback.</h1>


<!-- ############### Footer ############### -->


<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">

<div class="col-lg-3 col-md-6">
<div class="footer-info">
<h3>RapiDoc</h3>
<p>
Address<br>
Delhi, India<br><br>
<strong>Phone:</strong> <i class="bi bi-phone"></i><a href="tel:+91 1234567890">+91 1234567890</a><br>
<strong>Email:</strong> <a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a>
<br>
</p>
<div class="social-links mt-3">
<a href="#" class="facebook"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="twitter"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" class="google-plus"><i class="fa-brands fa-skype"></i></a>
<a href="#" class="linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
</div>
</div>
<footer>
<div class="row">
<!-- map -->
<div class="col" id="col1">
<div class="contact-location">
<!-- <img style="height: 100%;;" src="img/home icon.webp" alt="" class="logo"> -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"
width="100%" height="200px" style="border: 0; padding: 2rem 2em 0 0" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<!-- map -->

<div class="col-lg-2 col-md-6 footer-links">
<h4>Links</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#about">About us</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#services">Services</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#doctor">Doctors</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="Html-Files/contact.html">Contact</a></li>
</ul>
</div>
<!-- contact -->
<div class="col" id="col2">
<h3>
Contact
<div class="underline"><span></span></div>
</h3>

<div class="col-lg-3 col-md-6 footer-links">
<h4>Our Services</h4>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="#">Location Services</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Online OPDs</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Availability Status</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">Pharmacy Services</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="#">User Benefits</a></li>
</ul>
<p><a href="">contact@rapidoc.com</a></p>
<p><a href="">+91 1234567890</a></p>
</div>
<!-- contact -->

<!-- Links -->
<div class="col" id="col3">
<h3>
Quick Links
<div class="underline"><span></span></div>
</h3>
<div class="quick-links" id="bottom">
<!-- <div class="footer-title">
QUICK LINKS
</div> -->
<div class="quick-links-info">
<div><a href="./index.html">Home</a></div>
<div><a href="#about">About us</a></div>
<div><a href="./Html-Files/contact.html">Contact us</a></div>
<div><a href="#services">Services</a></div>
<div><a href="#doctors">Doctors</a></div>
</div>
</div>
</div>
<!-- links -->

<div class="col" id="col4">
<h3>
SOCIAL
<div class="underline"><span></span></div>
</h3>
<div class="social-icons">

<div class="social">
<a href="#" target="_blank"><img
src="#" alt="">Instagram</a>

<div class="col-lg-4 col-md-6 footer-newsletter">
<h4>Daily Newsletter</h4>
<p>Get your medical insights! Subscribe to our newsletters now!</p>
<form action="" method="post">
<input type="email" name="email" placeholder="Email"><input type="submit" value="Subscribe">
</form>
</div>
<div class="social">
<a href="#" target="_blank"><img
src="" alt="">LinkedIn</a>

</div>
</div>
<div class="social">
<a href="#"><img src="" alt=""> Facebook</a>

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

<div class="container">
<div class="copyright">
&copy; 2024 Copyright <strong><span>RapiDoc</span></strong>. All Rights Reserved
</div>
<!-- Copyright -->
<div id="copyright" style="text-align: center;">
<p style="align-items: center;">
© Copyright &nbsp; <span> RapiDoc </span> &nbsp; | All Rights
Reserved
</p>
<p>Designed by RapiDoc</p>
</div>
</footer><!-- End Footer -->
</footer>


<div id="preloader"></div>
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
Expand Down
181 changes: 89 additions & 92 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1200,139 +1200,136 @@ section {


/*################----Footer----################*/
#footer {
background: #000;
padding: 0 0 30px 0;
color: #fff;
font-size: 14px;


footer {
width: 100%;
background: linear-gradient(to right, #0f0f0f, #00093d);
color: #ffff;
line-height: 20px;
}

#footer .footer-top {
background: #000;
padding: 60px 0 30px 0;
.footer-title {
font-weight: 700;
font-size: 26px;
margin-bottom: 22px;
}

#footer .footer-top .footer-info {
margin-bottom: 30px;
.row {
width: 90%;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}

#footer .footer-top .footer-info h3 {
font-size: 24px;
margin: 0 0 20px 0;
padding: 2px 0 2px 0;
line-height: 1;
font-weight: 700;
.col {
padding: 20px 0;
}

#footer .footer-top .footer-info p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Roboto", sans-serif;
.col h3 {
font-size: 25px;
}

#footer .footer-top .social-links a {
font-size: 18px;
display: inline-block;
background: #3fbcc0a4;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 4px;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
#col1 {
flex-basis: 40%;
margin-right: 40px;
}

#footer .footer-top .social-links a:hover {
background: #3fbcc0c1;
text-decoration: none;
#col2 {
flex-basis: 20%;
margin-right: 10px;
font-size: 15px;
}

#footer .footer-top h4 {
font-size: 16px;
font-weight: 600;
position: relative;
padding-bottom: 12px;
#col3 {
flex-basis: 15%;
}

#footer .footer-top .footer-links {
#col4 {
flex-basis: 15%;
}

.logo {
margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
.col h3 {
width: fit-content;
margin-bottom: 40px;
position: relative;
}

#footer .footer-top .footer-links ul i {
padding-right: 2px;
color: #3fbcc0a4;
font-size: 18px;
line-height: 1;
#col2 p {
margin-bottom: 18px;
}

#footer .footer-top .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
#col2 p a {
font-size: 15px;
padding-top: 10px;
color: #fff;
}

#footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
.email-id {
width: fit-content;
margin: 20px 0;
border-bottom: 1px solid #ccc;
}

#footer .footer-top .footer-links ul a {
.quick-links-info div {
margin-bottom: 20px;
}

.quick-links-info div a {
color: #fff;
transition: 0.3s;
display: inline-block;
line-height: 1;
font-size: 15px;
}

#footer .footer-top .footer-links ul a:hover {
color: #3fbbc0;
.underline {
width: 100%;
height: 5px;
background: #767676;
border-radius: 3px;
position: absolute;
top: 25px;
left: 0;
overflow: hidden;
}

#footer .footer-top .footer-newsletter form {
margin-top: 30px;
.underline span {
width: 15px;
height: 100%;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px;
border-radius: 3px;
position: absolute;
top: 0;
left: 10px;
/* animation: moving 1s linear infinite; */
}

#footer .footer-top .footer-newsletter form input[type="email"] {
border: 0;
padding: 4px;
width: calc(100% - 110px);
}
@keyframes moving {
0% {
left: -20px;
}

#footer .footer-top .footer-newsletter form input[type="submit"] {
position: absolute;
text-decoration: none;
border: none;
top: -1px;
right: -1px;
bottom: -1px;
background: none;
font-size: 16px;
padding: 0 20px;
background: #3fbcc0a4;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
100% {
left: 100%;
}
}

#footer .footer-top .footer-newsletter form input[type="submit"]:hover {
background: #3fbcc0a4;
.social-icons img:hover {
transition: 0.5s ease-in-out;
transform: scale(1.1);
}

#footer .copyright {
.social a{
margin-bottom: 10px;
text-align: center;
padding-top: 30px;
display: flex;
gap: 10px;
align-items: center;
color: white;

}


Expand Down

0 comments on commit 8f54ccf

Please sign in to comment.