kaal-coder · kaal-coder · Oct 22, 2022 · Oct 22, 2022 · Oct 22, 2022 · Oct 22, 2022
diff --git a/Fronted Projects/CV/css/styles.css b/Fronted Projects/CV/css/styles.css
@@ -0,0 +1,169 @@
+body{
+    color: #40514E;
+    margin:0;
+    text-align: center;
+    font-family: 'Merriweather',serif ;
+}
+
+h1{
+    font-size:5.625rem;
+    margin:50px auto 0 auto;
+    font-family: 'Sacramento',cursive ;
+    color: #66BFBF;
+
+}
+
+h2{
+    font-family: 'Montserrat',sans-serif ;
+    font-size: 2.5rem;
+    color: #66BFBF;
+    font-weight: normal;
+    padding-bottom: 10px;
+
+
+}
+
+h3{
+    font-family: 'Montserrat',sans-serif ;
+    color:  #11999E;
+
+}
+p{
+    line-height: 2;
+}
+
+hr{
+    border:dotted #EAF6F6 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;
+}
+
+.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;
+}
+
+.intro{
+    width: 30%;
+    margin:auto;
+
+}
+
+.contact-message{
+    width:40%;
+    margin:40px auto 60px
+}
+
+.copyright{
+    color: #EAF6F6;
+    font-size: 0.75rem;
+    padding: 20px 0;
+}
+
+.bottom-cloud{
+    position:absolute;
+    left:50px;
+    bottom: 300px;
+
+
+}
+
+.top-cloud{
+    position: absolute;
+    right:300px;
+    top:40px;
+
+}
+
+a{
+    color:  #11999E;
+}
+
+.skill-row{
+    width: 50%;
+    margin: 100px auto 100px auto; 
+    text-align: left;
+
+
+}
+
+.programmer{
+
+    width: 20%;
+    float:left;
+    margin-right: 30px;
+
+
+}
+
+.gamer{
+
+    width: 20%;
+    float:right;
+    margin-left: 30px;   
+
+}
+
+.btn {
+    background: #11cdd4;
+    background-image: -webkit-linear-gradient(top, #11cdd4, #2980b9);
+    background-image: -moz-linear-gradient(top, #11cdd4, #2980b9);
+    background-image: -ms-linear-gradient(top, #11cdd4, #2980b9);
+    background-image: -o-linear-gradient(top, #11cdd4, #2980b9);
+    background-image: linear-gradient(to bottom, #11cdd4, #2980b9);
+    -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;
+  }
+
+
+
+
diff --git a/Fronted Projects/CV/favicon.ico b/Fronted Projects/CV/favicon.ico
diff --git a/Fronted Projects/CV/images/a b/Fronted Projects/CV/images/a
@@ -0,0 +1 @@
+
diff --git a/Fronted Projects/CV/images/cloud.png b/Fronted Projects/CV/images/cloud.png
diff --git a/Fronted Projects/CV/images/gamer.png b/Fronted Projects/CV/images/gamer.png
diff --git a/Fronted Projects/CV/images/man.png b/Fronted Projects/CV/images/man.png
diff --git a/Fronted Projects/CV/images/mountain.png b/Fronted Projects/CV/images/mountain.png
diff --git a/Fronted Projects/CV/images/programmer.png b/Fronted Projects/CV/images/programmer.png
diff --git a/Fronted Projects/CV/index.html b/Fronted Projects/CV/index.html
@@ -0,0 +1,65 @@
+<!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>Gaurav Verma</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="icon" href="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 src="images/cloud.png" class="top-cloud" alt="cloud-img">
+        <h1>I'm Gaurav</h1>
+        <h2>a <span class="pro">pro</span>grammer</h2>
+        <img src="images/cloud.png" class="bottom-cloud" alt="cloud-img">
+        <img src="images/mountain.png" " alt="mountain-img">
+    </div>
+    <div class="middle-container">
+        <div class="profile">
+          <img src="images/man.png" alt="profile picture" height="200" width="150">
+          <h2>Hello.</h2>
+          <p class="intro">I am a coder and a web developer. Currently exploring variety of diffrent techs. I love playing online games and drawing.</p>
+        </div>
+        <hr >
+        <div class="skills">
+          <h2>My Skills.</h2>
+          <div class="skill-row">
+            <img class="programmer" src="images/programmer.png" alt="skill"><br>
+            <h3>Programming and Development</h3>
+            <p class="programmer-desc">I always found computer technology fascinating and liked knowing 
+              the insides of it. So, I am studing computer science and want to 
+              be a great apps and game designer</p>
+
+          </div>
+          <div class="skill-row">
+            <img class="gamer" src="images/gamer.png" alt="skill">
+            <h3>Gaming</h3>
+            <p class="gamer-desc">But my best skill is actually playing online games. It urges me to be the best in it and I love the never ending new challange scenarios.</p>
+          </div>
+        </div>
+        <hr>
+        <div class="contact-me">
+          <h2>Get In Touch</h2>
+          <h4>Are you also fascinated with games!!</h4>
+          <p class="contact-message">If you too get the same adrenaline rush while playing games? Let's play some games together! We can even code when get bored after playing!!</p>
+          <a class="btn" href="mailto:gauravvermaa07076@email.com">CONTACT ME</a>
+        </div>
+    </div>
+
+
+    <div class="bottom-container">
+        <a class="footer-link" href="https://www.linkedin.com/in/gaurav-verma-98688a232/">LinkedIn</a>
+        <a class="footer-link" href="https://github.com/Gaurav07076">GitHub</a>
+        <a class="footer-link" href="https://www.appbrewery.co/">Website</a>
+        <p class="copyright">© Gaurav.</p>
+    </div>
+
+
+
+</body>
+</html>