Dodano sklep

Prawy126 · Jan 28, 2024 · 8e2fe79 · 8e2fe79
1 parent 7bcaff4
commit 8e2fe79
Show file tree

Hide file tree

Showing 13 changed files with 301 additions and 7 deletions.
diff --git a/projekt/dostawa.html b/projekt/dostawa.html
@@ -90,7 +90,7 @@
                       </li>
                       <li><a href="#">Konto</a>
                           <ul>
-                              <li><a href="zaloguj.html">Zalogj się</a></li>
+                              <li><a href="zaloguj.html">Zaloguj się</a></li>
                               <li><a href="zarejestruj.html">Zarejestruj się</a></li>
 
                           </ul>

diff --git a/projekt/galeria.html b/projekt/galeria.html
@@ -84,7 +84,7 @@
                       </li>
                       <li><a href="#">Konto</a>
                           <ul>
-                              <li><a href="zaloguj.html">Zalogj się</a></li>
+                              <li><a href="zaloguj.html">Zaloguj się</a></li>
                               <li><a href="zarejestruj.html">Zarejestruj się</a></li>
 
                           </ul>

diff --git a/projekt/index.html b/projekt/index.html
@@ -74,7 +74,8 @@
                   <ul id="menu">
                       <li><a href="#">Strona główna</a>
                         <ul>
-                          <li><a href="index.html">Strona główna</a></li>                      
+                          <li><a href="index.html">Strona główna</a></li>
+                          <li><a href="sklep.html">Sklep</a></li>                      
                       </ul>
                       </li>
                       <li><a href="#">Galeria</a>
@@ -84,7 +85,7 @@
                       </li>
                       <li><a href="#">Konto</a>
                           <ul>
-                              <li><a href="zaloguj.html">Zalogj się</a></li>
+                              <li><a href="zaloguj.html">Zaloguj się</a></li>
                               <li><a href="zarejestruj.html">Zarejestruj się</a></li>
 
                           </ul>

diff --git a/projekt/rejestracja.css b/projekt/rejestracja.css
@@ -85,3 +85,23 @@ body{
     flex-wrap: nowrap;
     flex-direction: column;
 }
+@media (max-width: 600px) {
+    #menu-toggle {
+        display: flex;
+    }
+    #menu li ul{
+      width: 120px;
+    }
+    .prawy{
+      flex-direction: row;
+      justify-content: space-around;
+      width: 300px;
+    }
+    .search-container{
+      flex-direction: row;
+      min-width: 260px;
+      align-items: center;
+      align-content: center;
+      justify-content: center;
+    }
+  }
diff --git a/projekt/sklep.css b/projekt/sklep.css
@@ -0,0 +1,69 @@
+:root {
+    --blue-ur: #282625;
+    --white-ur: #FEFEFE;
+}
+
+body {
+    text-align: center;
+    color: var(--white-ur);
+    background-color: var(--blue-ur);
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.cena {
+    color: black;
+}
+
+.tytulOferty {
+    color: black;
+}
+
+.gallery {
+    display: grid;
+    justify-content: center;
+    gap: 5px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    padding: 10px;
+}
+
+img {
+    width: 100%;
+    max-width: 200px;
+}
+
+.oferta {
+    border: 1px solid black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    background-color: #fff;
+}
+
+button {
+    margin: 10px;
+    border-radius: 10px;
+    height: 25px;
+    width: 150px;
+    background-color: lightblue;
+}
+
+@media (max-width: 600px) {
+    .gallery img {
+        width: 100%;
+        max-width: none;
+    }
+}
+
+@media (max-width: 400px) {
+    .gallery img {
+        width: 100%;
+        max-width: none;
+    }
+}
diff --git a/projekt/sklep.html b/projekt/sklep.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sklep z komputerami</title>
+    <link rel="icon" type="image/png" href="zdjecia/logo.png">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="sklep.css">
+    <style>
+
+    </style>
+</head>
+<body>
+    <header>  
+      <div class="lewy">
+        <div class="flex">
+          <div class="container-logo">
+            <div class="L">L</div>
+              <div class="outter">
+                <div class="mid"></div>
+              </div>
+              <div class="ADING">GO</div>
+            </div>
+          </div>
+        </div>
+
+      <div class="prawy">
+        <div class="search-container">
+          <input type="text" id="search-input" placeholder="Search..." class="search-input">
+          <a href="#" id="search-btn" class="search-btn">
+            <i class="fas fa-search"></i>
+          </a>
+        </div>
+      </div>
+
+      <script>
+        document.addEventListener('DOMContentLoaded', function() {
+          var searchInput = document.getElementById('search-input');
+          var searchButton = document.getElementById('search-btn');
+
+          function search() {
+            var query = searchInput.value;
+            var googleSearchUrl = 'https://www.google.com/search?q=' + encodeURIComponent(query);
+            window.open(googleSearchUrl, '_blank'); // Otwiera wyniki wyszukiwania w nowej karcie
+          }
+
+          searchInput.addEventListener('keypress', function(event) {
+            if (event.key === 'Enter') {
+              event.preventDefault(); // Zapobiega standardowej akcji formularza
+              search();
+            }
+          });
+
+          searchButton.addEventListener('click', function(event) {
+            event.preventDefault(); // Zapobiega standardowej akcji linku
+            search();
+          });
+        });
+      </script>
+
+
+    </header>
+    <nav>
+      <div class="pasek">
+          <div id="container">
+              <div id="menu-toggle" class="hamburger">
+                  <div class="bar"></div>
+                  <div class="bar"></div>
+                  <div class="bar"></div>
+              </div>
+              <div id="menu-container">
+                  <ul id="menu">
+                      <li><a href="#">Strona główna</a>
+                        <ul>
+                          <li><a href="index.html">Strona główna</a></li>
+                          <li><a href="sklep.html">Sklep</a></li>                      
+                      </ul>
+                      </li>
+                      <li><a href="#">Galeria</a>
+                        <ul>
+                          <li><a href="galeria.html">Galeria</a></li>
+                        </ul>
+                      </li>
+                      <li><a href="#">Konto</a>
+                          <ul>
+                              <li><a href="zaloguj.html">Zaloguj się</a></li>
+                              <li><a href="zarejestruj.html">Zarejestruj się</a></li>
+
+                          </ul>
+                      </li>
+                      <li><a href="#">About Me</a>
+                          <ul>
+                              <li><a href="dostawa.html">Koszt zakupu</a></li>
+                              <li><a href="#">Maecenas lacinia sem</a></li>
+                              <li><a href="#">Suspendisse fringilla</a></li>
+                          </ul>
+                      </li>
+                  </ul>
+              </div>
+          </div>
+      </div>
+  </nav>
+  <script>
+    const hamburger = document.getElementById("menu-toggle");
+    const menuContainer = document.getElementById("menu-container");
+
+    hamburger.addEventListener("click", () => {
+        hamburger.classList.toggle("active");
+        menuContainer.classList.toggle("active");
+    });
+</script>
+<main>
+    <div class="gallery" id="gallery">
+        <div class="oferta"> 
+          <img src="zdjecia/komputer1.png" alt="Nowy Komputer">
+          <div class="tytulOferty">
+            Komputer
+          </div>
+          <div class="cena">200.00</div>
+          <button>Kup teraz</button><button>Dodaj do koszyka</button>
+        </div>
+        <div class="oferta"> 
+          <img src="zdjecia/komputer2.png" alt="Kolejny Komputer">
+          <div class="tytulOferty">
+            Komputer2
+          </div>
+          <div class="cena">1200.00</div>
+          <button>Kup teraz</button><button>Dodaj do koszyka</button>
+        </div>
+        <div class="oferta"> 
+          <img src="zdjecia/komputer3.png" alt="Komputer przyszłościowy">
+          <div class="tytulOferty">
+            Jedyny taki komputer
+          </div>
+          <div class="cena">12300.00</div>
+          <button>Kup teraz</button><button>Dodaj do koszyka</button>
+        </div>
+        <div class="oferta"> 
+          <img src="zdjecia/komputerPrzyszlosic.png" alt="Najnowszy komputer">
+          <div class="tytulOferty">
+            Musisz go mieć
+          </div>
+          <div class="cena">23200.00</div>
+          <button>Kup teraz</button><button>Dodaj do koszyka</button>
+        </div><div class="oferta"> 
+        <img src="zdjecia/laptop.png" alt="laptop">
+        <div class="tytulOferty">
+          laptop
+        </div>
+        <div class="cena">100.00</div>
+        <button>Kup teraz</button><button>Dodaj do koszyka</button>
+      </div>
+      <div class="oferta"> 
+        <img src="zdjecia/komputer1.png" alt="laptop">
+        <div class="tytulOferty">
+          laptop
+        </div>
+        <div class="cena">100.00</div>
+        <button>Kup teraz</button><button>Dodaj do koszyka</button>
+      </div>
+      <div class="oferta"> 
+        <img src="zdjecia/laptop2.png" alt="laptop kolejny">
+        <div class="tytulOferty">
+          laptop
+        </div>
+        <div class="cena">120.00</div>
+        <button>Kup teraz</button><button>Dodaj do koszyka</button>
+      </div>
+      <div class="oferta"> 
+        <img src="zdjecia/laptop3.png" alt="laptop nowy">
+        <div class="tytulOferty">
+           nowy laptop 
+        </div>
+        <div class="cena">1000.00</div>
+        <button>Kup teraz</button><button>Dodaj do koszyka</button>
+      </div>
+      <div class="oferta"> 
+        <img src="zdjecia/laptop3.png" alt="laptop">
+        <div class="tytulOferty">
+          laptop
+        </div>
+        <div class="cena">100.99</div>
+        <button>Kup teraz</button><button>Dodaj do koszyka</button>
+      </div>
+      <div class="oferta"> 
+        <img src="zdjecia/laptop5.png" alt="laptop nowej generacji">
+        <div class="tytulOferty">
+          laptop
+        </div>
+        <div class="cena">105.00</div>
+        <button>Kup teraz</button><button>Dodaj do koszyka</button>
+      </div>
+    </div>
+
+</main>
+
+
+</body>
+</html>
diff --git a/projekt/style.css b/projekt/style.css
@@ -749,6 +749,7 @@ header {
     min-width: 260px;
     align-items: center;
     flex-wrap: wrap;
+    justify-content: center;
   }
 }
 

diff --git a/projekt/zaloguj.html b/projekt/zaloguj.html
@@ -7,8 +7,9 @@
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sklep z komputerami</title>
     <link rel="icon" type="image/png" href="zdjecia/logo.png">
-    <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="rejestracja.css">
+    <link rel="stylesheet" href="style.css">
+
 
 
     <!--<link rel="stylesheet" href="stopka.css">-->
@@ -89,7 +90,7 @@
                       </li>
                       <li><a href="#">Konto</a>
                           <ul>
-                              <li><a href="zaloguj.html">Zalogj się</a></li>
+                              <li><a href="zaloguj.html">Zaloguj się</a></li>
                               <li><a href="zarejestruj.html">Zarejestruj się</a></li>
 
                           </ul>

diff --git a/projekt/zarejestruj.html b/projekt/zarejestruj.html
@@ -88,7 +88,7 @@
                       </li>
                       <li><a href="#">Konto</a>
                           <ul>
-                              <li><a href="zaloguj.html">Zalogj się</a></li>
+                              <li><a href="zaloguj.html">Zaloguj się</a></li>
                               <li><a href="zarejestruj.html">Zarejestruj się</a></li>
 
                           </ul>

diff --git a/projekt/zdjecia/laptop2.png b/projekt/zdjecia/laptop2.png
diff --git a/projekt/zdjecia/laptop3.png b/projekt/zdjecia/laptop3.png
diff --git a/projekt/zdjecia/laptop4.png b/projekt/zdjecia/laptop4.png
diff --git a/projekt/zdjecia/laptop5.png b/projekt/zdjecia/laptop5.png