Add files via upload

Health Synch static website
skdhir · Mar 17, 2024 · db2027f · db2027f
commit db2027f
Show file tree

Hide file tree

Showing 22 changed files with 488 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Health Synch
+
+Pages using bootstrap
diff --git a/img/blog-1.png b/img/blog-1.png
diff --git a/img/blog.png b/img/blog.png
diff --git a/img/explore.png b/img/explore.png
diff --git a/img/healthsynch.png b/img/healthsynch.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/myblog-1.png b/img/myblog-1.png
diff --git a/img/myblog-2.png b/img/myblog-2.png
diff --git a/img/myblog-3.png b/img/myblog-3.png
diff --git a/img/ourdiff-red.png b/img/ourdiff-red.png
diff --git a/img/ourdiff.png b/img/ourdiff.png
diff --git a/img/service-1.png b/img/service-1.png
diff --git a/img/service-2.png b/img/service-2.png
diff --git a/img/service-3.png b/img/service-3.png
diff --git a/img/service-drug.png b/img/service-drug.png
diff --git a/img/service-fitness.png b/img/service-fitness.png
diff --git a/img/service-main.png b/img/service-main.png
diff --git a/img/service-physicals.png b/img/service-physicals.png
diff --git a/img/service-rto.png b/img/service-rto.png
diff --git a/index.html b/index.html
diff --git a/script.js b/script.js
@@ -0,0 +1,22 @@
+const showOnPx = 500;
+const backToTopButton = document.querySelector(".back-to-top");
+
+const scrollContainer = () => {
+  return document.documentElement || document.body;
+};
+
+document.addEventListener("scroll", () => {
+  if (scrollContainer().scrollTop > showOnPx) {
+    backToTopButton.classList.remove("d-none");
+  } else {
+    backToTopButton.classList.add("d-none");
+  }
+});
+
+const goToTop = () => {
+  document.body.scrollIntoView({
+    behavior: "smooth",
+  });
+};
+
+backToTopButton.addEventListener("click", goToTop);
diff --git a/style.css b/style.css
@@ -0,0 +1,143 @@
+.card {
+  transition: all 0.2s;
+}
+
+.card:hover {
+  scale: 1.1;
+}
+
+img {
+  transition: all 0.2s;
+}
+
+img:not(.img-not-scaled):hover {
+  transform: scale(1.05);
+}
+
+video {
+  transition: all 0.2s;
+}
+
+video:hover {
+  transform: scale(1.05);
+}
+
+.back-to-top {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  width: 50px;
+  height: 50px;
+  transition: all 0.2s;
+}
+.back-to-top:hover {
+  border-radius: 50%;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  margin-bottom: 10px;
+}
+
+.emphasis {
+  color: #555;
+  background-color: #eef;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+/*
+.highlight {
+  color: #ff9900;
+  font-weight: bold;
+}
+.service-title {
+  color: #0056b3; 
+  font-weight: bold;
+}
+.service-description {
+  margin-bottom: 20px;
+}
+.services-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
+  gap: 10px; 
+}
+.services-list li {
+  flex: 1 1 200px;
+  margin-bottom: 10px;
+}
+*/
+
+/*
+.container {
+  max-width: 800px;
+  margin: auto;
+  padding: 20px;
+  background-color: #ffffff;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1); 
+}
+*/
+.highlight {
+  color: #ff9900; /* Changed for better contrast with green background */
+  font-weight: bold;
+}
+.service-title {
+  color: #0056b3; /* Adjust to suit your design */
+  font-weight: bold;
+}
+.service-description {
+  margin-bottom: 20px;
+}
+.services-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  padding: 0;
+}
+.flex-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  list-style-type: none; /* Removes default list styling */
+  /*background-color: #f5f5f5; */
+  padding: 20px; /* Adds some padding around the container */
+}
+.flex-list-item {
+  flex: 1 1 150px; /* Adjust '150px' to change the minimum column width before wrapping */
+  margin: 10px; /* Adds space between items */
+  background-color: #ffffff; /* Item background color */
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adds a subtle shadow to each item */
+  padding: 10px; /* Padding inside each item */
+  box-sizing: border-box; /* Ensures padding does not affect the overall defined width */
+  text-align: center; /* Centers text inside each item */
+}
+
+.health-blog {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+.health-blog h2, .health-blog h3 {
+  color: var(--primary-color);
+}
+.health-blog p {
+  color: var(--text-color);
+}
+.health-blog .btn-primary {
+  background-color: var(--accent-color);
+  border-color: var(--accent-color);
+}
+.health-blog .btn-primary:hover {
+  background-color: darken(var(--accent-color), 10%);
+  border-color: darken(var(--accent-color), 10%);
+}
+/* Adjustments for smaller screens */
+@media (max-width: 768px) {
+  .health-blog .btn-primary {
+      margin-bottom: 20px;
+  }
+}