Add descriptions and comments for code

alizainaslam · Mar 16, 2024 · 9bd46a1 · 9bd46a1
1 parent 77b3806
commit 9bd46a1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -3,10 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="" />
+    <meta name="author" content="Ali Zain Aslam" />
+    <meta
+      name="description"
+      content="Landing page clone for practice. Keypoints are learning responsive design and animations. Techstacks are  HTML5, CSS3, JavaScript and GSAP (lib for animations)"
+    />
     <link rel="stylesheet" href="src/css/styles.css" />
     <title>Static Page - Clone</title>
+    <!-- Credit link : "https://bent-template.webflow.io/" -->
   </head>
-
   <body>
     <!-- NavBar -->
     <header>
@@ -15,7 +21,7 @@ <h2>Menu</h2>
       </nav>
     </header>
     <main>
-      <!-- Home Page -->
+      <!-- Home Section -->
       <div id="home">
         <h1>Bent Lindberg <br />Digital Designer</h1>
         <div class="location">
@@ -25,7 +31,7 @@ <h2 class="scroll"><span class="arrow">&rarr;</span>Scroll Down</h2>
         <div class="img-container"></div>
       </div>
 
-      <!-- About Page -->
+      <!-- About Section -->
       <div id="about">
         <div class="about-container">
           <h3 class="about-heading">
@@ -63,7 +69,7 @@ <h2>(About Me)</h2>
         </div>
       </div>
 
-      <!-- Skill Page -->
+      <!-- Skill Section -->
       <div id="skill">
         <div class="skill-client-container">
           <div class="skill-client-heading">
@@ -110,7 +116,7 @@ <h2>Motion Design</h2>
         </div>
       </div>
 
-      <!-- Work Page -->
+      <!-- Work Section -->
       <div id="work">
         <ul class="work-heading">
           <li>Work</li>
@@ -270,7 +276,7 @@ <h3 style="opacity: 0.7">Motion Design</h3>
       </div>
     </main>
 
-    <!-- footer -->
+    <!-- Footer -->
     <footer>
       <div class="footer-heading">
         <h3 class="footer-h3">(Connect)</h3>
@@ -310,20 +316,19 @@ <h3 class="f-h3">(Utility Pages)</h3>
       </div>
 
       <div class="copy-right">
-        <p class="copy-text" style="color: #f5f3ef; opacity: 1">
+        <p class="copy-right-text" style="color: #f5f3ef; opacity: 1">
           &copy; Developer
           <a
             style="color: #f5f3ef"
             href="https://www.linkedin.com/in/alizainaslam/"
-            >Ali Zain Aslam</a
+            >Ali</a
           >
           <span>All rights reserved.</span>
         </p>
       </div>
     </footer>
 
     <!-- GSAP cdn -->
-
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
       integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -4,6 +4,8 @@
   box-sizing: border-box;
 }
 
+/* root */
+
 :root {
   --primary-color: #f5f3ef;
   --secondary-color: #1e1e21;
@@ -23,14 +25,22 @@ body {
 li {
   list-style: none;
 }
+p {
+  padding: 8px 0px 15px 0px;
+  font-size: var(--font-size);
+  opacity: 0.8;
+  letter-spacing: 1.1px;
+  line-height: 130%;
+}
+
+/* Header */
 header {
   position: fixed;
   width: 100%;
   display: flex;
   justify-content: flex-end;
   padding: 25px;
 }
-
 nav > h2 {
   color: var(--primary-color);
   text-align: center;
@@ -42,8 +52,7 @@ nav > h2 {
   line-height: 110%;
 }
 
-/* ------- */
-
+/* Home Section */
 #home {
   height: 100%;
   width: 100%;
@@ -54,7 +63,6 @@ nav > h2 {
   letter-spacing: -4px;
   line-height: 90%;
 }
-
 .location {
   display: flex;
   justify-content: space-between;
@@ -100,6 +108,8 @@ nav > h2 {
   margin: 20px 0px;
 }
 
+/* Fixed styles for each section :not(img & footer) 
+- Some styles are also uses for another sections, with diffirent classes / ids */
 #about,
 #skill,
 .work-info,
@@ -108,6 +118,7 @@ nav > h2 {
   width: 100%;
   height: auto;
 }
+
 /* About */
 .about-container,
 .skill-client-container {
@@ -124,7 +135,6 @@ nav > h2 {
   padding-right: 10px;
   border-right: var(--border);
 }
-
 .about-me {
   flex-basis: 40%;
   position: relative;
@@ -189,7 +199,6 @@ nav > h2 {
   justify-content: center;
   gap: 30px;
 }
-
 .work-info {
   font-size: 3.6vw;
   display: flex;
@@ -212,14 +221,6 @@ nav > h2 {
 .skills-clients p {
   min-height: 160px;
 }
-p {
-  padding: 8px 0px 15px 0px;
-  font-size: var(--font-size);
-  opacity: 0.8;
-  letter-spacing: 1.1px;
-  line-height: 130%;
-}
-
 .design-tag,
 .design-year-tag {
   background-color: var(--secondary-color);
@@ -232,6 +233,7 @@ p {
   font-weight: 600;
   line-height: 100%;
 }
+
 /* Client */
 .client-container {
   border-top: var(--border);
@@ -304,12 +306,13 @@ footer {
   justify-content: center;
   align-items: center;
 }
-.copy-text {
-  font-size: calc(12px + 0.390625vw);
-
+.copy-right-text {
+  font-size: calc(11px + 0.390625vw);
 }
-/* Responsive Screen */
+
+/* Responsive Screen. - Target: max-width: 768px  */
 @media screen and (max-width: 768px) {
+  /* Home */
   #home > h1 {
     letter-spacing: -2px;
     line-height: 100%;
@@ -327,6 +330,8 @@ footer {
   .img-container {
     height: 400px;
   }
+
+  /* About */
   .about-container {
     flex-direction: column-reverse;
   }
@@ -337,7 +342,6 @@ footer {
     border-right: none;
     width: 100%;
   }
-
   .about-me {
     font-size: 5vw;
     margin-bottom: 10px;
@@ -349,11 +353,16 @@ footer {
   li img {
     width: 40px;
   }
+
+  /* Skills */
   .skill-client-container {
     flex-direction: column;
     flex-wrap: wrap;
     gap: 20px;
   }
+  .skills-clients p {
+    min-height: 100%;
+  }
   .skills-clients {
     font-size: 4vw;
   }
@@ -391,8 +400,10 @@ footer {
     font-weight: 600;
     padding: 10px 15px;
   }
-  .skills-clients p {
-    min-height: 100%;
+
+  /* Footer */
+  .footer-heading h1 {
+    font-size: calc(60px + 0.390625vw);
   }
   .footer-nav-items {
     flex-direction: column;
@@ -405,6 +416,7 @@ footer {
   }
 }
 
+/* Target: max-width: 350px */
 @media screen and (max-width: 350px) {
   #home > h1 {
     letter-spacing: 0px;