container config

Vikas-rawat1 · Jan 26, 2024 · e76b3d8 · e76b3d8
1 parent bdc8d65
commit e76b3d8
Show file tree

Hide file tree

Showing 26 changed files with 1,054 additions and 26 deletions.
diff --git a/css/explore-course.css b/css/explore-course.css
@@ -81,7 +81,7 @@ body {
   color: var(--text-color-white);
 }
 
-.c-image img {
+.course-image img {
   position: absolute;
   left: 40vw;
   width: 6%;

diff --git a/css/explore-privacy.css b/css/explore-privacy.css
@@ -106,7 +106,7 @@ body {
 /* LEARN MORE BUTTON  */
 
 .button-learn {
-  /* display: flex; */
+  display: flex;
   margin-top: 2vw;
 }
 .button-learn img{
@@ -121,6 +121,7 @@ body {
   color: var(--text-color-white);
   font-size: 1.2vw;
   margin-left: 1vw;
+  margin-top: 2vw;
   border-radius: 2vw;
   transition: all 0.8s, color 0.3s 0.3s;
 }
@@ -130,7 +131,10 @@ body {
   color: var(--hover-text-black);
   cursor: pointer;
 }
-
+.start-with i{
+  font-size: 1.2vw;
+  color: var(--text-color-white);
+}
 /* FOOTER SECTION  */
 
 /* FOOTER LIST  */

diff --git a/css/frontend-course.css b/css/frontend-course.css
@@ -86,7 +86,7 @@ body {
 }
 
 
-.c-image img {
+.course-image img {
   position: absolute;
   left: 40vw;
   width: 6%;

diff --git a/css/hacking-course.css b/css/hacking-course.css
@@ -85,7 +85,7 @@ body {
 }
 
 
-.c-image img {
+.course-image img {
   position: absolute;
   left: 40vw;
   width: 6%;

diff --git a/css/index.css b/css/index.css
@@ -20,14 +20,6 @@ html{
   display: flex;
   justify-content: space-between;
 }
-  /* 
-  .navbar {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    background-color: #deb5b5;
-    border: none;
-  } */
 
 .logo {
   margin: 2vw;
@@ -70,10 +62,20 @@ html{
   text-decoration: none;
   color: var(--text-color-white);
 }
-
+/* MENU ICON  */
+.menu-icon{
+  display: none;
+}
+#close{
+  display: none;
+}
+.side-panel{
+  display: none;
+}
 .buttons-register {
   display: flex;
   margin-top: 2vw;
+
 }
 .register {
   background-color: var(--black-background);
@@ -426,4 +428,14 @@ transform: scale(1.2);
 .footer-right ul li:hover::after {
   width: 100%;
 }
+.copyright{
+  color: var(--text-color-white);
+  display: block;
+}
 
+.copyright p{
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/css/ui-ux-course.css b/css/ui-ux-course.css
@@ -81,7 +81,7 @@ body {
   background-color: var(--black-background);
   color: var(--text-color-white);
 }
-.c-image img {
+.course-image img {
   position: absolute;
   left: 40vw;
   width: 6%;

diff --git a/css/web-course.css b/css/web-course.css
@@ -85,7 +85,7 @@ body {
 }
 
 
-.c-image img {
+.course-image img {
   position: absolute;
   left: 40vw;
   width: 6%;

diff --git a/index.html b/index.html
@@ -10,20 +10,34 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
   <link rel="stylesheet" href="css/color.css">
+  <link rel="stylesheet" href="mobileports/index-port.css">
 
 </head>
 
 <body>
   <div class="container">
     <div class="header">
       <div class="logo">Eduhub</div>
+      <!-- MOBILE MENU  -->
+
+      <div class="menu-icon" id="mobile-menu" onclick="sideOpen()" style="width: 0;">
+        <i class="ri-menu-3-line"></i>
+
+      </div>
+      <div class="side-panel" id="side-panel">
+        <!-- Your side panel content goes here -->
+        <p>Side Panel Content</p>
+        <i class="ri-arrow-left-line" onclick="sideClose()"></i>
+      </div>
+      <!-- -------------------------- -->
+
       <div class="list-items">
         <ul>
           <li><a href="index.html">HOME</a></li>
           <li><a href="template/about.html">ABOUT</a></li>
           <!-- <li><a href="#">CLASS</a></li>
             <li><a href="#">TRAINER</a></li> -->
-            <li><a href="template/blog.html">BLOG</a></li>
+          <li><a href="template/blog.html">BLOG</a></li>
           <li><a href="#footer-contact">CONTACT</a></li>
           <li><a href="#service-contact">SERVICE</a></li>
         </ul>
@@ -82,8 +96,8 @@ <h6>DEVELOPMENT SKILLS</h6>
           exceptional experience.
         </p>
         <div class="buttons">
-          <a href="template/explore-development.html"><button class="btn-col2">Explore <i class="fa-solid fa-arrow-right"
-                style="color: #B197FC;"></i></button></a>
+          <a href="template/explore-development.html"><button class="btn-col2">Explore <i
+                class="fa-solid fa-arrow-right" style="color: #B197FC;"></i></button></a>
         </div>
       </div>
       <div class="right-campus-col2">
@@ -171,9 +185,13 @@ <h4>SUBSCRIBE</h4>
         </ul>
       </div>
     </div>
+    <div class="copyright">
+      <p>© 2024 All rights reserved to Eduhub
+    </div>
   </div>
 </body>
 
 <script src="js/move.js"></script>
+<script src="js/side-nav.js"></script>
 
 </html>
diff --git a/js/side-nav.js b/js/side-nav.js
@@ -0,0 +1,9 @@
+function sideOpen() {
+  let open = document.getElementById("mobile-menu");
+  open.style.width = "90%";
+
+}
+function sideClose() {
+  let open = document.getElementById("mobile-menu");
+  open.style.width = "0";
+}
diff --git a/mobileports/explore-course.css b/mobileports/explore-course.css
@@ -0,0 +1,118 @@
+@media (max-width: 900px) {
+  .logo {
+    margin: 4vw;
+    font-size: 5vw;
+  }
+  .left h6 {
+    font-size: 2.3vw;
+  }
+  .list-items {
+    display: none;
+  }
+  /* HERO HEAD  */
+  .course-image img {
+    display: none;
+  }
+
+  .courses-navbar {
+    margin-top: 4vw;
+    line-height: 10vw;
+
+  }
+  .courses-navbar .buttons{
+    width: 100%;
+    margin: auto ;
+  }
+
+  .btn {
+    width: 30vw;
+    height: 5vw;
+    font-size: 2.6vw;
+    position: relative;
+  }
+  /* COURSES-CONTAINER */
+  .courses-container {
+    display: block;
+  }
+
+  .course-box {
+    border: 2px solid var(--border-line);
+    height: 30vw;
+    width: 80%;
+    margin: 4vw auto;
+  }
+
+  /* LEFT COURSE  */
+  .left-course {
+    float: left;
+    width: 50%;
+  }
+  .left-course img {
+    float: left;
+    width: 70%;
+    margin: 1vw auto;
+  }
+
+  /* RIGHT COURSE  */
+  .right-course {
+    float: right;
+    width: 50%;
+  }
+  .right-course h5 {
+    font-size: 3vw;
+    margin-top: 1vw;
+    height: 5vw;
+  }
+  .right-course p {
+    font-size: 3vw;
+    margin-top: 2vw;
+  }
+  .right-course .price {
+    font-size: 3vw;
+  }
+  .enroll {
+    width: 15vw;
+    height: 5vw;
+    font-size: 2vw;
+    position: relative;
+  }
+  /* DOWNLOAD CURRICULAM  */
+  .enroll-button a i {
+    font-size: 4vw;
+  }
+
+  /* FOOTER SECTION  */
+
+  /* FOTOTER CONNECTION  */
+  .footer-connection {
+    font-size: 10vw;
+  }
+
+  /* FOOTER LEFT  */
+  .footer-list {
+    display: inline-block;
+  }
+  .footer-left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2vw auto;
+    width: 100%;
+  }
+  .subscribe {
+    margin-top: 4vw;
+  }
+  .subscribe h4 {
+    font-size: 3vw;
+    margin: auto;
+  }
+  .footer-right {
+    width: 100%;
+    display: flex;
+  }
+  .footer-right ul {
+    font-size: 3.6vw;
+    margin: auto;
+    margin-bottom: 6vw;
+  }
+}
diff --git a/mobileports/explore-development.css b/mobileports/explore-development.css
@@ -0,0 +1,81 @@
+@media (max-width: 900px) {
+  .logo {
+    margin: 4vw;
+    font-size: 5vw;
+  }
+  .left h6 {
+    font-size: 2.3vw;
+  }
+  .list-items {
+    display: none;
+  }
+
+  /* HERO SECITON  */
+
+  .left-right-development {
+    display: block;
+  }
+
+  .left-development {
+    width: 100%;
+  }
+  .right-development {
+    width: 100%;
+  }
+
+  .right-development h1 {
+    font-size: 4vw;
+  }
+  .right-development p {
+    font-size: 3vw;
+    line-height: 3.4vw;
+    width: 100%;
+  }
+
+  .start-with {
+    width: 20vw;
+    height: 5vw;
+    font-size: 2.2vw;
+    top: 1vw;
+    bottom: 2vw;
+  }
+
+  .start-with i {
+    font-size: 3.2vw;
+  }
+
+  /* FOOTER SECTION  */
+
+  /* FOTOTER CONNECTION  */
+  .footer-connection {
+    font-size: 10vw;
+  }
+
+  /* FOOTER LEFT  */
+  .footer-list {
+    display: inline-block;
+  }
+  .footer-left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2vw auto;
+    width: 100%;
+  }
+  .subscribe {
+    margin-top: 4vw;
+  }
+  .subscribe h4 {
+    font-size: 3vw;
+    margin: auto;
+  }
+  .footer-right {
+    width: 100%;
+    display: flex;
+  }
+  .footer-right ul {
+    font-size: 3.6vw;
+    margin: auto;
+    margin-bottom: 6vw;
+  }
+}