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

updated home page css #800

Merged
merged 11 commits into from
Jul 10, 2024
Merged

updated home page css #800

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f942cdf
updated home page css
dhairyagothi Jul 9, 2024
9c47bcb
Update index.html
dhairyagothi Jul 9, 2024
8331574
Update index.html
dhairyagothi Jul 9, 2024
2fbc9d6
Update index.html
dhairyagothi Jul 10, 2024
ffd6389
Update index.html
dhairyagothi Jul 10, 2024
558e601
Update index.html
dhairyagothi Jul 10, 2024
4e70ae7
Update index.html
dhairyagothi Jul 10, 2024
0b9db88
Update index.html
dhairyagothi Jul 10, 2024
08e5805
Update index.html
dhairyagothi Jul 10, 2024
e978e5a
Merge branch 'main' into main
dhairyagothi Jul 10, 2024
2d989f0
fixed
dhairyagothi Jul 10, 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
189 changes: 164 additions & 25 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,102 @@
width: 300%;
background: #000;
}

@media (max-width: 768px) {
body{

width: 163vw !important;
}
.header_container{
width: 163vw;
height: auto;
}
.nav_menu{
padding: 10px;
height: auto;
}
.nav-h{
height: 5.5rem;
width: -webkit-fill-available !important;
justify-content: center;
flex-direction: row;
align-items: center;
}
.container {
flex-wrap: wrap;
justify-content: center;
flex-direction: column-reverse;
padding: 10px;
}
.about-service {
height: auto !important;
width: auto !important;
margin-left: 0px !important;
margin-top: 0px !important;
flex-direction: column;
}
.count-box {
padding: 76px;
font-size: 24px;
}
.appointment .container {
display: flex !important;
justify-content: center !important;
align-content: center !important;
}
.mt-2 {
display: flex ;
align-items: stretch !important;
justify-content: space-around !important;
align-content: center !important;
gap: 40px !important;
margin-top: 70px !important;
}
.appointment form {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
max-width: 500px !important;
}
.appointment .form-group {
width: 100% !important;
display: flex !important;
justify-content: center !important;
margin-bottom: 15px !important;
}
footer {
width: 168vw !important;
padding: 40px !important;
margin: auto !important;
}
#appointment.appointment.section-bg {
margin: 15px;
}
.testimonial-contains {
padding: 10px !important;
}
.swiper-slide .testimonals-item {
width: 476px !important;
}
.other-columns{
grid-template-columns: repeat(3, 3fr);

} .form.php-email-form{
align-content: flex-start;
}
.social-wrapper{
margin-right: 50%;
}
#slide-item{
width: 510px !important;
}
.footer-col{
padding:15px ;
text-align: center;
}
}

</style>
<link rel="stylesheet" href="chatbox.css">
<!-- Google Fonts Link For Icons chatboxx -->
Expand Down Expand Up @@ -1245,7 +1341,7 @@ <h4>Call:</h4>
<div class="testimonals-content">
<div class="swiper testimonals-slider js-testimonals-slider">
<div class="swiper-wrapper">
<div class="swiper-slide testimonals-item">
<div class="swiper-slide testimonals-item" id="slide-item" >
<div class="info">
<img src="./images/profile1.webp" alt="">
<div class="text-box">
Expand All @@ -1264,7 +1360,7 @@ <h3 class="name">Dinesh Karthik</h3>
</div>
</div>

<div class="swiper-slide testimonals-item">
<div class="swiper-slide testimonals-item" id="slide-item" >
<div class="info">
<img src="./images/profile2.webp" alt="">
<div class="text-box">
Expand All @@ -1282,7 +1378,7 @@ <h3 class="name">Virat Kohli</h3>
</div>
</div>

<div class="swiper-slide testimonals-item">
<div class="swiper-slide testimonals-item" id="slide-item" >
<div class="info">
<img src="./images/profile3.webp" alt="">
<div class="text-box">
Expand All @@ -1300,7 +1396,7 @@ <h3 class="name">Smrithi Mandanna</h3>
</div>
</div>

<div class="swiper-slide testimonals-item">
<div class="swiper-slide testimonals-item" id="slide-item" >
<div class="info">
<img src="./images/profile4.webp" alt="">
<div class="text-box">
Expand All @@ -1319,7 +1415,7 @@ <h3 class="name">John Doe</h3>
</div>
</div>

<div class="swiper-slide testimonals-item">
<div class="swiper-slide testimonals-item" id="slide-item" >
<div class="info">
<img src="./images/profile5.webp" alt="">
<div class="text-box">
Expand Down Expand Up @@ -1496,25 +1592,49 @@ <h4>Legal</h4><br>
<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="email" placeholder="Your email" required>
<button type="submit">SUBSCRIBE</button>
</form>
<div id="popupModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Thank you for subscribing!</p>
</div>
</div>
</section>

<section class="footer-col" >
<div>
<h4>RAPIDOC Newsletter</h4><br>
<p>
Subscribe to our newsletter for a weekly dose
of news, updates, helpful tips, and
exclusive offers.
</p>
</div>
<form action="#" class="subscribe-form">
<input type="email" placeholder="Your email" required>
<button type="submit">SUBSCRIBE</button>
</form>
<p class="confirmation-message">Thank you for subscribing!</p>
</section>
<style>
.confirmation-message {
display: none;
color: green;
margin-top: 10px;
}
</style>

<script>
document.querySelector('.subscribe-form').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the form from submitting in the traditional way

// Here you would normally send the form data to the server using fetch or XMLHttpRequest
// For demonstration purposes, we'll just show the confirmation message

const confirmationMessage = document.querySelector('.confirmation-message');
confirmationMessage.style.display = 'block'; // Show the confirmation message

// Clear the input field
this.querySelector('input[type="email"]').value = '';

// Optionally, you can hide the confirmation message after a few seconds
setTimeout(() => {
confirmationMessage.style.display = 'none';
}, 5000); // Hide after 5 seconds
});
</script>

<style>
.modal {
Expand Down Expand Up @@ -1581,15 +1701,34 @@ <h4>RAPIDOC Newsletter</h4><br>
}
}
</script>

</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>
@media (max-width:768px) {
.other-columns{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-col{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
gap: 90px;
}
.subscribe-form{
display: flex;
gap: 10px;
}
}
.social-wrapper a div i {
color: #afb6c7;
}
Expand Down