exp4

ParthDhavan04 · May 23, 2024 · 55e17e2 · 55e17e2
1 parent 2f719ff
commit 55e17e2
Show file tree

Hide file tree

Showing 6 changed files with 294 additions and 0 deletions.
diff --git a/exp4/email-logo.png b/exp4/email-logo.png
diff --git a/exp4/exp4.html b/exp4/exp4.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="style4.css" >
+    <title>Contact Me</title>
+</head>
+<body>
+
+  <div class="container">
+    <div class="sidebar">
+        <a href="#">Blogs</a>
+        <a href="#">Achievements</a>
+        <a href="projects.html">Works</a>
+        <a href="about.html">Skills</a>
+    </div>
+
+
+  <div class="navbar_about">
+    <a style="position: absolute; left: 8%; top: -0.5%; font-size: 200% !important;" href="#">Parth Dhavan</a>
+      <a href="contact.html">Contact</a>
+      <a href="projects.html">Projects</a>
+      <a href="about.html">About</a>
+      <a href="index.html">Home</a>
+</div>
+<h1 style="text-align: center; color: #000000; font-weight: 600; font-size: 48px;">Contact Me</h1>
+<div class="box">
+  <div class="info">
+    <h2 style="margin-left: 20%;">Parth Dhavan</h2>
+      <img class="icon" src="location.png"><h3 class="text">University of Petroleum & Energy Studies </h3><br>
+      <img class="icon" src="location.png"><h3 class="text">Dehradun </h3><br>
+      <img class="icon" src="email-logo.png"><h3 class="text"><a href="[email protected]">[email protected]</a></h3><br>
+      <img class="icon" src="github-logo.png"><h3 class="text"><a target="_blank" href="//github.com/parthdhavan2004">parthdhavan2004</a> </h3><br>
+      <img class="icon" src="linkedin-logo.png"><h3 class="text"><a target="_blank" href= "https://www.linkedin.com/in/parth-dhavan-9103a3275/"> parth-dhavan</a></h3>
+  </div>
+  <div class="text-content">
+    <h2>Let's Connect</h2>
+
+    <div class="row">
+      <div class="rectangle">
+        <input type="text" id="name" class="input-field" placeholder="Enter your name">
+        <label class="form-label">Enter your name</label>
+      </div>
+
+    </div>
+    <div class="row">
+      <div class="rectangle">
+        <input type="email" id="email" class="input-field" placeholder="Enter your email">
+        <label class="form-label">Enter your E-mail</label>
+      </div>
+
+    </div>
+    <div class="row">
+      <div class="rectangle3">
+        <textarea id="message" class="input-field" placeholder="Type your message"></textarea>
+        <label class="form-label" id="message">Type your message</label>
+      </div>
+
+    </div>
+    <div style="display:flex; justify-content: center; width: 500px;">
+        <button type="button" id="sendButton">Send</button>
+    </div>
+    </div>
+    </div>
+
+    <div class="footer">
+        © 2004 Parth Dhavan. All rights reserved.
+    </div>
+  </body>
+  </html>
diff --git a/exp4/github-logo.png b/exp4/github-logo.png
diff --git a/exp4/linkedin-logo.png b/exp4/linkedin-logo.png
diff --git a/exp4/location.png b/exp4/location.png
diff --git a/exp4/style4.css b/exp4/style4.css
@@ -0,0 +1,225 @@
+body{
+    margin: 0;
+    font-family:'Inter',sans-serif;
+  } 
+  .navbar_about {
+      background: linear-gradient(to right, #d1913c,#ffd194);
+      overflow: hidden;
+      padding-top: 0;
+  }
+
+  .navbar_about a {
+    float: right;
+    color: black;
+    font-weight: 400;
+    text-align: center;
+    padding: 20px 20px; 
+    font-size: 150%;
+    font-family:'Times New Roman', Times, serif;
+    text-decoration: none;
+  }
+
+
+
+
+  .box {
+      display: flex;
+  }
+
+  .info {
+    font-size: medium;
+      font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+      width: 60%;
+      text-align: left;
+  }
+
+  .text {
+    display: inline-block;
+    text-align: center;
+    position: relative;
+    bottom: 17px;
+    margin-left: 10px;
+  }
+
+  .text-content {
+      width: 40%; 
+      padding-left: 20px;
+  }
+  .text-content input, .text-content textarea{
+    background-color: #d1913c;
+    width: 100%;
+    height:100%;
+    border-radius: 10px;
+    color: rgb(4, 0, 0);
+  }
+
+  .rectangle {
+    padding: 5px;
+      width: 80%;
+      height: 20px;
+      margin-bottom: 5%;
+      border-radius: 10px;
+  }
+
+  .rectangle3 {
+    padding: 5px;
+    background-color:#ffd194;
+    width: 80%;
+    height: 200px;
+    margin-bottom: 5%;
+    border-radius: 10px;
+  }
+  button{
+    align-items: center;
+    height: 40px;
+    font-size:large ;
+    width: 150px;
+    color: #090505;
+    border-color: rgb(255, 255, 255);
+    border-width: 2px;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    background:linear-gradient(to right, #d1913c,#ffd194 );
+    width: 15%;
+    border-radius: 10%;
+  }
+
+  .icon{  
+    vertical-align:center;
+    width: 50px;
+    height: 50px;
+    margin-left: 10%;
+    margin-top:3px;
+  } 
+
+  a:hover {
+    text-decoration: underline;
+    color:rgb(0, 0, 0);
+  }
+
+  .input-field::placeholder {
+      color: transparent;
+    }
+    .input-field {
+      background-color: transparent;
+      border: none;
+      border-bottom: 1px solid black;
+      padding: 5px;
+      color: rgb(0, 0, 0);
+    }
+    .input-field:focus + .form-label,
+  .input-field:not(:placeholder-shown) + .form-label {
+    transform: translate(5px, 22px);
+    font-size: 14px;
+    color: black;
+    top:-55px;
+  } 
+
+  .input-field:focus + #message , 
+  .input-field:not(:placeholder-shown) + #message{
+    transform: translate(5px, 22px);
+    top: -240px;
+  }
+  .form-label{
+      position: relative;
+      top:-22px;
+      left: 6px;
+      color: rgb(8, 1, 1);
+      transition: 0.3s;
+      pointer-events: none;
+    }
+    #message{
+      top:-200px;
+    }
+
+    #sendButton {
+      transition: transform 0.3s ease;
+    }
+
+    #sendButton:hover {
+      transform: scale(1.2);
+  }
+
+  #sendButton:active {
+      transform: scale(0.8);
+  }
+
+  .footer {
+      margin-top: 3px; 
+      background-color:#ffd194;
+      padding: 24px;
+      text-align: center;
+      position: sticky;
+      bottom:0;
+  }
+
+  .sidebar {
+    background: linear-gradient(to right, #d1913c,#ffd194);
+    overflow: hidden;
+    width: 0;
+    text-align: center;
+    position: fixed;
+    height: 100vh;
+    transition: width 0.3s; 
+}
+
+/* Adjust the width on hover to reveal the full content */
+body:hover .sidebar {
+    width: 200px; /* Adjust expanded width as needed */
+}
+
+.sidebar a {
+    color: black;
+    font-weight: 400;
+    padding: 20px 0;
+    font-size: 16px;
+    font-family: 'Times New Roman', Times, serif;
+    text-decoration: none;
+    display: block;
+}
+
+body:hover + .main-content {
+    margin-left:200px;
+}
+
+
+@media screen and (max-width: 768px) {
+
+  .sidebar {
+    display: none; /* Hide the sidebar on smaller screens */
+}
+
+  .navbar_about a {
+      float: none;
+      display: block;
+      text-align: center;
+      width: 100%;
+      padding: 15px 0;
+  }
+
+  li{
+    font-size: 10px;
+  }
+
+  .box {
+      flex-direction: column;
+      align-items: center;
+  }
+
+  .text-content {
+      width: 100%;
+  }
+
+  .First {
+      position: static;
+      text-align: center;
+      margin-bottom: 20px;
+  }
+
+  .rectangle, .rectangle3 {
+      width: 90%;
+  }
+
+  .details {
+      margin-left: 0;
+  }
+}