Update

Prawy126 · Jan 10, 2024 · 64f7b84 · 64f7b84
1 parent 4d02b96
commit 64f7b84
Show file tree

Hide file tree

Showing 3 changed files with 273 additions and 11 deletions.
diff --git a/projekt/index.html b/projekt/index.html
@@ -8,10 +8,8 @@
     <title>Sklep z komputerami</title>
 
     <link rel="stylesheet" href="style.css">
-    <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);
@@ -64,7 +62,7 @@
             animation: hoverShake 0.15s linear 3;
         }
         .prawy{
-          width: 70%;
+          width: 60%;
           float:right;
           display: flex;
 
@@ -74,19 +72,22 @@
           justify-content: center;
         }
         .left{
-          width: 30%;
+          width: 40%;
           float:left;
           display: flex;
           align-items: center;
           justify-content: center;
         }
 
+        .flex{
+          display: flex;
+        }
     </style>
 </head>
 <body>
     <header>  
-      <div class="prawy">
-        <div class="srodek">
+      <div class="lewy">
+        <div class="flex">
             <div class="L">L</div>
               <div class="outter">
                 <div class="mid"></div>
@@ -95,7 +96,7 @@
             </div>
         </div>
       </div> 
-      <div class="lewy">
+      <div class="prawy">
         <div class="search-container">
           <input type="text" name="search" placeholder="Search..." class="search-input">
           <a href="#" class="search-btn">
@@ -110,6 +111,7 @@
     </header>
 
     <nav>
+      <div class="pasek">
         <div id="container">
             <ul id="menu">
               <li><a href="#">About Me</a>
@@ -142,6 +144,8 @@
               </li>
             </ul>
             </div>
+      </div>
+
     </nav>
     <section></section>
     <main>

diff --git a/projekt/menu.css b/projekt/menu.css
@@ -1,16 +1,18 @@
 * {
     margin: 0; 
     padding: 0;
+
     box-sizing: border-box;
   }
   nav{
 
     display: flex;
-    align-items: center;
-    justify-content:space-around;
+
     background-color: #ccc2cc;
   }
   #menu {
+    align-items: center;
+    justify-content:space-between;
     position: relative;
     float: left;
     padding: 0 20px;

diff --git a/projekt/style.css b/projekt/style.css
@@ -7,10 +7,266 @@ header{
     align-items: center;
     margin: 0;
     padding: 10px;
+    height: 120px;
+    width: 100%;
+
 }
 
 body {
     margin: 0;
     padding: 0;
 
-}
+}
+* {
+    margin: 0; 
+    padding: 0;
+
+    box-sizing: border-box;
+  }
+  nav{
+
+    display: flex;
+
+    background-color: #ccc2cc;
+  }
+  .pasek{
+
+  }
+  #menu {
+    align-items: center;
+    justify-content:space-between;
+
+
+    padding: 0 20px;
+    border-radius: 3px;
+    background: #ccc2cc; 
+  }
+  #menu, #menu ul {
+    list-style: none;
+  }
+  #menu > li {
+    float: left;
+    position: relative;
+    perspective: 1000px;
+  }
+  #menu a {
+    display: block;
+    padding: 13px 20px 13px 20px;
+    text-decoration: none;
+    color: #4b4b4b;
+    font-size: 18px;
+    background: transparent;    
+    transition: all .25s ease-in-out;
+  }
+  #menu > li:hover > a {
+    background: #333;
+    color: #00dffc;
+  }
+  #menu li ul  {
+    position: absolute;
+    width: 200px;
+    visibility: hidden;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background: transparent;
+    overflow: hidden;
+    transform-origin: 50% 0%;
+  }
+  #menu li:hover ul {
+    padding: 15px 0;
+    background: #333;
+    opacity: 1;
+    visibility: visible;
+    box-shadow: 1px 1px 7px #00000080;
+    animation-name: swingdown;
+    animation-duration: 1s;
+    animation-timing-function: ease;
+  }
+  @keyframes swingdown {
+    0% {
+      opacity: .99999;
+      transform: rotateX(90deg);
+    }
+    30% {     
+      transform: rotateX(-20deg) rotateY(5deg);
+      animation-timing-function: ease-in-out;
+    }
+    65% {
+      transform: rotateX(20deg) rotateY(-3deg);
+      animation-timing-function: ease-in-out;
+    }
+    100% {
+      transform: rotateX(0);
+      animation-timing-function: ease-in-out;
+    }
+  }
+  #menu li li a {
+    padding-left: 15px;
+    font-weight: 400;
+    color: #ddd;
+    text-shadow: none;
+    border-top: dotted 1px transparent;
+    border-bottom: dotted 1px transparent;
+    transition: all .15s linear;
+  }
+  #menu li li a:hover {
+    color: #00dffc;
+    border-top: dotted 1px #ffffff26;
+    border-bottom: dotted 1px #ffffff26;
+    background: #00dffc05;
+  }
+  main{
+    display:flex;
+    margin:0;
+    padding:0;
+    min-height: 75vh;
+    background: #444;
+    justify-content: center;
+    align-items: center;
+    font-family: arial;
+  }
+  .container .card .face{
+    width:300px;
+    height: 200px;
+    transition:.4s; 
+  }
+  .container .card .face.face1{
+    position: relative;
+    background: #333;
+    display: flex;
+    justify-content: center;
+    align-content:center;
+    align-items: center;
+    z-index: 1;
+    transform: translateY(100px);
+  }
+  .container .card:hover .face.face1{
+    transform: translateY(0);
+    box-shadow:
+      inset 0 0 60px whitesmoke,
+      inset 20px 0 80px #f0f,
+      inset -20px 0 80px #0ff,
+      inset 20px 0 300px #f0f,
+      inset -20px 0 300px #0ff,
+      0 0 50px #fff,
+      -10px 0 80px #f0f,
+      10px 0 80px #0ff; 
+  }
+  .container .card .face.face1 .content{
+    opacity: .2;
+    transition:  0.5s;
+    text-align: center;
+  }
+  .container .card:hover .face.face1 .content{
+    opacity: 1;
+  }
+  .container .card .face.face1 .content i{
+    font-size: 3em;
+    color: white;
+    display: inline-block;  
+  }
+  .container .card .face.face1 .content h3{
+    font-size: 1em;
+    color: white;
+    text-align: center;
+  }
+  .container .card .face.face1 .content a{
+     transition: .5s;
+  }
+  .container .card .face.face2{
+     position: relative;
+     background: whitesmoke;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     padding: 20px;
+    box-sizing: border-box;
+    box-shadow: 0 20px 50px rgba(0,0,0,.8);
+    transform: translateY(-100px);
+  }
+  .container .card:hover .face.face2{
+      transform: translateY(0);
+  }
+  .container .card .face.face2 .content p, a{
+    font-size: 10pt;
+    margin: 0 ;
+    padding: 0;
+    color:#333;
+  }
+  .container .card .face.face2 .content a{
+    text-decoration:none;
+    color: black;
+    box-sizing: border-box;
+    outline : 1px dashed #333;
+    padding: 10px;
+    margin: 15px 0 0;
+    display: inline-block;
+  }
+  .container .card .face.face2 .content a:hover{
+    background: #333 ;
+    color: whitesmoke; 
+    box-shadow: inset 0px 0px 10px #00000080;
+  }
+  .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;
+}