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

Added footer and fixed the navbar of RateUs Page #736

Merged
merged 2 commits into from
Jul 3, 2024
Merged

Added footer and fixed the navbar of RateUs Page #736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f72c64
Added footer and fixed the navbar of RateUs Page
Kcode15 Jul 1, 2024
0efb747
Merge branch 'main' into Khushi
varshith257 Jul 3, 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
239 changes: 229 additions & 10 deletions rateus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,10 @@ h6 {
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 85px;
height: 70px;
margin: auto;
margin-top: 15px; /* Adjust this value to move the header down */
position: relative; /* Added for z-index stacking */
z-index: 999; /* Ensure header is above other content */
margin-top: 0px;
padding-top: 15px;
}

.img {
Expand All @@ -54,6 +53,9 @@ h6 {
/* Navigation Menu Styles */
.nav_menu {
margin-right: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.nav_link {
Expand Down Expand Up @@ -86,21 +88,18 @@ h6 {
.find-doctor {
display: flex;
align-items: center;
margin-left: 10px; /* Adjust margin as needed */
margin-top: -10px; /* Move the button upwards by adjusting this negative margin */
}


.find-doctor button {
background-color: #4bb6b7;
color: white;
padding: 12px 24px;
padding: 10px 15px;
border: none;
border-radius: 4px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
font-size: 1rem;
margin-right: 10px; /* Optional: Add margin between button and other elements */
margin-right: 8px; /* Optional: Add margin between button and other elements */
}

.find-doctor button:hover {
Expand Down Expand Up @@ -217,3 +216,223 @@ button:hover {
margin-top: 20px; /* Increase top margin for spacing */
}
}

/* Footer Section Code */
:root {
--text-color: #959DA5;
--footer-bg: #3fbcc051;
--footer-bottom-bg: #3fbcc051s;
--white: white;
--link-color: #959DA5;
--link-hover: #2F81CF;
--button-border: #848D97;
}
footer {
bottom: 0;
background-color: var(--footer-bg);
width: 100%;
min-width: 20re;
bottom: 0;
display: flex;
align-items: center;
flex-direction: column;
}

.footer-wrapper {
display: flex;
flex-direction: column;
max-width: 80rem;
width: 100%;
margin: 0 auto;
padding: 1rem;
}

.footer-col p {
margin: 20px 0;
color: #bfbfbf;
max-width: 300px;
}

.footer-col form {
display: flex;
gap: 5px;
}

.footer-col input {
height: 40px;
border-radius: 6px;
background: none;
width: 100%;
outline: none;
border: 1px solid #7489c6;
caret-color: #fff;
color: #fff;
padding-left: 10px;
}

.footer-col input::placeholder {
color: #ccc;
}

.footer-col form button {
background: #fff;
border: none;
color: #08434551;
padding: 10px 10px;
border-radius: 6px;
cursor: pointer;
font-weight: 700;
transition: 0.2s ease;
}

.footer-col form button:hover {
background: #cecccc;
}

/* other columns */
.other-columns {
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
gap: 2rem 1rem;
padding-top: 2rem;
}

.other-columns ul {
display: flex;
gap: 0.75rem;
list-style-type: none;
padding: 0;
margin: 0;
flex-direction: column;
font-weight: 600;
}

.other-columns ul a {
color: var(--text-color);
text-decoration: none;
font-size: 0.85rem;
}

.other-columns ul a:hover {
text-decoration: underline;
}

.other-columns h3 {
color: var(--link-color);
margin-bottom: 1rem;
font-size: 1rem;
font-family: ui-monospace, monospace;
}
/*? Footer bottom */
.footer-bottom {
width: 100%;
color: var(--text-color);
background-color: var(--footer-bottom-bg);
}

.footer-bottom-wrapper {
display: flex;
max-width: 80rem;
margin: 0 auto;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
padding: 1rem;
}

.footer-bottom small {
font-size: 1rem;
display: inline;
white-space: nowrap;
}

.footer-bottom-links {
list-style-type: none;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}

.footer-bottom-links a {
color: var(--link-color);
text-decoration: none;
white-space: nowrap;
}

.footer-bottom-links a:hover {
color: var(--link-hover);
text-decoration: underline;
}

.footer-bottom>small {
font-size: 1rem;
margin: 0 auto;
width: 100%
}

/*? socials */
.social-wrapper {
display: flex;
gap: 0.5rem;
margin: 0 auto;
}

.social-links {
display: inline-flex;
gap: 0.5rem;
align-items: center;
}

.social-links img {
width: 1.5rem;
height: 1.5rem;
transition: all 0.2s ease-in-out;
}

.social-links img:hover {
transform: scale(1.1);
}

.social-links ul {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style-type: none;
}

.footer-bottom-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}

@media (min-width: 600px) {
.other-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.footer-bottom-wrapper {
flex-direction: row;
}
.footer-bottom-wrapper small{
font-size: smaller;
}
.footer-bottom-links {
margin-left: 1.5rem;
}
}
@media (max-width: 800px) {
.footer-top {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem 0.5rem 2rem 0.5rem;
}
}
81 changes: 80 additions & 1 deletion rateus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="rateus.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
</head>
<body>
<header class="header_container">
Expand Down Expand Up @@ -43,7 +44,85 @@ <h2>Rate Us</h2>
<textarea id="comment" placeholder="Give Us Your Feedback :)"></textarea>
<button onclick="submitRating()">Submit</button>
</div>

<br><br>
<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="#about">About Us</a></li>
<li><a href="./Html-Files/contact.html">Contact Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#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="#">Patient Portal</a></li>
<li><a href="login.html">Login account</a></li>
<li><a href="#">Helplines</a></li>
<li><a href="#">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">Terms and Conditions</a></li>
<li><a href="#">GDPR</a></li>
<li><a href="#">Security</a></li>
<li><a href="#test">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="email" placeholder="Your email" required>
<button type="submit">SUBSCRIBE</button>
</form>
</section>
</div>
</div>
</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"><div><img src="twitter.png" style="width: 16px; height: 15px;"></div></a>
<a href="https://www.linkedin.com" target="_blank"><div><i class="fa-brands fa-linkedin"></i></div></a>
<a href="#" 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="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
Expand Down