acm-iem · Vaibhav8090 · Feb 22, 2022 · Feb 22, 2022 · Feb 22, 2022 · Feb 22, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/Detailed Page/index.html b/Detailed Page/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Our CSS-->
+    <link rel="stylesheet" href="style.css">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+    <title>Hello, world!</title>
+  </head>
+  <body>
+  <nav class="navbar navbar-expand-lg" style="background-color: #5aafb1;">
+        <div class="container-fluid">
+          <div class="collapse navbar-collapse" id="navbarScroll">
+            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
+              <li class="nav-item shadow" style="margin-right: 0.6rem; margin-left: 0.6rem;">
+                <a class="nav-link active" aria-current="page" href="#" style="padding-top: 3px; padding-bottom: 3px; color: white">Home</a>
+              </li>
+              <li class="nav-item shadow" style="margin-right: 0.6rem; margin-left: 0.6rem;">
+                <a class="nav-link active" aria-current="page" href="#" style="padding-top: 3px; padding-bottom: 3px; color: white">V Chat</a>
+              </li>
+              <li class="nav-item shadow" style="margin-right: 0.6rem; margin-left: 0.6rem;">
+                <a class="nav-link active" aria-current="page" href="#" style="padding-top: 3px; padding-bottom: 3px; color: white">V Book</a>
+              </li>
+              <li class="nav-item shadow" style="margin-right: 0.6rem; margin-left: 0.6rem;">
+                <a class="nav-link active" aria-current="page" href="#" style="padding-top: 3px; padding-bottom: 3px; color: white">V Notes</a>
+              </li>
+              <li class="nav-item shadow" style="margin-right: 0.6rem; margin-left: 0.6rem;">
+                <a class="nav-link active" aria-current="page" href="#" style="padding-top: 3px; padding-bottom: 3px; color: white">V Chat</a>
+              </li>
+              <li class="nav-item shadow" style="margin-right: 0.6rem; margin-left: 0.6rem;">
+                <a class="nav-link active" aria-current="page" href="#" style="padding-top: 3px; padding-bottom: 3px; color: white">Assignment & Material</a>
+              </li>
+            </ul>
+          </div>
+          <button type="button shadow" class="btn btn-light"  style="box-shadow: 0 3px 15px rgba(0,0,0,.4); background-color:blanchedalmond ">My Profile</button>
+        </div>
+      </nav>
+      <div class="coursename">
+        <div id="token">
+            <h1>Course name</h1>
+        </div>
+      </div>
+      <div class="coursedescription">
+
+      </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+  </body>
+</html>
diff --git a/Detailed Page/style.css b/Detailed Page/style.css
@@ -0,0 +1,37 @@
+nav ul li a{
+    padding: 7px 13px;
+    border-radius: 3px;
+}
+
+a.active,a:hover{
+    background: #6bd3d4;
+    transition: .5s;
+    box-shadow: 0 3px 15px rgba(0,0,0,.4);
+}
+
+.coursename{
+    float: left;
+    width: 25%;
+    height: 100vh;
+    background-color: #7fd6d8;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+}
+
+#token{
+    margin: auto;
+    height: 50vh;
+    width: 90%;
+    background-color: rgb(253, 243, 229);
+    text-align: center;
+    border-radius: 10px;
+    box-shadow: 0 3px 15px rgba(0,0,0,.4);
+}
+
+.coursedescription{
+    float: right;
+    width: 75%;
+    height: 100vh;
+    background-color: #b9eff0;
+}
diff --git a/UI/All Courses/Advertisement.css b/UI/All Courses/Advertisement.css
@@ -0,0 +1,144 @@
+.advertisement{
+    height: 76vh;
+    width:84vw;
+    background-color:#5FB5B7;
+    margin-top: 10vh;
+    margin-left: 8vw;
+    margin-right: 8vw;
+    border-radius: 30px;
+    font-family: 'Poppins', sans-serif;
+    overflow: hidden;
+  }
+
+  .advertisement_slide{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .slider{
+    position: relative;
+    width: 100%;
+    min-height: 100%;
+    overflow: hidden;
+  }
+
+  .slider .slide{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    clip-path: circle(0% at 0 50%);
+  }
+
+  .slider .slide.active{
+    clip-path: circle(150% at 0 50%);
+    transition: 2s;
+  }
+
+  .slider .slide img{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .slider .slide .info{
+    position: absolute;
+    color: #222;
+    background: rgba(255, 255, 255, 0.3);
+    width: 88%;
+    margin-top: 50px;
+    margin-left: 50px;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 5px 25px rgb(1 1 1 / 5%);
+  }
+
+  .slider .slide .info h2{
+    font-size: 2em;
+    font-weight: 800;
+  }
+
+  .slider .slide .info p{
+    font-size: 1em;
+    font-weight: 400;
+  }
+
+  .navigation{
+    height: 77vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+  }
+
+  .slider:hover .navigation{
+    opacity: 1;
+  }
+
+  .prev-btn, .next-btn{
+    z-index: 999;
+    font-size: 2em;
+    color: #222;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 10px;
+    cursor: pointer;
+  }
+
+  .prev-btn{
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
+  .next-btn{
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+
+  .navigation-visibility{
+    z-index: 999;
+    display: flex;
+    justify-content: center;
+  }
+
+  .navigation-visibility .slide-icon{
+    z-index: 999;
+    background: rgba(255, 255, 255, 0.5);
+    width: 20px;
+    height: 10px;
+    transform: translateY(-50px);
+    margin: 0 6px;
+    border-radius: 2px;
+    box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
+  }
+
+  .navigation-visibility .slide-icon.active{
+    background: #4285F4;
+  }
+
+  @media (max-width: 900px){
+    .slider{
+      width: 100%;
+    }
+
+    .slider .slide .info{
+      position: relative;
+      width: 80%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  @media (max-width: 500px){
+    .slider .slide .info h2{
+      font-size: 1.8em;
+      line-height: 40px;
+    }
+
+    .slider .slide .info p{
+      font-size: 0.9em;
+    }
+  }
+
diff --git a/UI/All Courses/Card.css b/UI/All Courses/Card.css
@@ -0,0 +1,17 @@
+.card{
+    width: 15rem;
+    border-radius: 10px;
+    display:inline-flex;
+   margin:20px;
+   justify-content: space-evenly;
+   box-shadow: 0 3px 15px rgba(0,0,0,.4);
+ }
+ .card:hover {
+    height: 420px;
+    margin-top: -20px;
+ }
+ .carousel-item img{
+    width: 60vw;
+    height: 60vh;
+
+ }