Здесь делается вжух 🪄

Test by devls

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Test by devls » страниу » коды тамбы


коды тамбы

Сообщений 1 страница 10 из 61

1

Код:
<!--HTML--><style> #containerdecoz { position:absolute; margin:auto; left:0px; right:0px; top:0px; bottom:0px; width:650px; height:540px; padding:5px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.03); border-radius:10px; opacity:.50; background:#c8d59d; }
                                
#container { position:absolute; margin:auto; left:0px; right:0px; bottom:0px; top:0px; width:650px; height:540px; border:1px solid #c8d59d; background:#ffffff; border-radius:10px; overflow:hidden; }

#container0 { position:absolute; margin:auto; left:0px; right:0px; bottom:0px; top:0px; width:650px; height:540px; }

.waves { position:absolute; bottom:-5px; left:-100px;}
a { text-decoration:none; color:#7ee755; transition: all 0.6s ease-in-out; }
 
a:hover { color:#ffb75e; transition: all 0.6s ease-in-out; }     

b { color:#c8d59d; font-weight:900; font-size:9px; font-family: 'Roboto', sans-serif; text-transform:uppercase; border-bottom:1px solid #c8d59d; }

i { color:#fbcbc9; font-style:italic; font-family: 'Roboto', sans-serif; }
#dataz { position:absolute; top:170px; right:-170px; z-index:1; width:177px; padding:10px; background:#ffffff; border:1px solid #dcdcdc; border-radius:10px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.03); }

#dataz img { position:absolute; top:-51px; left:15px; width:60px; height:60px; border-radius:50%; padding:7px; background:#c8d59d; border:1px solid #dcdcdc; transition: all 0.6s ease-in-out; }

#dataz img:hover {transition: all 0.6s ease-in-out; background:#ffffff; }

.dataz1 { padding:5px; padding-top:17px; text-align:justify; margin-bottom:5px; }

.linkz0 { transition: all 0.6s ease-in-out; padding:5px 10px 5px 10px; margin:10px 10px; width:135px;  text-transform:uppercase; font-size:8px; font-style:italic; font-family:'Roboto', sans-serif; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.03); border-radius:17px; border:1px solid #c8d59d; color:#c8d59d; background-color:#ffffff; text-align:center; }

.linkz0:hover { transition: all 0.6s ease-in-out; border:1px solid #dcdcdc; color:#ffffff; background-color:#fbcbc9; }

.linkz1, .linkz2, .linkz3 { float:left; padding:3px 15px 3px 15px; width:17px; text-transform:lowercase; letter-spacing:1px; font-size:9px; text-align:center; box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.03); background-color:#ffffff; border:1px solid #fbcbc9; font-family: 'Roboto', sans-serif; color:#fbcbc9; border-radius:20px; margin-left:5px; margin-right:5px; margin-top:7px;}

.linkz1:hover, .linkz2:hover, .linkz3:hover { transition: all 0.6s ease-in-out; border:1px solid #c8d59d; color:#c8d59d; background-color:#ffffff; }
</style>
<div id="container0">

<!-- INFO -->
<div id="dataz">
<img src="https://i.imgur.com/5x5gim5.png"><!-- entre las comillas va la url del icon / between the quotes goes the icon url -->
<div class="dataz1">

<!-- aquí va la información de los gifs / here goes the information about the gifs -->

these are <b>#190</b> gifs sized 245 x 145 of kim seokwoo <c><i>(rowoon)</i></c>, a south korean idol from the group sf9, and an actor. simple rules applies, <c><b>do not</b></c> redistribute or claim it as your own, edit, or use if you're <b><i>blocked.</i></b> if you want to resize it into a gif icon for your <c>own personal use,</c> then please send us an <b>ASK OFF ANON</b> first to ask permission to do so.

</div>

<!-- ELIMIDA DESDE AQUÍ / DELETED FROM HERE -->
<a href="/commission"><div class="linkz0">commissions info</div></a>
<!-- HASTA AQUÍ SI NO DESEAS EL BOTÓN DE COMISIONES / TO HERE IF YOU DO NOT WANT THE COMMISSION BUTTON -->


<div id="linkez">
<a href="/" title="index" class=""><div class="linkz1">01</div></a>
<a href="/ask" title="ask" class=""><div class="linkz2">02</div></a>
<a href="/directory" title="directory" class=""><div class="linkz3">03</div></a>

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

2

Код:
<!--HTML--><style>#updsz { position:absolute; margin-top:20px; color:#888888; font-size:9px; width:150px; margin-left:-170px; font-family:'poppins', sans-serif; text-align:left; letter-spacing:.25px; background-color:#fbfbfb; border:1px solid #e8e6e7; box-shadow:0px 0px 5px 3px rgba(0,0,0,0.03); transform:rotate(-8deg); border-radius:5px; z-index:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

#updsz:hover { z-index:999999!important; transform:scale(1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.utitle { background:transparent; font-size:9px; font-family:poppins; font-weight:bold; color:#888888; border-bottom:1px solid #e8e6e7; text-transform:uppercase; text-align:left; padding:10px; }

.ucont { background:transparent; font-size:9px; font-family:Karla; color:#888888; text-align:left; }

.ucont li { font-size:9px; font-family:Karla; color:#888888; border-bottom:1px solid #e8e6e7; text-align:left; padding:10px; }

.ucont li::before { content:''!important; }

.ucont li:last-child { border-bottom:0px solid #e8e6e7; }

a { text-decoration: none; color:#f4b656; letter-spacing:1px; -webkit-transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -o-transition: all 1.6s ease-in-out; -ms-transition: all 1.6s ease-in-out; transition: opacity 0.2s 0 ease; cursor: url(https://cur.cursors-4u.net/others/oth-6/oth589.cur), auto !important; }

a:hover { color:#fff; -webkit-transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -o-transition: all 1.6s ease-in-out; -ms-transition: all 1.6s ease-in-out; transition: opacity 0.2s 1s ease; }

#navigation { display:block; text-align:left; margin-top:-30px; margin-left:7.5px; font-family:poppins; font-size:15px; line-height:12px; font-variant:none; word-spacing:0px; letter-spacing:0px; position:absolute; }

#navigation a { display:inline-block; text-align:center; margin-left:5px; margin-right:2px; font-weight:900; font-family:arial; font-size:15px; width:12px; height:12px; line-height:12px; padding:7px; color:#f4b656; }

#navigation .iconify { color:#f4b656; }
#s-m-t-tooltip { max-width:250px; padding:6px 10px 6px 10px; margin:20px 15px; color:#fff; font-family:'poppins', sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:1px; font-size:9px; text-align:justify; box-shadow:0px 0px 5px 3px rgba(0,0,0,0.03); background-color:rgba(245,125,79, .9); backdrop-filter: blur(3px); border:1px solid #f57d4f; border-radius:15px; z-index:999999999999999!important; }</style>

       <div id="navigation">
            <a href="/" title="index" class=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:circle-duotone" data-inline="false" style="transform: rotate(360deg);"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="M128 232a104 104 0 1 1 104-104a104.2 104.2 0 0 1-104 104Zm0-192a88 88 0 1 0 88 88a88.1 88.1 0 0 0-88-88Z"></path></svg></a>
            <a href="/ask" title="message" class=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:circle-duotone" data-inline="false" style="transform: rotate(360deg);"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="M128 232a104 104 0 1 1 104-104a104.2 104.2 0 0 1-104 104Zm0-192a88 88 0 1 0 88 88a88.1 88.1 0 0 0-88-88Z"></path></svg></a>
            <a href="#" class="tlinks" onclick="openCapitae(event, 'rules')" title="guidelines"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:circle-duotone" data-inline="false" style="transform: rotate(360deg);"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="M128 232a104 104 0 1 1 104-104a104.2 104.2 0 0 1-104 104Zm0-192a88 88 0 1 0 88 88a88.1 88.1 0 0 0-88-88Z"></path></svg></a>
            <a href="#" class="tlinks" onclick="openCapitae(event, 'nav')" title="navigate"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:circle-duotone" data-inline="false" style="transform: rotate(360deg);"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="M128 232a104 104 0 1 1 104-104a104.2 104.2 0 0 1-104 104Zm0-192a88 88 0 1 0 88 88a88.1 88.1 0 0 0-88-88Z"></path></svg></a>
            <a href="/masterlist" title="masterlist" class=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:circle-duotone" data-inline="false" style="transform: rotate(360deg);"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="M128 232a104 104 0 1 1 104-104a104.2 104.2 0 0 1-104 104Zm0-192a88 88 0 1 0 88 88a88.1 88.1 0 0 0-88-88Z"></path></svg></a>

        </div>


<div id="updsz">
    <div class="utitle">updates</div>

    <div class="ucont">

    <!-- TO ADD MORE UPDATES, COPY:

            <li><span class="iconify" data-icon="ph:circle-duotone" style="font-size:12px;"></span> update title</li>

        AND PASTE UNDER THE LAST "<li>" -->

        <li><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="font-size: 12px; vertical-align: -0.125em; transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:circle-duotone"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="M128 232a104 104 0 1 1 104-104a104.2 104.2 0 0 1-104 104Zm0-192a88 88 0 1 0 88 88a88.1 88.1 0 0 0-88-88Z"></path></svg> finish commissions</li>
        <li><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="font-size: 12px; vertical-align: -0.125em; transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:circle-duotone"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="M128 232a104 104 0 1 1 104-104a104.2 104.2 0 0 1-104 104Zm0-192a88 88 0 1 0 88 88a88.1 88.1 0 0 0-88-88Z"></path></svg> continue giffing </li>
        <li><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="font-size: 12px; vertical-align: -0.125em; transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:check-circle-duotone"><circle cx="128" cy="128" r="96" fill="currentColor" opacity=".2"></circle><path fill="currentColor" d="m166.5 98.2l-53.2 50.7l-23.8-22.7a8 8 0 1 0-11 11.6l29.3 28a7.9 7.9 0 0 0 5.5 2.2a8.1 8.1 0 0 0 5.6-2.2l58.6-56a8 8 0 0 0-11-11.6Z"></path><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88Z"></path></svg> sleep &amp; play all day</li>

    </div>

3

всплывашка со стардаста
#tooltip {font: small-caps 800 7.5px 'manrope'; text-transform: uppercase; border-radius: 25px; padding: 8px 24px; background: rgb(var(--accent2_text)); border: 0px solid; color: rgb(var(--accent2)); letter-spacing: 0.6px; display: none; khtml-border-radius: 25px; max-width: 200px; moz-border-radius: 25px; opacity: 1; position: absolute; text-align: center; webkit-border-radius: 25px; z-index: 999;}

кнопки тамба

Код:
e {
    font-size: 8px;
    background-color: rgb(244,182,86,0.3);
    color: #f4b656;
    padding: 3px 5px 3px 5px;
    border-radius: 10px;
    border: 1px solid #f57d4f;
    font-family: 'poppins', sans-serif;
}

4

Код:
<!--HTML--><style>::selection {
  background: #dcbdd7; 
}

.tooltip{
    display: inline;
    position: relative;
}

#s-m-t-tooltip {
    max-width:300px;
    padding:6px 15px; 
    margin:-40px 7px -2px 10px; 
    background-color:rgba(220,189,215,0.7);
    font-size:7px;
    line-height: 150%;
    letter-spacing: 1px;
    border-radius: 12px;
    border: 1px solid #dcbdd7;
    text-transform:uppercase;  
    color:#f8f8f8; 
    z-index:9999999999999999999999999999999999999999999999!important;
}

.todo {
width: 210px; height: 205px; background: rgba(240,240,240,0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); /*position: absolute;*/ z-index: 999; left: 130px; top: 385px; border: 1px solid #c9c9c9; -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.totitle {
width: 160px; height: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: center; display: flex; align-items: center; justify-content: center; left: 20px; top: 12px; position: absolute; font-family: poppins; color: #b7c9a4;
}

.to1 {
width: 150px; height: 24px; position: absolute; right: 14px; top: 43px; display: flex; align-items: center;
}

.to2 {
width: 150px; height: 24px; position: absolute; right: 14px; top: 73px; display: flex; align-items: center;
}

.to3 {
width: 150px; height: 24px; position: absolute; right: 14px; top: 103px; display: flex; align-items: center;
}

.to4 {
width: 150px; height: 24px; position: absolute; right: 14px; top: 133px; display: flex; align-items: center;
}

.to5 {
width: 150px; height: 24px; position: absolute; right: 14px; top: 163px; display: flex; align-items: center;
}

.t1 {
width: 12px; height: 12px; background: #eaeaea; position: absolute; left: 14px; top: 48px; border-radius: 50%; border: 1px solid #c9c9c9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #b7c9a4;
}

.t2 {
width: 12px; height: 12px; background: #eaeaea; position: absolute; left: 14px; top: 78px; border-radius: 50%; border: 1px solid #c9c9c9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #b7c9a4;
}

.t3 {
width: 12px; height: 12px; background: #eaeaea; position: absolute; left: 14px; top: 108px; border-radius: 50%; border: 1px solid #c9c9c9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #b7c9a4;
}

.t4 {
width: 12px; height: 12px; background: #eaeaea; position: absolute; left: 14px; top: 138px; border-radius: 50%; border: 1px solid #c9c9c9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #b7c9a4;
}

.t5 {
width: 12px; height: 12px; background: #eaeaea; position: absolute; left: 14px; top: 168px; border-radius: 50%; border: 1px solid #c9c9c9; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #b7c9a4;
}

.l1 {
width: 2px; height: 144px; background: #dcbdd7; position: absolute; left: 36px; top: 43px;
}

.l2 {
width: 182px; height: 1px; background: #c9c9c9; position: absolute; left: 14px; top: 70px;
}

.l3 {
width: 182px; height: 1px; background: #c9c9c9; position: absolute; left: 14px; top: 100px;
}

.l4 {
width: 182px; height: 1px; background: #c9c9c9; position: absolute; left: 14px; top: 130px;
}

.l5 {
width: 182px; height: 1px; background: #c9c9c9; position: absolute; left: 14px; top: 160px;
}

.clip {
width: 30px; height: 30px; position: absolute; font-size: 24px; justify-content: center; display: flex; align-items: center; color: #dcbdd7; top: 5px; left: 5px;
}
.initial {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(183,201,164,0.7);
    border: 1px solid #b7c9a4;
    position: absolute;
    z-index: 999;
    left: 345px;
    top: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: poppins;
    font-size: 30px;
    font-weight: 700;
    color: #f8f8f8;
    -webkit-animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
</style>
<div class="initial">a</div>
<div class="todo"><div class="totitle">to do list</div><div class="to1">buy concert tickets</div><div class="to2">go grocery shopping</div><div class="to3">get a new table</div><div class="to4">dinner with mom</div><div class="to5">find a will to live</div><div class="t1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512" class="iconify" data-icon="fa-solid:check" style="vertical-align: -0.125em; transform: rotate(360deg);"><path fill="currentColor" d="m173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69L432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></div><div class="t2"></div><div class="t3"></div><div class="t4"></div><div class="t5"></div><div class="l1"></div><div class="l2"></div><div class="l3"></div><div class="l4"></div><div class="l5"></div><div class="clip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify" data-icon="uil:paperclip" style="vertical-align: -0.125em; transform: rotate(360deg);"><path fill="currentColor" d="m18.08 12.42l-6.18 6.19a4.25 4.25 0 0 1-6-6l8-8a2.57 2.57 0 0 1 3.54 0a2.52 2.52 0 0 1 0 3.54l-6.9 6.89A.75.75 0 1 1 9.42 14l5.13-5.12a1 1 0 0 0-1.42-1.42L8 12.6a2.74 2.74 0 0 0 0 3.89a2.82 2.82 0 0 0 3.89 0l6.89-6.9a4.5 4.5 0 0 0-6.36-6.36l-8 8A6.25 6.25 0 0 0 13.31 20l6.19-6.18a1 1 0 1 0-1.42-1.42Z"></path></svg></div></div>

5

Код:
<!--HTML--><style>.folder {
    width: 210px;
    height: 130px;
    background: rgba(15,15,15,0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: sticky;
    left: -40px;
    top: 200px;
    border: 1px solid #1a1a1a;
    opacity: 1;
    -webkit-animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.ear {
    width: 80px;
    height: 16px;
    position: absolute;
    background: rgba(15,15,15,0.8);
    border: 1px solid #1a1a1a;
    border-bottom: none;
    top: -18px;
    left: 3px;
    transform: perspective(10px) rotateX(6deg);
}
.desc {
    width: 170px;
    height: 45px;
    position: absolute;
    left: 20px;
    top: 65px;
    overflow: scroll;
    line-height: 140%;
}
.icon {
    width: 36px;
    height: 36px;
    background: #a8798a;
    position: absolute;
    border-radius: 50%;
    left: 20px;
    top: 20px;
    padding: 2px;
}
.icon img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.user {
    width: 120px;
    height: 30px;
    position: absolute;
    right: 20px;
    top: 25px;
}
.un {
    width: 120px;
    font-family: poppins;
    font-size: 10px;
    font-weight: 800;
    color: #a8798a;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.ustatus {
    width: 120px
px
;
    font-family: poppins;
    font-size: 7px;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: -4px;
}
</style>
<div class="folder"><div class="ear"></div><div class="desc">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.</div><div class="icon"><img draggable="false" src="https://64.media.tumblr.com/4bf8e75b43589e8e59c9b2352032b248/88077d0adabddc63-3e/s2048x3072/133c69b9abd61000d3d8004366515ec8ac3f433a.png"></div><div class="user"><div class="un">@stayc</div>    
<div class="ustatus">online</div>    
</div></div>

6

Код:
<!--HTML--><style>.sidebar {
    width: 240px;
    height: 120px;
    background: rgb(220,204,237,0.5);
    border: 1px solid #dccced;
    position: sticky;
    top: 50px;
    padding: 15px;
    left: 10px;
    -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.side {
    width: 240px;
    height: 120px;
    background: #fdfcfc;
    position: absolute;
    outline: 1px solid #dccced;
}
.sidesc {
    width: 100px;
    height: 80px;
    position: absolute;
    left: 20px;
    top: 20px;
    overflow: scroll;
}
.sidebie {
    width: 95px;
    height: 120px;
    position: absolute;
    right: 0px;
    background: #f5f5f5;
    border-left: 1px solid #e7e7e7;
}
.sidebie img {
    width: 95px;
    height: 120px;
}
.sisymbol {
    width: 36px;
    height: 36px;
    border: 1px solid #e7e7e7;
    background: #fdfcfc;
    border-radius: 50%;
    position: absolute;
    left: -25px;
    top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #d1bce7;
}
</style>
<div class="sidebar">
<div class="side">
<div class="sidesc">sed ut perspiciatis unde omnis iste natus error sit volup oloremque laudm, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fug.</div>

<div class="sidebie"><img draggable="false" src="https://64.media.tumblr.com/3d2a381fc714f82a8ebbc215ad51b58a/88077d0adabddc63-32/s2048x3072/dc92ff1edf21c00afdfa125965d53b9b7d248557.png"></div>



<div class="sisymbol"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:bird-duotone" style="vertical-align: -0.125em; transform: rotate(360deg);"><path d="M232 80l-24 16v24a96 96 0 0 1-96 96H8l96-120V76a52.007 52.007 0 0 1 102.333-13.112z" opacity=".2" fill="currentColor"></path><path d="M176 68a12 12 0 1 1-12-12a12 12 0 0 1 12 12zm-50.879 61.854a7.998 7.998 0 0 0-11.267 1.024l-40 48a8 8 0 1 0 12.291 10.244l40-48a7.999 7.999 0 0 0-1.024-11.268zM240 80a8 8 0 0 1-3.563 6.656L216 100.281V120a104.118 104.118 0 0 1-104 104H8a8 8 0 0 1-6.247-12.998L96 93.194V76a60.01 60.01 0 0 1 117.207-18.145l23.23 15.489A8 8 0 0 1 240 80zm-22.422 0l-15.682-10.456a8.001 8.001 0 0 1-3.306-4.645A44.007 44.007 0 0 0 112 76v20a8 8 0 0 1-1.753 4.998L24.645 208H112a88.1 88.1 0 0 0 88-88V96a8 8 0 0 1 3.563-6.656z" fill="currentColor"></path></svg></div>

</div>
</div>

7

Код:
<!--HTML--><style>.sdesc {
    width: 260px;
    height: 95px;
    border: 1px solid #dfdfdf;
    background: rgba(251,251,251,0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: absolute;
    top: 350px;
    left: 170px;
    overflow: hidden;
    border-radius: 0px 18px 0px 18px;
    z-index: 9999;
    webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.title {
    width: 210px;
    height: 29px;
    border-bottom: 1px solid #dfdfdf;
    position: absolute;
    display: flex;
    font-family: poppins;
    font-size: 11px;
    font-weight: 800;
    padding: 0px 25px;
    color: #eac2da;
    text-transform: uppercase;
    align-items: center;
    background: rgba(251,251,251,0.8);
    overflow: hidden;
}
.ticon {
    width: 50px;
    height: 60px;
    background: rgba(226,176,206,0.4);
    position: absolute;
    transform: rotate(-30deg);
    right: 0px;
    top: -18px;
}
.tic {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(226,176,206,0.8);
    font-size: 14px;
    letter-spacing: 6px;
    top: 3px;
}
.sinfo {
    width: 220px;
    height: 30px;
    position: absolute;
    bottom: 17px;
    left: 20px;
    overflow: scroll;
    line-height: 140%;
}
</style>
<div class="sdesc">
<div class="title">love is around.
<div class="ticon"></div>    
<div class="tic">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256" class="iconify" data-icon="ph:heart-bold" style="vertical-align: -0.125em; transform: rotate(360deg);"><path d="M128 228a12.6 12.6 0 0 1-5.9-1.5C117.8 224 16 166.2 16 92a64 64 0 0 1 112-42.4A64 64 0 0 1 240 92c0 74.2-101.8 132-106.1 134.5a12.6 12.6 0 0 1-5.9 1.5zM80 52a40 40 0 0 0-40 40c0 51.2 67.4 97.2 88 110c20.6-12.8 88-58.8 88-110a40 40 0 0 0-76.9-15.4a12 12 0 0 1-22.2 0A39.9 39.9 0 0 0 80 52z" fill="currentColor"></path></svg>    
</div>
</div>    
<div class="sinfo">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.</div>
</div>

8

Код:
<!--HTML--><style>.side {
    width: 200px;
    height: 130px;
    background: #fdfcfc;
    /*position: absolute;*/
    z-index: 999;
    left: 92px;
    transform: rotate(-3deg);
    top: 395px;
    border: 1px solid #e7e7e7;
}
.sidesticker {
    width: 35px;
    height: 35px;
    background: rgba(198,172,218,0.4);
    border-radius: 50%;
    position: absolute;
    top: -16px;
    left: 82.5px;
}
.sidedesc {
    width: 160px;
    height: 60px;
    position: absolute;
    left: 20px;
    bottom: 30px;
    overflow: scroll;
    line-height: 160%;
}</style>
<div class="side">
<div class="sidesticker"></div>
<div class="sidedesc">sed ut perspiciatis unde omnis iste natus error sit volup oloremque laudm, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fug.</div>
</div>

9

Код:
<!--HTML--><style>.sidebox {
    width: 200px;
    height: 55px;
    backdrop-filter: blur(4px)!important;
    /*position: absolute;*/
    border-radius: 10px;
    left: 10px;
    bottom: 10px;
    background: rgba(253,252,252,0.3);
    transition: 0.3s;
}
.icon {
    width: 33px;
    height: 33px;
    background: #fdfcfc;
    border: 2px solid #e5e5e5;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}
.icon img {
    width: 33px;
    height: 33px;
    border-radius: 50%;
}
.sidetext {
    width: 135px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: 15px;
    overflow: hidden;
    line-height: 140%!important;
}
.sidename {
    font-family: poppins;
    text-transform: uppercase;
    font-weight: 700;
    color: #d8dfb6;
    font-size: 10px;
}
.shour {
    font-family: calibri;
    font-size: 8px;
    font-weight: 400;
    color: #2e2e2e;
    float: right;
}
.sideinfo {
    width: 135px;
    height: auto;
    overflow: scroll;
    font-size: 9px;
}
.sbutton {
    width: 18px;
    height: 18px;
    background: rgba(216,223,182,0.5);
    border: 1px solid #d8dfb6;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
}
</style>


<div class="sidebox">
<div class="icon"><img draggable="false" src="https://64.media.tumblr.com/e8122495c6cc18674c785f7b7ca2518d/88077d0adabddc63-e2/s2048x3072/535dfddd0e937e752fa4b2d049bcf71df3cb5bd5.png"></div>    
<div class="sidetext">
<div style="width:135px; height: auto;">
<span class="sidename">springdoythemes</span> <div class="shour">4h ago</div>
<div class="sideinfo">keep it short</div>    
</div></div></div>
<div class="sbutton"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify" data-icon="eva:close-fill" style="vertical-align: -0.125em; transform: rotate(360deg);"><path fill="currentColor" d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42z"></path></svg>
</div>

10

Код:
<center><!--HTML--><style>.galaxy {
    /* width: 1000px; */
    /* height: 700px; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -500px;
    margin-top: -350px;
    z-index: 99;
}

::selection {
  background: #b5cccc; 
}.side1 {
width: 200px; height: 120px; border: 1px solid #d4d4d4; background: #f5f5f5; position: absolute; top: 170px; left: 100px; z-index: 999; border-radius: 15px; box-shadow: 5px 5px rgba(0,0,0,0.05); overflow: hidden;  animation-name: movee; animation-duration: 2s; animation-delay: 0s; animation-fill-mode: both;
}

.side2 {
width: 160px; height: 20px; background: #f0f0f0; position: absolute; left: 20px; top: 80px; display: flex; align-items: center; font-size: 7px; text-transform: uppercase; justify-content: center;
}

.side3 {
width: 40px; height: 40px; background: #f5f5f5; border: 1px solid #d4d4d4; position: absolute; padding: 6px; left: 174px; border-radius: 50%; top: 138px; z-index: 999; transition: 0.5s; animation-name: move; animation-duration: 2s; animation-delay: 0s; animation-fill-mode: both;
}

@keyframes move {
  from {top: -300px; } 
  to {top: 138px;}
}

@keyframes movee {
  from {top: -300px; } 
  to {top: 170px;}
}

.side3:hover {
    width: 40px; height: 40px; padding: 6px; background: #b5cccc; transition: 0.5s;
}

.side3 img {
    width: 40px; height: 40px; border-radius: 50%;
}

.side4 {
width: 200px; height: 120px; border: 1px solid #d4d4d4; background: #f5f5f5; position: absolute; top: 310px; left: 50px; z-index: 999; box-shadow: 5px 5px rgba(0,0,0,0.05); padding:6px; transition: 0.5s;
}

.side4:hover {
    z-index: 9999; transition: 0.5s; transform: scale(1.1);
}

.side4 img {
    width: 200px; height: 120px;
}

.side5 {
width: 130px; height: 150px; border: 1px solid #d4d4d4; position: absolute; background: #f5f5f5; top: 380px; left: 200px; z-index: 999; box-shadow: 5px 5px rgba(0,0,0,0.05); border-radius: 15px; transition: 0.5s;
}

.side5:hover {
    transform: scale(1.1); transition: 0.5s;
}

.title {
 width: 370px; height: 30px; font-family: poppins; font-size: 7px; font-weight: 600; letter-spacing: 1px; z-index: 999; position: absolute; top: 565px; left: 315px; display: flex; align-items: center; margin-top: 11px; text-transform: uppercase; color:#b5cccc; background: #f5f5f5; border: 1px solid #d4d4d4;
}

.title:before { content: ""; flex: 1 1 auto; border-top: 1px solid #d4d4d4; margin-right: 10px; }

.title:after { content: ""; flex: 1 1 auto; border-top: 1px solid #d4d4d4; margin-left: 10px; }

.sided {
width: 160px; height: 40px; position: absolute; left: 20px; top: 30px; overflow:scroll; line-height: 150%;
}

.sid4 {
width: 30px; height: 30px; position: absolute; z-index: 999; border-radius: 50%; top: 50px; left: -15px; overflow: hidden;
}

.circ {
width: 30px; height: 30px; background: #bbb5c9; opacity: 0.8; position: absolute;
}

.chev {
width: 33px; height: 32px; font-size: 8px; color: white; display: flex; align-items: center; justify-content: center; position: absolute;
}

.sys {
width: 110px; height: 20px; position: absolute; top: 20px; left: 10px; font-family: poppins; font-size: 9px; font-weight: 600; letter-spacing: 0.6px; text-align: center; color: #b5cccc; text-transform: uppercase;
}

.cst {
width: 110px; height: 100px; position: absolute; left: 10px; top: 45px;
}

.csst {
width: 90px; height: 25px; display: flex; align-items: center; border-radius: 10px; transition: 0.3s; padding: 2px 10px; margin-bottom: 4px;
}

.csst:hover {
    transition: 0.3s;
    background: #f0f0f0;
}

.csi {
font-size: 10px; margin-right: 5px; color: #bbb5c9;
}

.imssg {
width: 210px; height: 70px; background: rgba(181,204,204,0.7); position: absolute; z-index: 999; left: 670px; top: 350px; border-radius: 15px; box-shadow: 5px 5px rgba(0,0,0,0.05); animation: float 4s ease-in-out infinite;
}

.iconz {
width: 50px; height: 50px; border-radius: 50%; position: absolute; top: 10px; left: 10px;
}

.iconz img {
width: 50px; height: 50px; border-radius: 50%;    
}

.mms {
width: 125px; height: 20px; position: absolute; left: 70px; top: 12px; font-family: poppins; font-size: 9px; font-weight: 700; text-transform: uppercase; color:#7a738c;
}

.sms {
width: 125px; height: 30px; position: absolute; top: 28px; overflow: scroll; left: 70px; line-height: 160%; color:#0f0f0f;
}

.line {
width: 400px; height: 1px; background: #d4d4d4; position: absolute; top: 324px;
}

.line2 {
width: 1px; height: 700px; background: #d4d4d4; position: absolute; left: 70px;
}

.txti {
width: 190px; height: 245px; background: #f5f5f5; border: 1px solid #d4d4d4; position: absolute; top: 30px; left: 155px; box-shadow: 5px 5px rgba(0,0,0,0.05);
}

.topti {
width: 150px; height: 15px; position: absolute; padding: 0px 20px 10px 20px; border-bottom: 1px solid #d4d4d4; top: 10px; text-align: right; letter-spacing: 4px;
}

.topt {
width: 150px; height: 160px; position: absolute; top: 60px; left: 20px; overflow: scroll;
}

.creca {
width: 200px; height: 130px; background: rgba(255,255,255,0.1); backdrop-filter: blur(4px); border-radius: 15px; position: absolute; left: 30px; top: 80px; overflow: hidden; box-shadow: 5px 5px rgba(0,0,0,0.05); border: 1px solid #d4d4d4;
}

.cri {
position: absolute; color: #bbb5c9; left: 15px; top: 15px; font-size: 22px;
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.snum {
width: 180px; height: 20px; font-family: poppins; color: white; font-size: 10px; font-weight: 700; text-align: left; position: absolute; left: 20px; top: 60px; letter-spacing: 2px;
}

.cname {
width: 160px; height: 20px; font-family: poppins; color: #b5cccc; font-size: 8px; font-weight: 800; text-align: right; position: absolute; left: 20px; top: 100px; letter-spacing: 2px; text-transform: uppercase;
}

.switch {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 60px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  -webkit-transition: .4s;
  transition: .4s;
  border: 1px solid #d4d4d4;
}

.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 3px;
  top: 3px;
  background-color: #b5cccc;
  -webkit-transition: .4s;
  transition: .4s;
}
</style><div class="galaxy">

<div class="side1">
<div class="sided">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
<div class="side2">
type something...    
</div>
</div>
<div class="side3"><img draggable="false" src="https://64.media.tumblr.com/9365b1cb899bc9d3d6fba502a37780fa/88077d0adabddc63-3f/s2048x3072/45b5d1c891e19ddf98be9c1b7ebfed01d0c5ee7b.png"></div>

<div class="side4">
<img draggable="false" src="https://64.media.tumblr.com/1b8a52b4700c77e6b491542d85ab120e/88077d0adabddc63-18/s2048x3072/db45bdd963b3e4166f0feb2199d09e72bd968deb.gif">
<div class="sid4">
<div class="circ"></div>  
<div class="chev">
<span class="cp cp-chevron-right"></span>
</div>
</div>
</div>

<div class="side5">
<div class="sys">system settings</div>
<div class="cst">

<div class="csst">
<span class="csi"><span class="th th-settings-o"></span></span> control center
</div>

<div class="csst">
<span class="csi"><span class="th th-closed-lock-o"></span></span> privacy
</div>

<div class="csst">
<span class="csi"><span class="th th-key-o"></span></span> passwords
</div>

</div>

<div class="uno"></div>
</div>

<div class="title">IF IT’S ONLY MOMENTARY, I WON'T EVEN BOTHER TO START IT</div>

<div class="dos">
<img draggable="false" src="https://64.media.tumblr.com/a11f5c81a78d74c8cb6d5fb3bcae864f/88077d0adabddc63-6f/s2048x3072/30b012f73c55fae4195e8b19e0c25e5951c2c335.png">    
</div>

<div class="imssg">
<div class="iconz"><img draggable="false" src="https://64.media.tumblr.com/6b86b384c05cceccb18b3591d96106b1/88077d0adabddc63-0f/s2048x3072/9eb138caeec6ffc33606ad92c05f346dc6f7b940.png"> </div>  
<div class="mms">imessage <div style="font-size: 6px; font-weight: 400; color:#0f0f0f; float: right;">02:05 p.m.</div></div>
<div class="sms">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
</div>


<a href="/" title="go back"><div class="tres">
<div class="cuatro">
<span class="cp cp-home-o"></span> </div>    
</div></a>

<div style="width: 25px; height: 60px; position: absolute; z-index: 999; border-radius: 30px; top: 305px; left: 277px;">
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>    
</div>

 
 

    

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

Вы здесь » Test by devls » страниу » коды тамбы


Рейтинг форумов | Создать форум бесплатно