intial commit

Dinkar850 · Jun 7, 2024 · baaaefb · baaaefb
commit baaaefb
Show file tree

Hide file tree

Showing 12 changed files with 391 additions and 0 deletions.
diff --git a/css/experiment.css b/css/experiment.css
@@ -0,0 +1,42 @@
+body{
+    margin: 0;
+}
+.solid{
+    height: 200px;
+    width: 200px;
+    /* display: inline-block; */
+}
+.red{
+    background-color: red;
+    position:absolute;
+    left:400px;
+    /* top:400px; */
+}
+.blue{
+    background-color: blue;
+    position:absolute;
+    left:200px;
+    /* top:200px; */
+}
+.yellow{
+    background-color: yellow;
+    /* display: inline-block; */
+    position:absolute;
+    /* top:0px; */
+}
+
+.parent{
+    height:500px;
+    width:500px;
+    position:relative;
+    background-color: yellowgreen;
+}
+.child{
+    height:100px;
+    width:100px;
+    position:absolute; /*if parent is relatvie then uske according will change absolute value */
+    left:230px;
+    background-color: pink;
+}
+
+
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,235 @@
+body{
+    margin: 0;
+    font-family: "Montserrat", serif;
+    font-weight: 400;
+    font-style: normal;
+    text-align: center;
+}
+
+/*top-container*/
+
+.top-container{
+    background-color: #eaf9f5;
+    text-align: center;
+    padding-top: 100px;
+    height:600px;
+    position:relative;
+}
+
+.profile-pic{
+    height:100px;
+    position:fixed;
+    left:10px;
+    top:10px;
+
+}
+
+.parent-name{
+    line-height: 1.5;
+}
+
+.name{
+    font-family: "Sacramento", cursive;
+    font-weight: 600;
+    font-style: normal;
+    font-size: 5rem; /*1em = 16px = 100%, 90px = 562.5% = 5.625em, inherited from parent in case of em and percentage, dynamic sizes*/ 
+    color: #66BFBF; /*rem means not parent pe dependent so use rem instead of em or percentage or pixels*/
+
+    margin: 0 auto;
+}
+
+.description{
+    font-size: 1rem;
+    color: #66BFBF;
+    margin: 0 auto;
+
+}
+
+h1{
+    font-weight: normal;
+    color: #11999e;
+    margin: 0;
+    margin-bottom: 50px;
+}
+
+h2{
+    font-weight: normal;
+    color: #11999e;
+    font-family: "Merryweather", sans-serif;
+}
+.hello{
+    font-weight: normal;
+    color: #11999e;
+    margin: 0;
+}
+p{
+    line-height: 2;
+    text-align: left;
+}
+
+.my-desc{
+    line-height: 2;
+    text-align: center;
+    margin-bottom: 70px;
+}
+.mid-cloud{
+    position: absolute;
+    width:250px;
+    right: 300px;
+}
+
+.bottom-cloud{
+    position: absolute;
+    left: 400px;
+}
+
+.top-cloud{
+    position: absolute;
+    top: 50px;
+    left: 900px;
+    width:100px;
+}
+
+/* .mountain-leftmost{
+    width:300px;
+    position: absolute;
+    z-index: 0;
+    left:0px;
+    bottom: 0px; 
+} */
+.mountain-left{
+    width:400px;
+    position: absolute;
+    z-index: 1;
+    left:200px;
+    bottom: 0px;
+}
+.mountain-right{
+    width:400px;
+    position: absolute;
+    z-index: 1;
+    right:150px;
+    bottom:0px;
+}
+.mountain-mid{
+    position:absolute;
+    z-index: 2;
+    bottom:0px;
+    left:490px;
+}
+
+/* .mountain-rightmost{
+    width:300px;
+    position: absolute;
+    z-index: 0;
+    right:0px;
+    bottom: 0px;
+} */
+
+/*mid container*/
+
+.my-skills{
+    margin-bottom: 40px;
+    margin-top: 90px;
+    font-weight: normal;
+    color: #11999e
+
+}
+
+.profile{
+    width: 30%;
+    margin: 0 auto;
+}
+
+hr{
+    border: dotted 5px rgb(186, 183, 183);
+    border-top: 0;
+    width:5%;
+    ;
+}
+.profile-mid{
+    height: 300px;
+    margin-top: 40px;
+    margin-bottom: 0px;
+}
+
+
+
+.skill-row{
+    width: 40%;
+    margin: 100px auto;
+    text-align: left;
+    line-height: 2;   
+}
+.web-dev{
+    width:25%;
+    /* border-radius: 50%; */
+    float: left;
+    background-color: #eaf9f5;
+    border-radius: 50%;
+    margin-right: 30px;
+}
+.android-dev{
+    /* height:200px; */
+    width: 27%;
+    background-color: #eaf9f5;
+    border-radius: 50%;
+    margin-left: 30px;
+    float: right;
+    /* border-radius: 50%; */
+}
+
+h3{
+    color: #66BFBF;
+    font-family: "merriweather";
+}
+
+h4{
+    line-height: 2; margin-top: 30px; margin-bottom: 70px; font-weight: normal; font-family: montserrat;}
+
+
+
+
+a{
+    color: #11999e;
+    text-decoration: none;
+}
+
+.btn {
+    -webkit-border-radius: 12;
+    -moz-border-radius: 12;
+    border-radius: 12px;
+    font-family: Arial;
+    color: #ffffff;
+    font-size: 20px;
+    background: #66bfbf;
+    padding: 10px 20px 10px 20px;
+    text-decoration: none;
+  }
+
+  .btn:hover {
+    background:#11999f ;
+    text-decoration: none;
+  }
+
+  .bottom-container{
+    margin-top: 70px;
+    margin-bottom: 0px;
+    background-color: #66BFBF;
+    padding-top: 30px;
+  }
+
+  .footer-link{
+    margin:30px;
+    color: #11999e;
+    font-weight: 500;
+  }
+
+.name-bottom{
+    color:white;
+    font-family: "merriweather";
+    font-size: 0.8em;
+    text-align: center;
+    margin-top:30px;
+
+}
diff --git a/experiment.html b/experiment.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel = stylesheet href = css/experiment.css>
+</head>
+<body>
+    <div class = "parent">
+        <div class = "child">
+            <!-- <p>hello</p> -->
+        </div>
+    </div>
+    <div class = "blue solid"></div> 
+    <div class = "yellow solid"></div> 
+    <div class = "red solid"></div> 
+
+
+</body>
+</html>
diff --git a/favicon/dinkar.ico b/favicon/dinkar.ico
diff --git a/images/appd.png b/images/appd.png
diff --git a/images/chillies.png b/images/chillies.png
diff --git a/images/cloud.png b/images/cloud.png
diff --git a/images/computer.png b/images/computer.png
diff --git a/images/mountain.png b/images/mountain.png
diff --git a/images/profile.png b/images/profile.png
diff --git a/images/webl.png b/images/webl.png
diff --git a/index.html b/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile</title>
+    <link rel = stylesheet href = css/style.css>
+    <link rel = icon href = favicon/dinkar.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:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Sacramento&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <!-- top container -->
+
+    <div class = top-container>
+
+        <img class = "profile-pic" src="images/profile.png" alt="profile-image">
+
+        <img class = top-cloud alt = top-cloud src = images/cloud.png>
+
+        <div class = parent-name>
+            <h1 class = name>I am Dinkar</h1>
+            <h2 class = description>a programmer</h2>
+        </div>
+
+        <img class = bottom-cloud alt = bottom-cloud src = images/cloud.png>
+
+        <img class = mid-cloud alt = mid-cloud src = images/cloud.png>
+
+        <div class = mountains>
+            <!-- <img alt = mountain class = mountain-leftmost src = images/mountain.png> -->
+            <img alt = mountain class = mountain-left src = images/mountain.png>
+            <img alt = mountain class = mountain-mid src = images/mountain.png>
+            <img alt = mountain class = mountain-right src = images/mountain.png>
+            <!-- <img alt = mountain class = mountain-rightmost src = images/mountain.png> -->
+        </div>
+
+    </div>
+
+
+    <!-- middle container -->
+
+    <div class="middle-container">
+
+        <div class="profile">
+          <img class = "profile-mid" src="images/profile.png" alt="profile-image">
+          <h1 class = hello>Hello.</h1>
+          <p class = my-desc>I am Dinkar Gupta, currently pursuing my bachelor's degree. I am in my Junior year right now.</p>
+        </div>
+
+        <hr>
+
+        <div class="skills">
+          <h1 class = "my-skills">My Skills.</h1>
+
+          <div class="skill-row">
+            <img class="web-dev" src="images/webl.png" alt="web-dev">
+            <h3 class = web-head>Web Development</h3>
+            <p>I am a budding web developer. I dont know much but I am learning and will be proficient in no time.</p>
+          </div>
+
+          <div class="skill-row">
+            <img class="android-dev" src="images/appd.png" alt="">
+            <h3>Android Development</h3>
+            <p>I have intermediate knowledge in Android dev and I am capable of making basic projects as of now.</p>
+          </div>
+
+        </div>
+
+        <hr>
+
+        <div class="contact-me">
+          <h1 style = "margin-top: 70px">Get In Touch</h1>
+          <h3>If you love android as much as I do.</h3>
+          <h4>Love Android? Let's make some apps together!!</h4>
+          <a class="btn" href="mailto:name@email.com">CONTACT ME</a>
+        </div>
+
+    </div>
+
+
+    <div class="bottom-container">
+        <a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
+        <a class="footer-link" href="https://twitter.com/">Twitter</a>
+        <a class="footer-link" href="https://www.appbrewery.co/">Website</a>
+        <p class = "name-bottom">© Dinkar Gupta @ CES</p>
+    </div>
+
+
+</body>
+</html>