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

Created feedback section, aligned footer and added social media link. #59

Closed
wants to merge 3 commits into from
Closed

Created feedback section, aligned footer and added social media link. #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a8cb424
Created feedback section , aligned footer and added social media link…
richasriva May 12, 2024
b8f491f
Merge branch 'main' into main
richasriva May 13, 2024
eb4711a
Update index.html
richasriva May 13, 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
127 changes: 87 additions & 40 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,10 @@
<link href="bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="glightbox.min.css" rel="stylesheet">
<link href="remixicon/remixicon.css" rel="stylesheet">
<link href="swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="patient-portal.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">

</head>

Expand Down Expand Up @@ -63,6 +62,7 @@ <h1 class="logo me-auto"><a href="index.html">RapiDoc</a></h1>
<li><a class="nav-link scrollto" href="#patient-portal">Patient Portal</a></li>
<li><a class="nav-link scrollto" href="#doctors">Doctors</a></li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<li><a class="nav-link" href="#feedback">Feedback</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
Expand Down Expand Up @@ -551,8 +551,46 @@ <h4>Call:</h4>
</div>
</section><!-- End Contact Section -->


<!-- Feedback System-->
<section id="feedback" class="feed">
<div class="feedback">
<h1>Give Us Your Valuable Feedback.</h1>
<p>Your feedback is very important for Rapidoc.</p>
<div class="emoji">
<button class="btn normal">&#128578;</button>
<button class="btn normal">&#128515;</button>
<button class="btn normal">&#128519;</button>
<button class="btn normal">&#128531;</button>
<button class="btn normal">&#128532;</button>
<button class="btn normal">&#128545;</button>
</div>
<p class="ques">What you want to say?</p>
<textarea id="textarea" cols="20" rows="5"></textarea>
<p class="ques">Are you satisfied with rapidoc?</p>
<div class="radiobtn">
<div class="one">
<input class="input" type="radio" name="one" id="Yes" />
<label class="label" for="Yes">Yes</label>
</div>
<div class="one">
<input class="input" type="radio" name="one" id="No" />
<label class="label" for="No">No</label>
</div>
</div>
</div>
<div class="info">
<div class="center">
<button class="btn button">Submit</button>
</div>

</div>
</section>

</main><!-- End #main -->




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

Expand All @@ -562,45 +600,53 @@ <h4>Call:</h4>
<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> +91 1234567890<br>
<strong>Email:</strong> [email protected]<br>
</p>
<div class="social-links mt-3">
<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
<div class="foot">
<div class="footer1">
<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> +91 1234567890<br>
<strong>Email:</strong> [email protected]<br>
</p>
<div class="social-links mt-3">
<a href="#" class="facebook"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="twitter"><i class="fa-brands fa-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"></i></a>
</div>
</div>
</div>
</div>

<div class="footer1">
<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="#contact">Contact</a></li>
</ul>
</div>
</div>

<div class="footer1">
<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>
</div>
</div>
</div>

<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="#contact">Contact</a></li>
</ul>
</div>

<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>
</div>

<div class="col-lg-4 col-md-6 footer-newsletter">
Expand Down Expand Up @@ -628,6 +674,7 @@ <h4>Daily Newsletter</h4>
class="bi bi-arrow-up-short"></i></a>

<!-- JS Files -->
<script src="script.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="glightbox/js/glightbox.min.js"></script>
<script src="php-email-form/validate.js"></script>
Expand Down
5 changes: 5 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const btn=document.querySelector(".btn");
const feedback=document.querySelector(".center");
btn.addEventListener("click",()=> {
center.innerHTML= `<h1>Thank You for your feedback</h1>`
});
152 changes: 148 additions & 4 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1029,7 +1029,133 @@ section {
}


/*################--blog###############*/

.feedback{
border-radius: 1rem;
background-color: #fff;
padding: 2rem 4rem;
box-shadow: rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0, 0,0,0.3) 0px 1px 3px -1px;
margin: 50px;
width: 60%;
margin-left: 250px;
padding: 20px;
}
.feedback h1{
color: black;
font-size: 2.0rem;
margin-bottom: 0.3rem;
font-family: "Poppins", sans-serif;
}
.feedback p{
color: black;
font-size: 1.1rem;
font-family: "Poppins", sans-serif;
}
.emoji{
padding: 1rem 0;
width: 20%;
display: flex;
justify-content: space-between;
}
.btn{
background-color: transparent;
border: none;
font-size: 1.5rem;
font-family: "Poppins", sans-serif;
transition: 0.2s ease-in;
cursor: pointer;
&:hover {
transform: scale(1.5);
}
}

.ques{
margin: 0.5rem 0;
}
.feedback #textarea{
padding: 1rem;
width: 80%;
background-color: transparent;
border: 0.1rem solid black;
border-radius: 0.5rem;
color: black;
margin-bottom: 0.6rem;
&:active{
box-shadow: rgba(50, 50, 93,0.25) 0px 2px 5px -1px,rgba(0,0,0,0.3) 0px 1px 3px -1px;
}
}

.radiobtn{
width: 40%;
display: flex;
justify-content: space-between;

}
.one{
display: flex;
}
.input{
position: relative;
font-family: "Poppins", sans-serif;
font-size: 1rem;
appearance: none;
width: 2rem;
height: 2rem;
border: 0.1rem solid black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
&::before{
content: " ";
width: 1rem;
height: 1rem;
border-radius: 50%;
transition: 0.2s;
}
&:checked::before{
background-color: #1977cc;

}
}
.label{
color: black;
font-family: "Poppins", sans-serif;
font-size: 1.1rem;
margin-left: 1rem;
}
.info{
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
margin: 0.5rem 0;
}
.center{
margin-top: 2rem;
text-align: center;

.button{
width: 15%;
background-color: white;
border-radius: 0.5rem;
border: none;
font-size: 1.4rem;
font-family: "Poppins", sans-serif;
padding:1rem 4rem;
cursor: pointer;
color: #000;
}
.button:active{
background-color: white;
transform: scale(1.0);

}
.button:hover{
background-color:rgb(63, 155, 124) ;
}
}


/*################----Footer----################*/
Expand All @@ -1056,7 +1182,15 @@ section {
line-height: 1;
font-weight: 700;
}

.foot{
display: flex;
flex-direction: row;

}
.footer1{
padding:60px;
padding-left: 180px;
}
#footer .footer-top .footer-info p {
font-size: 14px;
line-height: 24px;
Expand All @@ -1067,15 +1201,16 @@ section {
#footer .footer-top .social-links a {
font-size: 18px;
display: inline-block;
background: #3fbcc0a4;
color: #fff;
background: #eaececa4;
color: #0e0e0e;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
margin-top: 10px;
border-radius: 4px;
text-align: center;
width: 36px;
height: 36px;
height: 22px;
transition: 0.3s;
}

Expand All @@ -1089,16 +1224,20 @@ section {
font-weight: 600;
position: relative;
padding-bottom: 12px;

}


#footer .footer-top .footer-links {
margin-bottom: 30px;

}

#footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;

}

#footer .footer-top .footer-links ul i {
Expand Down Expand Up @@ -1129,12 +1268,17 @@ section {
color: #3fbbc0;
}

.footer-newsletter{
margin-left: 40px;
}
#footer .footer-top .footer-newsletter form {
margin-top: 30px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px;
width: 80%;
padding-left: 180px;
}

#footer .footer-top .footer-newsletter form input[type="email"] {
Expand Down