211mno35-Frontend-1

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

211mn035 acm task/src/index.js

@@ -0,0 +1,47 @@
+let mybutton = document.getElementById("myBtn");
+
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+
+function topFunction() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
+
+function myFunction() {
+   var element = document.body;
+   element.classList.toggle("dark-mode");
+  if( document.getElementById("dark").innerHTML=="Dark")
+  {
+    document.getElementById("dark").innerHTML="Light";
+    document.getElementById("dark").style.backgroundColor="white";
+  }
+  else{
+    document.getElementById("dark").innerHTML="Dark";
+    document.getElementById("dark").style.backgroundColor="#0dcaf0";
+  }
+
+
+}
+
+function myFunction1(){
+  if( document.getElementById("more").innerHTML=="MORE")
+  {
+    document.getElementById("more").innerHTML="LESS";
+  }
+  else{
+    document.getElementById("more").innerHTML="MORE";
+  }
+}
+
+
+
+

211mn035 acm task/src/styles.css

@@ -0,0 +1,273 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;900&family=Ubuntu:wght@300;400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;900&family=Ubuntu:wght@300;400&family=Varela+Round&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;600&display=swap');
+*{
+    padding: 0;
+    margin: 0;
+}
+nav{
+    font-family: 'Ubuntu', sans-serif;
+    }
+
+
+    .ul1{
+        display: flex;
+        list-style-type: none;
+        height: 65px;
+        background-color: black;
+        color: white;
+        align-items: center;
+    }
+
+    .brand img{
+        width:55px;
+        padding: 0 8px;
+
+    }
+    .brand{
+        align-items: center;
+        display: flex;
+        font-weight: bolder;
+        font-size: 1.3rem;
+    }
+    nav ul li{
+        padding: 0 12px;
+    }
+
+.hr
+{
+    height: 15px;
+    border: 0;
+    box-shadow: inset 0 12px 12px -12px rgb(132, 9, 122);
+  }
+  .img2{
+    align-self: center;
+    width: 40%;
+  }
+  .ankit{
+    width: 50%;
+   margin-left: 25%;
+   margin-top: 20px;
+   border-radius: 50%;
+   border: solid 5px #444;
+
+}
+.body1{
+    background-color: 	#f0f8ff;
+    overflow-x: hidden;
+}
+
+p{
+    text-align: center;
+}
+h3{
+    text-align: center;
+    color: antiquewhite;
+}
+.center{
+    text-align: center;
+    width: 100%;
+}
+.mycard{
+    margin:15px;
+}
+h3{
+    text-align: center;
+    color: antiquewhite;
+}
+#acm1{
+    width: 30px;
+    border-radius: 50%;
+}
+#acm1{
+    width: 30px;
+    border-radius: 50%;
+}
+#dont{
+    align-items: center;
+    text-align: center;
+}
+.mycard{
+    margin: 15px;
+background-color: mediumturquoise;
+}
+.card{
+    --bs-card-border-width: 1px;
+    --bs-card-title-spacer-y: 0rem;
+    --bs-card-border-color: black;
+    --bs-card-border-radius: 0.9rem;
+
+}
+.bg{
+    font-family: 'Poppins', sans-serif;
+    background-image: url('weather.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 50%;
+}
+.container-fluid{
+    width: 410px;
+    margin: 50px auto;
+    padding: 10px;
+   }
+   .container-fluid{
+    width: 410px;
+    margin: 50px auto;
+    padding: 10px;
+
+   }
+   .inputs {
+       padding: 2rem 0 2rem 0;
+       text-align: center;
+       justify-content: center;
+       background: white;
+
+   }
+
+   .inputs input[type="text"] {
+       height: 3.5rem;
+       width: 20rem;
+       background: #212121;
+       font-weight: bold;
+       font-size: 1.1rem;
+       padding: 10px;
+       border: none;
+       background-color: transparent;
+       border: 2px solid #c2c2c2;
+       border-radius: 2px;
+       margin-right:4px ;
+
+   }
+   .inputs input[type="submit"] {
+       height: 3.2rem;
+       width: 6.5rem;
+       background: #0a67ca;
+       font-weight: bold;
+       color: white;
+       font-size: 1.2rem;
+       margin-top: 20px;
+       border: none;
+       border-radius: 2px;
+   }
+   .display {
+       text-align: center;
+       width: 400px;
+       color: #16a864;
+   }
+   .wrapper {
+       margin: 0 9rem;
+
+       background-color: white;
+       height: 45vh;
+       margin: 50px auto;
+       border-radius: 2px;
+   }
+
+   .wrapper h2{
+       padding: 5px 0;
+       text-align: center;
+       background: #0548b5;
+       color: white;
+       font-family: sans-serif;
+     }
+     .wrapper p{
+       margin:20px 50px;
+       margin-right: 20px;
+   text-align: left;
+   color: #04214c;
+       font-size:23px;
+     }
+
+     .wrapper h2 span{
+       font-size: 26px;
+       color: #9beefb;
+     }
+       .wrapper p span{
+       color: #90006e;
+       font-size: 25px;
+     }
+     .mycard{
+        --bs-card-border-width: 1px;
+        --bs-card-title-spacer-y: 0rem;
+        --bs-card-border-color: black;
+        --bs-card-border-radius: 0.9rem;
+
+          border-radius: 18px;
+          background: #fff;
+          box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
+            transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
+        padding: 14px;
+        cursor: pointer;
+        background-repeat: no-repeat;
+
+    }
+     .mycard:hover{
+           transform: scale(1.05);
+        box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
+        color:cadetblue ;
+        background-color:#eee;
+      }
+      #myBtn {
+        display: none;
+        position: fixed;
+        width: 4%;
+        bottom: 20px;
+        right: 30px;
+        z-index: 99;
+        font-size: 18px;
+        border: none;
+        outline: none;
+        background-color:white;
+        color: black;
+        cursor: pointer;
+        padding: 1px;
+        border-radius: 4px;
+
+      }
+      #myBtn:hover {
+        background-color:cornflowerblue;
+      }
+    .h12{
+        font-family: fantasy;
+    }
+
+    .dark-mode {
+        background-color: black;
+        color:black;
+      }
+
+      #dark:hover{
+        background-color: #9beefb;
+        color: #90006e;
+      } 
+  #dark{
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+
+    border: 1px solid transparent;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    border-radius: 4px;
+    background-color: #0dcaf0;
+
+  }
+
+.a1:hover{
+    background-color:#0dcaf0;
+}
+
+.a2:hover{
+    background-color:#0dcaf0;
+}
+
+
+