finish it

Dramex · Oct 9, 2021 · b721f26 · b721f26
1 parent a6e6109
commit b721f26
Show file tree

Hide file tree

Showing 20 changed files with 200 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -3,14 +3,14 @@ A basic store.
 
 ## HTML
 - Create a homepage for your store. ✅
-- Create at least 2 other pages (this could include pages such as “about us”, “meet the team”, “shipping details”, etc). 
+- Create at least 2 other pages (this could include pages such as “about us”, “meet the team”, “shipping details”, etc). ✅ 
 - Additionally, your site must have a catalogue page which lists the items which are for sale. ✅
 - Your catalogue page should have at least 5 items for sale (include some details of the item). ✅
 - Within the entirety of your site, you should have the following elements:
     - At least 5 images. ✅
     - At least 3 font sizes (to help differentiate sections). ✅
     - At least 2 external links (maybe to a shipping company, or an email address). ✅
-    - At least 1 table.
+    - At least 1 table. ✅
     - At least 1 list (ordered or unordered, you can choose).  ✅
     - At least one submit button form (possibly to simulate a login - don’t worry about the functionality of this yet).  ✅
     - At least one radio button form (you could select different kinds of shipping methods to your location).  ✅
@@ -19,18 +19,18 @@ A basic store.
 
 ## CSS
 - Within the entirety of your site, you should have the following styling:
-    - Use either Grid OR flex or both of them to organize your products
-    - At least 3 font styles with different colouring effects.
-    - Padding for all images and buttons.
-    - Borders for all images and tables.
-    - Background colours/images for all pages.
-    - All tables must have customised formatting (colours, layout, etc).
-    - Center all content, with the exception of multiple row items being equally padded around the centre.
-    - All lists must be customised.
-    - Apply a colour ﬁlter to at least 2 images.
+    - Use either Grid OR flex or both of them to organize your products ✅
+    - At least 3 font styles with different colouring effects.✅
+    - Padding for all images and buttons. ✅
+    - Borders for all images and tables. ✅
+    - Background colours/images for all pages. ✅
+    - All tables must have customised formatting (colours, layout, etc). ✅
+    - Center all content, with the exception of multiple row items being equally padded around the centre. ✅
+    - All lists must be customised. ✅
+    - Apply a colour ﬁlter to at least 2 images. ✅
 
 ## Bonus
 - Clicking on an item should allow the user to see more details about the item, such as a brief description,.specifications and price
 - Animate background colours to change between different variants of colours (a bit of Googling here will help you).
-- Animate item images to expand when hovered over (or clicked on if you prefer).
-- The website should be responsive.
+- Animate item images to expand when hovered over (or clicked on if you prefer). ✅
+- The website should be responsive. ✅
diff --git a/about.html b/about.html
@@ -2,8 +2,8 @@
 <html>
     <head>
         <title>Store</title>
-       
-        <link href="./assets/style.css" rel="stylesheet" />
+
+        <link href="style.css" rel="stylesheet" />
         <!-- Bootstrap -->
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
@@ -14,7 +14,7 @@
     <body>
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
             <div class="container">
-                <a class="navbar-brand" href="#">My Store</a>
+                <a class="navbar-brand" href="#">Emad Store</a>
                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                   <span class="navbar-toggler-icon"></span>
                 </button>
@@ -24,9 +24,9 @@
                       <a class="nav-link" href="./index.html">Home</a>
                     </li>
                     <li class="nav-item">
-                      <a class="nav-link" href="./about.html">About Us</a>
+                      <a class="nav-link active" href="./about.html">About Us</a>
                     </li>
-                    <li class="nav-item active">
+                    <li class="nav-item">
                       <a class="nav-link" href="./team.html">Meet the team</a>
                     </li>
                     <li class="nav-item">
@@ -37,4 +37,4 @@
             </div>
         </nav>
     </body>
-</html>
+</html>
diff --git a/assets/style.css b/assets/style.css
diff --git a/images/background.png b/images/background.png
diff --git a/images/hoodie1.png b/images/hoodie1.png
diff --git a/images/hoodie10.jpg b/images/hoodie10.jpg
diff --git a/images/hoodie11.jpg b/images/hoodie11.jpg
diff --git a/images/hoodie12.jfif b/images/hoodie12.jfif
diff --git a/images/hoodie2.jpg b/images/hoodie2.jpg
diff --git a/images/hoodie3.png b/images/hoodie3.png
diff --git a/images/hoodie4.jpeg b/images/hoodie4.jpeg
diff --git a/images/hoodie5.jfif b/images/hoodie5.jfif
diff --git a/images/hoodie6.webp b/images/hoodie6.webp
diff --git a/images/hoodie7.jpg b/images/hoodie7.jpg
diff --git a/images/hoodie8.jpg b/images/hoodie8.jpg
diff --git a/images/hoodie9.jpg b/images/hoodie9.jpg
diff --git a/index.html b/index.html
@@ -2,8 +2,8 @@
 <html>
     <head>
         <title>Store</title>
-       
-        <link href="./assets/style.css" rel="stylesheet" />
+
+        <link href="style.css" rel="stylesheet" />
         <!-- Bootstrap -->
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
@@ -13,14 +13,14 @@
     <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container">
-            <a class="navbar-brand" href="#">My Store</a>
+            <a class="navbar-brand" href="#">Emad Store</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNavDropdown">
               <ul class="navbar-nav">
-                <li class="nav-item active">
-                  <a class="nav-link" href="./index.html">Home</a>
+                <li class="nav-item">
+                  <a class="nav-link active" href="./index.html">Home</a>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./about.html">About Us</a>
@@ -36,52 +36,14 @@
         </div>
     </nav>
 
-    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
-      <div class="carousel-indicators">
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
-        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
-      </div>
-      <div class="carousel-inner">
-        <div class="carousel-item active">
-          <img src="./images/shanghai.jpeg" class="d-block w-100" alt="...">
-          <div class="carousel-caption d-none d-md-block">
-            <h5>First slide label</h5>
-            <p>Some representative placeholder content for the first slide.</p>
-          </div>
-        </div>
-        <div class="carousel-item">
-          <img src="./images/px-beach-daylight-fun-1430675-image.jpeg" class="d-block w-100" alt="...">
-          <div class="carousel-caption d-none d-md-block">
-            <h5>Second slide label</h5>
-            <p>Some representative placeholder content for the second slide.</p>
-          </div>
-        </div>
-        <div class="carousel-item">
-          <img src="./images/image-slider-21.jpeg" class="d-block w-100" alt="...">
-          <div class="carousel-caption d-none d-md-block">
-            <h5>Third slide label</h5>
-            <p>Some representative placeholder content for the third slide.</p>
-          </div>
-        </div>
-      </div>
-      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Previous</span>
-      </button>
-      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-        <span class="visually-hidden">Next</span>
-      </button>
-    </div>
 
     <div class="container main">
 
-      <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
-        <div class="col mb-5">
+      <div class="myGrid">
+        <div>
             <div class="card h-100">
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top img-filter-1" src="./images/hoodie1.png">
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -97,12 +59,12 @@ <h5 class="fw-bolder">Fancy Product</h5>
                 </div>
             </div>
         </div>
-        <div class="col mb-5">
+        <div>
             <div class="card h-100">
                 <!-- Sale badge-->
-                <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
+                <div class="badge badge-sale text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top" src="./images/hoodie2.jpg">
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -127,12 +89,12 @@ <h5 class="fw-bolder">Special Item</h5>
                 </div>
             </div>
         </div>
-        <div class="col mb-5">
+        <div>
             <div class="card h-100">
                 <!-- Sale badge-->
-                <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
+                <div class="badge badge-sale text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top img-filter-2" src="./images/hoodie3.png" >
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -149,10 +111,10 @@ <h5 class="fw-bolder">Sale Item</h5>
                 </div>
             </div>
         </div>
-        <div class="col mb-5">
+        <div>
             <div class="card h-100">
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top" src="./images/hoodie4.jpeg" alt="...">
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -176,12 +138,12 @@ <h5 class="fw-bolder">Popular Item</h5>
                 </div>
             </div>
         </div>
-        <div class="col mb-5">
+        <div>
             <div class="card h-100">
                 <!-- Sale badge-->
-                <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
+                <div class="badge badge-sale text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top" src="./images/hoodie5.jfif" alt="...">
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -198,10 +160,10 @@ <h5 class="fw-bolder">Sale Item</h5>
                 </div>
             </div>
         </div>
-        <div class="col mb-5">
+        <div>
             <div class="card h-100">
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top" src="./images/hoodie6.webp" alt="...">
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -217,12 +179,12 @@ <h5 class="fw-bolder">Fancy Product</h5>
                 </div>
             </div>
         </div>
-        <div class="col mb-5">
+        <div>
             <div class="card h-100">
                 <!-- Sale badge-->
-                <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
+                <div class="badge badge-sale text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top" src="./images/hoodie7.jpg" alt="...">
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -248,12 +210,12 @@ <h5 class="fw-bolder">Special Item</h5>
             </div>
         </div>
 
-        <div class="col mb-5">
+        <div>
           <div class="card h-100">
               <!-- Sale badge-->
-              <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
+              <div class="badge badge-sale text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
               <!-- Product image-->
-              <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+              <img class="card-img-top" src="./images/hoodie8.jpg" alt="...">
               <!-- Product details-->
               <div class="card-body p-4">
                   <div class="text-center">
@@ -271,10 +233,10 @@ <h5 class="fw-bolder">Sale Item</h5>
           </div>
       </div>
 
-        <div class="col mb-5">
+        <div>
             <div class="card h-100">
                 <!-- Product image-->
-                <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+                <img class="card-img-top" src="./images/hoodie9.jpg" alt="...">
                 <!-- Product details-->
                 <div class="card-body p-4">
                     <div class="text-center">
@@ -299,10 +261,10 @@ <h5 class="fw-bolder">Popular Item</h5>
             </div>
         </div>
 
-        <div class="col mb-5">
+        <div>
           <div class="card h-100">
               <!-- Product image-->
-              <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+              <img class="card-img-top" src="./images/hoodie10.jpg" alt="...">
               <!-- Product details-->
               <div class="card-body p-4">
                   <div class="text-center">
@@ -327,10 +289,10 @@ <h5 class="fw-bolder">Popular Item</h5>
           </div>
       </div>
 
-      <div class="col mb-5">
+      <div>
         <div class="card h-100">
             <!-- Product image-->
-            <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+            <img class="card-img-top" src="./images/hoodie11.jpg" alt="...">
             <!-- Product details-->
             <div class="card-body p-4">
                 <div class="text-center">
@@ -355,10 +317,10 @@ <h5 class="fw-bolder">Popular Item</h5>
         </div>
     </div>
 
-    <div class="col mb-5">
+    <div>
       <div class="card h-100">
           <!-- Product image-->
-          <img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="...">
+          <img class="card-img-top" src="./images/hoodie12.jfif" alt="...">
           <!-- Product details-->
           <div class="card-body p-4">
               <div class="text-center">
@@ -422,7 +384,7 @@ <h5 class="fw-bolder">Popular Item</h5>
           </div>
           <!--Grid column-->
 
-  
+
 
 
 
@@ -432,10 +394,10 @@ <h5 class="fw-bolder">Popular Item</h5>
             <div class="form-outline mb-4">
               <input type="email" placeholder="Email address" id="form5Example2" class="form-control" />
               <div class="inline">
-                  <input type="radio" id="html" name="fav_language" value="HTML" checked>
-                  <label for="html">Promitons</label><br>
-                  <input type="radio" id="css" name="fav_language" value="CSS">
-                  <label for="css">New items</label><br>
+                  <input type="radio" id="html" name="fav_language" value="HTML" checked>
+                  <label for="html">Promitons</label>
+                  <input type="radio" id="css" name="fav_language" value="CSS">
+                  <label for="css">New items</label>
               </div>
             </div>
           </div>
@@ -498,12 +460,12 @@ <h5 class="text-uppercase">Links</h5>
 
   <!-- Copyright -->
   <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
-    © 2021 Copyright
+      © 2021 Copyright
   </div>
   <!-- Copyright -->
 
 </footer>
 <!-- Footer -->
 
     </body>
-</html>
+</html>