From 64f7b84a0268bbf599ebdc357c2f9acbb20bc8b7 Mon Sep 17 00:00:00 2001 From: Prawy_126 Date: Wed, 10 Jan 2024 20:29:33 +0100 Subject: [PATCH] Update --- projekt/index.html | 20 ++-- projekt/menu.css | 6 +- projekt/style.css | 258 ++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 273 insertions(+), 11 deletions(-) diff --git a/projekt/index.html b/projekt/index.html index 578c1cd..7f5bd77 100644 --- a/projekt/index.html +++ b/projekt/index.html @@ -8,10 +8,8 @@ Sklep z komputerami - - - +
-
-
+
+
L
@@ -95,7 +96,7 @@
-
+
@@ -110,6 +111,7 @@
diff --git a/projekt/menu.css b/projekt/menu.css index 56619a1..5c2e1b6 100644 --- 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 index 8424859..6d5b57d 100644 --- 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; -} \ No newline at end of file +} +* { + 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; +}