Merge pull request avinash201199#127 from hargunkaur286/main

Added Portfolio Website
Abhilitcode · Oct 9, 2022 · 67826b7 · 67826b7
2 parents b59c05f + 12c928c
commit 67826b7
Show file tree

Hide file tree

Showing 8 changed files with 199 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Hargun Kaur/images/.DS_Store b/Hargun Kaur/images/.DS_Store
diff --git a/Hargun Kaur/images/ProfilePicture.png b/Hargun Kaur/images/ProfilePicture.png
diff --git a/Hargun Kaur/images/cloud.png b/Hargun Kaur/images/cloud.png
diff --git a/Hargun Kaur/images/favicon.ico b/Hargun Kaur/images/favicon.ico
diff --git a/Hargun Kaur/images/mountain.png b/Hargun Kaur/images/mountain.png
diff --git a/Hargun Kaur/index.html b/Hargun Kaur/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hargun Kaur</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="images/favicon.ico">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="top-container">
+        <img class="top-cloud" src="images/cloud.png" alt="cloud-image">
+        <h1>I'm Hargun</h1>
+        <h2>a <span class="pro">pro</span>grammer</h2>
+        <img class="bottom-cloud" src="images/cloud.png" alt="cloud-image">
+        <img src="images/mountain.png" alt="mountain-image">
+    </div>
+    <div class="middle-container">
+        <div class="profile">
+          <img src="images/ProfilePicture.png" width="300" height= "300" alt="Profile Picture">
+          <h2>Hello.</h2>
+          <p>I am a full time student, an aspiring ML engineer and a Web Developer.</p>
+        </div>
+        <hr>
+        <div class="skills">
+          <h2>My Skills.</h2>
+          <div class="skill-row">
+            <img class="skill-code" src="https://media3.giphy.com/media/u2pmTWUi0MXjyrMaVj/200w.webp?cid=ecf05e47tftdcvileehm8m56tk7297uogtqtn57m3wl7kfbp&rid=200w.webp&ct=g" alt="Coding">
+            <h3>CODING</h3>
+            <p>I enjoy coding as much I love coffee. Coding improves my problem solving skills while coffee makes me happy.</p>
+          </div>
+          <div class="skill-row">
+            <img class="skill-coffee" src="https://media0.giphy.com/media/Q6joirtIBHUsw/200.webp?cid=ecf05e47dydhw4q4uuqw4su5oz1geim625g9g77wlrle473o&rid=200.webp&ct=g" alt="coffee">
+            <h3>BREWING COFFEE</h3>
+            <p>I make the best coffee ever!</p>
+          </div>
+        </div>
+        <hr>
+        <div class="contact-me">
+          <h2>Get In Touch</h2>
+          <h3>Let's get in touch over a coffee.</h3>
+          <p>We can code together while we drink our favourite coffee</p>
+          <a class="btn" href="mailto:hargunkaur286@email.com">CONTACT ME</a>
+        </div>
+      </div>
+
+
+      <div class="bottom-container">
+        <a class="btn" href="https://www.linkedin.com/">LinkedIn</a>
+        <a class="btn" href="https://twitter.com/">Twitter</a>
+        <a class="btn" href="http://127.0.0.1:5500/CSS-My%20Site/index.html">Website</a>
+        <p class="copyright">© Hargun Kaur</p>
+      </div>
+
+    </div>
+
+</body>
+</html>
diff --git a/Hargun Kaur/style.css b/Hargun Kaur/style.css
@@ -0,0 +1,137 @@
+body{
+    color: #40514E;
+    margin:0;
+    text-align:center;
+    font-family: 'Merriweather', serif;
+
+}
+
+h1{
+    font-size: 562.2%;
+    margin:50px auto 0px auto;
+    font-family: 'Sacramento';
+    color:#66BFBF;   
+}
+
+h2{
+    font-family: 'Montserrat', sans-serif;
+    font-size: 2.5rem;
+    color:#66BFBF;
+    font-weight: normal;
+
+}
+
+h3{
+    font-family: 'Montserrat', sans-serif;
+    color:#11999E;
+}
+
+.skill-row{
+    width: 50%;
+    margin: 100px auto 100px auto;
+    text-align: left;
+    line-height:2;
+}
+
+
+.top-container{
+    background-color: #E4F9F5;
+    position:relative;
+    padding-top:100px;
+}
+
+.middle-container{
+    margin: 100px 0;
+
+}
+
+.bottom-container{
+    background-color: #66BFBF;
+    padding: 50px 0 20px;
+}
+
+.pro{
+    text-decoration: underline;
+}
+
+p{
+    line-height:2;
+}
+
+.bottom-cloud{
+    position:absolute;
+    left:300px;
+    bottom:300px;
+}
+
+.top-cloud{
+    position:absolute;
+    right:300px;
+    top:50px;
+}
+
+hr {
+    border: dotted grey 6px;
+    border-bottom: none;
+    width: 4%;
+    margin: 100px auto;
+}
+
+a{
+    color: #11999E;
+    font-family: 'Montserrat', sans-serif;
+    margin: 10px 20px;
+    text-decoration: none;
+  }
+
+a:hover {
+    color: #EAF6F6;
+}
+
+
+
+
+.btn {
+    background: #11cdd4;
+    background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
+    background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
+    background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
+    background-image: -o-linear-gradient(top, #11cdd4, #11999e);
+    background-image: linear-gradient(to bottom, #11cdd4, #11999e);
+    -webkit-border-radius: 8;
+    -moz-border-radius: 8;
+    border-radius: 8px;
+    font-family: 'Montserrat', sans-serif;
+    color: #ffffff;
+    font-size: 20px;
+    padding: 10px 20px 10px 20px;
+    text-decoration: none;
+  }
+
+.btn:hover {
+    background: #30e3cb;
+    background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
+    background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
+    background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
+    background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
+    background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
+    text-decoration: none;
+}
+
+.skill-code{
+    width: 25%;
+    float: left;
+    margin-right: 30px;
+}
+
+.skill-coffee{
+    width: 25%;
+    float: right;
+    margin-left: 30px;
+}
+
+.copyright {
+    color: white;
+    font-size: 0.75rem;
+    padding: 20px 0;
+  }