Working on the homepage responsiveness!

izicodes · May 18, 2023 · b887f58 · b887f58
1 parent 7c31e47
commit b887f58
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 29 deletions.
diff --git a/assignments/level1/hellovariable.html b/assignments/level1/hellovariable.html
@@ -23,32 +23,14 @@
   </head>
   <body>
     <i class="fas fa-arrow-up scroll-arrow" id="goUpIcon"></i>
-    <!-- <nav id="myNav">
-      <a href="../../index.html"><p class="nav-title">C# Saga</p></a>
-      <div class="menu-items">
-        <a href="../../index.html">Home</a>
-        <a href="#">Assignments</a>
-        <a href="#">About</a>
-        <a href="#">Contact</a>
-      </div>
-      <button
-        type="button"
-        id="hamburgerIcon"
-        title="menu button"
-        class="menu-button"
-      >
-        <i class="fa-solid fa-bars"></i>
-      </button>
-    </nav> -->
-
     <section class="header">
       <a href="../../index.html" class="nav-title">C# Saga</a>
       <nav class="navbar">
         <ul class="nav-menu">
           <li>
             <a href="../../index.html" class="nav-title">C# Saga</a>
           </li>
-          
+
           <li>
             <a href="">Home</a>
           </li>

diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
       referrerpolicy="no-referrer"
     />
     <link rel="stylesheet" href="src/root.css" />
-    <link rel="stylesheet" href="src/style.css" />
+    <link rel="stylesheet" href="src/index.css" />
     <title>Home | CSharpSaga</title>
   </head>
   <body>
@@ -72,9 +72,12 @@ <h1>Test your C# Knowledge!</h1>
       <div class="contentWrapper">
         <section id="featured-assignments">
           <h2>Featured Homework Assignments</h2>
-          <p id="featured-text">
+          <p class="featured-text">
             Unleash your coding potential with our handpicked selection of
-            featured homework assignments. <br />Each assignment is meticulously
+            featured homework assignments.
+          </p>
+          <p class="featured-text">
+            Each assignment is meticulously
             designed to challenge and inspire beginner programmers like you.
           </p>
           <div class="assignment-cards">

diff --git a/src/style.css → src/index.css b/src/style.css → src/index.css
@@ -36,6 +36,7 @@
   font-family: "Dela Gothic One", cursive;
   font-size: 2.5em;
   color: white;
+  text-align: center;
   text-shadow: -3px 3px 1px var(--leaf);
 }
 .hero-text-container p {
@@ -78,7 +79,8 @@
   transition: 400ms;
   cursor: pointer;
 }
-#go-down-icon:hover {
+#go-down-icon:hover,
+#go-down-icon:active {
   transform: translateX(-50%) translateY(20px);
 }
 
@@ -113,10 +115,10 @@ main {
   font-size: 2em;
   text-shadow: -3px 3px 1px var(--peony);
 }
-#featured-text {
+.featured-text {
   text-align: center;
   font-size: 1.1em;
-  margin: 25px 0;
+  margin: 15px 0;
 }
 
 /* ----------------------- */
@@ -294,7 +296,7 @@ main {
     gap: 25px;
   }
   .hero-text-container h1 {
-    font-size: 1.8em;
+    font-size: 1.6em;
   }
   .hero-text-container p {
     font-size: 0.9em;
@@ -304,10 +306,36 @@ main {
     padding: 10px 13px;
     font-size: 0.9em;
   }
+
+  /* ------------- */
+  #featured-assignments {
+    height: 250vh;
+    border-radius: 30px;
+    align-items: center;
+    justify-content: center;
+  }
+  #featured-assignments h2:first-child {
+    font-size: 1.5em;
+  }
+  .featured-text {
+    text-align: center;
+    font-size: 17.6px;
+    margin: 10px 0;
+    width: 80%;
+    text-align: center;
+  }
+
+  /* --------------------- */
+  .assignment-cards {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 55px;
+    margin: 30px 0;
+  }
 }
 
 /* Styles for screen sizes up to 600 pixels wide */
-@media (max-width: 660px) {
+@media (max-width: 850px) {
   #hero-section {
     display: grid;
     grid-template-areas:
@@ -318,8 +346,8 @@ main {
     grid-area: text;
     border-radius: 0px;
   }
-  .hero-image-container {
-    grid-area: picture;
+  .hero-image-container img {
+    width: 55%;
   }
   .hero-text-container h1 {
     text-align: center;
@@ -332,12 +360,60 @@ main {
   }
 
   /* ------------------ */
+  .contentWrapper {
+    width: 100%;
+  }
+
+  #featured-assignments,
+  #how-it-works-section {
+    height: 150vh;
+    border-radius: 30px;
+    align-items: center;
+    justify-content: center;
+  }
+  #featured-assignments h2:first-child {
+    font-size: 2em;
+    margin-bottom: 20px;
+  }
+  .featured-text {
+    text-align: center;
+    font-size: 17.6px;
+    margin: 10px 0;
+    width: 80%;
+    text-align: center;
+  }
+
+  /* --------------------- */
+  .assignment-cards {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 55px;
+    margin: 30px 0;
+  }
+
+  /* ----------------------- */
+  #how-it-works-section {
+    height: 120vh;
+  }
+  .steps-card {
+    width: 100%;
+  }
 }
 
 /* Styles for screen sizes between 601px and 900px */
 @media (min-width: 601px) and (max-width: 900px) {
+  .hero-text-container p {
+    width: 75%;
+  }
 }
 
 /* Styles for screen sizes above 900 pixels wide */
 @media (min-width: 901px) and (max-width: 1200px) {
+  .hero-text-container h1 {
+    text-align: center;
+    font-size: 1.8em;
+  }
+  .hero-text-container p {
+    width: 75%;
+  }
 }