Merge pull request #239 from riddhitech/portfolio-website

Add files via upload
avinash201199 · Oct 31, 2022 · 15c425f · 15c425f
2 parents cd489dd + 758d80c
commit 15c425f
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 0 deletions.
diff --git a/my Portfolio/bk1.jpg b/my Portfolio/bk1.jpg
diff --git a/my Portfolio/chillies.png b/my Portfolio/chillies.png
diff --git a/my Portfolio/cloud.png b/my Portfolio/cloud.png
diff --git a/my Portfolio/computer.png b/my Portfolio/computer.png
diff --git a/my Portfolio/css/styles.css b/my Portfolio/css/styles.css
@@ -0,0 +1,129 @@
+/* All properties in alphabetical order */
+/* ** For seeing unique color pallets goto 'colorhunt.com' */
+*{
+    margin:0; /* css (as margin) set default by browser will now be reset to 0px */
+}
+/* ****  ( 16px = 1em = 100% )    */
+body{
+
+ font-family: 'Baloo Bhai 2', cursive; 
+ text-align: center;
+ font-size: 22px;
+}
+.container1{
+    margin-top: 0px;
+    background: #E4F9F5; 
+ text-align:center;
+margin-top: 0px;
+}
+
+.mountain{
+    margin: 20px auto 10px;
+
+}
+
+h1{
+    margin-top: 80px;
+    font-family: 'Sacramento', cursive;
+    font-size: 100px;
+    color: #54BAB9;
+    word-spacing: 24px;
+    letter-spacing: 2px;
+}
+.head{
+    font-size: 35px;
+    color: #54BAB9;
+}
+.cloud1{
+    position: absolute;
+    top: 360px;
+    left: 380px;
+}
+.cloud2 img{
+    position: relative;
+    top: 70px;
+    left: 350px;
+
+}
+h2,h3,a{
+    color: #11999E;
+
+}
+.bottom{
+    margin: 40px 60px;
+}
+h2{
+    font-size: 40px;
+}
+.skill-row{
+    width:50%;
+    margin: 100px auto 100px;
+    text-align: left;
+}
+.Myprofile{
+    height: 200px;
+    width: 200px;
+}
+.profile{
+    margin:100px 100px;
+}
+
+.wd1{
+    width: 45%;
+    float:left;
+    margin-right: 30px;
+
+    margin-bottom: 30px;
+
+}
+.wd2{
+    width: 45%;
+    float:right;
+    margin-left: 30px;
+
+}
+.btn{
+  border-radius :8px;
+  word-spacing: 10px;
+  text-decoration:none;
+  border:2px solid #30e3cb;
+
+background-image: linear-gradient( #11cdd4,#11999e);
+color:white;
+padding:6px 18px 6px 18px;
+
+}
+.button{
+    margin:60px;
+}
+.btn:hover{     
+    background-image: linear-gradient( #30e3cb,#2bc4ad);
+
+}
+/* (ANTI - FLOAT PROPERTIES ----by using this property our text will not wrap around the image only heading will wrap around it.)
+.content{
+    clear:left; 
+    or
+    clear:right;
+ } */
+
+ /* **** u can use css button-generator.com to make button in just 2 mins. */
+
+ .bottom-container{
+    background-color: #66BFBF;
+    height: 260px;
+    width:100%;
+
+ }
+ .footer-link{
+
+    margin: 40px auto 40px;
+    color: white;
+    text-decoration: none;
+
+ }
+ .links{
+
+    display: inline-block;
+    margin: 80px 80px 70px;
+ }
diff --git a/my Portfolio/favicon (2).ico b/my Portfolio/favicon (2).ico
diff --git a/my Portfolio/girl.jpg b/my Portfolio/girl.jpg
diff --git a/my Portfolio/index.html b/my Portfolio/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Riya_Garg</title>
+    <link rel="stylesheet" href="css/styles.css"> 
+    <link rel="shortcut icon" href="favicon (2).ico" type="image/x-icon">         
+    <link href="https://fonts.googleapis.com/css2?family=Anek+Kannada:wght@300&family=Baloo+Bhai+2&family=Balthazar&family=Dancing+Script:wght@600&family=Prompt:wght@300&family=Sansita+Swashed:wght@300&family=Signika+Negative&family=Square+Peg&family=Titillium+Web:ital@1&family=Ubuntu:ital,wght@0,400;1,300&family=Vazirmatn:wght@200&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Anek+Kannada:wght@300&family=Balthazar&family=Dancing+Script:wght@600&family=Prompt:wght@300&family=Sacramento&family=Sansita+Swashed:wght@300&family=Signika+Negative&family=Square+Peg&family=Titillium+Web:ital@1&family=Ubuntu:ital,wght@0,400;1,300&family=Vazirmatn:wght@200&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container1">
+
+
+            <div class="cloud2">
+                <img src="cloud.png" alt="image">
+            </div>
+
+            <h1>Hi! I'm Riya</h1>
+            <p class="head">a programmer</p>
+
+            <div class="cloud1">
+                <img src="cloud.png" alt="image">     
+            </div>
+
+
+
+         <div class="mountain">
+             <img src="mountain.png" alt="an image">
+         </div>
+         </div>
+         <div class="middle-container">
+            <div class="profile">
+              <img src="girl.jpg" class="Myprofile" alt="myprofile">
+              <h2>Hello . Welcome to my Website</h2>
+              <p class="content">With a programmer , I'm web developer . I like to read books , doing coding , and yaa good enough googler</p>
+            </div>
+
+            <div class="skills">
+              <h2> My Skills </h2>
+              <div class="skill-row">
+                <img class="wd1" src="wd.jpg" alt="image">
+                <h3>Web Development</h3>
+                <p>I started my web devlopment in my first year of college with the hope of building great websites.This is fun in itself , writing code, executing it , thinking bugs and all makes you a good coder. </p>
+              </div>
+              <div class="skill-row">
+                <img class="wd2" src="bk1.jpg" alt="image">
+                <h3>Reading Books</h3>
+                <p class="content">I think books are something which can change our life or our perspective towards our life which according to me is a great thing in itself.</p>
+              </div>
+            </div>
+
+            <div class="contact-me">
+              <h2 class="bottom">Get In Touch</h2>
+              <h3>If you also want to code and explore.</h3>
+              <p class="content">So , let 's code and make beautiful websites and explore much more.</p>
+            <div class="button">
+                <a class="btn" href="mailto:[email protected]">Contact Me</a>
+            </div>
+
+            </div>
+          </div>
+
+
+          <div class="bottom-container">
+         <div class="links">
+            <a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
+         </div>
+
+            <div class="links">
+                <a class="footer-link" href="https://www.instagram.com/">Instagram</a>
+            </div>
+    <div class="links">
+        <a class="footer-link" href="https://www.twitter.com/">Twitter</a>
+            </div>
+            <div class="links">
+                <a class="footer-link" href="https://www.website.com/">Website</a>  
+            </div>
+
+
+
+<div class="link2"> 
+    <p>© 2022 Riddhi Garg @The Company</p>
+</div>
+
+
+          </div>
+
+
+</body>
+</html>
diff --git a/my Portfolio/mountain.png b/my Portfolio/mountain.png
diff --git a/my Portfolio/wd.jpg b/my Portfolio/wd.jpg