Skip to content

Commit

Permalink
•Responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishap11
ishap11 committed Jun 22, 2024
1 parent bdd1632 commit 7779ae5
Show file tree
Hide file tree
Showing 12 changed files with 6,002 additions and 1,854 deletions.
482 changes: 280 additions & 202 deletions Css-Files/news.css
View file

Large diffs are not rendered by default.

470 changes: 461 additions & 9 deletions Html-Files/Css-Files/Experiencestyle.css
View file

Large diffs are not rendered by default.

158 changes: 59 additions & 99 deletions Html-Files/Css-Files/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
font-family: 'Poppins', sans-serif;
}

body {
font-size: 16px;
line-height: 1.5;
}

section {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -61,27 +66,24 @@ section::before {

.container {
position: relative;
min-width: 1100px;
min-height: 550px;
max-width: 1200px;
width: 100%;
margin: 20px;
display: flex;
z-index: 1000;
/* border-radius: 22px; */
/* background-color: #fff; */
flex-direction: column-reverse;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
border-radius: 22px;
}

.container .contactInfo {
position: absolute;
top: 40px;
width: 350px;
height: calc(100% - 80px);
width: 100%;
background: #095a55;
z-index: 1;
padding: 40px;
box-shadow: none;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 20px 25px rgba(0,0,0,0.15);
border-radius: 22px;
align-items: center;
}

.container .contactInfo h2 {
Expand All @@ -91,19 +93,19 @@ section::before {
}

.container .contactInfo ul.info {
margin: 20px 0;
margin: 20px 0;
}

.container .contactInfo ul.info li {
list-style: none;
display: flex;
margin: 20px 0;
cursor: pointer;
align-items: flex-start;
list-style: none;
display: flex;
margin: 20px 0;
cursor: pointer;
align-items: flex-start;
}

.container .contactInfo ul.info li span:nth-child(1) {
width: 30px;
width: 30px;
min-width: 30px;
}

Expand All @@ -125,6 +127,8 @@ section::before {

.container .contactInfo ul.sci {
display: flex;
justify-content: center;
align-items: center;
}

.container .contactInfo ul.sci li {
Expand All @@ -143,43 +147,39 @@ section::before {
}

.container .contactForm {
position: absolute;
padding: 70px 50px;
padding-left: 250px;
margin-left: 150px;
width: calc(100% - 150px);
height: 100%;
width: 100%;
padding: 40px;
background: #fff;
box-shadow: 0 50px 50px rgba(0,0,0,0.25);
border-radius: 22px;
box-shadow: none;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.container .contactForm h2 {
color: #0f3959;
font-size: 24px;
font-weight: 500;
margin-top: 95px;
}

.container .contactInfo {
margin-top: 95px;
}
.container .contactForm .formBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 30px;
flex-direction: column;
width: 100%;
margin-top: 15px;
}

.container .contactForm .formBox .inputBox {
margin-bottom: 35px;
width: 100%;
}

.container .contactForm .formBox .inputBox.w50 {
width: 47%;
}

.container .contactForm .formBox .inputBox.w100 {
width: 100%;
}

.container .contactForm .formBox .inputBox input,
.container .contactForm .formBox .inputBox textarea {
width: 100%;
Expand Down Expand Up @@ -233,86 +233,46 @@ section::before {
background: #0d9480;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
@media (min-width: 992px) {
.container {
width: 90%;
margin: 20px;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.container .contactInfo {
top: 0;
height: 550px;
position: relative;
box-shadow: none;
border-radius: 0;
flex-direction: row;
}

.container .contactInfo,
.container .contactForm {
position: relative;
width: calc(100% - 350px);
padding-left: 0;
margin-left: 0;
padding: 40px;
height: 550px;
box-shadow: none;
border-radius: 0;
width: 50%;
height: 100%;
}
}

@media (max-width: 991px) {
section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fff38e;
}

section::before {
display: none;
.container .contactInfo {
border-radius: 22px 0 0 22px;
}

.container {
flex-direction: column-reverse;
.container .contactForm {
border-radius: 0 22px 22px 0;
}

.container .contactForm {
width: 100%;
height: auto;
border-radius: 0;
padding-left: 250px;
}
}

.container .contactInfo {
width: 100%;
height: auto;
flex-direction: row;
border-radius: 0;
@media (min-width: 600px) and (max-width: 991px) {
.container .contactForm .formBox .inputBox.w50 {
width: 48%;
}

.container .contactInfo ul.sci {
justify-content: center;
align-items: center;
.container .contactForm .formBox .inputBox.w100 {
width: 100%;
}
}

@media (max-width: 600px) {
.container .contactForm {
padding: 25px;
}

.container .contactInfo {
padding: 25px;
flex-direction: column;
align-items: flex-start;
}

.container .contactInfo ul.sci {
margin-top: 40px;
.container .contactForm .formBox .inputBox.w50 {
width: 100%;
}

.container .contactForm .formBox .inputBox.w50 {
.container .contactForm .formBox .inputBox.w100 {
width: 100%;
}
}
}
79 changes: 58 additions & 21 deletions Html-Files/Doctor Experience.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,30 @@
<div class="pre">
<div class="loader"></div>
</div>
<header class="header_container">
<div class="img">
<img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
</div>

</div>
<nav class="nav_menu">

<ul class="nav_link">
<li><a href="../index.html">Home</a></li>
<li><a href="../index.html">About</a></li>
<li><a href="../Html-Files/news.html">News</a></li>
<a href="../dex.html"><button>Service</button></a>
<li><a href="../index.html">Patient Portal</a></li>
<li><a href="../index.html">Doctor</a></li>
<li><a href="../Html-Files/contact.html">Contact us</a></li>
<a href="../login.html"><button>Sign in/Sign up</button></a>
</ul>
</nav>
</div>
</header>



<nav class="nav_menu">
<div class="img">
<img id="rd-logo" style="width: 90px; height: auto;" src="../images/rd.png">
</div>
<h1 id="home">RapiDoc</h1>
<img id="menu-icon" style="outline: none;" src="../images/Menu.svg" alt="Menu">

<ul class="nav-item navbar">
<li class="navitem"><a href="index.html">Home</a></li>
<li class="navitem"><a href="#about">About</a></li>
<li class="navitem"><a href="Html-Files/news.html">News</a></li>
<li class="navitem"><a href="dex.html">Service</a></li>
<li class="navitem"><a href="#patient-portal">Patient Portal</a></li>
<li class="navitem"><a href="#doctors">Doctor</a></li>
<li class="navitem"><a href="Html-Files/contact.html">Contact us</a></li>
<li class="navitem"><a href="login.html">Sign in/Sign up</a></li>
<li class="navitem"><a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a></li>

</ul>
</nav>
<header class="h">
<h1>Find a Doctor</h1>
<div class="filter-sort">
Expand Down Expand Up @@ -120,7 +122,7 @@ <h4>RAPIDOC Newsletter</h4><br>
</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>
<div style="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" target="_blank"><div><i class="fa-brands fa-twitter"></i></div></a>
<a href="https://www.linkedin.com" target="_blank"><div><i class="fa-brands fa-linkedin"></i></div></a>
Expand Down Expand Up @@ -272,5 +274,40 @@ <h4>RAPIDOC Newsletter</h4><br>
});
});
</script>



<script>
document.addEventListener('DOMContentLoaded', function() {
const menuIcon = document.getElementById('menu-icon');
const navLinks = document.querySelector('.nav-item.navbar');

if (menuIcon && navLinks) {
menuIcon.addEventListener('click', toggleMenu);

} else {
console.error('Menu icon or nav links not found');
}

function toggleMenu() {
navLinks.classList.toggle('show');
if (navLinks.classList.contains('show')) {
menuIcon.src = './images/Close.svg';
disableScroll();
} else {
menuIcon.src = './images/Menu.svg';
enableScroll();
}
}

function disableScroll() {
document.body.style.overflow = "hidden";
}

function enableScroll() {
document.body.style.overflow = "visible";
}
});
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions Html-Files/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function toggleDarkMode() {
}

// Event listener for dark mode toggle button
darkModeToggle.addEventListener("change", toggleDarkMode);
// darkModeToggle.addEventListener("change", toggleDarkMode);

// Function to check and set initial dark mode state based on user preferences
function setInitialDarkMode() {
Expand Down Expand Up @@ -81,5 +81,5 @@ function getNews(newsCategoryName) {
}
};

xhr.send();
// xhr.send();
}
Loading

0 comments on commit 7779ae5

Please sign in to comment.