Added Intro section

rafayhanan · May 25, 2024 · 871a957 · 871a957
1 parent b80a353
commit 871a957
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 99 deletions.
diff --git a/Images/myphoto.png b/Images/myphoto.png
diff --git a/index.html b/index.html
@@ -14,16 +14,29 @@
         <h1><img src="Images/1.png" id="sitelogo" alt="website logo">RAFAY</h1>
         <nav>
             <ul>
-                <li><a href="#">About</a></li>
-                <li><a href="#">Projects</a></li>
-                <li><a href="#">Experience</a></li>
-                <li><a href="#">Contact Me</a></li>
+                <li><a href="#">ABOUT</a></li>
+                <li><a href="#">PROJECTS</a></li>
+                <li><a href="#">EXPERIENCE</a></li>
+                <li><a href="#">CONTACT ME</a></li>
             </ul>
         </nav>
     </header>
 
     <main>
 
+        <div class="about">
+            <div class="intro">
+                <h1>Hi, I'm <span id="red">Muhammad Rafay</span></h1>
+                <h2>Software Developer based in Islamabad, Pakistan</h2>
+            </div>
+
+            <div class="myphoto">
+                <img src="Images/myphoto.png" alt="my picture" id="myphoto">
+            </div>
+
+        </div>
+
+
     </main>
 
 

diff --git a/styles.css b/styles.css
@@ -18,7 +18,7 @@ header {
     color: white;
 }
 
-h1 {
+header h1 {
     display: flex;
     align-items: center;
     color:#DA2032;
@@ -28,105 +28,46 @@ h1 img {
     margin-right: 10px; 
 }
 
+/*Designing Nav bar*/
 nav ul {
     list-style: none;
     display: flex;
     gap: 20px; 
     margin: 0;
     padding: 0;
+    font-size:1.3em;
 }
 
-/*Loading screen*/
-/* .glitch {
-    position: relative;
-    font-size: 25px;
-    font-weight: 700;
-    line-height: 1.2;
-    color: #fff;
-    letter-spacing: 5px;
-    z-index: 1;
-    animation: shift 1s ease-in-out infinite alternate;
-  }
-  
-  .glitch:before,
-  .glitch:after {
-    display: block;
-    content: attr(data-glitch);
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0.8;
-  }
-  
-  .glitch:before {
-    animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
-    color: #8b00ff;
-    z-index: -1;
-  }
-  
-  .glitch:after {
-    animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
-    color: #00e571;
-    z-index: -2;
-  }
-  
-  @keyframes glitch {
-    0% {
-      transform: translate(0);
-    }
-  
-    20% {
-      transform: translate(-3px, 3px);
-    }
-  
-    40% {
-      transform: translate(-3px, -3px);
-    }
-  
-    60% {
-      transform: translate(3px, 3px);
-    }
-  
-    80% {
-      transform: translate(3px, -3px);
-    }
-  
-    to {
-      transform: translate(0);
-    }
-  }
-  
-  @keyframes shift {
-    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
-      transform: skewX(0deg);
-    }
-  
-    41% {
-      transform: skewX(10deg);
-    }
-  
-    42% {
-      transform: skewX(-10deg);
-    }
-  
-    59% {
-      transform: skewX(40deg) skewY(10deg);
-    }
-  
-    60% {
-      transform: skewX(-40deg) skewY(-10deg);
-    }
-  
-    63% {
-      transform: skewX(10deg) skewY(-5deg);
-    }
-  
-    70% {
-      transform: skewX(-50deg) skewY(-20deg);
-    }
-  
-    71% {
-      transform: skewX(10deg) skewY(-10deg);
-    }
-  }
-   */
+nav ul li a {
+  text-decoration: none; 
+  color: white; 
+}
+
+nav ul li a:hover {
+  border-bottom: 2px solid #DA2032; 
+}
+
+
+/*About section*/
+.about {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.myphoto img{
+  width: 70%;
+  height: 70%;
+  margin-left: 10em;
+}
+
+.intro h1{
+  color:white;
+}
+
+#red{
+  color:#DA2032;
+}
+
+
+