Skip to content

Commit

Permalink
Merge pull request #446 from Roshansuthar1105/main
Browse files Browse the repository at this point in the history 
Made the navbar responsive and redesigned the image card layout
  • Loading branch information
@tushargupta1504
tushargupta1504 authored Oct 16, 2024
2 parents 8a49b62 + 89911b4 commit da05fe2
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 40 deletions.
1 change: 1 addition & 0 deletions img/cross.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions img/menu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 32 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,12 +124,15 @@
<!-- header section starts -->

<header>

<input type="checkbox" name="" id="toggler">
<label for="toggler" class="fas fa-bars"></label>
<!-- <input type="checkbox" name="" id="toggler">
<label for="toggler" class="fas fa-bars"></label> -->
<a href="#" class="logo"><img src="img/swasthya-logo.png"></a>

<div id="shownav"><img src="./img/menu.svg" alt="show menu"></div>
<nav class="navbar">
<div class="dark-btn-navbar">
<label id="dark-change"></label>
</div>
<div id="hidenav"> <img src="./img/cross.svg" alt="Hide Menu"></div>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#services">Services</a>
Expand All @@ -138,18 +141,14 @@
<a href="nearby.html">Nearby</a>
<a href="appointment.html"><span>Book Your Appointment</span></a>
<a href="https://yourcompany.setmore.com">Schedule Appointment</a>
<div class="dark-btn-navbar">
<label id="dark-change"></label>
</div>

<a href="#setmore_widget"><span>Schedule And Reminder</span></a>
<a href="user_login.html">User Login</a>
<a href="#">Doctor Login</a>
<a href="#">Admin Login</a>
</nav>

</header>


<!-- header section ends -->


Expand Down Expand Up @@ -374,7 +373,7 @@ <h4><a href="">Pediatrician</a></h4>
<div class="col-md-4">
<div class="image-container" data-aos="fade-up">
<a href="img/portfolio-6.jpg" data-pswp-width="370" data-pswp-height="300">
<img src="img/portfolio-6.jpg" class="card-img my-5" alt="...">
<img src="img/portfolio-6.jpg" class="card-img" alt="...">
</a>

</div>
Expand All @@ -388,7 +387,7 @@ <h4><a href="">Pediatrician</a></h4>
<div class="col-md-4">
<div class="image-container" data-aos="fade-up" data-aos-duration="500">
<a href="img/portfolio-3.jpg" data-pswp-width="370" data-pswp-height="300">
<img src="img/portfolio-3.jpg" class="card-img my-5" alt="...">
<img src="img/portfolio-3.jpg" class="card-img " alt="...">
</a>

</div>
Expand All @@ -402,13 +401,13 @@ <h4><a href="">Pediatrician</a></h4>
<div class="col-md-4">
<div class="image-container" data-aos="fade-up" data-aos-duration="600">
<a href="img/portfolio-5.jpg" data-pswp-width="370" data-pswp-height="300">
<img src="img/portfolio-5.jpg" class="card-img my-5" alt="...">
<img src="img/portfolio-5.jpg" class="card-img " alt="...">
</a>

</div>
<div class="image-container" data-aos="fade-up" data-aos-duration="600">
<a href="img/portfolio-1.jpg" data-pswp-width="370" data-pswp-height="300">
<img src="img/portfolio-1.jpg" class="card-img mb-5" alt="...">
<img src="img/portfolio-1.jpg" class="card-img " alt="...">
</a>

</div>
Expand Down Expand Up @@ -791,6 +790,26 @@ <h5>Aligarh</h5>
});
lightbox.init();
</script>
<script>
const show = document.getElementById("shownav");
const navbar = document.querySelector('.navbar');
show.addEventListener('click',()=>{
console.log("show clicked");
navbar.style.right='0%';
show.style.display='none'
})
const hide = document.getElementById("hidenav");
hide.addEventListener('click',()=>{
console.log("hide clicked");
navbar.style.right='-100%';
show.style.display='block'
})
navbar.addEventListener('click',()=>{
console.log("hide clicked");
navbar.style.right='-100%';
show.style.display='block'
})
</script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
Expand Down
68 changes: 41 additions & 27 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ header{
position: fixed;
top: 0; left: 0; right: 0;
width: 100%;
height: 80px;
background: rgba(243, 239, 239, 0.8);
padding: 1rem;
display: flex;
Expand All @@ -124,8 +125,43 @@ header{
height: 100%;
border:none;
}
#shownav{
height: 50px;
width: 50px;
border: none;
font-size: 30px;
cursor: pointer;
transition: all ease-in-out 0.7s;
}
#shownav img{
border: none;
}
.navbar, .navbar.sticky{
position: fixed;
top: 0;
right: -100%;
display: flex;
flex-direction: column;
height: 100dvh;
align-items: center;
justify-content: space-evenly;
z-index: 9999;
transition: right 0.5s ease-in-out;
background-color: rgba(128, 128, 128, 0.7);
backdrop-filter: blur(5px);
border-left: 3px solid black;
}


#hidenav{
position: absolute;
cursor: pointer;
top: 10px;
left: 20px;
font-size: 2rem;
height: 50px;
width: 50px;
text-align: center;
}
.dark-btn-navbar{
padding-left: 6em;
margin-bottom: 5em;
Expand Down Expand Up @@ -597,31 +633,6 @@ textarea {
}

@media (max-width:768px){

html .fa-bars{
display: block;
}

header .navbar{
position: absolute;
top: 100%; left: 0; right: 0;
background: #eee;
border-top: 0.1rem solid rgba(0,0,0,0.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

header #toggler:checked ~ .navbar{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

header .navbar a{
margin: 1.5rem;
padding: 1.5rem;
background: #fff;
border: 0.1rem solid rgba(0,0,0,0.1);
display: block;
}

.home .content h3{
font-size: 5rem;
}
Expand Down Expand Up @@ -652,9 +663,12 @@ textarea {
}

}

form{
position: relative;
}
#gallery .image-container {
overflow: hidden;
margin:20px 0;
}

#gallery .image-container img {
Expand Down

0 comments on commit da05fe2

Please sign in to comment.