implemented mobile responsiveness

PreciousAma · Jun 11, 2021 · 114bc2c · 114bc2c
1 parent 030c0c5
commit 114bc2c
Show file tree

Hide file tree

Showing 21 changed files with 335 additions and 96 deletions.
diff --git a/2.PNG b/2.PNG
diff --git a/3.PNG b/3.PNG
diff --git a/Images/african-5973524_1920.jpg b/Images/african-5973524_1920.jpg
diff --git a/Images/bazaar-4857006_1920.jpg b/Images/bazaar-4857006_1920.jpg
diff --git a/Images/farm-market-potatoes-3788851_1920.jpg b/Images/farm-market-potatoes-3788851_1920.jpg
diff --git a/Images/fruits-1114060_1920.jpg b/Images/fruits-1114060_1920.jpg
diff --git a/Images/grain-563128_1280.jpg b/Images/grain-563128_1280.jpg
diff --git a/Images/grapes-5870021_1920.jpg b/Images/grapes-5870021_1920.jpg
diff --git a/Images/man-1866559_1920.jpg b/Images/man-1866559_1920.jpg
diff --git a/Images/market-1558658_1920.jpg b/Images/market-1558658_1920.jpg
diff --git a/Images/market-601580_1920.jpg b/Images/market-601580_1920.jpg
diff --git a/Images/nuts-73914_1920.jpg b/Images/nuts-73914_1920.jpg
diff --git a/Images/peas-633948_1920.jpg b/Images/peas-633948_1920.jpg
diff --git a/Images/vegetables-140917_1280.jpg b/Images/vegetables-140917_1280.jpg
diff --git a/Images/vegetables-1584999_1920.jpg b/Images/vegetables-1584999_1920.jpg
diff --git a/Images/vegetables-790022_1920.jpg b/Images/vegetables-790022_1920.jpg
diff --git a/farm2table.PNG b/farm2table.PNG
diff --git a/farm2table.css b/farm2table.css
@@ -1,63 +1,126 @@
-@media only screen and (max-height: 768px) {
-      body {
-         font-size: 15px;
-      }
-}
 * {
     margin: 0;
+    padding: 0;
 }
+
+body{
+    background-color: lavender;
+    font-size: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 header {
-    display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: rgb(39, 87, 39);
     padding: 10px;
+    z-index: 1;
 }
+
 nav a:visited,
 nav a:link {
     color: white;
     text-decoration: none;
 }
-nav > ul {
-    display: inline;
+nav .navbar {
+    display: flex;
+    flex-wrap: wrap;
     padding: 0;
 }
-nav > ul > li {
+
+.navbar li {
     display: inline-block;
     list-style: none;
-    margin: 0 5px 0 5px;
 }
-.navbar > li{
-    padding-left: 80px;
-    padding-right: 80px;
+.navbar > li:not(:last-child){
+    margin-right: 20px;
+}
+
+.aside {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    width: 100%;
+    max-width: 100px;
 }
+
 #logo {
     border-radius: 50%;
-    max-height: 15%;
-    max-width: 15%;
-    margin-top: 50px;
+    height: auto;
+    width: 100%;
     margin-left: 5px;
-    margin-bottom: 5px;
-    position: absolute;
-    top: 0;
-    left: 0;
+    margin-bottom: 5px; 
 }
 
-body{
-    background-color: lavender;
-
-}
 main {
-    font-size: 20px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    padding-left: 180px;
-    padding-right: 180px;
-    margin-top: 200px;
+    padding-left: 24px;
+    padding-right: 24px;
+    margin-top: 120px;
+    line-height: 1.5;
     color: forestgreen;
 }
 
+.container {
+    position: relative;
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 30px 0;
+}
+.container .card {
+    position: relative;
+    max-width:290px;
+    height: 110px;
+    background: #ffffff;
+    margin: 30px 10px;
+    padding: 20px 15px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 5px 100px rgba(0,0,0,0.5);
+}
+
+.container .card:hover{
+    height: 270px;
+}
+.card .imgBx{
+    position: relative;
+    width: 250px;
+    height: 260px;
+    top: -60px;
+    left: 20px;
+    z-index: 0;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
+    transition: 0.3s ease-in-out;
+}
+
+.container .card .imgBx img {
+    max-width: 100%;
+    border-radius: 10px;
+}
+
+.container .card .content {
+    position: relative;
+    margin-top: -140px;
+    padding: 10px 15px;
+    text-align: center;
+    color: #228B22;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.3s ease-in-out;
+}
+
+.container .card:hover .content {
+    visibility: visible;
+    opacity: 1;
+    margin-top: -40px;
+    transition-delay: 0.3s;
+}
+
+
 .join {
     text-align: center;
 
@@ -69,8 +132,8 @@ main {
     font-size: 18px;
     border-radius: 25px;
     text-align: center;
-    padding: 40px;
-    width: 400px;
+    padding: 40px 10px;
+    max-width: 400px;
     color: rgb(17, 17, 17);
     margin: 0 auto;
 }
@@ -118,12 +181,20 @@ footer {
       background-color: rgb(39, 87, 39);
       color: gainsboro;
       margin-top: 50px;
+      padding: 20px 24px;
+}
+
+footer .footer-text {
+    font-size: 14px;
+    line-height: 1.5;
 }
 footer a:visited,
 footer a:link {
       color: white;
       text-decoration: none;
 }
 #logodesign {
-      margin-left: 1150px;
-}
+      display:inline-block;
+      font-size: 10px;
+      margin-top: 10px;
+}
diff --git a/index.html b/index.html
@@ -49,7 +49,6 @@
   </script>
 </head>
 <header>
-  <div>
     <nav id="navlink">
       <ul class="navbar">
         <li>
@@ -69,19 +68,16 @@
         </li>
       </ul>
     </nav>
-  </div>
-
 </header>
 
 <body>
-  <aside>
+  <aside class="aside">
     <img id="logo" src="https://s3.amazonaws.com/logosnap/logos/2021/Jun/original-4361-60be57aa58e79wm.png"
       alt="farm2table_logo">
-    <p id="slogan">The World's Farmacy</p>
   </aside>
   <main>
 
-    <h1 id="welcome">Welcome!</h1>
+    <h1 id="welcome" class="section-title">Welcome!</h1>
     <p>
       Once again, welcome to Farm2Table, the "farmacy" you can trust! We are glad to have you here. At
       Farm2Table, we help farmers showcase their produce. As a farmer,
@@ -93,7 +89,7 @@ <h1 id="welcome">Welcome!</h1>
     <br>
     <br>
 
-    <h1 id="about">About</h1>
+    <h1 id="about" class="section-title">About</h1>
     <p>
       According to the UN, the world is not on track to achieve Zero Hunger
       by 2030. 840 million will be affected by world hunger - a rise from
@@ -109,63 +105,97 @@ <h1 id="about">About</h1>
     <br>
     <br>
 
-    <h1 id="general_market">General Market</h1>
-    <h3>Grains</h3><br>
-    <img
-      src="https://www.world-grain.com/ext/resources/Article-Images/2020/02/Focus-on-Uzbekistan_wholegrains_shutterstock_Nov-2014_E.jpg?t=1580745162&width=1080"
-      width="400px" alt="Grains">
-    <p>Our farmers deal in grains ranging from rice, millets, maize, soya.</p><br><br>
-    <h3>Vegetables</h3><br>
-    <img
-      src="https://previews.123rf.com/images/merc67/merc671411/merc67141100301/33934404-farm-fresh-vegetables-on-table.jpg"
-      width="400px" alt="Vegetables">
-    <p>Also avaialble are varieties of fresh vegetables.</p><br><br>
-    <h3>Tubers</h3><br>
-    <img src="https://image.shutterstock.com/image-photo/tuber-crop-260nw-347346557.jpg" alt="Tubers"><br>
-    <p>What are lawyers if they are not called tuber?</p><br><br>
-    <h3>Fruits</h3><br>
-    <img src="https://i.pinimg.com/originals/4d/9a/71/4d9a712dfeadd3cb26acd602b643aa10.jpg" width="400px"
-      alt="Fruits"><br>
-    <p>Our very good source of vitamins are here!</p>
-    <br>
-    <br>
-
-    <div class="join">
-      <h1 id="join_us">Join Us</h1>
-      <p>If you want to be a part of this wonderful market, register with us</p><br>
-        <form onsubmit="return validate()" action="welcome.html" class="form">
-          <input id="name" type="text" placeholder="Enter Your Name"><br>
-          <input id="mail" type="email" placeholder="Enter your Email"><br>
-          <input id="pass" type="password" placeholder="Choose a password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-            title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
-            required><br>
-          <input id="address" type="adress" placeholder="Enter Your Address"><br>
-          <div id="message">
-            <p class="text">Password must contain the following: A lowercase letter, a capital(uppercase)letter, a number, Minimum 8 characters</p>
+    <div>
+      <h1 id="general_market" class="section-title">General Market</h1>
+      <div class="container">
+        <div class="card">
+          <div class="imgBx">
+            <img
+              src="https://www.world-grain.com/ext/resources/Article-Images/2020/02/Focus-on-Uzbekistan_wholegrains_shutterstock_Nov-2014_E.jpg?t=1580745162&width=1080"
+              width="400px" alt="Grains">
+          </div>
+          <div class="content">
+            <h3>Grains</h3><br>
+            <p>Our farmers deal in grains ranging from rice, millets, maize, soya.</p><br><br>
           </div>
-          <div>
-            <!--Take note of the DOM Manipulation in this section-->
-            <p><strong>Have you used any online platform to advertise your produce?</strong></p>
-            <label id="radio" for="yes" class="option">Yes</label>
-            <input class="radio" id="rdbtn1" name="group" type="radio" value="yes">
-            <!--The id was included for the getElementById-->
-            <label for="no" class="option">No</label>
-            <input class="radio" id="rdbtn2" name="group" type="radio" value="no"><br><br>
-            <!--that name attribute is what prevents the user from being able to click on the two buttons since they are the same. If the names are different or are not there, it would be possible to click both-->
+        </div>
+
+        <div class="card">
+          <div class="imgBx">
+
+            <img
+              src="https://previews.123rf.com/images/merc67/merc671411/merc67141100301/33934404-farm-fresh-vegetables-on-table.jpg"
+              width="400px" alt="Vegetables">
           </div>
-          <div>
-            <p><strong>What kind of crop do you grow?</strong></p>
-            <label class="option" for="grains">Grains</label>
-            <input type="checkbox" value="grains"><br>
-            <label class="option" for="vegetables">Vegetables</label>
-            <input id="vegetables" type="checkbox" value="vegetables"> <br>
-            <label class="option" for="tubers">Tubers</label>
-            <input type="checkbox" value="tubers"><br>
-            <label class="option" for="fruits">Fruits</label>
-            <input type="checkbox" value="fruits">
+          <div class="content">
+            <h3>Vegetables</h3><br>
+            <p>Also avaialble are varieties of fresh vegetables.</p><br><br>
           </div>
-          <button onclick="return ftn1() " type="submit" id="btn" class="btn"><strong>Submit</strong></button>
-        </form>
+        </div>
+
+        <div class="card">
+          <div class="imgBx">
+
+            <img src="https://image.shutterstock.com/image-photo/tuber-crop-260nw-347346557.jpg" alt="Tubers"><br>
+          </div>
+          <div class="content">
+            <h3>Tubers</h3><br>
+            <p>What are lawyers if they are not called tuber?</p><br><br>
+          </div>
+        </div>
+
+        <div class="card">
+          <div class="imgBx">
+            <img src="https://i.pinimg.com/originals/4d/9a/71/4d9a712dfeadd3cb26acd602b643aa10.jpg" width="400px"
+              alt="Fruits"><br>
+          </div>
+          <div class="content">
+            <h3>Fruits</h3><br>
+            <p>Our very good source of vitamins are here!</p>
+            <br>
+            <br>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="join">
+      <h1 id="join_us"nclass="section-title">Join Us</h1>
+      <p>If you want to be a part of this wonderful market, register with us</p><br>
+      <form onsubmit="return validate()" action="welcome.html" class="form">
+        <input id="name" type="text" placeholder="Enter Your Name"><br>
+        <input id="mail" type="email" placeholder="Enter your Email"><br>
+        <input id="pass" type="password" placeholder="Choose a password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+          title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
+          required><br>
+        <input id="address" type="adress" placeholder="Enter Your Address"><br>
+        <div id="message">
+          <p class="text">Password must contain the following: A lowercase letter, a capital(uppercase)letter, a number,
+            Minimum 8 characters</p>
+        </div>
+        <div>
+          <!--Take note of the DOM Manipulation in this section-->
+          <p><strong>Have you used any online platform to advertise your produce?</strong></p>
+          <label id="radio" for="yes" class="option">Yes</label>
+          <input class="radio" id="rdbtn1" name="group" type="radio" value="yes">
+          <!--The id was included for the getElementById-->
+          <label for="no" class="option">No</label>
+          <input class="radio" id="rdbtn2" name="group" type="radio" value="no"><br><br>
+          <!--that name attribute is what prevents the user from being able to click on the two buttons since they are the same. If the names are different or are not there, it would be possible to click both-->
+        </div>
+        <div>
+          <p><strong>What kind of crop do you grow?</strong></p>
+          <label class="option" for="grains">Grains</label>
+          <input type="checkbox" value="grains"><br>
+          <label class="option" for="vegetables">Vegetables</label>
+          <input id="vegetables" type="checkbox" value="vegetables"> <br>
+          <label class="option" for="tubers">Tubers</label>
+          <input type="checkbox" value="tubers"><br>
+          <label class="option" for="fruits">Fruits</label>
+          <input type="checkbox" value="fruits">
+        </div>
+        <button onclick="return ftn1() " type="submit" id="btn" class="btn"><strong>Submit</strong></button>
+      </form>
     </div>
 
   </main>
@@ -193,11 +223,11 @@ <h1 id="join_us">Join Us</h1>
         </ul>
     </nav><br> -->
   </div>
-  <p style="text-align: center;">You can contact us at <br>Tel.No: +254 456 7683 388596.<br>Address: Head Office at 9.
+  <p class="footer-text">You can contact us at <br>Tel.No: +254 456 7683 388596.<br>Address: Head Office at 9.
     Freedom Park, Gigiri, Nairobi, Kenya; Branch Office at 10, Allen Avenue, Ikeja, Lagos.
   </p>
 
-  <a id="logodesign" href=null>Logo source Logodesign.net</a>
+  <span id="logodesign">Programming queens-Team - Copyright &copy; 2021</span>
 </footer>
 
 </html>