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

Responsiveness Across Devices #674

Closed
wants to merge 1 commit into from
Closed

Responsiveness Across Devices #674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
482 changes: 280 additions & 202 deletions Css-Files/news.css
View file
Open in desktop

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

158 changes: 59 additions & 99 deletions Html-Files/Css-Files/styles.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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