front repair

git-pi-e · git-pi-e · commit 8379a2072c4a · 2021-03-14T21:38:02.000+05:30
diff --git a/img/home.jpg.opdownload b/img/home.jpg.opdownload
diff --git a/index.html b/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
+    <meta name="HandheldFriendly" content="true">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>mohite-pi</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
@@ -14,13 +15,12 @@
 <body>
 
     <!-- <header> -->
-       <script src="./navbar.js"></script>
         <!-- <button class="nav-toggle"></button>
     
     <button class="nav-toggle">
         <span class="nav-button"></span>
     </button> -->
-    <div class="navbar" >
+    <div id="navbar" >
         <!-- <span class="logo flex">
             <img src="./img/pi-logo.png" alt="mohite-pi">
         </span> -->
@@ -35,10 +35,10 @@
     <!-- </nav> -->
     </div>
     <!-- </header> -->
-
+<section class="content">
     <!-- Introduction -->
     <section class="intro" id="home">
-        <div class="w3-display-container w3-animate-opacity w3-margin-top">
+        <div class="w3-display-container w3-animate-opacity w3-margin-top" id="intro-div">
         <div class="w3-display-middle" id="intro_container">
             <h1 class="w3-panel w3-border w3-jumbo w3-animate-top w3-center" >Hello, I am <strong id="myname">Piyush Mohite</strong></h1>   
             <!-- class="section__title section__title--intro" -->
@@ -94,9 +94,28 @@ <h2 class="section__title section__title--connect">Connect With Me</h2>
         </div>
     </section>
 
+</section>
 
 
-
+<script>
+    // When the user scrolls the page, execute myFunction
+     window.onscroll = function() {myFunction()};
+     
+     // Get the navbar
+     var navbar = document.getElementById("navbar");
+     
+     // Get the offset position of the navbar
+     var sticky = navbar.offsetTop;
+     
+     // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
+     function myFunction() {
+       if (window.pageYOffset >= sticky) {
+         navbar.classList.add("sticky")
+       } else {
+         navbar.classList.remove("sticky");
+       }
+     }
+     </script>
 
 
 
diff --git a/style.css b/style.css
@@ -5,6 +5,20 @@
     -webkit-font-smotthing: antialiased;
 }
 
+/* Media Queries: Tablet Landscape */
+@media screen and (max-width: 1060px) {
+    #primary { width:67%; }
+    #secondary { width:30%; margin-left:3%;}  
+}
+
+/* Media Queries: Tabled Portrait */
+@media screen and (max-width: 768px) {
+    #primary { width:100%; }
+    #secondary { width:100%; margin:0; border:none; }
+}
+
+
+/* General Styling */
 html{
     
     font-family: 'Quicksand', sans-serif;
@@ -21,8 +35,8 @@ body{
 }
 
 section{
-    margin: auto;
-    padding: 12%;
+    margin: 0;
+    padding: 15%;
     justify-content: center;
     height: 100vh;
 }
@@ -59,23 +73,34 @@ header .nav-div nav a{
 
 
 
+
 /* navbar */
-.navbar{
+#navbar{
     overflow:hidden;
     background-color: #42f08d;
 }
 
-.navbar a{
+#navbar a{
     float: left;
     display: block;
     color: #272525;
     text-align: center;
     padding: 14px;
     text-decoration: none;
 }
+
+#navbar a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+  
+  #navbar a.active {
+    background-color: #272525;
+    color: #42f08d;
+  }
 /* Page content */
 .content {
-    padding: 16px;
+    padding: 0;
   }
   
   /* The sticky class is added to the navbar with JS when it reaches its scroll position */
@@ -94,7 +119,13 @@ header .nav-div nav a{
 
 
 
+
+
 /* Intro page */
+#intro-div{
+    margin-top: 4em;
+}
+
 
 
 /* strong{
@@ -106,10 +137,12 @@ header .nav-div nav a{
 }
 
 #myname{
-    display:inline-block
+    display:inline-block;
 }
 
-
+#my_work_title{
+    padding: 100px;
+}
 
 
 
@@ -127,6 +160,7 @@ header .nav-div nav a{
 
 
 
+
 /* About Me */
 .aboutme{
     background-image: url(./img/abtme-img.jpg);
