Updated links on products details and added main.js to vendor page (m…

…bianou-bradon#18) * Setting repository by installing Tailwindcss and other dependencies * Adjusted the path to the tailwindcss files and tested the configuration * testing tailwindcss * added assets folder (mbianou-bradon#3) * Creating branch for home page creation * initial commit of signup and and sign in pages. body section of sign up page done * body section of login page done * Changed title of sign up page. fix errors on attribute values in sign up form * Applied transition and animation effects on sign up form * Added transition and animation effects to login form * Created different buttons for 3rd party login and sign up for large and small screen sizes * Built the all the different sections of the Home page and putted the appropriate colors and font size * Added some new styling(selection attribute) to the advert card * 01 ex4 login (mbianou-bradon#4) * initial commit of signup and and sign in pages. body section of sign up page done * body section of login page done * Changed title of sign up page. fix errors on attribute values in sign up form * Applied transition and animation effects on sign up form * Added transition and animation effects to login form * Created different buttons for 3rd party login and sign up for large and small screen sizes * 02 ex4 create product form (mbianou-bradon#5) * Setting repository by installing Tailwindcss and other dependencies (#1) * Setting repository by installing Tailwindcss and other dependencies * Adjusted the path to the tailwindcss files and tested the configuration * testing tailwindcss * Dev (mbianou-bradon#2) * Setting repository by installing Tailwindcss and other dependencies * Adjusted the path to the tailwindcss files and tested the configuration * testing tailwindcss * Product creation form complete, @tailwind/forms page installed * Completeed the create product form Co-authored-by: mbianou-bradon <[email protected]> * Home Page completed * Home Page Completed * 03 ex4 create product detail page (mbianou-bradon#7) * Setting repository by installing Tailwindcss and other dependencies (#1) * Setting repository by installing Tailwindcss and other dependencies * Adjusted the path to the tailwindcss files and tested the configuration * testing tailwindcss * Dev (mbianou-bradon#2) * Setting repository by installing Tailwindcss and other dependencies * Adjusted the path to the tailwindcss files and tested the configuration * testing tailwindcss * Product details completed * .gitignore now working * .gitignore now working * .gitignore now working Co-authored-by: mbianou-bradon <[email protected]> * Cleared cache to remove main.css * Cleared cache to remove main.css * navbar integrated/customized for sign up and login pages * Added the header and footer to create_product page product_details page * Fixed the search bar * Intergrated/customized footer for signup page. Added background gradient to body * Integrated and customized footer for login page. Added gradient to body. * Updated background images on login and singup pages * Adjusted Nav-bar, Advert-card, and footer and linked different pages * Adjusted Nav-bar, advert card, and footer. Also Linked the different pages * Cleared cache to remove main.css * Adjusted the link to different pages * Added related products to product details page * Added Sell with me Button * Changed the product details * Added the Seller's profile page (mbianou-bradon#12) * Added header and footer to the Seller's profile page * Changed the background of the products section of seller's profile to apps section background * Dev (mbianou-bradon#13) * Added create product button * Added ring to product forms and restricted add photo input to take videos/images only * Dev (mbianou-bradon#14) * Added create product button * Added ring to product forms and restricted add photo input to take videos/images only * Fixed the different links on Nav-bar and Links to vendor Profile * Added icon to the title page of vendor_profile and Scroll-smooth attr * Login and Sign up changes:Removed background, update colors, re-designed forms (mbianou-bradon#11) * Build the project for deployment * Dev (mbianou-bradon#16) * Added create product button * Added ring to product forms and restricted add photo input to take videos/images only * Resolved button spacing on mobile, added edit/delete buttons on products in Seller's profile * Added links to vendor pages and adjust Nav search bar on Mobile Screen * Added main.js to Vendor_profile page Co-authored-by: sambacarlson <[email protected]> Co-authored-by: carlson <[email protected]> Co-authored-by: KIMBOH LOVETTE <[email protected]> Co-authored-by: KIMBOH LOVETTE <[email protected]>
Kimbohlovette · Dec 2, 2022 · 7b32205 · 7b32205
1 parent 0906800
commit 7b32205
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 42 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,9 @@
                 <div class="px-2">
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg>
                 </div>
-               <input class="input-btn w-80 py-1" type="text" placeholder="what would you like for dinner tonight?" >
+
+               <input class="input-btn w-80 min-w-0 py-1" type="text" placeholder="what would you like for dinner tonight?" >
+
             </div>
 
             <ul class="hidden lg:flex gap-10">
@@ -42,7 +44,9 @@
             <!-- Nav-bar for mobile device -->
             <div class="hidden bg-emerald-500 w-[95%] max-h-fit rounded-sm z-10 absolute top-0 right-4 p-2 " id="navBarMobile">
 
-                <div class=" bg-white p-4 w-full h-[80%] relative">
+
+                <div class=" bg-white p-4 w-full h-auto relative">
+
                     <div class="right-0 absolute text-5xl text-emerald-500">
                         <!-- Cross icon -->
                         <svg id="closeMenu" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275q-.425 0-.7-.275q-.275-.275-.275-.7q0-.425.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7q0-.425.275-.7q.275-.275.7-.275q.425 0 .7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275q.425 0 .7.275q.275.275.275.7q0 .425-.275.7L13.4 12l4.9 4.9q.275.275.275.7q0 .425-.275.7q-.275.275-.7.275q-.425 0-.7-.275Z"/></svg>
@@ -52,7 +56,9 @@
                         <div class="px-2">
                             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg>
                         </div>
-                        <input class="input-btn w-80 p-0" type="text" placeholder="what would you like for dinner tonight?">
+
+                        <input class="input-btn w-80 min-w-0 p-0" type="text" placeholder="what would you like for dinner tonight?">
+
                     </div>
 
                     <ul class="flex flex-col gap-8">
@@ -659,7 +665,9 @@ <h2 class="text-2xl font-bold mb-2">Subscribe to the newsletter</h2>
                     </div>
                     <div class="flex items-center flex-wrap gap-4">
                         <div class="bg-white border px-5 py-1 rounded-md">
-                            <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn">
+
+                            <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn min-w-0">
+
                         </div>
                         <a href="" class="btn">Subscribe</a>
                     </div>

diff --git a/public/login.html b/public/login.html
@@ -44,7 +44,8 @@
 
             <div class="hidden bg-emerald-500 w-full max-h-fit rounded-sm z-10 absolute top-0 right-4 p-2" id="navBarMobile">
 
-                <div class="bg-white p-4 w-full h-[80%] relative">
+                <div class="bg-white p-4 w-full h-auto relative">
+
                     <div class="right-4 absolute text-5xl text-emerald-500">
                         <svg id="closeMenu" xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275q-.425 0-.7-.275q-.275-.275-.275-.7q0-.425.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7q0-.425.275-.7q.275-.275.7-.275q.425 0 .7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275q.425 0 .7.275q.275.275.275.7q0 .425-.275.7L13.4 12l4.9 4.9q.275.275.275.7q0 .425-.275.7q-.275.275-.7.275q-.425 0-.7-.275Z"/></svg>
                     </div>
@@ -98,7 +99,9 @@ <h2 class="text-2xl font-bold mb-2">Subscribe to the newsletter</h2>
                         </div>
                         <div class="flex items-center flex-wrap gap-4">
                             <div class="bg-white border px-5 py-1 rounded-md">
-                                <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn">
+
+                                <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn min-w-0">
+
                             </div>
                             <a href="" class="btn">Subscribe</a>
                         </div>

diff --git a/public/main.css b/public/main.css
@@ -860,11 +860,18 @@ select {
   margin-right: 1rem;
 }
 
+.my-16 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
+
 .my-16 {
   margin-top: 4rem;
   margin-bottom: 4rem;
@@ -1110,6 +1117,7 @@ select {
   justify-content: flex-start;
 }
 
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -2172,6 +2180,12 @@ select {
     padding-right: 2rem;
   }
 
+  .md\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+
   .md\:px-14 {
     padding-left: 3.5rem;
     padding-right: 3.5rem;
@@ -2182,6 +2196,7 @@ select {
     padding-bottom: 1rem;
   }
 
+
   .md\:px-16 {
     padding-left: 4rem;
     padding-right: 4rem;
@@ -2269,6 +2284,7 @@ select {
     padding-right: 16rem;
   }
 
+
   .\32xl\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;

diff --git a/public/product_details.html b/public/product_details.html
@@ -24,7 +24,9 @@
                 <div class="px-2 text-[16px]">
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg>
                 </div>
-                <input class="input-btn w-80 py-1" type="text" placeholder="what would you like for dinner tonight?">
+
+                <input class="input-btn w-80 min-w-0 py-1" type="text" placeholder="what would you like for dinner tonight?">
+
             </div>
 
             <ul class="hidden lg:flex gap-10">
@@ -41,15 +43,17 @@
 
             <div class="hidden bg-emerald-500 w-[95%] max-h-fit rounded-sm z-10 absolute top-0 right-4 p-2" id="navBarMobile">
 
-                <div class=" bg-white p-4 w-full h-[80%] relative">
+
+                <div class=" bg-white p-4 w-full h-auto relative">
                     <div class="right-0 absolute text-5xl text-emerald-500">
                         <svg id="closeMenu" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275q-.425 0-.7-.275q-.275-.275-.275-.7q0-.425.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7q0-.425.275-.7q.275-.275.7-.275q.425 0 .7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275q.425 0 .7.275q.275.275.275.7q0 .425-.275.7L13.4 12l4.9 4.9q.275.275.275.7q0 .425-.275.7q-.275.275-.7.275q-.425 0-.7-.275Z"/></svg>
                     </div>
-                    <div class="text-[12px] text-gray-400 flex items-center gap-1 bg-gray-200 rounded-xl ring-1 ring-offset-2 focus:ring-emerald-400 drop-shadow px-4 py-1 mt-14 mb-4">
+                    <div class="text-[12px] text-gray-400 flex items-center gap-1 bg-gray-200 rounded-xl ring-1 ring-offset-2 focus:ring-emerald-400 drop-shadow px-4 mt-14 mb-4">
                         <div class="px-2 text-sm">
                             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg>
                         </div>
-                        <input class="input-btn w-80" type="text" placeholder="what would you like for dinner tonight?">
+                        <input class="input-btn w-80 min-w-0" type="text" placeholder="what would you like for dinner tonight?">
+
                     </div>
 
                     <ul class="flex flex-col gap-8">
@@ -153,12 +157,15 @@ <h2>Fresh Tomatoes</h2>
 
 
                 </div>
-                <div class="flex items-center pt-2">
-                    <div class="mr-1">
-                        <img src="./assets/tomatoes.jpg" alt="" class="w-3 h-auto rounded-full">
+
+                <a href="./vendor_profile.html">
+                    <div class="flex items-center pt-2">
+                        <div class="mr-1">
+                            <img src="./assets/tomatoes.jpg" alt="" class="w-3 h-auto rounded-full">
+                        </div>
+                        <p class="text-[10px] text-slate-400 font-semibold">The Great Mountaina Garden</p>
                     </div>
-                    <p class="text-[10px] text-slate-400 font-semibold">The Great Mountaina Garden</p>
-                </div>
+                </a>
 
 
             </div>
@@ -197,12 +204,15 @@ <h2>Bell Peppers</h2>
 
 
                 </div>
-                <div class="flex items-center pt-2">
-                    <div class="mr-1">
-                        <img src="./assets/tomatoes.jpg" alt="" class="w-3 h-auto rounded-full">
+
+                <a href="./vendor_profile.html">
+                    <div class="flex items-center pt-2">
+                        <div class="mr-1">
+                            <img src="./assets/tomatoes.jpg" alt="" class="w-3 h-auto rounded-full">
+                        </div>
+                        <p class="text-[10px] text-slate-400 font-semibold">The Great Mountaina Garden</p>
                     </div>
-                    <p class="text-[10px] text-slate-400 font-semibold">The Great Mountaina Garden</p>
-                </div>
+                </a>
 
 
             </div>
@@ -242,12 +252,16 @@ <h2>Juicy Carrots</h2>
 
 
                 </div>
-                <div class="flex items-center pt-2">
-                    <div class="mr-1">
-                        <img src="./assets/Bradon.jpg" alt="" class="w-3 h-auto rounded-full">
+
+               <a href="./vendor_profile.html">
+                        <div class="flex items-center pt-2">
+                        <div class="mr-1">
+                            <img src="./assets/Bradon.jpg" alt="" class="w-3 h-auto rounded-full">
+                        </div>
+                        <p class="text-[10px] text-slate-400 font-semibold">BradAgric Business</p>
                     </div>
-                    <p class="text-[10px] text-slate-400 font-semibold">BradAgric Business</p>
-                </div>
+                </a>
+
 
 
             </div>
@@ -287,12 +301,16 @@ <h2>Plantain</h2>
 
 
                 </div>
-                <div class="flex items-center pt-2">
-                    <div class="mr-1">
-                        <img src="./assets/Bradon.jpg" alt="" class="w-3 h-auto rounded-full">
+
+                <a href="./vendor_profile.html">
+                        <div class="flex items-center pt-2">
+                        <div class="mr-1">
+                            <img src="./assets/Bradon.jpg" alt="" class="w-3 h-auto rounded-full">
+                        </div>
+                        <p class="text-[10px] text-slate-400 font-semibold">BradAgric Business</p>
                     </div>
-                    <p class="text-[10px] text-slate-400 font-semibold">BradAgric Business</p>
-                </div>
+                </a>
+
 
 
             </div>
@@ -310,7 +328,9 @@ <h2 class="text-2xl font-bold mb-2">Subscribe to the newsletter</h2>
                         </div>
                         <div class="flex items-center flex-wrap gap-4">
                             <div class="bg-white border px-5 py-1 rounded-md">
-                                <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn">
+
+                                <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn min-w-0">
+
                             </div>
                             <a href="" class="btn">Subscribe</a>
                         </div>

diff --git a/public/product_form.html b/public/product_form.html
@@ -24,7 +24,9 @@
                 <div class="px-2 text-[16px]">
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg>
                 </div>
-                <input class="input-btn w-80 py-1" type="text" placeholder="what would you like for dinner tonight?">
+
+                <input class="input-btn w-80 min-w-0 py-1" type="text" placeholder="what would you like for dinner tonight?">
+
             </div>
 
             <ul class="hidden lg:flex gap-10">
@@ -41,15 +43,17 @@
 
             <div class="hidden bg-emerald-500 w-[95%] max-h-fit rounded-sm z-10 absolute top-0 right-4 p-2" id="navBarMobile">
 
-                <div class=" bg-white p-4 w-full h-[80%] relative">
+
+                <div class=" bg-white p-4 w-full h-auto relative">
                     <div class="right-0 absolute text-5xl text-emerald-500">
                         <svg id="closeMenu" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275q-.425 0-.7-.275q-.275-.275-.275-.7q0-.425.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7q0-.425.275-.7q.275-.275.7-.275q.425 0 .7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275q.425 0 .7.275q.275.275.275.7q0 .425-.275.7L13.4 12l4.9 4.9q.275.275.275.7q0 .425-.275.7q-.275.275-.7.275q-.425 0-.7-.275Z"/></svg>
                     </div>
-                    <div class="text-[12px] text-gray-400 flex items-center gap-1 bg-gray-200 rounded-xl ring-2 ring-offset-2 focus:ring-emerald-400 drop-shadow px-4 py-2 mt-14 mb-4">
+                    <div class="text-[12px] text-gray-400 flex items-center gap-1 bg-gray-200 rounded-xl ring-2 ring-offset-2 ring-emerald-400 drop-shadow px-4 mt-14 mb-4">
                         <div class="px-2 text-[16px]">
                             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075q-.35.975-.95 1.725l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275q-.425 0-.7-.275ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5Q7.625 5 6.312 6.312Q5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z"/></svg>
                         </div>
-                        <input class="input-btn w-80 py-1" type="text" placeholder="what would you like for dinner tonight?">
+                        <input class="input-btn w-80 min-w-0 py-1" type="text" placeholder="what would you like for dinner tonight?">
+
                     </div>
 
                     <ul class="flex flex-col gap-8">

diff --git a/public/signup.html b/public/signup.html
@@ -102,7 +102,9 @@ <h2 class="text-2xl font-bold mb-2">Subscribe to the newsletter</h2>
                         </div>
                         <div class="flex items-center flex-wrap gap-4">
                             <div class="bg-white border px-5 py-1 rounded-md">
-                                <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn">
+
+                                <input type="email" name="email" id="email" placeholder="Enter your email" class="input-btn min-w-0">
+
                             </div>
                             <a href="" class="btn">Subscribe</a>
                         </div>