штучки

Страница: « 1 … 4 5 6

Сообщений 151 страница 173 из 173

Поделиться15120.05.24 08:17:39

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>

.deselected-tags {
height: 50vh;
padding: 0.5em 0;
width: 100%;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #ffedd6;
}

.selection-container {
padding-top: 1em;
box-shadow: 0 -2px 15px rgba(black, 0.2), 0 -1px 3px rgba(black, 0.4);
position: relative;
background: white;
z-index: 1;
height: 50px;
width: 100%;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

.copy-confirmation {
position: fixed;
bottom: 0;
background: orange;
color: white;
width: 100%;
padding: 3em 0;
text-align: center;
font-weight: bold;
z-index: 3;
transform: translate(0, 100%);

.flash & {
animation: flash-message 1.3s linear;
}
}

.selection-total {
$pad: 0.7em;

font-size: 0.8em;
font-weight: bold;
position: absolute;
background: white;
color: #84786a;
right: 0;
margin-top: -0.5em - $pad;
z-index: 2;
min-width: 4.8em;
padding: $pad $pad/2 $pad 0;
text-align: right;
border-top-left-radius: 99em;
border-bottom-left-radius: 99em;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09), 0 2px 3px rgba(0, 0, 0, 0.12);
}

.tag {
touch-action: manipulation;
font-size: 0.8em;
font-family: 'Montserrat', sans-serif;
font-weight: bold;

color: gray;

display: inline-block;

border: 4px solid;
border-radius: 999em;
padding: 0.7em $symbolSize*2 0.7em 1em;
min-width: 7em;
text-align: left;

margin: 0.3em;

position: relative;

// Used for offsetting symbols
$xOffset: ($symbolSize/2 - $symbolThickness/2) * -1;
$yOffset: ($symbolSize/2 - $symbolThickness/2);

&:before, &:after {
position: absolute;
content: '';
background: currentColor;
right: 0.4em;
top: 0.9em;
}

&:before { // |
width: $symbolThickness;
height: $symbolSize;
}

&:after { // --
width: $symbolSize;
height: $symbolThickness;
}

&--deselected {
background: white;
border-color: white;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.09), 0 1px 1px rgba(0, 0, 0, 0.25);
animation: bloop 2000ms linear both;

&:before {
transform: translate($xOffset, 0);
}
&:after {
transform: translate(0, $yOffset);
}
}

&--selected {
background: currentColor;
animation: jelly 700ms linear both;

span {
color: white;
}

&:before, &:after {
background: white;
}

&:before {
transform: translate($xOffset, 0) rotate(45deg);
}
&:after {
transform: translate(0, $yOffset) rotate(45deg);
}
}
}

.copy-button-wrapper {
margin: 1em 0.5em 2em;
}

.copy-button {
color: #009fe0;
background: white;
font-size: 1.5em;
padding: 0.5em;
display: block;
box-sizing: border-box;
border: 4px solid;
width: 100%;
font-weight: bold;
font-family: inherit;
border-radius: 99em;

svg {
width: 1em;
display: inline-block;
vertical-align: middle;
margin-left: 0.2em;

path {
fill: currentColor;
}
}
}

/* Generated with Bounce.js. Edit at https://goo.gl/T2pMyb */

@keyframes jelly {
0% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
3.4% { transform: matrix3d(1.342, 0, 0, 0, 0, 1.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
4.7% { transform: matrix3d(1.275, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
6.81% { transform: matrix3d(1.17, 0, 0, 0, 0, 1.054, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
9.41% { transform: matrix3d(1.058, 0, 0, 0, 0, 0.916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
10.21% { transform: matrix3d(1.029, 0, 0, 0, 0, 0.887, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
13.61% { transform: matrix3d(0.938, 0, 0, 0, 0, 0.834, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
14.11% { transform: matrix3d(0.93, 0, 0, 0, 0, 0.835, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
17.52% { transform: matrix3d(0.896, 0, 0, 0, 0, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
18.72% { transform: matrix3d(0.894, 0, 0, 0, 0, 0.906, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
21.32% { transform: matrix3d(0.902, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
24.32% { transform: matrix3d(0.925, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
25.23% { transform: matrix3d(0.933, 0, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
29.03% { transform: matrix3d(0.969, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
29.93% { transform: matrix3d(0.976, 0, 0, 0, 0, 1.051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
35.54% { transform: matrix3d(1.01, 0, 0, 0, 0, 1.019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
36.74% { transform: matrix3d(1.014, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
41.04% { transform: matrix3d(1.02, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
44.44% { transform: matrix3d(1.017, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
52.15% { transform: matrix3d(1.004, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
59.86% { transform: matrix3d(0.997, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
63.26% { transform: matrix3d(0.996, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
75.28% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
85.49% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
90.69% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes bloop {
0% { transform: matrix3d(0.6, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 1, 0, 0, 6, 0, 1); }
1.58% { transform: matrix3d(0.794, 0, 0, 0, 0, 0.794, 0, 0, 0, 0, 1, 0, 0, 6.392, 0, 1); }
3.15% { transform: matrix3d(0.952, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 5.85, 0, 1); }
4.3% { transform: matrix3d(1.02, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 4.953, 0, 1); }
4.73% { transform: matrix3d(1.035, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 4.565, 0, 1); }
6.27% { transform: matrix3d(1.056, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 3.109, 0, 1); }
8.61% { transform: matrix3d(1.033, 0, 0, 0, 0, 1.033, 0, 0, 0, 0, 1, 0, 0, 1.254, 0, 1); }
10.16% { transform: matrix3d(1.013, 0, 0, 0, 0, 1.013, 0, 0, 0, 0, 1, 0, 0, 0.394, 0, 1); }
12.12% { transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, -0.325, 0, 1); }
12.91% { transform: matrix3d(0.995, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, -0.52, 0, 1); }
14.05% { transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, -0.724, 0, 1); }
17.22% { transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, -0.931, 0, 1); }
21.83% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, -0.7, 0, 1); }
28.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.206, 0, 1); }
29.64% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.135, 0, 1); }
35% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.033, 0, 1); }
39.44% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.062, 0, 1); }
61.66% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.004, 0, 1); }
83.98% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes flash-message{
0% {
transform: translate(0px,100%) ;
}
5% {
transform: translate(0px,10%) ;
}
10% {
transform: translate(0px,5%) ;
}
25% {
transform: translate(0px,0%) ;
}
94% {
transform: translate(0px,0%) ;
}
100% {
transform: translate(0px,100%) ;
}
}

</style>
<script>
var deselected = document.querySelector('.deselected-tags');
var selected = document.querySelector('.selected-tags');
var copyButton = document.querySelector('.copy-button');
var clipboard = new Clipboard(copyButton);
var selectedClass = 'tag--selected';
var deselectedClass = 'tag--deselected';

var defaultSelected = [
'art',
'crafts',
'etsy'
];

var defaultDeselected = [
'beyonce',
'blessed',
'boss',
'bossbitch',
'cats',
'classy',
'cute',
'decoration',
'dogs',
'embroidery',
'fancy',
'feminism',
'feminist',
'floral',
'funny',
'gangsta',
'gift',
'handmade',
'hiphop',
'hoopart',
'hottie',
'iger',
'instagood',
'love',
'lyrics',
'pimp',
'pretty',
'script',
'shop',
'shop',
'swag',
'tvshow',
'vintage',
'wallart',
'yasss'
];

addTags(deselected, defaultDeselected, 'deselected');
addTags(selected, defaultSelected, 'selected');
updateSelected();

function selectEl(el) {
selected.appendChild(el);
el.classList.remove(deselectedClass);
el.classList.add(selectedClass);
updateSelected();
}

function deselectEl(el) {
deselected.insertBefore(el, deselected.firstChild);
el.classList.remove(selectedClass);
el.classList.add(deselectedClass);
updateSelected();
}

function updateSelected() {
updateNumSelected();
updateCopyText();
}

function updateNumSelected() {
var numEl = document.querySelector('.num-selected');
var num = selected.children.length;
numEl.textContent = num;
}

function updateCopyText() {
var selectedTagText = selected.textContent;
selectedTagText = selectedTagText.replace(/#/g, ' #').trim();
copyButton.dataset.clipboardText = selectedTagText;
}

updateCopyText();

deselected.addEventListener('click', function(e) {
var t = e.target;

if (t.matches('.tag > *')) {
t = t.parentElement;
}

if (t.matches('.tag')) {
selectEl(t);
}
});

selected.addEventListener('click', function(e) {
var t = e.target;

if (t.matches('.tag > *')) {
t = t.parentElement;
}

if (t.matches('.tag')) {
deselectEl(t);
}
});

clipboard.on('success', function(e) {
e.clearSelection();
document.activeElement.blur();
var container = document.querySelector('.selection-container');
container.classList.remove('flash');
window.setTimeout(function() {
container.classList.add('flash');
}, 0);
});
</script>

<div class="copy-button-wrapper">
<button class="copy-button" data-clipboard-text="">
Copy
<svg viewBox="0 0 1024 1024" preserveAspectRatio xmlns="http://www.w3.org/2000/svg"><path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" /></svg>
</button>
</div>

<div class="copy-confirmation">
Hashtags copied to your clipboard!
</div>
</div>
[/html]

Поделиться15220.05.24 08:49:11

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

https://codepen.io/pharaohleap/pens/pub … c2NDAyMQ==

Поделиться15301.06.24 20:33:34

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<style>
#conytainer5 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #222;
--clr: #fff;
}
#conytainer5{
font-family: "Font Awesome 5 Free";
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
background: var(--bg);
}
ul {
position: relative;
display: flex;
gap: 50px;
}
ul li {
position: relative;
list-style: none;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.5s;
}
ul li::before {
content: '';
position: absolute;
inset: 30px;
box-shadow: 0 0 0 10px var(--clr),
0 0 0 20px var(--bg),
0 0 0 22px var(--clr);
transition: 0.5s;
}
ul li:hover::before {
inset: 15px;
}
ul li::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg);
transform: rotate(45deg);
transition: 0.5s;
}
ul li:hover::after {
inset: 0px;
transform: rotate(0deg);
}
ul li a {
position: relative;
text-decoration: none;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
ul li a i {
font-size: 2em;
transition: 0.5s;
color: var(--clr);
opacity: 1;
}
ul li:hover a i {
color: var(--clr);
transform: translateY(-40%);
}
ul li a span {
position: absolute;
font-family: sans-serif;
color: var(--clr);
opacity: 0;
transition: 0.5s;
transform: scale(0) translateY(200%);
}
ul li:hover a span {
opacity: 1;
transform: scale(1) translateY(100%);
}
ul li:hover a i,
ul li a span {
filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}

</style>
<script>

</script>
<div id="conytainer5">
<ul>
<li style="--clr:#2483ff;">
<a href="#">
<i class="fa fa-home"></i>
<span>Home</span>
</a>
</li>

<li style="--clr:#fff200;">
<a href="#">
<i class="fa fa-user"></i>
<span>Profile</span>
</a>
</li>

<li style="--clr:#ff253f;">
<a href="#">
<i class="fa fa-heart"></i>
<span>Likes</span>
</a>
</li>

<li style="--clr:#25d366;">
<a href="#">
<i class="fa fa-gear"></i>
<span>Settings</span>
</a>
</li>

<li style="--clr:#f32ec8;">
<a href="#">
<i class="fa fa-search"></i>
<span>Search</span>
</a>
</li>

</ul>
</div>
[/html]

Поделиться15402.06.24 19:45:50

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

snow снег

Код:

<script>
(function ($) {
    //
    // Zachary Johnson
    // https://www.zachstronaut.com/posts/2009/12/21/happy-xmas-winternet.html
    // December 2009
    //
    
    var ww = 0;
    var wh = 0;
    var maxw = 0;
    var minw = 0;
    var maxh = 0;
    var textShadowSupport = true;
    var xv = 0;
    var snowflakes = ["\u2744", "\u2745", "\u2746"];
    var prevTime;
    var absMax = 10;
    var flakeCount = 0;
    
    $(init);

    function init()
    {
        var detectSize = function ()
        {
            ww = $(window).width();
            wh = $(window).height();
            
            maxw = ww + 300;
            minw = -300;
            maxh = wh + 300;
        };
        
        detectSize();
        
        $(window).resize(detectSize);
        
        if (!$('body').css('textShadow'))
        {
            textShadowSupport = false;
        }
        
        /* Should work in Windows 7 /*
        if (/windows/i.test(navigator.userAgent))
        {
            snowflakes = ['*']; // Windows sucks and doesn't have Unicode chars installed
            //snowflakes = ['T']; //No FF support for Wingdings
        }
        */
        
        // FF seems to just be able to handle like 50... 25 with rotation
        // Safari seems fine with 150+... 75 with rotation
        var i = 50;
        while (i--)
        {
            addFlake(true);
        }
        
        prevTime = new Date().getTime();
        setInterval(move, 50);
    }

    function addFlake(initial)
    {
        flakeCount++;
        
        var sizes = [
            {
                r: 1.0,
                css: {
                    fontSize: 15 + Math.floor(Math.random() * 20) + 'px',
                    textShadow: '9999px 0 0 rgba(238, 238, 238, 0.5)'
                },
                v: 2
            },
            {
                r: 0.6,
                css: {
                    fontSize: 50 + Math.floor(Math.random() * 20) + 'px',
                    textShadow: '9999px 0 2px #eee'
                },
                v: 6
            },
            {
                r: 0.2,
                css: {
                    fontSize: 90 + Math.floor(Math.random() * 30) + 'px',
                    textShadow: '9999px 0 6px #eee'
                },
                v: 12
            },
            {
                r: 0.1,
                css: {
                    fontSize: 150 + Math.floor(Math.random() * 50) + 'px',
                    textShadow: '9999px 0 24px #eee'
                },
                v: 20
            }
        ];
    
        var $nowflake = $('<span class="winternetz">' + snowflakes[Math.floor(Math.random() * snowflakes.length)] + '</span>').css(
            {
                /*fontFamily: 'Wingdings',*/
                color: '#eee',
                display: 'block',
                position: 'fixed',
                background: 'transparent',
                width: 'auto',
                height: 'auto',
                margin: '0',
                padding: '0',
                textAlign: 'left',
                zIndex: 9999
            }
        );
        
        if (textShadowSupport)
        {
            $nowflake.css('textIndent', '-9999px');
        }
        
        var r = Math.random();
    
        var i = sizes.length;
        
        var v = 0;
        
        while (i--)
        {
            if (r < sizes[i].r)
            {
                v = sizes[i].v;
                $nowflake.css(sizes[i].css);
                break;
            }
        }
    
        var x = (-300 + Math.floor(Math.random() * (ww + 300)));
        
        var y = 0;
        if (typeof initial == 'undefined' || !initial)
        {
            y = -300;
        }
        else
        {
            y = (-300 + Math.floor(Math.random() * (wh + 300)));
        }
    
        $nowflake.css(
            {
                left: x + 'px',
                top: y + 'px'
            }
        );
        
        $nowflake.data('x', x);
        $nowflake.data('y', y);
        $nowflake.data('v', v);
        $nowflake.data('half_v', Math.round(v * 0.5));
        
        $('body').append($nowflake);
    }
    
    function move()
    {
        if (Math.random() > 0.8)
        {
            xv += -1 + Math.random() * 2;
            
            if (Math.abs(xv) > 3)
            {
                xv = 3 * (xv / Math.abs(xv));
            }
        }
        
        // Throttle code
        var newTime = new Date().getTime();
        var diffTime = newTime - prevTime;
        prevTime = newTime;
        
        if (diffTime < 55 && flakeCount < absMax)
        {
            addFlake();
        }
        else if (diffTime > 150)
        {
            $('span.winternetz:first').remove();
            flakeCount--;
        }
        
        $('span.winternetz').each(
            function ()
            {
                var x = $(this).data('x');
                var y = $(this).data('y');
                var v = $(this).data('v');
                var half_v = $(this).data('half_v');
                
                y += v;
                
                x += Math.round(xv * v);
                x += -half_v + Math.round(Math.random() * v);
                
                // because flakes are rotating, the origin could be +/- the size of the flake offset
                if (x > maxw)
                {
                    x = -300;
                }
                else if (x < minw)
                {
                    x = ww;
                }
                
                if (y > maxh)
                {
                    $(this).remove();
                    flakeCount--;
                    
                    addFlake();
                }
                else
                {
                    $(this).data('x', x);
                    $(this).data('y', y);

                    $(this).css(
                        {
                            left: x + 'px',
                            top: y + 'px'
                        }
                    );
                    
                    // only spin biggest three flake sizes
                    if (v >= 6)
                    {
                        $(this).animate({rotate: '+=' + half_v + 'deg'}, 0);
                    }
                }
            }
        );
    }
})(jQuery);

</script>

Поделиться15502.06.24 21:53:35

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

листья

Код:

        <style>
#leaf-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

#leaf-container span {
    position: absolute;
    width: 35px;
    height: 35px;
    background: url('https://upforme.ru/uploads/001c/1e/87/2/451018.png'); 
    background-size: cover;
    animation: fall 5s linear infinite;
}

@keyframes fall {
    0% {
        transform: translate(0, -100vh) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(calc(100vw * var(--random-x)), 100vh) rotate(720deg) scale(1);
        opacity: 1;
    }
}

/* Génération de valeurs aléatoires pour le déplacement horizontal */
#leaf-container span:nth-child(1) {
    --random-x: 0.1;
  animation-delay: 1s; /* Retard de 2 secondes pour la première feuille */
}

#leaf-container span:nth-child(2) {
    --random-x: 0.3;
  animation-delay: 1s;
}

#leaf-container span:nth-child(3) {
    --random-x: 0.5;
  animation-delay: 3s;
}

#leaf-container span:nth-child(4) {
    --random-x: 0.8;
  animation-delay: 4s;
}

#leaf-container span:nth-child(5) {
    --random-x: 1;
  animation-delay: 1.4s;
}

#leaf-container span:nth-child(6) {
    --random-x: 1.2;
  animation-delay: 1.2s;
}

#leaf-container span:nth-child(7) {
    --random-x: 1.5;
  animation-delay: 2.1s;
}

#leaf-container span:nth-child(8) {
    --random-x: 1.8;
  animation-delay: 2s;
}
        </style>
<script>

</script>
<div id="leaf-container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Поделиться15602.06.24 21:59:04

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

Код:

* {
  margin: 0;
}

.bg {
  width: 100wh;
  height: 100vh;
  background: url("https://images.unsplash.com/photo-1608939070588-29794905e761?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y3liZXJwdW5rJTIwY2l0eXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60")
    center / 100% auto no-repeat;
  animation: color-change 10s linear infinite;
  position: relative;
}

.bg::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  animation: flash 4s linear infinite;
}

.lightning {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 144px;
  opacity: 0;
  animation: lightning 4s linear infinite;

  background: url("https://www.freepnglogos.com/uploads/lightning-png/download-lightning-png-transparent-image-and-clipart-2.png")
    top center / 100% auto no-repeat;
}

.rain {
  height: 100vh;
  background: url("https://www.freeiconspng.com/thumbs/rain-png/rain-png-transparent-9.png");
  /*   filter:  contrast(400%); */
  animation: rain 0.5s linear infinite;
}

@keyframes rain {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -20% 100%;
  }
}

@keyframes color-change {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  12% {
    opacity: 0.3;
  }
  14% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  22% {
    opacity: 0.6;
  }
  26% {
    opacity: 0;
  }
}

@keyframes lightning {
  0% {
    height: 0px;
  }
  8% {
    height: 0px;
    opacity: 0;
  }
  10% {
    opacity: 1;
    height: 88px;
  }
  11% {
    opacity: 0;
    height: 88px;
  }

  18% {
    height: 0px;
    opacity: 0;
  }
  20% {
    opacity: 1;
    height: 144px;
  }
  25% {
    opacity: 1;
    height: 144px;
  }
  40% {
    opacity: 0;
  }
}

Поделиться15716.06.24 19:37:47

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>
.box {
font-size: 17px;
line-height: 30px;
font-weight: 400;
-moz-osx-font-smoothing: grayscale;
word-break: break-word;
-webkit-font-smoothing: antialiased;
font-family: "Epilogue", sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.creative-cards{
padding: 120px 0;
position: relative;
}
.creative-cards .container {
max-width: 1320px;
width: 100%;
padding-right: .75rem;
padding-left: .75rem;
margin-right: auto;
margin-left: auto;
}
.creative-cards .container .row{
display: flex;
flex-wrap: wrap;
}
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 33.33333333%;
text-align: center;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.card-details {
width: 80%;
margin: auto;
position: relative;
transition: .3s ease-in-out;
}
.card-details:before {
content: "";
width: 190px;
height: 380px;
background: #f7f6f2;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skew(-20deg, 0deg);
z-index: -1;
transition: .3s ease-in-out;
}
.card-details:hover:before{
background-color: #fffab3;
}
.card-icons {
width: 140px;
height: 150px;
position: relative;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.card-icons:before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 1px solid;
width: 100%;
height: 100%;
transform: skew(-20deg, 0deg);
background: #fff;
border-color: #ffee02;
transition: .3s ease-in-out;
}
.card-details:hover .card-icons:before{
background-color: #ffee02;
}
.card-icons img{
position: relative;
width: 70px;
height: 70px;
}
.card-details h3{
margin-bottom: 15px;
margin-top: 50px;
font-weight: 700;
font-size: 1.75rem;
line-height: 1.2;
}
.card-details h3 a{
color: #000;
text-decoration: none;
}
.card-details p{
font-size: 16px;
line-height: 30px;
color: #444;
font-weight: 400;
margin-bottom: 30px;
}
.read-more-btn {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 100%;
margin: auto;
background: #fff;
transform: translateX(-10px);
opacity: 0;
visibility: hidden;
border-color: #ffee02;
transition: .3s ease-in-out;
text-decoration: none;
}
.read-more-btn i{
color: #000;
font-size: 12px;
}
.card-details:hover .read-more-btn{
transform: translateX(0);
opacity: 1;
visibility: visible;
}

/* ============= Responsive Ipad ==================== */
@media (max-width: 992px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 50%;
margin-bottom: 40px;
}
}

/* ============= Responsive Iphone ==================== */
@media (max-width: 480px) {
.creative-cards .container .row .card-column {
flex: 0 0 auto;
width: 100%;
margin-bottom: 20px;
}
.card-details{
width: 100%;
}
.read-more-btn{
transform: translateX(0px);
opacity: 1;
visibility: visible;
}
}

</style>
<div class="box">
<section class="creative-cards style-one">
<div class="container">
<div class="row">
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="https://imgpanda.com/upload/ib/1yIWjyG41o.png" alt="icon" />
</div>
<h3><a href="https://www.fiverr.com/aliali44">Core Planning</a></h3>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
<a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="https://imgpanda.com/upload/ib/Q4tSh2ctkH.png" alt="icon" />
</div>
<h3><a href="https://www.fiverr.com/aliali44">Traditional Designs</a></h3>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
<a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
<div class="card-column">
<div class="card-details">
<div class="card-icons">
<img class="light-icon" src="https://imgpanda.com/upload/ib/YQdOwN6IDJ.png" alt="icon" />
</div>
<h3><a href="https://www.fiverr.com/aliali44">Quality Materials</a></h3>
<p>Lorem ipsum dolor sit amet, consectne auctor aliquet. Aenean sollicitudi bibendum auctor.</p>
<a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</div>
</div>
</section>
</div>
[/html]

Поделиться15816.06.24 19:59:18

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
display: grid;
place-content: center;
background: #333;
padding: 2em;
}

.container {
text-align: center;
}

.card {
position: relative;
display: inline-block;
width: 16em;
height: 16em;
background: #fff;
margin: 0.7em;
overflow: hidden;
}
.card h1 {
text-align: center;
margin: 1em 0;
color: #333;
font-family: 'Montserrat', sans-serif;
}
.back {
background: #555;
}
.middle {
background: #444;
}
.front {
background: #333;
}

.card b {
display: block;
}

/* PARALLAX */

.parallax .back {
margin-top: 2em;
width: 1em;
height: 1em;
box-shadow:
-15em 0 0 0 #555,
-10em 0 0 0 #555,
-5em 0 0 0 #555,
5em 0 0 0 #555,
10em 0 0 0 #555,
15em 0 0 0 #555;
animation: parallax-back 12s linear infinite;
}
@keyframes parallax-back {
0% { transform: translateX(0) }
100% { transform: translateX(20em) }
}
.parallax .middle {
margin-top: 1em;
width: 2em;
height: 2em;
box-shadow:
-20em 0 0 0 #444,
-10em 0 0 0 #444,
10em 0 0 0 #444,
20em 0 0 0 #444;
animation: parallax-middle 2s linear infinite;
}
@keyframes parallax-middle {
0% { transform: translateX(0) }
100% { transform: translateX(20em) }
}
.parallax .front {
margin-top: 0.5em;
width: 4em;
height: 4em;
box-shadow:
-15em 0 0 0 #333,
15em 0 0 0 #333;
animation: parallax-front 0.6s linear infinite;
}
@keyframes parallax-front {
0% { transform: translateX(0) }
100% { transform: translateX(15em) }
}

/* PERSPECTIVE */

.perspec b {
position: absolute;
}
.perspec .back {
width: 2em;
height: 2em;
animation: perspec-back 3s linear infinite;
}
@keyframes perspec-back {
0%,100% { transform: translate(3em,0) }
25% { transform: translate(3.4em,0) }
50% { transform: translate(3.4em,0.6em) }
75% { transform: translate(3em,0.6em) }
}
.perspec .middle {
width: 4em;
height: 4em;
animation: perspec-middle 3s linear infinite;
}
@keyframes perspec-middle {
0%,100% { transform: translate(4.2em,0.4em) }
25% { transform: translate(4.8em,0.4em) }
50% { transform: translate(4.8em,1.2em) }
75% { transform: translate(4.2em,1.2em) }
}
.perspec .front {
width: 6em;
height: 6em;
animation: perspec-front 3s linear infinite;
}
@keyframes perspec-front {
0%,100% { transform: translate(6.5em,1em) }
25% { transform: translate(7.5em,1em) }
50% { transform: translate(7.5em,2em) }
75% { transform: translate(6.5em,2em) }
}

/* FOCUS */

.focus b {
position: absolute;
}
.focus .back {
width: 2em;
height: 2em;
transform: translate(3.4em,0.6em) ;
animation: focus-back 8s linear infinite;
}
@keyframes focus-back {
20%,30% { filter: blur(5px) }
0%,40%,50%,80%,100% { filter: blur(3px) }
60%,70% { filter: blur(0.01px) }
}
.focus .middle {
width: 4em;
height: 4em;
transform: translate(4.8em,1.2em);
animation: focus-middle 8s linear infinite;
}
@keyframes focus-middle {
20%,70% { filter: blur(3px) }
0,10%,80%,100% { filter: blur(0.01px) }
}
.focus .front {
width: 6em;
height: 6em;
transform: translate(7.5em,2em);
animation: focus-front 8s linear infinite;
}
@keyframes focus-front {
60%,70% { filter: blur(6px) }
0%,10%,50%,80%,100% { filter: blur(3px) }
20%,40% { filter: blur(0.01px) }
}

/* ZOOM */

.zoom b {
position: absolute;
}
.zoom .back {
width: 2em;
height: 2em;
animation: zoom-back 4s infinite;
}
@keyframes zoom-back {
0%,100% { transform: translate(5em,0em) scale(1) }
50% { transform: translate(4em,-0.8em) scale(0.6) }
}
.zoom .middle {
width: 4em;
height: 4em;
transform: translate(6em,0.5em);
}
.zoom .front {
width: 6em;
height: 6em;
animation: zoom-front 4s infinite;
}
@keyframes zoom-front {
0%,100% { transform: translate(8em,1.5em) scale(1) }
50% { transform: translate(10em,3em) scale(1.4) }
}

/* SLOW MOTION */

.slow b {
position: absolute;
}

.slow .middle {
width: 4em;
height: 4em;
box-shadow: -4em -2em 0 -1em #555, 6.5em 4em 0 1.5em #333;
animation: slow-middle 2s linear infinite;
}
@keyframes slow-middle {
0% { transform: translate(-1em,-2em) scale(0.2) }
12% { transform: translate(3em,0) scale(0.9) }
100% { transform: translate(5em,1em) scale(1.1) }
}

/* GLITCH */

.glitch b {
position: absolute;
}

.glitch .back {
width: 2em;
height: 2em;
transform: translate(2em,5em) ;
}
.glitch .middle {
width: 4em;
height: 4em;
transform: translate(4.5em,3em);
animation: glitch-middle 3s infinite;
}
@keyframes glitch-middle {
0%,26%,30%,72%,76%,100% { transform: translate(4.5em,3em) skew(0deg) ; box-shadow: none }
30%,70% {transform: translate(4.5em,3em) skew(30deg);}
29%,31%,69%,71% {transform: translate(4.5em,3em) skew(0deg);}
28%,74% { box-shadow:
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
}
}
.glitch .middle:after,
.glitch .middle:before {
display: block;
content: "";
background: #444;
width: 4em;
}
.glitch .middle:after {
height: 1.4em;
animation: glitch-middle-after 3s infinite;
}
@keyframes glitch-middle-after {
0%,34%,38%,46%,50%,100% { transform: translate(0,1em); box-shadow: none; }
36%,48% { transform: translate(0.4em,0em);
box-shadow:
-1em 0 0 0 cyan,
1em 0 0 0 magenta,
0.5em 1em 0 -0.8em cyan
}
}
.glitch .middle:before {
height: 1em;
transform: translate(0em,3em);
animation: glitch-middle-before 3s infinite;
}
@keyframes glitch-middle-before {
0%,30%,34%,50%,54%,100% { transform: translate(0,0); box-shadow: none; }
32%,52% { transform: translate(-0.4em,1em);
box-shadow:
-0.3em 0 0 0 red,
0.3em 0 0 0 yellow}
}
.glitch .front {
width: 6em;
height: 6em;
transform: translate(9em,1em);
}

/* SHAKE */

.shake b {
position: absolute;
}

.shake .back {
width: 2em;
height: 2em;
transform: translate(2em,5em) ;
}
.shake .middle {
width: 4em;
height: 4em;
animation: zoom-middle 2s infinite;
}
@keyframes zoom-middle {
0%,40%,80%,100% { transform: translate(4.5em,3em) }
42%,46%,50%,54%,58%,62%,66%,70%,74%,78% { transform: translate(4.4em,3em) }
44%,48%,52%,56%,60%,64%,68%,72%,76% { transform: translate(4.6em,3em) }
}
.shake .front {
width: 6em;
height: 6em;
transform: translate(9em,1em);
}

</style>
<script>

</script>
<div class="container">
<div class="parallax card">
<h1>Parallax</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="perspec card">
<h1>Perspective</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="focus card">
<h1>Focus</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="slow card">
<h1>Slow Motion</h1>
<b class="middle"></b>
</div>

<div class="glitch card">
<h1>Glitch</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>

<div class="shake card">
<h1>Shake</h1>
<b class="back"></b>
<b class="middle"></b>
<b class="front"></b>
</div>
</div>
[/html]

Поделиться15916.06.24 20:51:51

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]

/* sorry, i need to play */
div:after {
content: "CreativeJuiz";
position:relative;
top: 120px;
left:-14px;
font-size: 1.25em;
font-family: helvetica, arial, sans-serif;
font-variant: small-caps;
color:#888;
opacity:0;
transition: opacity 2s;
}
div:hover:after {
opacity: 1;
transition: opacity 1s 1s;
}

h12 {
font-family: "Open Sans", "Segeo UI", Helvetica, Arial, sans-serif;
font-size: 18px;
margin-top: 1em;
color: #aaa;
}
</style>

<h12>Different effects in mouseover and mouseout</h12>
<div></div>[/html]

Поделиться16016.06.24 20:54:28

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>
</style>
<script>
(function(){
var Part = function(x,y){
this.x = x;
this.y = y;
this.bx = x;
this.by = y;
this.ax = 0;
this.ay = 0;
this.r;
this.g;
this.b;
this.a;
};
Part.prototype = {
r : function (v) { this.r = v;return this; },
g : function (v) { this.g = v;return this; },
b : function (v) { this.b = v;return this; },
a : function (v) { this.a = v;return this; },
};
var String = function(str){
this.fontSize = 40;
this.font = 'Elsie Swash Caps';
this.str = str;
this.strWidth;
this.d = document;
this.c;
this.$;
this.parr = [];
this.set();
};
String.prototype = {
set : function(){
var c = this.d.createElement('canvas');
var $ = c.getContext('2d');
$.strokeStyle = '#eae2cf00';
$.textBaseline = 'top';
$.font = '45px Elsie Swash Caps';
c.width = $.measureText(this.str).width;
this.strWidth = c.width;
c.height = ~~(45 * 1.2);
$.strokeStyle = '#eae2cf00';
$.textBaseline = 'top';
$.font = '45px Elsie Swash Caps';
$.fillText(this.str,0,0);
this.c = c;
this.$ = $;
},
app : function(e){
e.appendChild(this.c);
this.build();
this.ev();
return this;
},
el : function(){
return this.c;
},
build : function(){
var w = this.c.width,
h = this.c.height,
id = this.$.getImageData(0,0,w,h).data,
l = id.length
;
for(var i=0;i<l;i+=4){
var y = ~~(i / (w*4));
var x = (i/4)%w;
var r = id[i];
var g = id[i+1];
var b = id[i+2];
var a = id[i+3];
if (r+g+b<100 && a>50){
this.parr.push( (new Part(x,y)).r(r).g(g).b(b).a(a) );
}
}
},
ev : function(){
var _this = this;
this.c.onmouseover = function(){
var __t = setInterval(_this.func(_this,_this.anim),50);
setTimeout(function(){
clearInterval(__t);
var cnt = 10;
var time = setInterval(function(){
cnt--;
for(var i=0,l=_this.parr.length;i<l;i++){
var p=_this.parr[i];
p.x = p.bx;
p.y = p.by + ((_this.fontSize-p.by) * (cnt) / 10);
}
_this._draw(_this.parr);
if (cnt<=0) {
_this.$.clearRect(0,0,_this.c.width,_this.c.height);
_this.def(_this.parr);
_this._draw(_this.parr);
clearInterval(time);
}
},30);
},3000);
};
},
func : function(thisFunc,func){
return function(){
func.call(thisFunc);
};
},
anim : function(){
this._move(this.parr);
this._draw(this.parr);
},
_draw : function(parr){
this.$.fillStyle = '#ffff';
this.$.fillRect(0,0,this.c.width,this.c.height);
for(var i=0,l=parr.length;i<l;i++){
var p=parr[i],x=~~p.x,y=~~p.y;
this.$.fillStyle = '#000';
this.$.fillRect(x,y,1,1);
}
},
_move : function(parr){
for(var i=0,l=parr.length;i<l;i++){
var p=parr[i];
p.ax == 0 ? p.ax = 0.2*(Math.random()-0.5) : p.ax *= 1.1;
p.ay == 0 ? p.ay = (Math.random()) : p.ay *= 1.1;
p.x += p.ax;
p.y += p.ay;
}
},
def : function(parr){
for(var i=0,l=parr.length;i<l;i++){
var p=parr[i];
p.x = p.bx;
p.y = p.by;
p.ax = p.ay = 0;
}
}
};

setTimeout(function(){
var loc = document.querySelectorAll('div.txt');
var start = (new Date().getTime())/1000;
Array.prototype.map.call(loc,function(e){
if ((new Date().getTime())/1000 > start+5) return;
var nodes = Array.prototype.slice.call(e.childNodes);
nodes.map(function(n){
if ((new Date().getTime())/1000 > start+5) return;
if (n instanceof Text){
var id = n.textContent || n.id;
var frag = document.createDocumentFragment();
id.split('').map(function(str){
if(str==='' || str==='\n' || str==='\r' || str==='\t')return;
(new String(str)).app(frag).el().style.verticalAlign = 'top';
});
e.replaceChild( frag , n );
}
});

});
},0);

})();
</script>
<section style="background: #ffff;">
<div class="txt">Падающие буквы</div><hr><div class="txt">Возвращение букв</div>
</section>

[/html]

Поделиться16116.06.24 22:42:51

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>

body {
font-family: 'Lato', sans-serif;
font-size: 15px;
background: #d8ecf2;
color: RGBA(67, 83, 99, 1);
}

.container {
margin: 0 auto;
width: 350px;
max-width: 350px;
}

h2 {
padding: 1.8rem 0;

font-size: 2.8rem;

text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);

}

nav {
-webkit-box-flex: auto;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
position: relative;
padding: .6125rem .6152rem 1.6125rem;
}

li a {
text-decoration: none;
color: RGBA(67, 83, 99, 1);
cursor: -webkit-zoom-in;
cursor: zoom-in;
}

ul:hover a {
opacity: .8;

-webkit-transform: scale(0.97);
transform: scale(0.97);
}

ul a {
display: block;
position: relative;
padding: .75rem 1rem 1rem;

-webkit-transition: -webkit-transform .22s,box-shadow .22s;
transition: transform .22s,box-shadow .22s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
user-drag: none;
box-shadow: 0 0 0 -.25rem rgba(0,0,0,.1);
}

ul a:focus, ul a:hover {
outline: 0;
box-shadow: 0 .5rem 0 -.25rem rgba(0,0,0,.1);
opacity: 1;
-webkit-transform: scale(1.03);
transform:scale(1.03);
-webkit-transition: -webkit-transform .088s,box-shadow .088s;
transition: transform .088s,box-shadow .088s;
z-index: 1;
}

.menu a:nth-child(1) {
background: #95c5db;
}
.menu a:nth-child(2) {
background: #94c1db;
}
.menu a:nth-child(3) {
background: #94bddb;
}
.menu a:nth-child(4) {
background: #94b9db;
}
.menu a:nth-child(5) {
background: #94b5db;
}
.menu a:nth-child(6) {
background: #94b2db;
}

.menu a:nth-child(6):hover {
cursor: pointer;
}

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}

70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}

100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}

@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}

70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}

100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}

.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
</style>
<script>

</script>
<div class="container ta-c">
<h2 class="p-r">Animate menu CSS</h2>
<nav class="menu animated flipInX">
<ul class="no-ls ta-l t-all">
<li>
<a href="#">
<h3>Link 1</h3>
<p>text 1</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 2</h3>
   <p>text 2</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 3</h3>
   <p>text 3</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 4</h3>
   <p>text 4</p>
</a>
</li>
<li>
<a href="#">
   <h3>Link 5</h3>
   <p>text 5</p>
</a>
</li>
<li>
<a href="http://joellesenne.xyz">
<p>© 2014 – Joël Lesenne</p>
</a>
</li>
</ul>
</nav>
</div>
[/html]

Поделиться16216.06.24 23:08:21

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>

.pag {
height: 300px;
}

.menu {
z-index: 99;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
background: linear-gradient(45deg, #B388EB, #8093F1);
border-radius: 20px;
color: #FFF;
font-size: 20px;
letter-spacing: 1px;
font-weight: 200;
}

.play {
opacity: 0;
position: relative;
margin: 8px;
width: 50px;
height: 50px;
border-radius: 100%;
display: inline-block;
font-size: 13px;
text-align: center;
z-index: 96;
}
.play a{
color: #fff!important;
}
.play img{
width: 30px;
height: 30px;
}

.one {
background: #deadcf;
}

.two {
background: #c1a9d0;
}

.three {
background: #c8acca;
}

.four {
background: #b0a6d3;
}

.clicked {
opacity: 1;
transition: 1.2s all ease;
transform: translateY(50px);
}

</style>
<script>

$(".menu").click(function(){
$(".play.one").toggleClass("clicked");
$(".play.two").toggleClass("clicked");
$(".play.three").toggleClass("clicked");
$(".play.four").toggleClass("clicked");
})

</script>

<div class="pag">
<div class="menu">навигация</div>
<div class="play one"><a href="#" target="_blank"><img src="https://upforme.ru/uploads/001c/1e/87/2/986786.gif">гостевая</a></div>
<div class="play two"><a href="#" target="_blank"><img src="https://upforme.ru/uploads/001c/1e/87/2/812147.gif">сюжет</a></div>
<div class="play three"><a href="#" target="_blank"><img src="https://upforme.ru/uploads/001c/1e/87/2/837486.gif">вопросы</a></div>
<div class="play four"><a href="#" target="_blank"><img src="https://upforme.ru/uploads/001c/1e/87/2/265095.gif">фак</a></div>
</div>
[/html]

Поделиться16317.06.24 17:32:35

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>
.punbb {
margin-left: 0px !important;
}

.juhmp { width:545px;padding:9px;border:solid 1px #e3e3e3;background-color:#f5f5f5;color:#444444;text-align:justify; }
.juhmp a { text-decoration:none; }
.juhmp-img { border:solid 1px #e3e3e3;background-color:#5c9cab; }
.juhmp-img-2 { padding:29px;background-color:rgba(255,255,255,.88); }
.juhmp-img-2 div { width:550px;height:250px;padding:4px;background-color:#f9f9f9;border:solid 1px #e3e3e3; }
.juhmp-img-2 div img { height:250px;width:550px; }
.juhmp-tabz { background-color:#eeeeee;border:solid 1px #e3e3e3;border-top:none;height:509px; }
.juhmp-tabz-1 { width:543px;display:none; }
.juhmp-tabz-2 { width:543px;display:none; }
.juhmp-tabz-3 { width:543px;display:none; }

.juhmp-banner { width:545px;height:250px;background-color:#5c9cab;position:relative;overflow:hidden; }
.juhmp-banner-img { height:250px;width:545px;overflow:hidden;position:absolute;mix-blend-mode:lighten; }
.juhmp-banner-diamond { background-color:rgba(255,255,255,.15);margin:0px 0px 0px 152px;height:250px;width:250px;position:absolute;transform:rotate(45deg); }
.juhmp-banner-name { font:60px Montserrat;font-weight:300!important;letter-spacing:-1px;position:absolute;color:#f9f9f9;text-align:center;width:545px;line-height:60px;padding-top:85px;text-shadow:0px 0px 4px rgba(44,44,44,.35); }
.juhmp-banner-name div { font:bold 10px Inconsolata;letter-spacing:3px;line-height:10px;text-transform:uppercase; }
.juhmp-banner img { width:545px;filter:grayscale(100%) contrast(90%); }
.juhmp-border { border:solid 1px #e3e3e3;border-top:none;padding:10px 12px 0px 10px;height:26px;background-color:#e9e9e9; }
.juhmp-border div { cursor:pointer;font:bold 7px Open Sans;letter-spacing:.5px;line-height:8px;text-transform:uppercase;text-align:center;margin-right:2px;border:solid 1px #e3e3e3;border-bottom:none;border-radius:5px 5px 0px 0px;padding:9px;height:7px;background-color:#f3f3f3;width:85px;float:left; }
.juhmp-border-1 { color:#5c9cab;background-color:#f9f9f9!important;font-size:10px!important;line-height:15px!important;border-bottom:solid 1px #e3e3e3!important;border-radius:5px!important;padding:0px!important;height:15px!important;width:15px!important;margin:4px 0px 0px 3px; }
.juhmp-border h1 { font:bold 7px Open Sans;letter-spacing:.5px;line-height:8px;float:right;text-transform:uppercase; }
.juhmp-bar { border:solid 1px #e3e3e3;border-top:none;padding:15px;background-color:#f9f9f9;height:30px; }
.juhmp-bar-link { border-radius:3px;border:solid 1px #e5e5e5;float:left;height:28px;width:28px;background-color:#f5f5f5;margin-right:5px; }
.juhmp-bar-link div, .juhmp-bar-1 div { color:#5c9cab;font-size:10px;text-align:center;display:flex;align-items:center;justify-content:center;height:100%; }
.juhmp-bar-1 { cursor:pointer;color:#5c9cab;border-radius:3px;border:solid 1px #e5e5e5;float:right;font-size:10px;height:28px;line-height:28px;text-align:center;width:28px;background-color:#f5f5f5;margin-left:5px; }
.juhmp-bar-2 { cursor:text;border-radius:3px;border:solid 1px #e5e5e5;background-color:#f5f5f5;font:10px Inconsolata;line-height:10px;padding:9px;text-transform:lowercase;letter-spacing:.5px;margin:0px 105px 0px 35px; }
.juhmp-bar-2 b { color:#5c9cab; }

.juhmp-quote { background-color:#5c9cab;position:relative;overflow:hidden;height:208px; }
.juhmp-quote-1 { padding:36px 35px 37px 35px;background:linear-gradient(to bottom,rgba(247,247,247,.75),rgba(247,247,247,.9));border-bottom:solid 1px #e3e3e3; }
.juhmp-quote-icon { border:solid 1px #e3e3e3;background-color:#f9f9f9;border-radius:100%;width:104px;height:104px;padding:14px; }
.juhmp-quote-icon-1 { height:100px;width:100px;padding:2px;background-color:#5c9cab;border-radius:100%; }
.juhmp-quote-icon-1 img { height:100px;width:100px;border-radius:100%;mix-blend-mode:lighten;filter:grayscale(100%) contrast(90%); }
.juhmp-quote table { position:relative;z-index:1;border-spacing:0px; }
.juhmp-quote td { vertical-align:top;padding:0px!important; }
.juhmp-quote-words { padding-top:18px;font:30px Montserrat;line-height:25px;text-align:center;color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }
.juhmp-quote-i { opacity:.08;margin:-87px 0px 0px -60px;position:absolute;font-size:300px;line-height:300px;transform:rotate(25deg);color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }
.juhmp-quote-cred { float:right;position:relative;z-index:1;margin-top:-21px;font:bold 9px Open Sans;letter-spacing:.5px;line-height:11px;height:11px;text-transform:uppercase;color:#f9f9f9;background-color:#5c9cab;padding:15px 15px 15px 20px;border-radius:55px 0px 0px 55px; }

.juhmp-palette { float:left;padding:35px;padding-bottom:26px;border-right:solid 1px #e3e3e3;position:relative;z-index:1;background-color:#f9f9f9; }
.juhmp-palette-1 { border:solid 1px #e3e3e3;padding:4px;margin-bottom:-1px; }
.juhmp-palette-1 div { height:39px;width:40px;background-color:#5c9cab;background-color:#f3f3f3; }
.juhmp-images { padding:35px 25px 25px 158px;background-color:#eeeeee;height:241px; }
.juhmp-images div { margin-right:10px;margin-bottom:10px;background-color:#f9f9f9;padding:4px;border:solid 1px #e3e3e3;width:100px;float:left;white-space:nowrap;text-transform:uppercase;height:100px; }
.juhmp-images span { position:absolute;background-color:#5c9cab;height:100px;width:100px; }
.juhmp-images img { mix-blend-mode:lighten;filter:grayscale(100%) contrast(90%);height:100px;width:100px; }

.juhmp-music-left { height:509px;border-right:solid 1px #e3e3e3;float:left;background-color:#5c9cab; }
.juhmp-music-left div { height:509px;width:94px;background:linear-gradient(to top,rgba(247,247,247,.75),rgba(247,247,247,.9)); }
.juhmp-music-left h1 { position:absolute;margin:475px 31px;padding:0px;width:0px;height:0px;white-space:nowrap;transform:rotate(-90deg);float:left;font:35px Montserrat;line-height:30px;color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }
.juhmp-music { padding:9px;padding-left:104px;background-color:#eeeeee;height:491px; }
.juhmp-music-top { white-space:nowrap;overflow:hidden;text-align:right;border:solid 1px #e3e3e3;padding:29px 39px 29px 29px;background-color:#f9f9f9;height:75px; }
.juhmp-music-top-1 { border:solid 1px #e3e3e3;background-color:#f3f3f3;padding:4px;border-radius:100%;width:65px;position:absolute; }
.juhmp-music-top-1 div { background-color:#5c9cab;height:65px;width:65px;border-radius:100%;color:#f9f9f9;font-size:30px; }
.juhmp-music-top-1 div i:before { display:block;line-height:65px;width:65px;text-align:center; }
.juhmp-music-top h1 { padding:10px 0px 0px 0px;margin:0px;text-transform:lowercase;color:#5c9cab;font:35px Montserrat;line-height:30px;letter-spacing:-1.5px; }
.juhmp-music-top h2 { padding:10px 0px 0px 0px;margin:0px;text-transform:uppercase;font:bold 12px Open Sans;line-height:10px;letter-spacing:.5px; }
.juhmp-music-bot { border:solid 1px #e3e3e3;border-top:none;padding:30px;background-color:#f9f9f9; }
.juhmp-music-bot-1 { height:295px;overflow:auto;scrollbar-color:#5c9cab transparent;scrollbar-width:thin; }
.juhmp-music-bot-1::-webkit-scrollbar-thumb:vertical { background-color:#eeeeee;border:solid 1px #e3e3e3;border-left:none;border-radius:0px; }
.juhmp-music-bot-1::-webkit-scrollbar { width:5px;background-color:transparent;border:solid 1px #e3e3e3;border-left:none;border-radius:0px; }

.juhmp-music-bot-2 { border:solid 1px #e3e3e3;background-color:#f3f3f3;padding:4px;margin-bottom:-1px; }
.juhmp-music-bot-3 { background-color:#5c9cab;position:relative;overflow:hidden; }
.juhmp-music-bot-3 div { background-color:rgba(247,247,247,.85);font:bold 10px Open Sans;line-height:10px;text-transform:uppercase;color:#444444;letter-spacing:.5px;padding:15px; }
.juhmp-music-bot-3 i { position:absolute;color:#5c9cab;font-size:60px;line-height:60px;margin:-23px 0px 0px 275px;opacity:.1; }
.juhmp-music-bot-3 b { color:#5c9cab;text-shadow:.75px .75px 0px #f9f9f9, .75px 0px 0px #f9f9f9, 0px .75px 0px #f9f9f9, -.75px 0px 0px #f9f9f9, 0px -.75px 0px #f9f9f9, -.75px .75px 0px #f9f9f9, .75px -.75px 0px #f9f9f9, -.75px -.75px 0px #f9f9f9; }

.juhmp-relate { background-color:#eeeeee;padding:30px;padding-top:15px;height:464px;overflow:auto;scrollbar-color:#e3e3e3 transparent;scrollbar-width:thin; }
.juhmp-relate::-webkit-scrollbar-thumb:vertical { background-color:#e9e9e9;border:none;border-left:solid 1px #e3e3e3;border-radius:0px; }
.juhmp-relate::-webkit-scrollbar { width:7px;background-color:#f9f9f9;border:none;border-left:solid 1px #e3e3e3;border-radius:0px; }
.juhmp-relate table { border-spacing:0px!important; }
.juhmp-relate td { padding:0px!important;vertical-align:top; }

.juhmp-relate-1 { margin-top:15px; }
.juhmp-relate-img, .juhmp-relate-img-1 { height:64px;width:64px;padding:7px;border:solid 1px #e3e3e3;background-color:#f3f3f3;border-radius:100%; }
.juhmp-relate-img div, .juhmp-relate-img-1 div { height:60px;width:60px;padding:2px;background-color:#5c9cab;border-radius:100%; }
.juhmp-relate-img img, .juhmp-relate-img-1 img { height:60px;width:60px;border-radius:100%;mix-blend-mode:lighten;filter:grayscale(100%) contrast(90%); }
.juhmp-relate-img-1 { margin-left:20px; }
.juhmp-relate-2 { border:solid 1px #e3e3e3;padding:29px;border-radius:4px;background-color:#f3f3f3; }
.juhmp-relate-3 { float:left;border-right:solid 10px #e3e3e3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:0px 0px 0px -40px; }
.juhmp-relate-31 { float:left;border-right:solid 10px #f3f3f3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:0px 0px 0px -38px; }
.juhmp-relate-4 { font:11px Open Sans;color:#444444;text-align:justify;max-height:60px;overflow:auto;padding-right:10px;scrollbar-color:#5c9cab transparent;scrollbar-width:thin; }
.juhmp-relate-4::-webkit-scrollbar-thumb:vertical { background-color:#eeeeee;border:solid 1px #e3e3e3;border-radius:0px; }
.juhmp-relate-4::-webkit-scrollbar { width:5px;background-color:transparent;border-radius:0px; }
.juhmp-relate-32 { float:left;border-left:solid 10px #e3e3e3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:30px 0px 0px 0px; }
.juhmp-relate-33 { float:left;border-left:solid 10px #f3f3f3;border-top:solid 10px transparent;border-bottom:solid 10px transparent;margin:30px 0px 0px -12px; }
.juhmp-relate-5 a { font:25px Montserrat;line-height:20px;color:#5c9cab; }
.juhmp-relate-5 { font:25px Montserrat;line-height:20px;padding-bottom:10px;text-transform:lowercase;letter-spacing:-1px; }

.juhmp input { display:none; }
.juhmp label { opacity:0;position:absolute;margin:-88px 0px 0px 10px;cursor:pointer;font:bold 7px Open Sans;letter-spacing:.5px;line-height:8px;text-transform:uppercase;text-align:center;margin-right:2px;border:solid 1px #e3e3e3;border-bottom:none;border-radius:5px 5px 0px 0px;padding:9px;height:8px;background-color:#f9f9f9;width:85px;float:left;color:#5c9cab; }

#juhmp-tab-1:checked ~ .juhmp-tabb-1 { opacity:1; }
#juhmp-tab-1:checked ~ .juhmp-tabz-1 { display:block; }
#juhmp-tab-2:checked ~ .juhmp-tabb-2 { opacity:1; }
#juhmp-tab-2:checked ~ .juhmp-tabz-2 { display:block; }
#juhmp-tab-3:checked ~ .juhmp-tabb-3 { opacity:1; }
#juhmp-tab-3:checked ~ .juhmp-tabz-3 { display:block; }

</style>
<script>

</script>

hatsune miku
<div>might as well jump - go ahead & jump</div>

</div>
</div>
<div class="juhmp-border"><h1>i get up, and nothing gets me down</h1>
<div>development</div>
<div>playlist</div>
<div>relationships</div>
<div class="juhmp-border-1">+</div>
</div>
<div class="juhmp-bar">
<a href="LINK TO APP" title="APPLICATION">
<div class="juhmp-bar-link"><div><i class="ph-fill ph-globe"></i></div></div></a>
<div class="juhmp-bar-1"><i class="ph-bold ph-x"></i></div>
<div class="juhmp-bar-1"><i class="ph-bold ph-copy"></i></div>
<div class="juhmp-bar-1"><i class="ph-bold ph-minus"></i></div>
<div class="juhmp-bar-2">http://site-name.com/<b>firstname</b>+<b>lastname</b>/all+in+one</div>
</div>
<div class="juhmp-tabz">

<input type="radio" id="juhmp-tab-1" name="juhmp-tab" checked>
<input type="radio" id="juhmp-tab-2" name="juhmp-tab">
<input type="radio" id="juhmp-tab-3" name="juhmp-tab">
<label for="juhmp-tab-1" class="juhmp-tabb-1"><div>DEVELOPMENT</div></label>
<label for="juhmp-tab-2" class="juhmp-tabb-2" style="margin-left:117px;"><div>PLAYLIST</div></label>
<label for="juhmp-tab-3" class="juhmp-tabb-3" style="margin-left:224px;"><div>RELATIONSHIPS</div></label>

</div></div>
</td><td>
<div class="juhmp-quote-words">

woah, woah - hey, you! who said that? baby, how've you been?

</div>
</td></tr></table>
</div></div>
<div class="juhmp-quote-cred">- JUMP, VAN HALEN</div>
<div class="juhmp-palette">
<div class="juhmp-palette-1"><div style="background-color:#cc78bb;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#8cb7bf;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#ccd45d;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#cfcfcf;"></div></div>
<div class="juhmp-palette-1"><div style="background-color:#121112;"></div></div>
</div>
<div class="juhmp-images">

</div>
</div>

playlist title goes here

</h1></div></div>
<div class="juhmp-music">
<div class="juhmp-music-top">

<a href="LINK TO SONG" title="PLAY THIS SONG"><div class="juhmp-music-top-1"><div><i class="th th-music-o"></i></div></div></a>
<h1>girl gone bad</h1>
<h2>van halen - 1984</h2>

</div>
<div class="juhmp-quote-cred">currently playing</div>
<div class="juhmp-music-bot"><div class="juhmp-music-bot-1">

<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>1984</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>jump</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>panama</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>top jimmy</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>drop dead legs</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>hot for teacher</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>i'll wait</b> - van halen
</div></div></div></a>
<a href="LINK TO SONG"><div class="juhmp-music-bot-2"><div class="juhmp-music-bot-3"><div>
<i class="th th-music"></i>
<b>house of pain</b> - van halen
</div></div></div></a>

</div></div></div>
</div>

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td style="width:100px;">
<div class="juhmp-relate-img" title="FRIENDS"><div><img src="https://i.imgur.com/Iu5Cnyt.png"></div></div>
</td><td>
<div class="juhmp-relate-2"><div class="juhmp-relate-3"></div><div class="juhmp-relate-31"></div>
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?

</div></div>
</td></tr></table></div>

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td>
<div class="juhmp-relate-2">
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

explanation of that relationship can go here, i guess?

</div></div>
</td><td style="width:100px;"><div class="juhmp-relate-32"></div><div class="juhmp-relate-33"></div>
<div class="juhmp-relate-img-1" title="ENEMIES"><div><img src="https://i.imgur.com/hj89m1A.png"></div></div>
</td></tr></table></div>

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td style="width:100px;">
<div class="juhmp-relate-img" title="FRIENDS"><div><img src="https://i.imgur.com/2tvHfG3.png"></div></div>
</td><td>
<div class="juhmp-relate-2"><div class="juhmp-relate-3"></div><div class="juhmp-relate-31"></div>
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

explanation of that relationship can go here, i guess?

</div></div>
</td></tr></table></div>

<div class="juhmp-relate-1"><table style="width:100%;"><tr><td>
<div class="juhmp-relate-2">
<div class="juhmp-relate-5"><a>first lastname</a></div>
<div class="juhmp-relate-4">

explanation of that relationship can go here, i guess?

</div>

</div></div>
</center>

Поделиться16426.06.24 11:15:53

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[tabtitle=ава]Аватары[/tabtitle]
[tabtitle=отн]Отношения[/tabtitle]
[tabtitle=эп]Эпизоды[/tabtitle]

[tab=ава][tabdefault]

woah, woah - hey, you! who said that? baby, how've you been?

[/tab]

[tab=отн]

	first lastname i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?
	first lastname i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?
	first lastname i get up, and nothin' gets me down. you've got it tough? i've seen the toughest around. and i know, baby, just how you feel. you've got to roll with the punches to get to what's real. now, can't you see me standing here? i've got my back against the record machine. i ain't the worst that you've seen. oh, can't you see what i mean?

[/tab]

[tab=эп]

playlist title goes here

[html]<style>
.punbb {
margin-left: 0px !important;
}
.header_header__Rdmtp { background: transparent !important;}
.header_header__Rdmtp:after { background: transparent !important;; }
</style>
<iframe frameborder="0" allow="clipboard-write" style="border:none;width:415px;height:100px;" src="https://music.yandex.ru/iframe/track/220499/1074676">Слушайте <a href='https://music.yandex.ru/album/1074676/track/220499'>Riders on the Storm</a> — <a href='https://music.yandex.ru/artist/29060'>The Doors</a> на Яндекс Музыке</iframe>[/html]

текстовое

[/tab]

[/block]

Поделиться16527.06.24 21:04:39

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

Код:

<script>
var WIDTH;
var HEIGHT;
var canvas;
var con;
var g;
var pxs = [];
var rint = 9;

$(document).ready(function(){
	WIDTH = window.innerWidth;
	HEIGHT = window.innerHeight;
	$('#container').width(WIDTH).height(HEIGHT);
	canvas = document.getElementById('particles');
	$(canvas).attr('width', WIDTH).attr('height',HEIGHT);
	con = canvas.getContext('2d');
	for(var i = 0; i < 100; i++) {
    pxs[i] = new Circle();
    pxs[i].reset();
	}
	setInterval(draw,rint);
});

function draw() {
	con.clearRect(0,0,WIDTH,HEIGHT);
	for(var i = 0; i < pxs.length; i++) {
    pxs[i].fade();
    pxs[i].move();
    pxs[i].draw();
	}
}

function Circle() {
	this.s = {ttl:8000, xmax:3, ymax:2, rmax:200, rt:1, xdef:960, ydef:540, xdrift:2, ydrift: 2, random:true, blink:true};

	// fill vars
	var crFill = [
        	['rgba(10,56,67,0)', 'rgba(10,56,67,1)'],
        	['rgba(11,67,99,0)', 'rgba(11,67,99,1)'],
        	['rgba(8,46,49,0)', 'rgba(8,46,49,1)'],
        	['rgba(7,64,60,0)', 'rgba(7,64,60,1)']
        ];

	// opacity var
	var opacityFill = "." + Math.floor(Math.random() * 5) + 1;

	this.reset = function() {
    this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
    this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
    this.r = ((this.s.rmax-1)*Math.random()) + 1;
    this.dx = (Math.random()*this.s.xmax) * (Math.random() < 0.5 ? -1 : 1);
    this.dy = (Math.random()*this.s.ymax) * (Math.random() < 0.5 ? -1 : 1);
    this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
    this.rt = Math.random()*this.hl;
    this.s.rt = Math.random()+1;
    this.stop = Math.random()*0.2+0.4;
    this.s.xdrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
    this.s.ydrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
    this.opacityFill = opacityFill;

    this.currentColor = Math.floor(Math.random()*crFill.length);
	};

	this.fade = function() {
    this.rt += this.s.rt;
	};

	this.draw = function() {
    if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)){
    	this.s.rt = this.s.rt*-1;
    }
    else if(this.rt >= this.hl){
    	this.reset();
    }
    con.beginPath();
    con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
    con.globalAlpha = opacityFill;
    var newo = 1-(this.rt/this.hl);
    var cr = this.r*newo;
    
    gradient = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
    gradient.addColorStop(0.0, crFill[(this.currentColor)][1]);
    gradient.addColorStop(0.7, crFill[(this.currentColor)][1]);
    gradient.addColorStop(1.0, crFill[(this.currentColor)][0]);

    con.fillStyle = gradient;
    con.fill();

    con.closePath();
	};

	this.move = function() {
    this.x += (this.rt/this.hl)*this.dx;
    this.y += (this.rt/this.hl)*this.dy;
    if(this.x > WIDTH || this.x < 0){
    	this.dx *= -1;
    } 
    if(this.y > HEIGHT || this.y < 0){
    	this.dy *= -1;
    } 
	};

	this.getX = function() { return this.x; };
	this.getY = function() { return this.y; };
}

</script>
<style>
.main-container{
	height:100%;
}

.section-one{
	height:100%;
}
</style>
<main class="main-container">
    <section class="section-one">
        <canvas id="particles"></canvas>
    </section>
</main>

Поделиться16601.07.24 16:37:01

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]<style>
/*
* Use :has() to filter items by category using
* checkboxes. No JS required!
*/
section:has([name="snacks"]:checked) article:has([data-category="snacks"]) {
display: block;
}

section:has([name="naps"]:checked) article:has([data-category="naps"]) {
display: block;
}

section:has([name="computers"]:checked)
article:has([data-category="computers"]) {
display: block;
}

article {
/* color code by category */
--hue: 0;

&:has([data-category="snacks"]) {
--hue: 233.35;
}

&:has([data-category="computers"]) {
--hue: 91.24;
}

&:has([data-category="naps"]) {
--hue: 334.61;
}

& img {
border: 1px solid oklch(93% 0.1 var(--hue));
}

& .categories {
background: oklch(96% 0.05 var(--hue));
border: 1px solid oklch(93% 0.1 var(--hue));
color: oklch(35% 0.104 var(--hue));
}
}

/*
* general layout stuff that’s not the cool thing I
* wanted to show off
*/

:root {
background: oklch(99.75% 0.03 146.51);
font-family: system-ui;
line-height: 1.45;
}

* {
box-sizing: border-box;
}

section {
block-size: 90cqw;
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, min(200px, 33% - 1.5rem));
margin: 2rem auto 5rem;
place-content: start center;
}

form {
align-items: baseline;
background: oklch(99.62% 0.01 146.51);
border: 1px solid oklch(99.62% 0.2 146.51);
border-radius: 0.25rem;
color: oklch(30% 0.3 146.51);
display: flex;
gap: 1rem;
grid-column: 1 / span 3;
margin-block-end: 1rem;
justify-content: center;
padding: 1rem;

& p {
line-height: 1;
margin: 0;
}
}

label,
input {
color: inherit;
font-size: 1rem;
line-height: 1;
margin: 0;
padding: 0;
}

input {
block-size: 1rem;
inline-size: 1rem;
position: relative;
inset-block-start: 0.125rem;
}

article {
container-type: inline-size;
display: none;
margin: 0;

& img {
aspect-ratio: 16 / 9;
border-radius: 0.25rem;
display: block;
inline-size: 100%;
object-fit: cover;
}

& h2 {
color: oklch(25% 0.104 146.51);
font-size: clamp(0.75rem, 9cqw, 1rem);
font-weight: 300;
letter-spacing: 0.1em;
line-height: 1.1;
margin: clamp(0.125rem, 2cqw, 0.375rem) 0;
}

& .categories {
border-radius: 0.25rem;
display: inline-block;
font-size: clamp(0.4rem, 5.5cqw, 0.625rem);
letter-spacing: 0.15em;
line-height: 1;
margin: 0;
padding: clamp(0.125rem, 2cqw, 0.25rem);
font-variant: small-caps;
}

& .categories::after {
content: attr(data-category);
}
}

</style>

</script>

<section>
<form>
<p>Filter by category:</p>
<label>
<input type="checkbox" name="snacks" checked />
snacks
</label>

<label>
<input type="checkbox" name="computers" checked />
computers
</label>
</form>

<article>
<img src="https://images.unsplash.com/photo-1708724195876-1156245fce21?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Afternoon Hammock</h2>
<p class="categories" data-category="naps"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1709625862284-b8a82d339b99?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Tomagotchi</h2>
<p class="categories" data-category="computers"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1643916861364-02e63ce3e52f?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Strawberry Ice Cream</h2>
<p class="categories" data-category="snacks"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1672217617440-1dd3e9417ce1?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Tortilla Chips</h2>
<p class="categories" data-category="snacks"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1699462515761-90db271d77c8?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Comfy Chair</h2>
<p class="categories" data-category="naps"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1709625862266-014ef072fd93?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Game Boy Advance</h2>
<p class="categories" data-category="computers"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1637611331620-51149c7ceb94?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Hummus</h2>
<p class="categories" data-category="snacks"></p>
</article>

<article>
<img src="https://images.unsplash.com/photo-1688748807457-d8926e351596?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=400" alt="abstract color pattern" />
<h2>Sneaky Desk</h2>
<p class="categories" data-category="naps"></p>
</article>

</section>[/html]

Поделиться16701.07.24 16:44:54

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]

.sun::after {
position: absolute;
left: -100px;
bottom: -60px;
display: block;
content: '';
width: 380px;
height: 150px;
background: linear-gradient(0deg, rgba(255,255,255,0.3) 70%, rgba(233,144,70,.2) 100%);
backdrop-filter: blur(20px);
border-radius: 50%;
transform: rotate(15deg);
transform-origin: center center;
}

</style>

</script>

<div class="sun"></div>
[/html]

Поделиться16801.07.24 16:57:28

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[hideprofile][html]

<style>

main {
max-width: 100rem;
margin: auto;
}

.drinks {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
row-gap: 4rem;
column-gap: 2rem;
color: #555;
}
.drinks__item {
width: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
row-gap: 2rem;
padding: 2rem;
/* box-shadow: 0 0 1rem rgba(0,0,0,.2); */
border-bottom: 2px solid #eee;
border-radius: 0.5rem;
}
.drinks__item img {
width: 100%;
height: 30rem;
object-fit: cover;
}
.drinks__item h3 {
text-transform: uppercase;
}

.drinks__tags {
display: flex;
flex-flow: row wrap;
column-gap: 0.8rem;
row-gap: 1rem;
color: #000;
}
.drinks__tag {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
font-size: 1.2rem;
}
.drinks__tag--blue {
background-color: rgb(135, 239, 239);
}
.drinks__tag--green {
background-color: rgb(186, 224, 129);
}
.drinks__tag--orange {
background-color: rgb(223, 143, 87);
}
.drinks__tag--yellow {
background-color: rgb(219, 181, 84);
}
.drinks__tag--pink {
background-color: rgb(191, 103, 235);
}
.drinks__tag--red {
background-color: rgb(194, 68, 68);
color: #fff;
}
.drinks__tag--grey {
background-color: rgb(191, 191, 191);
}
.tag-inactive {
background-color: #eee;
color: #000;
}

</style>

const drinks = [
{
title: "Mint lemonade",
description:
"Enjoy the zesty freshness of lemons and mint in our homemade lemonade. It's the perfect, refreshing drink for any sunny day.",
url:
"https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Non-Alcoholic", "Seasonal"]
},
{
title: "Moscow Mule",
description:
"The Moscow Mule is a zesty cocktail made with spicy ginger beer, smooth vodka, and fresh lime juice. Served in a classic copper mug, it's a refreshing drink with a tangy kick, perfect for any occasion.",
url:
"https://images.unsplash.com/photo-1513416543495-10c173ed9908?q=80&w=2500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Alcoholic"]
},
{
title: "Aperol Spriz",
description:
"The Aperol Spritz is a vibrant and refreshing cocktail, combining the bittersweet taste of Aperol with sparkling Prosecco and a splash of soda. Garnished with an orange slice, it's the perfect drink to enjoy a taste of summer all year round.",
url:
"https://images.unsplash.com/photo-1560512823-829485b8bf24?q=80&w=3338&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Alcoholic"]
},
{
title: "Cappuccino",
description:
"Cappuccino is a classic Italian coffee featuring espresso topped with steamed milk and a frothy foam layer. With its rich aroma and creamy texture, it's a beloved choice for coffee enthusiasts, perfect for any time of day.",
url:
"https://images.unsplash.com/photo-1534778101976-62847782c213?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic", "Caffeinated"]
},
{
title: "Hot Chocolate",
description:
"Indulge in the comforting warmth of our rich hot chocolate. Made with premium cocoa and steamed milk, it's a delightful treat for any chocolate lover. Perfect for cozying up on chilly days or satisfying your sweet cravings.",
url:
"https://images.unsplash.com/photo-1542990253-0d0f5be5f0ed?q=80&w=3168&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic"]
},
{
title: "Green Smoothie",
description:
"Experience a burst of freshness with our Green Smoothie. Made from spinach, kale, avocado, and pineapple, it's a nutritious powerhouse in a glass. Energize your day with this invigorating blend.",
url:
"https://images.unsplash.com/photo-1628557044797-f21a177c37ec?q=80&w=3450&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Non-Alcoholic", "Seasonal"]
},
{
title: "Espresso",
description:
"Enjoy the bold and intense flavor of our classic Espresso. This rich, full-bodied coffee is crafted from the finest beans and delivers a perfect pick-me-up any time of day. Ideal for true coffee enthusiasts.",
url:
"https://images.unsplash.com/photo-1610889556528-9a770e32642f?q=80&w=3415&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic", "Caffeinated"]
},
{
title: "Selection of Teas",
description:
"Discover our curated selection of teas, featuring classic black, soothing green, and aromatic herbal blends. Each cup offers a unique and delightful experience, perfect for any moment of relaxation.",
url:
"https://images.unsplash.com/photo-1504382103100-db7e92322d39?q=80&w=2686&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic"]
},
{
title: "Pumpkin Spice Latte",
description:
"Savor the seasonal delight of our Pumpkin Spice Latte. This cozy beverage blends rich espresso with steamed milk, pumpkin flavors, and a warm mix of spices. Topped with whipped cream and a dash of cinnamon, it's the perfect autumn treat.",
url:
"https://images.unsplash.com/photo-1570968915860-54d5c301fa9f?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Hot", "Non-Alcoholic", "Seasonal", "Caffeinated"]
},
{
title: "Gin Tonic",
description:
"Experience the crisp and refreshing taste of our classic Gin Tonic. This sophisticated cocktail combines premium gin with tonic water and a twist of lime, creating a perfectly balanced drink. Ideal for any occasion, it's a timeless favorite that never goes out of style.",
url:
"https://images.unsplash.com/photo-1597960194480-fc6b5e3181fd?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Alcoholic"]
},
{
title: "Home Made Iced Tea",
description:
"Indulge in the refreshing simplicity of our homemade iced tea. Freshly brewed tea, lightly sweetened and enhanced with a splash of lemon, creates the perfect thirst-quencher on hot days. Ideal for relaxation and refreshment.",
url:
"https://images.unsplash.com/photo-1584351056582-50d8bbb8ea18?q=80&w=2304&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
tags: ["Cold", "Non-Alcoholic"]
}
];

const drinkContainer = document.querySelector(".drinks");

const tagColors = {
Cold: "blue",
"Non-Alcoholic": "green",
Seasonal: "pink",
Alcoholic: "red",
Caffeinated: "yellow",
Hot: "orange"
};

const drinkSelection = document.querySelector(".tag-selection");

filterDrinks();

drinkContainer.addEventListener("click", function (e) {
const tagItem = e.target.closest(".drinks__tag");
if (!tagItem) return;
const tag = tagItem.textContent;
highlightTag(tag);
filterDrinks(tag);
});
drinkSelection.addEventListener("click", function (e) {
const tagItem = e.target.closest(".drinks__tag");
if (!tagItem) return;
const tag = tagItem.textContent;
if (tagItem.classList.contains("tag-inactive")) {
highlightTag(tag);
filterDrinks(tag);
} else {
highlightTag();
filterDrinks();
}
});

function printDrinks(drinkArray) {
const drinksHtml = "";
drinkContainer.innerHTML = "";

drinkArray.forEach((drink) => {
let tags = "";
drink.tags.forEach((tag) => {
const tagHTML = `
<p class="drinks__tag drinks__tag--${
tagColors[tag] ? tagColors[tag] : "grey"
}">${tag}</p>
`;
tags = tags + tagHTML;
});

const html = `
<div class="drinks__item">
<img src="${drink.url}" alt="Drink">
<div>
<h3>${drink.title}</h3>
<p>${drink.description}</p>
</div>
<div class="drinks__tags">
${tags}
</div>
</div>
`;

drinkContainer.insertAdjacentHTML("beforeend", html);
});
}

</script>

<main>
<h1>Drink Delights</h1>
<div class="drinks__tags tag-selection" style="margin-top: 2rem;">
<p class="drinks__tag drinks__tag--grey">All</p>
<p class="drinks__tag drinks__tag--blue tag-inactive">Cold</p>
<p class="drinks__tag drinks__tag--green tag-inactive">Non-Alcoholic</p>
<p class="drinks__tag drinks__tag--red tag-inactive">Alcoholic</p>
<p class="drinks__tag drinks__tag--pink tag-inactive">Seasonal</p>
<p class="drinks__tag drinks__tag--orange tag-inactive">Hot</p>
<p class="drinks__tag drinks__tag--yellow tag-inactive">Caffeinated</p>
</div>
<div class="drinks">

</div>
</main>
[/html]

Поделиться16902.09.24 19:01:07

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>

button {
appearance: none;
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
margin: 0;
font-family: inherit;
font-size: inherit;
color: inherit;
text-decoration: none;
text-transform: none;
line-height: normal;
overflow: visible;
}

body{
min-height: 100svh;
background-color: rgb(15, 23, 42);
color: white;
display: grid;
place-content: center;
font-size: 1rem;
font-family: system-ui;
}

nav {
--_clr-txt: rgb(255, 255, 255);
--_clr-txt-svg: rgb(147, 158, 184);
--_ani-speed: 6s; /* speed of rotating text */

display: flex;
/*flex-wrap: wrap;*/
gap: 1rem;
font-size: 1.4rem;
}
nav>button {
position: relative;
display: grid;
place-content: center;
grid-template-areas: 'stack';
padding: 0 1.5rem;
text-transform: uppercase;
font-weight: 300;
}

/* place button items on top of each other */
nav>button>span {
transition: all 300ms ease-in-out;
grid-area: stack;
}
/* nav icon */
nav>button>span:last-of-type {
margin-top: 0.25rem;
transform: scale(0);
transition-delay: 0ms;
border-radius: 50%;
}
/* hover - hide text */
nav>button:focus-visible>span:first-of-type,
nav>button:hover>span:first-of-type {
transform: scale(0);
}
/* hover - reveal icon */
nav>button:focus-visible>span:last-of-type,
nav>button:hover>span:last-of-type {
transform: scale(1);
}

/* nav SVG circular text*/
nav>button>svg {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: center;
opacity: 0;
text-transform: uppercase;
transition: all 300ms ease-in-out;
color: var(--_clr-txt-svg);
}
/* hover - reveal rotating SVG */
nav>button:focus-visible>svg,
nav>button:hover>svg {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
transition-delay: 150ms;
transition: all 300ms ease-in-out;
}
/*
@supports (-webkit-touch-callout: none) {
/* specific to iOS devices * /
button svg {
/* adjust position for iOS * /
translate: -50% -50%;
animation: rotate var(--_ani-speed) linear infinite;
}
}
@supports not (-webkit-touch-callout: none) {
*/

</style>

</script>

<nav>
<button type="button" title="Home">
<span>Home</span>
<span class="material-symbols-outlined" aria-hidden="true">home</span>
<svg viewBox="0 0 300 300" aria-hidden="true">
<g>
<text fill="currentColor">
<textPath xlink:href="#circlePath">Home</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">Home</textPath>
</text>
</g>
</svg>
</button>
<button type="button">
<span>About</span>
<span class="material-symbols-outlined" aria-hidden="true">info</span>
<svg viewBox="0 0 300 300" aria-hidden="true">
<g>
<text fill="currentColor">
<textPath xlink:href="#circlePath">About</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">About</textPath>
</text>
</g>
</svg>
</button>
<button type="button">
<span>Services</span>
<span class="material-symbols-outlined" aria-hidden="true">linked_services</span>
<svg viewBox="0 0 300 300" aria-hidden="true">
<g>
<text fill="currentColor">
<textPath xlink:href="#circlePath">Services</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">Services</textPath>
</text>
</g>
</svg>
</button>
<button type="button">
<span>Contact</span>
<span class="material-symbols-outlined" aria-hidden="true">email</span>
<svg viewBox="0 0 300 300">
<g>
<text fill="currentColor" aria-hidden="true">
<textPath xlink:href="#circlePath">Contact</textPath>
</text>
<text fill="currentColor">
<textPath xlink:href="#circlePath" startOffset="50%">Contact</textPath>
</text>
</g>
</svg>
</button>
</nav>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" width="0" height="0">
<defs>
<path id="circlePath" d="M 150, 150 m -50, 0 a 50,50 0 0,1 100,0 a 50,50 0 0,1 -100,0" />
</defs>
</svg>
[/html]

Поделиться17002.09.24 19:07:45

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>

:root {
--bg: #1c1c1c;
--text-height: 300px;
--clc: #9ba5d0;
}

.sparkle {
width: 600px;
height: var(--text-height);
font-size: 50px;
text-align: center;
line-height: var(--text-height);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 5px;
z-index: 100;
position: relative;
text-shadow: 0px 0px 10px var(--clc);
background: var(--clc);
}

.star {
--star-size: 50px;
--star-life: 5s;

--start-left: 0px;
--start-top: 0px;

--end-left: 0px;
--end-top: 0px;

--star-color: #f1c40f;

width: var(--star-size);
height: var(--star-size);
left: var(--end-left);
top: var(--end-top);
background: var(--star-color);
position: absolute;
mix-blend-mode: lighten;
animation: slide var(--star-life) ease-in forwards;
}

.star:after {
display: block;
content: "";
width: var(--star-size);
height: var(--star-size);
background-color: var(--bg);
border-radius: 100%;
position: relative;
top: calc(var(--star-size) / 2 * -1);
left: calc(var(--star-size) / 2 * -1);
box-shadow: var(--star-size) var(--star-size) var(--bg),
var(--star-size) 0px var(--bg),
0px var(--star-size) var(--bg);
}

@keyframes slide {
0%{
left: var(--start-left);
top: var(--start-top);
transform: rotate(0deg);
opacity: 0;
}
100%{
left: var(--end-left);
top: var(--end-top);
transform: rotate(calc(180deg * var(--star-life-num))) scale(0.5);
opacity: 1;
}
}
</style>

var current_star_count = 0;

const MAX_STARS = 60;
const STAR_INTERVAL = 16;

const MAX_STAR_LIFE = 3;
const MIN_STAR_LIFE = 1;

const MAX_STAR_SIZE = 70;
const MIN_STAR_SIZE = 30;

const MIN_STAR_TRAVEL_X = 100;
const MIN_STAR_TRAVEL_Y = 100;

const Star = class {
constructor() {
this.size = this.random(MAX_STAR_SIZE, MIN_STAR_SIZE);

this.x = this.random(
sparkle.offsetWidth * 0.75,
sparkle.offsetWidth * 0.25
);
this.y = sparkle.offsetHeight / 2 - this.size / 2;

this.x_dir = this.randomMinus();
this.y_dir = this.randomMinus();

this.x_max_travel =
this.x_dir === -1 ? this.x : sparkle.offsetWidth - this.x - this.size;
this.y_max_travel = sparkle.offsetHeight / 2 - this.size;

this.x_travel_dist = this.random(this.x_max_travel, MIN_STAR_TRAVEL_X);
this.y_travel_dist = this.random(this.y_max_travel, MIN_STAR_TRAVEL_Y);

this.x_end = this.x + this.x_travel_dist * this.x_dir;
this.y_end = this.y + this.y_travel_dist * this.y_dir;

this.life = this.random(MAX_STAR_LIFE, MIN_STAR_LIFE);

this.star = document.createElement("div");
this.star.classList.add("star");

this.star.style.setProperty("--start-left", this.x + "px");
this.star.style.setProperty("--start-top", this.y + "px");

this.star.style.setProperty("--end-left", this.x_end + "px");
this.star.style.setProperty("--end-top", this.y_end + "px");

this.star.style.setProperty("--star-life", this.life + "s");
this.star.style.setProperty("--star-life-num", this.life);

this.star.style.setProperty("--star-size", this.size + "px");
this.star.style.setProperty("--star-color", this.randomRainbowColor());
}

draw() {
sparkle.appendChild(this.star);
}

pop() {
sparkle.removeChild(this.star);
}

random(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

randomRainbowColor(){
return "hsla("+this.random(360,0)+", 100%, 50%, 1)";
}

randomMinus() {
return Math.random() > 0.5 ? 1 : -1;
}
};

setInterval(() => {
if (current_star_count >= MAX_STARS) {
return;
}

current_star_count++;

var newStar = new Star();

newStar.draw();

setTimeout(() => {
current_star_count--;

newStar.pop();
}, newStar.life * 1000);
}, STAR_INTERVAL);

</script>

<div class="sparkle">
Sparkle Text
</div>
[/html]

Поделиться17106.10.24 15:25:59

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:700");

* {
box-sizing: border-box;
}

body {
font-family: Montserrat, sans-serif;
min-height: 100vh;
margin: 0;
padding: 0;
background-color: rgb(9, 14, 23);
color: #ffffff;
}

svg {
opacity: 0;
position: absolute;
}

.wrapper {
position: relative;
}

.hero {
min-height: 100vh;
padding: clamp(1rem, 2vw, 5rem);
display: flex;
align-items: center;
}

.hero--secondary {
--mask: radial-gradient(circle at var(--x, 70%) var(--y, 50%), black 25%, transparent 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #482EF4, #5FF4C2, #ffffff);
color: rgb(9, 14, 23);
-webkit-mask-image: var(--mask);
mask-image: var(--mask);
}

.hero__heading {
font-size: clamp(2rem, 5vw, 8rem);
text-transform: uppercase;
margin: 0;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
}

</style>
<script>
const hero = document.querySelector('[data-hero]')

window.addEventListener('mousemove', (e) => {
const { clientX, clientY } = e
const x = Math.round((clientX / window.innerWidth) * 100)
const y = Math.round((clientY / window.innerHeight) * 100)

gsap.to(hero, {
'--x': `${x}%`,
'--y': `${y}%`,
duration: 0.3,
ease: 'sine.out',
})
})
</script>

<div class="hero hero--secondary" aria-hidden="true" data-hero>
<p class="hero__heading">It will be sunny</p>
</div>
</div>
[/html]

Поделиться17229.09.25 19:10:54

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]
<style>
.subtitle {
color: #ccc;
margin-bottom: 40px;
text-align: center;
font-size: 1.2rem;
}

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
max-width: 1200px;
width: 100%;
}

.btn-container {
display: flex;
justify-content: center;
align-items: center;
}

button {
position: relative;
padding: 15px 30px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.4s ease;
overflow: hidden;
color: white;
}

/* Common Effects */

.btn-effect-1 { border: 2px solid #0ff; background: transparent; color: #0ff; box-shadow: 0 0 5px #0ff; }
.btn-effect-1:hover { background: #0ff; color: #111; box-shadow: 0 0 20px #0ff, 0 0 40px #0ff; }

.btn-effect-2 { background: #ff3366; }
.btn-effect-2:hover { animation: explode 0.5s forwards; box-shadow: 0 0 30px #ff3366; }

.btn-effect-3 { background: #4a00e0; border-radius: 30px; }
.btn-effect-3:hover { background: #8e2de2; transform: translateY(-5px) scale(1.05); border-radius: 8px; }

.btn-effect-4 { background: #fd1d1d; position:relative}
.btn-effect-4::before, .btn-effect-4::after {
content: ''; position: absolute; top: 0; width: 50%; height: 100%; display:block;
background: #fd1d1d; z-index: -1; transition: 0.3s ease;
}
.btn-effect-4::before { left: 0; }
.btn-effect-4::after { right: 0; }
.btn-effect-4:hover::before { transform: translateX(-20%); background: #300; z-index:1}
.btn-effect-4:hover::after { transform: translateX(20%); background: #300;z-index:1 }

.btn-effect-5 { border: 2px solid #3ae374; background: transparent; color: #3ae374; }
.btn-effect-5::before {
content: ''; position: absolute; top: 0; left: 0;
width: 0; height: 100%; background: #3ae374;
z-index: -1; transition: 0.5s;
}
.btn-effect-5:hover { color: #000; }
.btn-effect-5:hover::before { width: 100%; }

.btn-effect-6 { background: #0011a2; }
.btn-effect-6:hover { animation: shake 0.5s infinite; background: #0052a2; }

.btn-effect-7 { background: #222; color: #f1c40f; border: 2px solid #f1c40f; }
.btn-effect-7:hover { animation: lightning 1.5s infinite; }

.btn-effect-8 {
background: #3498db; padding: 25px 45px; min-width: 180px;
transform-style: preserve-3d; perspective: 800px;
}
.btn-effect-8 .front, .btn-effect-8 .back {
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
display: flex; align-items: center; justify-content: center;
backface-visibility: hidden;
}
.btn-effect-8 .back { transform: rotateY(180deg); }
.btn-effect-8:hover { transform: rotateY(180deg); background: #2980b9; }

.btn-effect-9 { background: #9b59b6; }
.btn-effect-9:hover { animation: pulse 1.5s infinite; }

.btn-effect-10 { background: #27ae60; }
.btn-effect-10:hover { animation: blur 0.5s forwards; letter-spacing: 3px; }

.btn-effect-11 { background: #1abc9c; }
.btn-effect-11:hover { transform: translateX(20px); box-shadow: -5px 5px 0 #16a085; }

.btn-effect-12 { background: #e67e22; }
.btn-effect-12:hover {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(230, 126, 34, 0.6);
animation: magnet 0.4s ease-in-out alternate infinite;
}

/* Animations */
@keyframes explode {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
60% { transform: scale(0.9); }
100% { transform: scale(1.1); }
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px) rotate(-5deg); }
50% { transform: translateX(5px) rotate(5deg); }
75% { transform: translateX(-5px) rotate(-5deg); }
}

@keyframes lightning {
0%, 50%, 100% { box-shadow: 0 0 5px #f1c40f; }
25% { box-shadow: 0 0 20px #f1c40f; }
75% { box-shadow: 0 0 30px #f1c40f, 0 0 50px #f1c40f; }
}

@keyframes pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(155, 89, 182, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0); }
}

@keyframes blur {
0% { filter: blur(0); transform: scale(1); }
50% { filter: blur(3px); transform: scale(1.1); }
100% { filter: blur(0); transform: scale(1.05); background: #2ecc71; }
}

@keyframes magnet {
0% { transform: scale(1.05); }
100% { transform: scale(1.1) rotate(-2deg); }
}
.btn-effect-13 {
background: #444;
position: relative;
overflow: hidden;
}
.btn-effect-13::after {
content: '';
position: absolute;
top: 0; left: -75%;
width: 50%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
transform: skewX(-20deg);
transition: all 0.5s;
}
.btn-effect-13:hover::after {
left: 130%;
}

.btn-effect-14 {
background: #e74c3c;
}
.btn-effect-14:hover {
animation: bouncePop 0.4s ease;
}
@keyframes bouncePop {
0% { transform: scale(1); }
30% { transform: scale(1.2); }
60% { transform: scale(0.9); }
100% { transform: scale(1); }
}

.btn-effect-15 {
background: #6c5ce7;
background-size: 200% 200%;
background-image: conic-gradient(from 0deg, #6c5ce7, #00cec9, #6c5ce7);
}
.btn-effect-15:hover {
animation: swirlReveal 1.6s infinite linear;
}
@keyframes swirlReveal {
0% { background-position: -10% 50%; }
50% { background-position: 110% 50%; }
100% { background-position: -20% 50%; }
}

.btn-effect-16 {
background: #2c3e50;
color: #ecf0f1;
overflow: hidden;
position:relative;
}

.btn-effect-16:hover {
animation: strobe 0.3s infinite;
}
@keyframes strobe {
0% { background:#fad }
10% { transform: translate(-2px, -2px); }
20% {transform: translate(2px, 2px); }
30% { transform: translate(-1px, 1px); }
40%, 100% {transform: translate(0, 0); }
}

.btn-effect-17 {
background: #c0392b;
position: relative;
overflow: hidden;
}
.btn-effect-17::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
width: 300%;
height: 300%;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: transform 0.5s ease-out;
z-index: 0;
}
.btn-effect-17:hover::before {
transform: translate(-50%, -50%) scale(1);
}
.btn-effect-17:hover {
background: #e74c3c;
}

.btn-effect-18 {
background-color: #1abc9c;
color: white;
position: relative;
overflow: hidden;
}
.btn-effect-18::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background-color: #fff6;
transform: rotate(0deg);
transition: top 0.3s ease;
z-index: 0;
}
.btn-effect-18:hover::before {
top: 0;
}
.btn-effect-18:hover {
color: #000d;
}

.btn-effect-18 {
background-color: #1abc9c;
color: #fff;
position: relative;
overflow: hidden;
}
.btn-effect-18::after {
content: '';
position: absolute;
top: 0;
left: -100%;
height: 100%;
width: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
transition: left 0.4s ease;
}
.btn-effect-18:hover::after {
left: 100%;
}
.btn-effect-18:hover {
box-shadow: 0 0 10px #1abc9c, 0 0 30px #1abc9c;
}

.btn-effect-19 {
background: rgba(255, 255, 255, 0.1);
color: #ecf0f1;
backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, 0.25);
transition: background 0.3s ease, transform 0.3s ease;
}
.btn-effect-19:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
border-color: rgba(255, 255, 255, 0.4);
box-shadow:0 0 10px #fff3 inset
}

.btn-effect-20 {
background-color: #f39c12;
color: white;
overflow: hidden;
position: relative;
}
.btn-effect-20::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, #ff0 0%, #fff 70%);
opacity:0;
scale:1.2
}
.btn-effect-20:hover::before {
animation: shineRotate 3s linear infinite;
opacity: 0.3;
}
@keyframes shineRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

</style>
<script>

</script>

<h1>Spectacular Hover Effect Buttons</h1>

<div class="container">
<div class="btn-container"><button class="btn-effect-1">1. NEON BOX</button></div>
<div class="btn-container"><button class="btn-effect-2">2. EXPLOSION</button></div>
<div class="btn-container"><button class="btn-effect-3">3. PLASTIC MORPH</button></div>
<div class="btn-container"><button class="btn-effect-4">4. PEEKABOO</button></div>
<div class="btn-container"><button class="btn-effect-5">5. FILL 'ER UP</button></div>
<div class="btn-container"><button class="btn-effect-6">6. SHAKY</button></div>
<div class="btn-container"><button class="btn-effect-7">7. LIGHT JOLT</button></div>
<div class="btn-container">
<button class="btn-effect-8">
<span class="front">8. FLIP ME</span>
<span class="back">FLIPPED!</span>
</button>
</div>
<div class="btn-container"><button class="btn-effect-9">9. PULSER</button></div>
<div class="btn-container"><button class="btn-effect-10">10. ZOOMER</button></div>
<div class="btn-container"><button class="btn-effect-11">11. SLIDE SWIPE</button></div>
<div class="btn-container"><button class="btn-effect-12">12. MAGNETIC PULL</button></div>
<div class="btn-container"><button class="btn-effect-13">13. SHIMMER</button></div>
<div class="btn-container"><button class="btn-effect-14">14. BOUNCE POP</button></div>
<div class="btn-container"><button class="btn-effect-15">15. CONIC PULSE</button></div>
<div class="btn-container"><button class="btn-effect-16" data-text"AAA">16. STROBE</button></div>
<div class="btn-container"><button class="btn-effect-17">17. OVAL ZOOM</button></div>
<div class="btn-container"><button class="btn-effect-18">18. XEROX SCAN</button></div>
<div class="btn-container"><button class="btn-effect-19">19. FROSTED</button></div>
<div class="btn-container"><button class="btn-effect-20">20. STARSHINE</button></div>
</div>

[/html]

Поделиться17329.09.25 19:19:14

Автор: concoction
статус-хератус и прочие новости для глупеньких и а
Имя, возраст: Имя, 20
Личное: ссылки-текст
О персонаже: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
Сообщений: 1066
Уважение: +0

[html]<style>
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap");

body {
--c-glass: #bbbbbc;
--c-light: #fff;
--c-dark: #000;

--c-content: #224;
--c-action: #0052f5;

--c-bg: #e8e8e9;

--glass-reflex-dark: 1;
--glass-reflex-light: 1;

--saturation: 150%;

font-size: 20px;
font-family: "DM Sans", sans-serif;
font-optical-sizing: auto;
background: var(--c-bg);
color: var(--c-content);

transition: background 400ms cubic-bezier(1, 0, 0.4, 1),
color 400ms cubic-bezier(1, 0, 0.4, 1);
}

body:has(input[value="dark"]:checked) {
--c-glass: #bbbbbc;
--c-light: #fff;
--c-dark: #000;

--c-content: #e1e1e1;
--c-action: #03d5ff;

--c-bg: #1b1b1d;

--glass-reflex-dark: 2;
--glass-reflex-light: 0.3;

--saturation: 150%;
}

body:has(input[value="dim"]:checked) {
--c-light: #99deff;
--c-dark: #20001b;
--c-glass: hsl(335 250% 74% / 1);

--c-content: #d5dbe2;
--c-action: #ff48a9;

--c-bg: #152433;

--glass-reflex-dark: 2;
--glass-reflex-light: 0.7;

--saturation: 200%;
}

.switcher {
position: fixed;
z-index: 1;
top: 40px;
left: 50%;
translate: -50%;
display: flex;
align-items: center;
gap: 8px;
width: 244px;
max-width: 244px;
height: 70px;
box-sizing: border-box;
padding: 8px 12px 10px;
margin: 0 auto;
border: none;
border-radius: 99em;
font-size: var(--fz);
background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
-webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
box-shadow: inset 0 0 0 1px
color-mix(
in srgb,
var(--c-light) calc(var(--glass-reflex-light) * 10%),
transparent
),
inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 90%), transparent),
inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 80%), transparent),
inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 60%), transparent),
inset -0.3px -1px 4px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
transparent
),
inset -1.5px 2.5px 0px -2px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
transparent
),
inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
calc(var(--glass-reflex-dark) * 20%), transparent),
inset 2px -6.5px 1px -4px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent
),
0px 1px 5px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent
),
0px 6px 16px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
transparent
);
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

.switcher__legend {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}

.switcher__input {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}

.switcher__icon {
display: block;
width: 100%;
transition: scale 200ms cubic-bezier(0.5, 0, 0, 1);
}

.switcher__filter {
position: absolute;
width: 0;
height: 0;
z-index: -1;
}

.switcher__option {
--c: var(--c-content);
display: flex;
justify-content: center;
align-items: center;
padding: 0 16px;
width: 68px;
height: 100%;
box-sizing: border-box;
border-radius: 99em;
opacity: 1;
transition: all 160ms;
}

.switcher__option:hover {
--c: var(--c-action);
cursor: pointer;
}

.switcher__option:hover .switcher__icon {
scale: 1.2;
}

.switcher__option:has(input:checked) {
--c: var(--c-content);
cursor: auto;
}

.switcher__option:has(input:checked) .switcher__icon {
scale: 1;
}

.switcher::after {
content: "";
position: absolute;
left: 4px;
top: 4px;
display: block;
width: 84px;
height: calc(100% - 10px);
border-radius: 99em;
background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
z-index: -1;
box-shadow: inset 0 0 0 1px
color-mix(
in srgb,
var(--c-light) calc(var(--glass-reflex-light) * 10%),
transparent
),
inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 90%), transparent),
inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 80%), transparent),
inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 60%), transparent),
inset -1px 2px 3px -1px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
transparent
),
inset 0px -4px 1px -2px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent
),
0px 3px 6px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
transparent
);
}

.switcher:has(input[c-option="1"]:checked)::after {
translate: 0 0;
transform-origin: right;
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
translate 400ms cubic-bezier(1, 0, 0.4, 1);
animation: scaleToggle 440ms ease;
}

.switcher:has(input[c-option="2"]:checked)::after {
translate: 76px 0;
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
translate 400ms cubic-bezier(1, 0, 0.4, 1);
animation: scaleToggle2 440ms ease;
}

.switcher[c-previous="1"]:has(input[c-option="2"]:checked)::after {
transform-origin: left;
}

.switcher[c-previous="3"]:has(input[c-option="2"]:checked)::after {
transform-origin: right;
}

.switcher:has(input[c-option="3"]:checked)::after {
translate: 152px 0;
transform-origin: left;
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
translate 400ms cubic-bezier(1, 0, 0.4, 1);
animation: scaleToggle3 440ms ease;
}

@keyframes scaleToggle {
0% {
scale: 1 1;
}
50% {
scale: 1.1 1;
}
100% {
scale: 1 1;
}
}

@keyframes scaleToggle2 {
0% {
scale: 1 1;
}
50% {
scale: 1.2 1;
}
100% {
scale: 1 1;
}
}

@keyframes scaleToggle3 {
0% {
scale: 1 1;
}
50% {
scale: 1.1 1;
}
100% {
scale: 1 1;
}
}

/* //////////////////////////////////////////
/ Article Styles //////////////////////// */

.article {
display: flex;
flex-direction: column;
align-items: center;
padding: 5em 2em;
}

h1,
h2,
p,
blockquote {
width: 100%;
max-width: 600px;
box-sizing: border-box;
}

h1 {
font-size: 3em;
margin: 1.4em 0 0.6em;
}

h2 {
font-size: 2em;
margin: 1.4em 0 0.6em;
}

p {
line-height: 160%;
margin: 0 0 1em;
}

blockquote {
margin-left: 0;
margin-right: 0;
font-size: 2em;
padding-left: 1em;
border-left: 0.1em solid currentColor;
}

figure {
margin: 1em 0 2em;
display: flex;
flex-direction: column;
align-items: center;
}

figcaption {
max-width: 600px;
margin-top: 1em;
font-size: 0.8em;
color: color-mix(in srgb, var(--c-content) 60%, var(--c-bg));
}

a {
color: var(--c-action);
text-decoration-thickness: 0.05em;
text-underline-position: under;
text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
transition: color 160ms, text-decoration-color 160ms;
}

a:hover {
color: color-mix(in srgb, var(--c-action), var(--c-content) 40%);
text-decoration-color: color-mix(in srgb, currentColor, transparent 30%);
}

img {
display: block;
border-radius: 0.8em;
width: 100%;
max-width: 700px;
aspect-ratio: 5 / 3;
object-fit: cover;
}

.box {
padding: 1em 1.4em;
border-top: 4px solid color-mix(in srgb, var(--c-action) 50%, transparent);
border-radius: 0.8em;
background-color: color-mix(in srgb, var(--c-action) 8%, var(--c-bg));
transition: background 400ms cubic-bezier(1, 0, 0.4, 1);
}

</style>
<script>
const switcher = document.querySelector(".switcher");

const trackPrevious = (el) => {
const radios = el.querySelectorAll('input[type="radio"]');
let previousValue = null;

// init first select
const initiallyChecked = el.querySelector('input[type="radio"]:checked');
if (initiallyChecked) {
previousValue = initiallyChecked.getAttribute("c-option");
el.setAttribute("c-previous", previousValue);
}

radios.forEach((radio) => {
radio.addEventListener("change", () => {
if (radio.checked) {
el.setAttribute("c-previous", previousValue ?? "");
previousValue = radio.getAttribute("c-option");
}
});
});
};

trackPrevious(switcher);

</script>
<fieldset class="switcher">
<legend class="switcher__legend">Choose theme</legend>
<label class="switcher__option">
<input class="switcher__input" type="radio" name="theme" value="light" c-option="1" checked />
<svg class="switcher__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="var(--c)" fill-rule="evenodd" d="M18 12a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" clip-rule="evenodd" />
<path fill="var(--c)" d="M17 6.038a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0v-3ZM24.244 7.742a1 1 0 1 1 1.618 1.176L24.1 11.345a1 1 0 1 1-1.618-1.176l1.763-2.427ZM29.104 13.379a1 1 0 0 1 .618 1.902l-2.854.927a1 1 0 1 1-.618-1.902l2.854-.927ZM29.722 20.795a1 1 0 0 1-.619 1.902l-2.853-.927a1 1 0 1 1 .618-1.902l2.854.927ZM25.862 27.159a1 1 0 0 1-1.618 1.175l-1.763-2.427a1 1 0 1 1 1.618-1.175l1.763 2.427ZM19 30.038a1 1 0 0 1-2 0v-3a1 1 0 1 1 2 0v3ZM11.755 28.334a1 1 0 0 1-1.618-1.175l1.764-2.427a1 1 0 1 1 1.618 1.175l-1.764 2.427ZM6.896 22.697a1 1 0 1 1-.618-1.902l2.853-.927a1 1 0 1 1 .618 1.902l-2.853.927ZM6.278 15.28a1 1 0 1 1 .618-1.901l2.853.927a1 1 0 1 1-.618 1.902l-2.853-.927ZM10.137 8.918a1 1 0 0 1 1.618-1.176l1.764 2.427a1 1 0 0 1-1.618 1.176l-1.764-2.427Z" />
</svg>
</label>
<label class="switcher__option">
<input class="switcher__input" type="radio" name="theme" value="dark" c-option="2" />
<svg class="switcher__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="var(--c)" d="M12.5 8.473a10.968 10.968 0 0 1 8.785-.97 7.435 7.435 0 0 0-3.737 4.672l-.09.373A7.454 7.454 0 0 0 28.732 20.4a10.97 10.97 0 0 1-5.232 7.125l-.497.27c-5.014 2.566-11.175.916-14.234-3.813l-.295-.483C5.53 18.403 7.13 11.93 12.017 8.77l.483-.297Zm4.234.616a8.946 8.946 0 0 0-2.805.883l-.429.234A9 9 0 0 0 10.206 22.5l.241.395A9 9 0 0 0 22.5 25.794l.416-.255a8.94 8.94 0 0 0 2.167-1.99 9.433 9.433 0 0 1-2.782-.313c-5.043-1.352-8.036-6.535-6.686-11.578l.147-.491c.242-.745.573-1.44.972-2.078Z" />
</svg>
</label>
<label class="switcher__option">
<input class="switcher__input" type="radio" name="theme" value="dim" c-option="3" />
<svg class="switcher__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="var(--c)" d="M5 21a1 1 0 0 1 1-1h24a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1ZM12 25a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H13a1 1 0 0 1-1-1ZM15 29a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1ZM18 13a6 6 0 0 1 5.915 7h-2.041A4.005 4.005 0 0 0 18 15a4 4 0 0 0-3.874 5h-2.041A6 6 0 0 1 18 13ZM17 7.038a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0v-3ZM24.244 8.742a1 1 0 1 1 1.618 1.176L24.1 12.345a1 1 0 1 1-1.618-1.176l1.763-2.427ZM29.104 14.379a1 1 0 0 1 .618 1.902l-2.854.927a1 1 0 1 1-.618-1.902l2.854-.927ZM6.278 16.28a1 1 0 1 1 .618-1.901l2.853.927a1 1 0 1 1-.618 1.902l-2.853-.927ZM10.137 9.918a1 1 0 0 1 1.618-1.176l1.764 2.427a1 1 0 0 1-1.618 1.176l-1.764-2.427Z" />
</svg>
</label>

<div class="switcher__filter">
<svg>
<filter id="switcher" primitiveUnits="objectBoundingBox">
<feImage result="map" width="100%" height="100%" x="0" y="0" href="data:image/webp;base64,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" />

<article class="article">
<h1>Liquid glass</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui maxime optio quam debitis autem, maiores odio tenetur dicta aperiam aliquam, iusto nisi ipsum tempore dolore doloremque facere non culpa sint sequi ducimus corporis veritatis cumque corrupti sed. Ipsa dolor quod alias dicta dolores. Ducimus pariatur nostrum quo, impedit <a href="">facilis voluptatibus</a>! Non doloremque, facere neque dolorem animi earum odio placeat quae voluptatem nisi nihil deleniti voluptatibus harum magnam adipisci tenetur. Ab aliquid reprehenderit accusamus id quae velit quasi nostrum possimus ipsa vel. Voluptate nisi impedit placeat nemo neque asperiores iure saepe, eius eligendi odit quisquam delectus veniam autem, sequi laborum atque
</p>
<figure>
<img src="https://images.unsplash.com/photo-1706720094773-d91e070e4b90?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Photo by Neeqolah Creative Works on Unsplash">
<figcaption>Photo by Neeqolah Creative Works on <a href="https://unsplash.com/photos/a-close-up-of-a-green-object-on-a-yellow-background-A2kyFEwh3zo">Unsplash</a></figcaption>
</figure>
<p>
Sit amet consectetur adipisicing elit. Quibusdam illum in voluptates omnis reprehenderit inventore perferendis dolores, architecto doloribus. Quam error qui nam quis! Dolorum, dolore saepe ipsam quae aliquam tenetur dolores dolor repellendus facere a quasi soluta voluptate provident earum cum. Nostrum consequuntur corporis quibusdam tempora amet, animi inventore dicta voluptas nisi placeat ut illum explicabo! Consequatur, accusamus. Labore quo perspiciatis quos est molestiae illo possimus deserunt sed amet maxime, dolorum praesentium nihil doloribus similique cumque eveniet qui vero eius magni reprehenderit aspernatur, et, quod voluptatum? Voluptatem, eveniet vel sunt nesciunt recusandae alias maiores optio labore, dolorum aut possimus iusto quia. Non quas excepturi ea, maxime mollitia fugit, animi alias ad repudiandae dolores facere molestiae id, nemo temporibus explicabo.
</p>
<blockquote>
Et aliquam libero deserunt maxime! Perspiciatis neque deserunt sequi deleniti!
</blockquote>
<p>
Recusandae doloribus, ullam inventore esse culpa cupiditate dignissimos qui ducimus possimus ipsum reprehenderit, suscipit debitis nihil sit. Animi eligendi sed molestiae. Repellat, est ut eos voluptates tempora quisquam corporis mollitia, excepturi commodi cum dolore asperiores eaque debitis fuga quidem! A laborum ab reiciendis saepe rerum iste. Nisi quos earum ex nulla neque <a href="">tempora explicabo reiciendis</a> vitae sapiente accusamus tempore consequatur nemo, placeat magni quasi corrupti nobis alias, rerum ipsam fuga quisquam tenetur repellendus! Sit laborum aut odit pariatur quos cupiditate iure maiores. Quis nemo dicta numquam autem debitis blanditiis, odio explicabo maxime officiis magni soluta dolor suscipit, quo nisi eaque deleniti dolorem aperiam deserunt. Animi dolor expedita consectetur deserunt, quae id ab.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi aperiam enim eos repellendus molestiae, ad ab maxime et, aut nam culpa eveniet. Eaque consequuntur laudantium ex dolore voluptas rem cumque, quos voluptatibus aut maxime. Animi enim odio ea porro molestiae laudantium ipsam nulla quia distinctio quod incidunt pariatur accusamus possimus laborum veritatis maxime, asperiores quasi!
</p>
<h2>
Doloremque nisi eius quis
</h2>
<p>Magnam quo voluptate vitae voluptatem expedita vel illum ut. Tempore, sed? Sunt distinctio minus dolore, consequuntur eos qui eveniet error rerum tempora, autem et quaerat, ea repellendus unde iure. Fuga ad tempore cupiditate animi iste, eius nam beatae, aliquid quae id iusto perspiciatis. Quos quis cum itaque facilis libero sequi quaerat ipsam hic blanditiis doloribus modi sapiente tempora ipsum fugiat similique cupiditate beatae provident eos natus doloremque alias, sed praesentium.
</p>
<figure>
<img src="https://images.unsplash.com/photo-1734606901283-489b25f7aa9b?q=80&w=2360&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Photo by Neeqolah Creative Works on Unsplash">
<figcaption>Photo by Irene Demetri on <a href="https://unsplash.com/photos/a-close-up-of-a-green-object-on-a-yellow-background-A2kyFEwh3zo">Unsplash</a></figcaption>
</figure>
<p>
Quod iste recusandae sed labore corporis ea provident debitis hic maxime placeat alias rem cumque animi explicabo laboriosam, dicta molestias? Corporis quibusdam, aliquam asperiores quo officia reiciendis nemo aspernatur similique voluptatibus in tempora? Laborum temporibus ipsa at exercitationem ullam labore tempore neque. Porro earum distinctio rem perferendis amet nihil maiores ab id cumque quae nesciunt, velit fugiat in aspernatur unde. Ut dolor eaque, vero quo sunt sed exercitationem cum accusamus, beatae, quasi rerum. Id eius dolorem nihil porro, voluptatem exercitationem tenetur impedit laudantium odit aliquam vel, facilis eos quasi voluptatibus optio. Ipsum voluptatum labore consequatur dolorum veritatis qui placeat magnam aut expedita. Error facere tempora ratione sapiente illo laudantium, ut nihil. Mollitia vitae, eveniet blanditiis corrupti at molestias aliquam ipsa esse optio temporibus dolorem, fugiat obcaecati culpa fuga numquam sapiente libero. Impedit maiores doloremque iusto autem temporibus! Quam cupiditate officiis possimus, ratione quasi nobis rem quidem quibusdam? Ut earum possimus expedita culpa nobis suscipit, non minima at dignissimos aut optio eum? Cumque?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, aut commodi aliquid, blanditiis doloribus suscipit perferendis hic assumenda dolorum magnam enim. Error minima magnam modi aliquam quia at obcaecati sunt quas velit numquam, voluptatem inventore blanditiis necessitatibus harum possimus nostrum vel expedita quam dignissimos tenetur maxime provident aspernatur nam iste. At veritatis nemo quisquam, facilis numquam nostrum veniam perferendis repudiandae cum ipsa eos eius est doloremque excepturi delectus quidem repellat suscipit et tenetur vitae porro nisi iure? Ipsa facere at blanditiis nobis temporibus labore architecto nulla deleniti quod hic minus consequuntur, unde, quasi eius consequatur est! Laborum neque illo ab.
</p>
<blockquote>
Consequatur itaque sit amet consectetur adipisicing elit.
</blockquote>
<p>
Ab eveniet recusandae incidunt id cumque porro? Dignissimos nostrum iure possimus mollitia sed provident esse optio odio consequatur! Recusandae dicta ab atque? Eveniet molestias autem accusantium vero, tenetur placeat ratione voluptates nesciunt, adipisci ullam cum quae eius eaque quibusdam nihil dolorem! Ab eveniet recusandae incidunt id cumque porro? Sit tenetur quasi odit, facere dolore quae voluptatibus fugiat, quibusdam vitae labore dignissimos. Unde, maiores cumque dolore quas repellat vel adipisci harum incidunt consequatur ad!
</p>
<p>
Ipsum explicabo quod laborum non provident, consectetur sint unde hic dolor quisquam ullam nulla veniam! Sapiente impedit sint expedita officiis fugit est quia. Neque, ea aspernatur? Quod voluptas ab aliquid saepe id, eos suscipit, autem quae reiciendis omnis veritatis officiis culpa doloremque? Reiciendis ea modi quod ducimus culpa omnis aliquid non minus ipsam necessitatibus distinctio, aspernatur iure. Nihil cupiditate amet officiis eligendi nostrum harum labore porro optio obcaecati reiciendis blanditiis quae, perspiciatis voluptatibus suscipit enim.
</p>
<p class="box">
Perspiciatis sapiente eum velit inventore illum accusamus eos at esse mollitia debitis quae rem odit, ipsam nam. Voluptas beatae, velit voluptatum dolor obcaecati a nobis consequuntur quis id eaque! Sapiente nostrum rerum esse quo laborum excepturi explicabo, perspiciatis dicta corporis atque?
</p>
<h2>Quod voluptas aliquid id saepe</h2>
<p>
Et minima quas amet! Debitis commodi consectetur laborum fugit voluptatum qui distinctio, natus odit obcaecati. Voluptate suscipit consectetur, aspernatur ratione impedit minus facilis voluptatum tempora nesciunt pariatur ipsa provident qui distinctio ad quasi magnam exercitationem itaque. Recusandae maiores dolor saepe commodi a eligendi aut adipisci neque dolorem tempora perspiciatis odio asperiores quos iusto animi quia tempore, molestiae deleniti vel. Earum, atque? Ipsa reiciendis cum laborum fugiat doloremque asperiores, voluptatem exercitationem in sequi!
</p>
<p>
Dolor sit, amet consectetur adipisicing elit. Earum, amet ea quaerat, repellendus ipsum sunt blanditiis ab tempora doloribus quas voluptas magni ut perferendis unde dolor tenetur repudiandae, porro dolore et nisi eius. Eos, esse minus molestiae maiores praesentium dolorum dolor eaque repellendus laudantium provident adipisci alias inventore ratione distinctio libero facilis voluptas hic illum odio laboriosam quos minima officia natus. Maxime eveniet repellendus non iste exercitationem aliquam velit, corrupti ut, id provident reprehenderit accusamus nemo reiciendis fugiat saepe quas quasi ad tempora! Qui earum eligendi architecto delectus animi similique laborum dolorum, recusandae beatae voluptatibus! Maiores ad libero quibusdam temporibus, quis possimus perferendis corporis modi, culpa voluptatum maxime. Earum, rem.
</p>
<p>
Eos dolore dicta delectus dolorum porro fuga modi, perferendis natus ratione repellendus sit harum sint! Numquam quas facere quod doloribus enim omnis earum maxime perferendis ipsam magnam quos culpa, vitae, tenetur quisquam, unde quis maiores. Eos quos earum illo animi exercitationem nemo, at asperiores soluta similique aliquid cum quam quo corrupti accusantium iure praesentium. Omnis aliquam harum reiciendis necessitatibus temporibus expedita voluptate, dignissimos ratione dolorem perferendis ut aliquid magni nam nisi deserunt eum nulla excepturi quos sunt accusamus earum cupiditate minus. Expedita, corporis suscipit mollitia qui repellendus harum cumque id quis architecto quidem, aliquid vero dolores necessitatibus animi eos optio? Perspiciatis!
</p>
<p>
Maxime in officiis fugiat corporis cum doloremque atque, at architecto dicta quod inventore corrupti facilis repellendus pariatur possimus error! At aperiam aliquam fugiat eveniet sapiente soluta hic ab ipsam, corrupti temporibus tempore? Velit, sed quos mollitia deleniti fugiat tempora fuga reprehenderit neque tempore doloremque ducimus quasi? Sit facere porro esse vero accusantium praesentium odit. Quisquam sint nobis dolorum labore distinctio ducimus animi alias quod necessitatibus rem non error consectetur voluptate tempora libero facilis ratione voluptates expedita, unde a blanditiis odio. Nostrum sapiente dolor enim?
</p>
Made with love by <a href="//codepen.io/DedaloD">Den Dionigi | UX Designer</a>
</article>[/html]

concoction

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

штучки

Сообщений 151 страница 173 из 173

Поделиться15120.05.24 08:17:39

Поделиться15220.05.24 08:49:11

Поделиться15301.06.24 20:33:34

Поделиться15402.06.24 19:45:50

Поделиться15502.06.24 21:53:35

Поделиться15602.06.24 21:59:04

Поделиться15716.06.24 19:37:47

Поделиться15816.06.24 19:59:18

Поделиться15916.06.24 20:51:51

Поделиться16016.06.24 20:54:28

Поделиться16116.06.24 22:42:51

Поделиться16216.06.24 23:08:21

Поделиться16317.06.24 17:32:35

Поделиться16426.06.24 11:15:53

Поделиться16527.06.24 21:04:39

Поделиться16601.07.24 16:37:01

Поделиться16701.07.24 16:44:54

Поделиться16801.07.24 16:57:28

Поделиться16902.09.24 19:01:07

Поделиться17002.09.24 19:07:45

Поделиться17106.10.24 15:25:59

Поделиться17229.09.25 19:10:54

Поделиться17329.09.25 19:19:14