Skip to content

Commit

Permalink
updated home page css (#800)
Browse files Browse the repository at this point in the history 
Add mobile responsive to home page
  • Loading branch information
@dhairyagothi
dhairyagothi authored Jul 10, 2024
1 parent 2013cbb commit dbf107a
Showing 1 changed file with 164 additions and 25 deletions.
189 changes: 164 additions & 25 deletions index.html
View file
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

0 comments on commit dbf107a

Please sign in to comment.