Skip to content

Commit

Permalink
Added footer and fixed the navbar of RateUs Page (#736)
Browse files Browse the repository at this point in the history 
Co-authored-by: Vamshi Maskuri <[email protected]>
  • Loading branch information
@Kcode15 @varshith257
Kcode15 and varshith257 authored Jul 3, 2024
1 parent e518811 commit 11deca7
Show file tree
Hide file tree
Showing 2 changed files with 309 additions and 11 deletions.
239 changes: 229 additions & 10 deletions rateus.css
View file
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
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

0 comments on commit 11deca7

Please sign in to comment.