Update

Prawy126 · Jan 10, 2024 · 4d02b96 · 4d02b96
1 parent 994d6a6
commit 4d02b96
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 11 deletions.
diff --git a/index.md b/index.md
@@ -25,4 +25,6 @@ layout: default
 
 ### [LAB 8](https://prawy126.github.io/Technologie_Internetowe/lab8) 
 
+### [Projekt](https://prawy126.github.io/Technologie_Internetowe/projekt/index)
+
 
diff --git a/projekt/index.html b/projekt/index.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="tresc.css">
     <link rel="stylesheet" href="naglowek.css">
     <link rel="stylesheet" href="menu.css">
+    <link rel="stylesheet" href="slider.css">
     <!--<link rel="stylesheet" href="stopka.css">-->
     <style>
         @import url(https://fonts.googleapis.com/css?family=Open+Sans);
@@ -62,25 +63,50 @@
         .search-container:hover {
             animation: hoverShake 0.15s linear 3;
         }
-
+        .prawy{
+          width: 70%;
+          float:right;
+          display: flex;
+
+        }
+        .srodek{
+          align-items: center;
+          justify-content: center;
+        }
+        .left{
+          width: 30%;
+          float:left;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
 
     </style>
 </head>
 <body>
-    <header>
-        <div class="container">
+    <header>  
+      <div class="prawy">
+        <div class="srodek">
             <div class="L">L</div>
-            <div class="outter">
-              <div class="mid"></div>
-            </div>
-            <div class="ADING">GO</div>
+              <div class="outter">
+                <div class="mid"></div>
+              </div>
+              <div class="ADING">GO</div>
             </div>
+        </div>
+      </div> 
+      <div class="lewy">
         <div class="search-container">
-            <input type="text" name="search" placeholder="Search..." class="search-input">
-            <a href="#" class="search-btn">
-                <i class="fas fa-search"></i>
-            </a>
+          <input type="text" name="search" placeholder="Search..." class="search-input">
+          <a href="#" class="search-btn">
+            <i class="fas fa-search"></i>
+          </a>
         </div>
+      </div> 
+
+      <div class="container">
+
+
     </header>
 
     <nav>
@@ -170,6 +196,41 @@ <h3>Windows</h3>
               </div>
            </div>
          </div>
+         <br>
+         <div>
+          <div class="slider">
+            <div class="slides">
+              <div id="slide-1">
+                1
+              </div>
+              <div id="slide-2">
+                2
+              </div>
+              <div id="slide-3">
+                3
+              </div>
+              <div id="slide-4">
+                4
+              </div>
+              <div id="slide-5">
+                5
+              </div>
+            </div>
+            <div class="slider-controls">
+              <input type="radio" id="slide-radio-1" name="slide" class="slider-radio" checked>
+              <label for="slide-radio-1" class="slider-label" onclick="window.location.href='#slide-1';"></label>
+
+              <input type="radio" id="slide-radio-2" name="slide" class="slider-radio" >
+              <label for="slide-radio-1" class="slider-label" onclick="window.location.href='#slide-2';"></label>
+              <input type="radio" id="slide-radio-3" name="slide" class="slider-radio" >
+              <label for="slide-radio-1" class="slider-label" onclick="window.location.href='#slide-3';"></label>
+              <input type="radio" id="slide-radio-4" name="slide" class="slider-radio" >
+              <label for="slide-radio-1" class="slider-label" onclick="window.location.href='#slide-4';"></label>
+              <input type="radio" id="slide-radio-5" name="slide" class="slider-radio" >
+              <label for="slide-radio-1" class="slider-label" onclick="window.location.href='#slide-5';"></label>
+            </div>
+          </div>
+         </div>
     </main>
     <footer>
        <!-- <button class="send">
@@ -193,6 +254,7 @@ <h3>Windows</h3>
             </div>
             <div class="shadow"></div>
           </div>-->
+
     </footer>
 </body>
 </html>
diff --git a/projekt/slider.css b/projekt/slider.css
@@ -0,0 +1,63 @@
+.slider {
+    width: 300px;
+    text-align: center;
+    overflow: hidden;
+}
+
+.slides {
+    color: white;
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    padding: 4px;
+}
+.slides::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+}
+
+.slides > div {
+    scroll-snap-align: start;
+    flex-shrink: 0;
+    width: 300px;
+    height: 300px;
+    margin-right: 50px;
+    border-radius: 10px;
+    background: #da0d0d;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 100px;
+}
+
+/* Styl dla radiobuttonów i etykiet */
+.slider-controls {
+    display: flex;
+    justify-content: center;
+}
+
+.slider-radio {
+    display: none;
+}
+
+.slider-label {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #969696;
+    margin: 0 5px;
+    cursor: pointer;
+}
+
+/* Zmiana koloru kropki gdy odpowiadający radiobutton jest zaznaczony */
+.slider-radio:checked + .slider-label {
+    background: #000;
+}
+
+.slider-controls > a:hover, .slider-controls > a:focus, .slides > div:target {
+    background: #000;
+}