Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐞[Bug]: Fixes Unify Footer and Navbar in the Blood Test Page #889

Merged
merged 4 commits into from
Jul 16, 2024
Merged

🐞[Bug]: Fixes Unify Footer and Navbar in the Blood Test Page #889

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7e75e49
🐞[Bug]: Unify Footer and Navbar in the Blood Test Page
Anjaliavv51 Jul 16, 2024
93af5a6
Merge branch 'main' of https://github.com/Anjaliavv51/RAPIDOC-HEALTHC…
Anjaliavv51 Jul 16, 2024
f3dfa29
Fixes Header and Footer
Anjaliavv51 Jul 16, 2024
38250d7
Footer Fixing
Anjaliavv51 Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 1 addition & 146 deletions test.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,7 @@ body
/* min-height: 10vh; */
}

section
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #095a55;

}
section::before
{
content: '';
position: absolute;
top: 10;
left: 0;
width: 50%;
height: 100%;

}

.nav_link {
list-style: none;
Expand Down Expand Up @@ -83,22 +65,6 @@ h1 {



.section {
position:absolute;
margin-bottom: 0px;
width: 50%;
margin-left: 25%;
background-color: #095a55;
border-radius: 2rem;
box-shadow: 2px 2px 2px #55a5ea;
opacity: 0; /* Start invisible */
animation: fade-grow 1.5s ease-in-out forwards; /* Apply animation */
}

@keyframes fade-grow {
from { opacity: 0; transform: scale(0.9); } /* Start invisible and slightly shrunk */
to { opacity: 1; transform: scale(1); } /* Fade in and grow to normal size */
}


.search {
Expand Down Expand Up @@ -470,115 +436,4 @@ h2{

.service-item:hover .icon-box-primary i {
color: var(--bs-white) !important;
}
footer {
background-color: #022a2d;

}

.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.footer-section {
margin: 10px 0;
}

.footer-section h3 {
font-size: 18px;
margin-bottom: 10px;
color: #666;
}

.footer-section ul {
list-style: none;
padding: 0;
}

.footer-section ul li {
margin-bottom: 8px;
}

.footer-section ul li a {
text-decoration: none;
color: #666;
font-size: 14px;
transition: color 0.3s;
}

.footer-section ul li a:hover {
color: #007bff;
}

.footer-section form {
display: flex;
gap: 1rem;

}

.footer-section input[type="email"] {
padding: 10px;
font-size: 14px;
border: 1px solid #55a5ea;
border-radius: 4px;
margin-bottom: 10px;
background-color: transparent;

}

.footer-section button {
padding: 10px;
font-size: 14px;
color: #878484;
background-color: #ffffff;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
height: 40px;
}

.footer-section button:hover {
background-color: #55a5ea;
}

.bottom-footer {
background-color: #09173b;
padding: 10px;
text-align: center;
font-size: 14px;
color: #fffefe;
}

.bottom-footer .social-links {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}

.bottom-footer .social-links span {
margin-right: 10px;
}

.bottom-footer .social-links a {
text-decoration: none;
color: #666;
margin: 0 10px;
font-size: 18px;
transition: color 0.3s;
}

.bottom-footer .social-links a:hover {
color: #007bff;
}






}
167 changes: 91 additions & 76 deletions test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blood Test </title>
<link rel="stylesheet" href="test.css">

<link rel="icon" type="image/x-icon" href="../favicon.png">

<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Expand All @@ -23,12 +26,13 @@
<link href="bootstraptest.css" rel="stylesheet">

<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>#progressBar {
<style>
#progressBar {
position: fixed;
top: 0;
left: 0;
Expand All @@ -37,7 +41,9 @@
background-color: #3fbcc0;
z-index: 9999;

}</style>
}

</style>
</head>
<body>
<div id="progressBar"></div>
Expand Down Expand Up @@ -79,10 +85,10 @@
<!--<button onclick="filterTests()">Search</button>-->
</div>
<div class="img-h1" style = " display:inline">
<h1 style="font-size: 65px; color:white">
<h1 style="font-size: 65px; color:white">
Book Your <span style="color: #55a5ea;">Blood Test <img class="sec-img" src="images/rd.png" alt="" data-sr-id="17" style="visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0.5s;"></span>
</h1>
<div class="container-fluid container-service py-5">
</h1>
<div class="container-fluid container-service py-5">
<div class="container pt-5">
<div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
<h1 class="display-6 mb-3">Reliable & High-Quality Laboratory Service</h1>
Expand Down Expand Up @@ -172,78 +178,87 @@ <h5 class="mb-3">Allergy Tests</h4>
</div>
</div>
</div>
</div>


<br /><br />
<footer>
<div class="footer-container">
<div class="footer-section">
<h3>QUICK LINKS</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Doctors</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="footer-section">
<h3>EXPLORE</h3>
<ul>
<li><a href="#">Appointment</a></li>
<li><a href="#">Patient Portal</a></li>
<li><a href="#">Login account</a></li>
<li><a href="#">Helplines</a></li>
<li><a href="#">Location</a></li>
</ul>
</div>
<div class="footer-section">
<h3>LEGAL</h3>
<ul>
<li><a href="#">Customer Agreement</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">GDPR</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
<div class="footer-section">
<h3>RAPIDOC Newsletter</h3>
<p style= "color:rgb(116, 119, 116);">Subscribe to our newsletter for a weekly dose</p>
<p style= "color:rgb(116, 119, 116);"> of news, updates, helpful tips, and</p>
<p style= "color:rgb(116, 119, 116);"> exclusive offers.</p>
<form action="#">
<input type="email" placeholder="Enter your email">
<button type="submit">SUBSCRIBE</button>
</form>
</div>
</div>
<div class="bottom-footer">
<p>ALL rights Reserved Made with ❤️ by RapiDoc</p>
<div class="social-links">
<span>Follow Us:</span>
<a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="tel:+911234567890" title="+91 1234567890" target="_blank"><i class="fa-solid fa-phone"></i></a>
<a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-wrapper">
<div class="footer-columns">
<div class="other-columns">
<section>
<h4>Quick Links</h4><br>
<ul class="links">
<li><a href="./index.html">Home</a></li>
<li><a href="index.html#about">About Us</a></li>
<li><a href="index.html#contact">Contact Us</a></li>
<li><a href="dex.html">Services</a></li>
<li><a href="index.html#doctors">Doctors</a></li>
<li><a href="./faq.html">FAQ</a></li>
</ul>
</section>
<section>
<h4>Explore</h4><br>
<ul class="links">
<li><a href="Html-Files/appointment.html">Appointment</a></li>
<li><a href="index.html#patient-portal">Patient Portal</a></li>
<li><a href="login.html">Login account</a></li>
<li><a href="#">Helplines</a></li>
<li><a href="index.html#contact">Location</a></li>
</ul>
</section>
<section>
<h4>Legal</h4><br>
<ul class="links">
<li><a href="Html-Files/customer_agreement.html">Customer Agreement</a></li>
<li><a href="Html-Files/privacy_policy_page.html">Privacy Policy</a></li>
<li><a href="Html-Files/terms_and_conditions.html">GDPR</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</section>
<section class="footer-col">
<h4>RAPIDOC Newsletter</h4><br>
<p>
Subscribe to our newsletter for a weekly dose
of news, updates, helpful tips, and
exclusive offers.
</p>
<form action="#" class="subscribe-form">
<input type="text" placeholder="Your email" required>
<button type="submit">SUBSCRIBE</button>
</form>
</section>
</div>
</div>
</footer>



</div>
<div class="footer-bottom">
<div class="footer-bottom-wrapper">
<small>© <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
Reserved Made with ❤️ by RapiDoc</small>
<style>
.social-wrapper a div i {
color: #afb6c7;
}
.social-wrapper a div i:hover {
color: #fff;
}
</style>
<div class="social-wrapper">
<div class="social-links">
<div style="margin-left: 100px;font-family: sans-serif;"><i>Follow&nbsp;Us&nbsp;:&nbsp;</i></div>
<a href="https://www.facebook.com/" target="_blank"><div><i class="fa-brands fa-facebook-f"></i></div></a>
<a href="https://www.twitter.com" target="_blank"><div><i class="fa-brands fa-twitter"></i></div></a>
<a href="https://www.linkedin.com" target="_blank"><div><i class="fa-brands fa-linkedin"></i></div></a>
<a href="https://www.linkedin.com" target="_blank"><div><i class="fa-brands fa-instagram"></i></div></a>
<a href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank"><div><i class="fa-brands fa-github"></i></div></a>
<a href="+91 1234567890" title="+91 1234567890" target="_blank"><div><i class="fa-solid fa-phone"></i></div></a>
<a href="[email protected]" target="_blank"><div><i class="fa-solid fa-envelope"></i></div></a>
</div>
</div>
</div>
</div>
</footer>








<script src="tests.js"></script>
</body>
</html>