MLSAKIET0821 · Uddeshya-Gupta-eng · Oct 29, 2024
diff --git a/bg.jpg b/bg.jpg
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calcualtor</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <form>
+        <div class="main">
+            <input type="text" class="display" name="display">
+            <input type="button" class="btn" value="DE" onclick="display.value = display.value.toString().slice(0,-1)">
+            <input type="button" class="btn" value="AC" onclick="display.value = '' ">
+            <input type="button" class="btn" value="." onclick="display.value += '.'">
+            <input type="button" class="btn" value="+" onclick="display.value += '+' ">
+            <input type="button" class="btn" value="1" onclick="display.value += '1' ">
+            <input type="button" class="btn" value="2" onclick="display.value += '2' ">
+            <input type="button" class="btn" value="3" onclick="display.value += '3' ">
+            <input type="button" class="btn" value="-" onclick="display.value += '-' ">
+            <input type="button" class="btn" value="4" onclick="display.value += '4' ">
+            <input type="button" class="btn" value="5" onclick="display.value += '5' ">
+            <input type="button" class="btn" value="6" onclick="display.value += '6' ">
+            <input type="button" class="btn" value="/" onclick="display.value += '/' ">
+            <input type="button" class="btn" value="7" onclick="display.value += '7' ">
+            <input type="button" class="btn" value="8" onclick="display.value += '8' ">
+            <input type="button" class="btn" value="9" onclick="display.value += '9' ">
+            <input type="button" class="btn" value="" onclick="display.value += '' ">
+            <input type="button" class="btn" value="0" onclick="display.value += '0' ">
+            <input type="button" class="btn" value="00" onclick="display.value += '00' ">
+            <input type="button" id="equal" class="btn" value="=" onclick="display.value = eval(display.value) ">
+            <script src="script.js"></script>
+        </div>
+    </form>
+</body>
+
+</html>
diff --git a/image1.jpg b/image1.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My card</title>
+    <style>
+
+        .box {
+            border: 1vh solid rgb(244, 230, 245);
+            border-radius: 21px;
+            width:100%;
+            height:150vh;
+
+            box-sizing: border-box;
+            box-shadow: 15px 15px 10px 2px rgb(215, 184, 244);
+        outline: 2px solid violet;
+        background-color: #0b0a0a;
+        }
+        .box1{
+            display: flex;
+            text-align: center;
+            justify-content: center;
+            color: aliceblue;
+
+        }
+        h1{
+
+        text-shadow: 2px 2px 5px rgb(234, 139, 232);
+            display: flex;
+            text-align: center;
+            justify-content: center;
+            font-family:monospace ;
+            color: aliceblue;
+
+        }
+
+        img{
+            border-radius: 22px;
+            box-shadow: 11px 12px 9px 1px violet;
+            padding: 20px;
+            transition: background-image 0.5s ease-in-out;
+
+
+        }
+        img.hover{
+            transition: background-image 0.5s ease-in-out;
+
+        }
+        .box2{
+            text-align: center;
+            font-size: 50px;
+            font-weight: 100;
+            font-family:cursive;
+            text-shadow: 2px 15px 5px rgb(234, 139, 232);
+            color: aliceblue;
+        }
+        .box3{
+            font-family: cursive;
+            font-size: 28px;
+            color: aliceblue;
+        }
+        .social-links {
+            text-align: center;
+            margin-top: 30px;
+            font-size: 30px;
+
+        }
+
+        .social-links a {
+            margin: 0 15px;
+            text-decoration: none;
+            color: #007bff;
+            font-weight: 500; 
+            transition: color 0.3s ease; 
+        }
+
+        .social-links a:hover {
+            color: #84ffca;
+        }
+
+        h3 {
+            font-size: 22px;
+            margin-bottom: 10px;
+            color: #333;
+            color: aliceblue;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="box" >
+      <div class="box1">  <img src="image1.jpg" alt="Uddeshya gupta" height="348px" ></div>
+
+      <div class="box2">UDDESHYA GUPTA</div>
+      <h1>About Me </h1>
+    <div class="box3">
+        My name is Uddeshya Gupta, and I am a college student at KIET Group of Institutions, pursuing a degree in Computer Science and Engineering (CSE). Currently, I’m excited to be completing my first internship as a web developer, where I’m gaining valuable hands-on experience in building and optimizing websites.
+
+        I have a strong foundation in HTML, CSS, and JavaScript, and I’m passionate about creating user-friendly, responsive web applications. I enjoy tackling challenges and am always eager to learn new technologies to enhance my skills.
+
+        In my free time, I explore web design trends and work on personal projects that allow me to apply my knowledge creatively. I look forward to connecting with fellow developers and industry professionals!
+
+    </div>
+    <div class="social-links">
+        <h3>Connect with me:</h3>
+        <a
+        href="https://www.linkedin.com/in/uddeshya-gupta-876429298/"
+        target="_blank">LinkedIn</a>
+    <a href="https://github.com/Uddeshya-Gupta-eng" target="_blank">GitHub</a>
+    <a
+        href="https://www.instagram.com/uddeshya_gupta_26/"
+        target="_blank">Instagram</a>
+    <a href="https://mail.google.com/mail/u/0/#starred" target="_blank">Gmail</a>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,9 @@
+let a=document.querySelectorAll(".main > .btn");
+for(let i=0;i<a.length;i++){
+a[i].addEventListener("click",function(){
+    a[i].style.backgroundColor="rgb(193, 193, 193)";
+    a[i].style.boxShadow="none";
+    setTimeout(function(){ a[i].style.backgroundColor="rgb(228, 228, 228)";
+    a[i].style.boxShadow="0 2px 4px 2px black";},125)
+})
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,55 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+    min-height: 100vh;
+    background: url(bg.jpg) no-repeat;
+    background-size: cover;
+}
+
+.main {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    width: 100%;
+    height: 40%;
+    border: 5px solid rgb(58, 22, 22);
+    border-radius: 15px;
+    background: rgb(143, 142, 142);
+}
+form{
+    grid-area: 1/2/2/3;
+}
+
+.main .btn{
+    border: 1px solid black;
+    border-radius: 5px;
+    margin: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(228, 228, 228);
+    box-shadow: 0 2px 4px 2px black;
+    height: 50px;
+    font-weight: 900;
+    font-size: large;
+}
+#equal{
+    grid-area: 6/3/7/5;
+}
+.display{
+    grid-area: 1/1/2/5;
+    height: 100px;
+    border: 4px solid black;
+    background: rgb(241, 243, 255);
+    font-size: 30px;
+    text-align: right;
+    padding-right: 5px;
+}