Update index.html
This commit is contained in:
parent
fa80d8d52b
commit
723b2d8682
1 changed files with 98 additions and 0 deletions
98
index.html
98
index.html
|
|
@ -0,0 +1,98 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test animacji na żywo</title>
|
||||
<style>
|
||||
[hidden], [hidden] *{
|
||||
pointer-events: none !important;
|
||||
visibility: hidden !important;
|
||||
user-select: none !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.gradient1{
|
||||
background: linear-gradient(to right, #f03 80%, #ff2791 100%);
|
||||
}
|
||||
|
||||
.test-divuś{
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
width: 300px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.icons-pattern{
|
||||
color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="icons-pattern">
|
||||
<h2>Icons design</h2>
|
||||
<h3>Icons grid</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" height="220px" width="220px">
|
||||
<path fill="rgba(0,0,0,0)" stroke="rgba(60,60,60,.5)" stroke-width=".05" d="M0,0H24 M0,1H24 M0,2H24 M0,3H24 M0,4H24 M0,5H24 M0,6H24 M0,7H24 M0,8H24 M0,9H24 M0,10H24 M0,11H24 M0,12H24 M0,13H24 M0,14H24 M0,15H24 M0,16H24 M0,17H24 M0,18H24 M0,19H24 M0,20H24 M0,21H24 M0,22H24 M0,23H24 M0,24H24 M0,0V24 M1,0V24 M2,0V24 M3,0V24 M4,0V24 M5,0V24 M6,0V24 M7,0V24 M8,0V24 M9,0V24 M10,0V24 M11,0V24 M12,0V24 M13,0V24 M14,0V24 M15,0V24 M16,0V24 M17,0V24 M18,0V24 M19,0V24 M20,0V24 M21,0V24 M22,0V24 M23,0V24 M24,0V24 Z"/>
|
||||
<path fill="rgba(200,0,0,.25)" stroke="rgba(0,0,0,0)" stroke-width=".1" d="M0,0H24V24H0V2H2V22H22V2H0V0 Z"/>
|
||||
</svg>
|
||||
<br>
|
||||
<h3>Icon square pattern</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" height="220px" width="220px">
|
||||
<path fill="rgba(0,0,0,0)" stroke="rgba(60,60,60,.5)" stroke-width=".05" d="M0,0H24 M0,1H24 M0,2H24 M0,3H24 M0,4H24 M0,5H24 M0,6H24 M0,7H24 M0,8H24 M0,9H24 M0,10H24 M0,11H24 M0,12H24 M0,13H24 M0,14H24 M0,15H24 M0,16H24 M0,17H24 M0,18H24 M0,19H24 M0,20H24 M0,21H24 M0,22H24 M0,23H24 M0,24H24 M0,0V24 M1,0V24 M2,0V24 M3,0V24 M4,0V24 M5,0V24 M6,0V24 M7,0V24 M8,0V24 M9,0V24 M10,0V24 M11,0V24 M12,0V24 M13,0V24 M14,0V24 M15,0V24 M16,0V24 M17,0V24 M18,0V24 M19,0V24 M20,0V24 M21,0V24 M22,0V24 M23,0V24 M24,0V24 Z"/>
|
||||
<path fill="rgba(200,0,0,.25)" stroke="rgba(0,0,0,0)" stroke-width=".1" d="M0,0H24V24H0V2H2V22H22V2H0V0 Z"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".08" d="M4,2L2,4 M6,2L2,6 M8,2L2,8 M10,2L2,10 M12,2L2,12 M14,2L2,14 M16,2L2,16 M18,2L2,18 M20,2L2,20 M22,2L2,22 M4,22L22,4 M6,22L22,6 M8,22L22,8 M10,22L22,10 M12,22L22,12 M14,22L22,14 M16,22L22,16 M18,22L22,18 M20,22L22,20 Z"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".1" d="M2,2H22V22H2V2 Z"/>
|
||||
</svg>
|
||||
<br>
|
||||
<h3>Icon rectangle (vertical) pattern</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" height="220px" width="220px">
|
||||
<path fill="rgba(0,0,0,0)" stroke="rgba(60,60,60,.5)" stroke-width=".05" d="M0,0H24 M0,1H24 M0,2H24 M0,3H24 M0,4H24 M0,5H24 M0,6H24 M0,7H24 M0,8H24 M0,9H24 M0,10H24 M0,11H24 M0,12H24 M0,13H24 M0,14H24 M0,15H24 M0,16H24 M0,17H24 M0,18H24 M0,19H24 M0,20H24 M0,21H24 M0,22H24 M0,23H24 M0,24H24 M0,0V24 M1,0V24 M2,0V24 M3,0V24 M4,0V24 M5,0V24 M6,0V24 M7,0V24 M8,0V24 M9,0V24 M10,0V24 M11,0V24 M12,0V24 M13,0V24 M14,0V24 M15,0V24 M16,0V24 M17,0V24 M18,0V24 M19,0V24 M20,0V24 M21,0V24 M22,0V24 M23,0V24 M24,0V24 Z"/>
|
||||
<path fill="rgba(200,0,0,.25)" stroke="rgba(0,0,0,0)" stroke-width=".1" d="M0,0H24V24H0V2H2V22H22V2H0V0 Z"/>
|
||||
<path fill="rgba(255,252,255,.5)" d="M2,2H4V22H2V2 M20,2H22V22H20V2 Z"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".08" d="M4,4L6,2 M4,6L8,2 M4,8L10,2 M4,10L12,2 M4,12L14,2 M4,14L16,2 M4,16L18,2 M4,18L20,2 M20,4L4,20 M20,6L4,22 M20,8L6,22 M20,10L8,22 M20,12L10,22 M20,14L12,22 M20,16L14,22 M20,18L16,22 M20,20L18,22 Z"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".1" d="M4 2H20V22H4V2 Z"/>
|
||||
</svg>
|
||||
<br>
|
||||
<h3>Icon rectangle (horizontal) pattern</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" height="220px" width="220px">
|
||||
<path fill="rgba(0,0,0,0)" stroke="rgba(60,60,60,.5)" stroke-width=".05" d="M0,0H24 M0,1H24 M0,2H24 M0,3H24 M0,4H24 M0,5H24 M0,6H24 M0,7H24 M0,8H24 M0,9H24 M0,10H24 M0,11H24 M0,12H24 M0,13H24 M0,14H24 M0,15H24 M0,16H24 M0,17H24 M0,18H24 M0,19H24 M0,20H24 M0,21H24 M0,22H24 M0,23H24 M0,24H24 M0,0V24 M1,0V24 M2,0V24 M3,0V24 M4,0V24 M5,0V24 M6,0V24 M7,0V24 M8,0V24 M9,0V24 M10,0V24 M11,0V24 M12,0V24 M13,0V24 M14,0V24 M15,0V24 M16,0V24 M17,0V24 M18,0V24 M19,0V24 M20,0V24 M21,0V24 M22,0V24 M23,0V24 M24,0V24 Z"/>
|
||||
<path fill="rgba(200,0,0,.25)" stroke="rgba(0,0,0,0)" stroke-width=".1" d="M0,0H24V24H0V2H2V22H22V2H0V0 Z"/>
|
||||
<path fill="rgba(255,255,255,.5)" d="M2,2H22V4H2V2 M2,20H22V22H2V20 Z"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".08" d="M4,4L2,6 M6,4L2,8 M8,4L2,10 M10,4L2,12 M12,4L2,14 M14,4L2,16 M16,4L2,18 M18,4L2,20 M20,4L4,20 M22,4L6,20 M22,6L8,20 M22,8L10,20 M22,10L12,20 M22,12L14,20 M22,14L16,20 M22,16L18,20 M22,18L20,20 Z"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".1" d="M2 4H22V20H2V4 Z"/>
|
||||
</svg>
|
||||
<br>
|
||||
<h3>Icon circle pattern</h3>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" height="220px" width="220px">
|
||||
<path fill="rgba(0,0,0,0)" stroke="rgba(60,60,60,.5)" stroke-width=".05" d="M0,0H24 M0,1H24 M0,2H24 M0,3H24 M0,4H24 M0,5H24 M0,6H24 M0,7H24 M0,8H24 M0,9H24 M0,10H24 M0,11H24 M0,12H24 M0,13H24 M0,14H24 M0,15H24 M0,16H24 M0,17H24 M0,18H24 M0,19H24 M0,20H24 M0,21H24 M0,22H24 M0,23H24 M0,24H24 M0,0V24 M1,0V24 M2,0V24 M3,0V24 M4,0V24 M5,0V24 M6,0V24 M7,0V24 M8,0V24 M9,0V24 M10,0V24 M11,0V24 M12,0V24 M13,0V24 M14,0V24 M15,0V24 M16,0V24 M17,0V24 M18,0V24 M19,0V24 M20,0V24 M21,0V24 M22,0V24 M23,0V24 M24,0V24 Z"/>
|
||||
<path fill="rgba(200,0,0,.25)" stroke="rgba(0,0,0,0)" stroke-width=".1" d="M0 0H24V24H0V2H2V22H22V2H0V0 Z"/>
|
||||
<path fill="rgba(255,255,255,.5)" d="M2,2H12C6.5,2,2,6.5,2,12 M22,2V12C22,6.5,17.5,2,12,2 M22,22H12C17.5,22,22,17.5,22,12 M2,22V12C2,17.5,6.5,22,12,22 Z"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".08" d="M9.746,2.256L2.256,9.746 M12,2L2,12 M13.83,2.17L2.17,13.83 M15.403,2.598L2.596,15.404M16.782,3.218L3.218,16.782 M18,4L4,18 M19.071,4.929L4.929,19.071 M6,20L20,6 M7.218,20.783L20.783,7.219 M8.597,21.403L21.403,8.597 M10.17,21.832L21.831,10.17 M12,22L22,12 M14.258,21.742L21.742,14.258"/>
|
||||
<path fill="rgba(0,0,0,0)" stroke="#FFF" stroke-width=".1" d="M12,2A1,1,0,0,112,22A1,1,0,0,1,12,2 Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="gradient1 test-divuś"></div>
|
||||
|
||||
<div style="border-radius: 50rem; background: #1f1f1f; height: 3rem; width: 3rem;"></div>
|
||||
|
||||
<div class="shimmer-box"></div>
|
||||
|
||||
<button class="ripple-btn" saveState="true">
|
||||
<p>Kliknij mnie</p>
|
||||
</button>
|
||||
|
||||
<svg viewBox="0 0 36 36" height="36px" width="36px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path fill="#6750A4" d="M18 0A1 1 0 0018 36 1 1 0 0018 0Z"/>
|
||||
</svg>
|
||||
|
||||
<svg viewBox="0 0 78 36" height="36px" width="78px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path fill="#6750A4" d="M18 0A1 1 0 0018 36H58A1 1 0 0058 0H18Z"></path>
|
||||
</svg>
|
||||
|
||||
<svg viewBox="0 0 78 36" height="36px" width="78px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path fill="#6750A4" d="M4 0Q0 0 0 4V32Q0 36 4 36H74Q78 36 78 32V4Q78 0 74 0H4Z"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue