Merge pull request #1181 from samarsajad/test5

redesigned test page
Anishkagupta04 · Aug 12, 2024 · 679e5c4 · 679e5c4
2 parents 266f777 + 78fae70
commit 679e5c4
Show file tree

Hide file tree

Showing 3 changed files with 356 additions and 360 deletions.
diff --git a/bootstraptest.css b/bootstraptest.css
diff --git a/test.css b/test.css
@@ -12,12 +12,12 @@ body
 
 
 
-.nav_link {
+/* .nav_link {
     list-style: none;
   }
 
   .nav_link li {
-    padding: 5px 20px;
+    padding-left: 10px;
     display: inline-block;
     color: white;
   }
@@ -31,7 +31,7 @@ body
   .nav_link li a:hover {
     color: #55a5ea;
     text-decoration: underline 2.5px rgb(3, 3, 94);
-  }
+  } */
 
   .header_container {
     /* background-color: #d9d9d9; */
@@ -122,7 +122,7 @@ button:hover {
 }
 
 i {
-    font-size: 1.5rem;
+    font-size: 10px;
     transition: all linear .5s;
     backdrop-filter: blur(5px) saturate(200%);
     -webkit-backdrop-filter: blur(5px) saturate(200%);
@@ -413,3 +413,247 @@ h2{
     font-size: 10px;
   }
 }
+ h4 {
+  color: white !important;
+  font-family: none !important;
+  padding-top: 100px;
+}
+
+.nav_link {
+  list-style: none;
+  margin-top: 365px;
+}
+
+.header_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #022a2d;
+  color: #fff;
+  position: relative;
+}
+
+.header_container .img img {
+  width: 90px;
+  height: auto;
+}
+
+.header_container p {
+  margin-left: 0px;
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-top: -42px;
+}
+
+.nav_menu {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+}
+.nav_menu ul li a {
+
+display: flex;
+  align-items: center;
+}
+.nav_link {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  margin-left:350px;
+
+}
+
+
+
+.btn1 {
+  position: relative;
+  background-color: #3fbcc0a6;
+  color: white;
+  /* border: 2px solid #000; */
+  border-radius: 10px;
+  overflow: hidden;
+  transition: color 0.3s ease;
+  z-index: 1;
+}
+
+.btn1::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background-color: #55a5ea;
+  transition: width 0.3s ease;
+  z-index: -1;
+}
+
+.btn1:hover {
+  color: #fff;
+}
+
+.btn1:hover::before {
+  width: 100%;
+}
+
+.hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+  margin-right: auto;
+
+} 
+
+.hamburger .line {
+  width: 25px;
+  height: 3px;
+  background-color: #fff;
+  margin: 4px 0;
+  transition: 0.3s;
+}
+
+@media (max-width: 768px) {
+  .nav_link {
+      display: none;
+position: absolute;
+top: 85px; 
+left: 0;
+width: 100%;
+background-color: #022a2d;
+flex-direction: column;
+align-items: flex-start; 
+padding: 0px; 
+z-index: 1000;
+} 
+
+.nav_link.active {
+display: flex; 
+} 
+ .nav_link li {
+      font-size: 14px;
+      display: flex;
+      flex-direction: row;
+      padding: 0px;
+      height: 5px;
+      margin-left: -5px;
+  }
+
+  button {
+      background-color: #55a5ea;
+      color: white;
+      padding: 15px 20px;
+      border-radius: 2rem;
+      cursor: pointer;
+      margin-left: 8px;
+  }
+
+  .nav_link.active {
+      display: flex;
+      margin-top: -6px;
+  }
+
+  .hamburger {
+      display: flex;
+      margin-left: -211px;
+  }
+
+  .social-links i {
+      font-size: 1rem !important;
+  }
+
+  .header_container p {
+      margin-left: 115px;
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-top: auto;
+  }
+
+  .sec-img {
+      transform-style: preserve-3d;
+      will-change: transform;
+      margin-left: -52px !important;
+  }
+  h1, h2, h3, h4, h5, h6 {
+font-family: "Raleway", sans-serif;
+margin-top: 31px;
+}
+
+.mb-5{
+width: 213px;
+margin-left: 58px;
+margin-top: 30px;
+}
+}
+
+.social-links {
+  display: inline-flex;
+  gap: 0rem !important;
+  align-items: center;
+  margin-left: -100px;
+}
+
+
+
+/* Ensure the hero heading is centered */
+.img-h1 {
+text-align: center;
+padding: 20px;
+background-color: #022a2d00;
+}
+
+.hero-heading {
+font-size: 65px;
+color: white;
+margin: 0;
+}
+
+.highlight {
+color: #55a5ea;
+display: inline;
+}
+
+.sec-img {
+display: block;
+margin: 20px auto;
+height: 402px;
+margin-top: -65px;
+margin-bottom: -79px;
+width: auto;
+} 
+
+/* Container styles */
+ .container-service {
+padding: 0; 
+}
+
+.container-service .container {
+padding: 0 15px; 
+}
+
+.content-wrapper {
+max-width: 600px;
+margin: 0 auto; 
+} 
+@media (max-width: 768px) {
+  .hero-heading {
+    font-size: 50px; 
+  }
+  .sec-img {
+    height: 80px; 
+  }
+} 
+
+@media (max-width: 576px) {
+  .hero-heading {
+    font-size: 40px;  
+  }
+  .sec-img {
+    height: 60px;
+    margin-top: -56px;
+    margin-bottom: -111px;
+  }
+}