тема

Поделиться312022-05-17 12:28:48

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[html]<style>

#menu ul {
margin: 0;
padding: 0;
}

#menu .main-menu {
display: none;
}

#tm:checked + .main-menu {
display: block;
}

#menu input[type="checkbox"],
#menu ul span.drop-icon {
display: none;
}

#menu li,
#toggle-menu,
#menu .sub-menu {
border-style: solid;
border-color: rgba(0, 0, 0, .05);
}

#menu li,
#toggle-menu {
border-width: 0 0 1px;
}

#menu .sub-menu {
background-color: #444;
border-width: 1px 1px 0;
margin: 0 1em;
}

#menu .sub-menu li:last-child {
border-width: 0;
}

#menu li,
#toggle-menu,
#menu a {
position: relative;
display: block;
color: white;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#container2 {
background-color: #09c;
width: 200px;
}
#menu,
#toggle-menu {
background-color: #09c;
width: 200px;
}

#toggle-menu,
#menu a {
padding: 1em 1.5em;
}

#menu a {
transition: all .125s ease-in-out;
-webkit-transition: all .125s ease-in-out;
}

#menu .sub-menu {
display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
display: block;
}

#toggle-menu .drop-icon,
#menu li label.drop-icon {
position: absolute;
right: 1.5em;
top: 1.25em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
border-radius: 50%;
width: 1em;
height: 1em;
text-align: center;
background-color: rgba(0, 0, 0, .125);
text-shadow: 0 0 0 transparent;
color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
line-height: 1;
}

</style>
<script>

</script>

<container2>
<nav id="menu">
<label for="tm" id="toggle-menu" >Navigation <span class="drop-icon">▾</span></label>
<input type="checkbox" id="tm">
<ul class="main-menu clearfix">
<li><a href="tgt.html">Sample</a></li>
<li><a href="tgt.html">2-level DD
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm1" >▾</label>
</a>
<input type="checkbox" id="sm1">
<ul class="sub-menu">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label>
</a>
<input type="checkbox" id="sm2">
<ul class="sub-menu">
<li><a href="#">Item 2.2.1</a></li>
<li><a href="#">Item 2.2.2</a></li>
<li><a href="#">Item 2.2.3</a></li>
</ul>
</li>
<li><a href="#">Item 3.4</a></li>
</ul>
</li>
<li><a href="#">Another Sample</a></li>
</ul>
</nav>
</container2>
[/html]

0

Поделиться322022-05-17 14:01:10

Автор: кис
Новичок
Сообщений: 3
Уважение: [+0/-0]

Око Саурона написал(а):

кис, живее всех живых

Кис-кис, намурчи на ушко, плес

Кто ты и что делаешь на моем тестовике?

Обещаю почесать за ушком

тот, кого ты чесал не только за ушком хд

0

Поделиться332022-05-17 14:32:04

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[html]
<style>
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.menu-switcher-container {
position: relative;
width: 12.5em;
height: 5em;
border-radius: 7em;
background-color: #f5f5f5;
box-shadow: 0 0 0.5em rgb(190, 190, 190);
cursor: pointer;
overflow: hidden;

transition: all 350ms ease-in-out;
}

.menu-switcher-container:hover {
box-shadow: 0 0 1em rgb(190, 190, 190);
transform: scale(0.97);
}

.down-arrow {
position: absolute;
height: 100%;
width: 3em;
/* border: 1px solid red; */
right: 0;
display: grid;
place-items: center;
font-size: 1.55em;
color: #aaa;
}

.menu-switcher-container:hover .down-arrow {
color: #444444;
}

.menu {
position: absolute;
/* border: 1px solid red; */
width: 5em;
height: 5em;
border-radius: 50%;
left: -2.5em;
transition: transform 500ms ease-in-out;
}

.menu .item {
position: absolute;
font-family: sans-serif;
font-size: 1.25rem;
}

.menu .item:nth-child(1) {
top: 50%;
right: -2em;
transform: translateY(-50%);
}

.menu .item:nth-child(2) {
top: -2em;
left: 50%;
transform: translateX(-50%) rotate(-90deg);
}

.menu .item:nth-child(3) {
left: -120%;
top: 50%;
transform: translateY(-50%) rotate(-180deg);
}

.menu .item:nth-child(4) {
left: 50%;
top: 140%;
transform: translateX(-50%) rotate(90deg);
}
</style>
<script>
const menuSwitcher = document.getElementById("menuSwitcher");
const menu = document.getElementById("menu");
let rotation = 0;
menuSwitcher.addEventListener("click", () => {
rotation += 90;
menu.style.transform = `rotate(${rotation}deg)`;
});
</script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<div class="menu-switcher-container" id="menuSwitcher">
<div class="menu" id="menu">
<div class="item"><a href="#">CSS</a></div>
<div class="item"><a href="#">HTML</a></div>
<div class="item"><a href="#">JavaScript</a></div>
<div class="item"><a href="#">BootStrap</a></div>
</div>
<div class="down-arrow">
<i class="fa-solid fa-angle-down"></i>
</div>
</div>

[/html]

0

Поделиться342022-05-18 12:04:46

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[hideprofile][html]
<style>
@keyframes blink {
50% { opacity: 1; }
100% { opacity: 0; }
}
container5 {
background-color: #151515;
color: #eee;
font-family: 'Share Tech Mono', monospace;
user-select: none;
}
.hidden {
display: none;
}

.password {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
letter-spacing: 5px;
text-transform: uppercase;
}

.granted {
position: absolute;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
}

.info {
position: absolute;
top: 0;
left: 0;
p { margin: 10px; }
}

.button {
background-color: #111;
border: solid 1px #888;
padding: 8px 25px;
font-size: 26px;
letter-spacing: 2px;
cursor: pointer;
}
.rerun {
position: absolute;
bottom: 15px;
right: 115px;
}
.start {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.blink {
animation: blink 0.8s steps(1, start) infinite alternate;
}
</style>
<script>
var passwords = ['маминабулка', 'админ95', 'жопкадятла', 'повелительподвала', 'ворота69'];
var indexOld;
var index = Math.floor((Math.random() * passwords.length));
var password = passwords[index];
var characters = [];
var counter = 0;

function hack() {
counter++;
if(counter == password.length){
$('.granted, .rerun').removeClass('hidden');
}
}
$(window).on('keydown', hack);
$('.password').on('click', hack);

$('.rerun').on('click', function() {
//prevent from displaying the same password two times in a row
indexOld = index;
do {
index = Math.floor((Math.random() * passwords.length));
} while(index == indexOld);

$('.granted, .rerun').addClass('hidden');
password = passwords[index];
characters = [];
counter = 0;
});

//keyboard events won't fire if the iframe isn't selected first in Full Page view
$('.start').on('click', function() {
$(this).addClass('hidden');
$('.info p:last-child, .password').removeClass('hidden');
});
</script>
<container5>
<link
<div class="info">
<p>Добро пожаловать в нейросеть!<br> Пройди простой тест "Кто ты сегодня".</p>
<p class="hidden">Жмякай на кнопку, чтобы увидеть<span class="blink">_</span></p>
</div><br><br><br>
<div class="password hidden"></div><br><br><br>
<div class="button start">НАЧАТЬ</div><br><br><br><br>
<div class="blink granted hidden">Личность принята! Поздравляем!</div><br><br><br>
<div class=" button rerun hidden">Заново</div><br><br><br>
</container5>

[/html]

0

Поделиться352022-05-19 09:39:34

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[html]
<style>
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,700;0,900;1,300&family=Do+Hyeon&display=swap");
:root {
font-family: "Barlow", sans-serif;
--body-bg: #fff8dc;
--shadow: cornsilk;
--header-fnt: "Do Hyeon", sans-serif;
--other-fnt: "Do Hyeonf", sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
min-width: 100vw;
background: var(--body-bg);
color: #000;
}

h1 {
font-family: var(--header-fnt);
font-weight: 300;
font-size: clamp(4rem, 6vw, 6rem);
letter-spacing: 0.3rem;
/* filter: drop-shadow( 0 0 2px #000a);
text-shadow: 0 0 3px #0003;*/
color: black;
/* background: radial-gradient(ellipse at top left, #000a, #000f); */
}
.links a {
text-decoration: none;
color: cadetblue;
display: inline-block;
position: relative;
}
.links a::after {
content: "";
background: hsla(348, 83%, 47%, 0.7);
position: absolute;
top: 98%;
left: 0;
width: 100%;
height: 2px;
border-radius: 3px;
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms ease-in-out;
}
.links a:hover::after {
transform: scaleX(1);
transform-origin: right;
}
/*.taginfo::first-letter */
.dropcap {
float: left;
font-size: 2.2rem;
width: 1.5em;
height: 1.5em;
border: 1px solid hsla(348, 83%, 47%, 0.7);
margin-right: 6rem;
box-shadow: 1px 1px 3px 1px hsl(348deg 83% 47% / 30%);
text-shadow: 0px 0px #18b28e, 1px 1px #18b28e, 2px 2px #18b28e,
3px 3px #18b28e, 4px 4px #18b28e, 5px 5px #18b28e, 6px 6px #18b28e,
7px 7px #18b28e, 8px 8px #18b28e, 9px 9px #18b28e, 10px 10px #18b28e,
11px 11px #18b28e, 12px 12px #18b28e, 13px 13px #18b28e, 14px 14px #18b28e,
15px 15px #18b28e, 16px 16px #18b28e, 17px 17px #18b28e, 18px 18px #18b28e,
19px 19px #18b28e, 20px 20px #18b28e, 21px 21px #18b28e;
background: #21e1b4;
color: white;
border-radius: 50%;
shape-outside: ellipse(3rem 3rem at 10% 10%);
overflow: hidden;
text-align: center;
vertical-align: middle;
font-weight: 900;
}

div,
aside,
footer,
header {
padding: 1rem;
}
aside {
border-top: 0.5rem solid rgba(220, 20, 60, 0.3);

font-size: 0.8rem;
}
aside::after {
background: #0003;
border: 1px solid crimson;
padding: 1rem;
display: block;
margin-top: 1rem;
font-size: 0.9rem;
content: "This page uses css-grid for layout, this is a fallback if grids are not supported. This is also used for the mobile view";
}
.line {
/* background: hsla(348, 83%, 47%, 0.7);
color: var(--body-bg); */
line-height: 1.5;
font-size: 0.7rem;
padding: 0.2rem;
text-align: center;
}
.callout {
font-family: var(--other-fnt);
font-size: clamp(1rem, 5vw, 2rem);
color: crimson;
padding-bottom: 0;
}
.tagline {
font-weight: 700;
color: #3339;
padding: 0 1rem;
}
.taginfo {
color: cadetblue;
padding-bottom: 4rem;
font-weight: 300;
}
.info {
font-size: 0.9rem;
}
.divider {
background: crimson;
height: 0.5rem;
}

/* -- display as grid ------------------ */
@supports (display: grid) {
body {
display: grid;
place-items: center;
}

.container {
display: grid;
grid-template-rows: auto 0.1fr 0.1fr auto 1fr 1fr 0.1fr 0.1fr 0.1fr auto;
min-height: 100vh;
}
footer {
display: flex;
justify-content: center;
align-items: flex-end;
}
.dropcap {
display: grid;
place-items: center;
}
@media (min-width: 620px) {
div,
aside,
footer,
header,
.taginfo {
padding: unset;
}
header {
position: relative;
display: grid;
place-items: end;
}
header h1 {
line-height: 0.8;
text-align: right;
}
footer {
width: max-content;
}
.callout {
writing-mode: vertical-lr;
display: flex;
width: 100%;
position: relative;
}
.tagline {
align-self: flex-end;
}
.taginfo {
border-top: 0.5rem solid #000a;
border-bottom: 0.5rem solid #000a;
padding: 1rem;
margin-bottom: -0.5rem;
}
h2 {
font-weight: 500;
align-self: flex-end;
}
aside::after {
visibility: hidden;
height: 0;
padding: 0;
margin: 0;
}
.links {
align-self: flex-end;
justify-self: right;
}
.info {
padding: 1rem;
border-top: 0.5rem solid #000a;
border-bottom: 0.5rem solid #000a;
background-image: linear-gradient(#d7d6d6 1px, transparent 1px),
linear-gradient(to right, #d7d6d6 1px, #fff8dc 1px);
background-size: 20px 20px;
}
.line {
align-self: center;
}
.divider {
align-self: flex-end;
}
/* fun with animations */
.callout::after,
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
header::after {
background-image: radial-gradient(
ellipse at top left,
rgba(220, 20, 60, 0.9),
rgb(220, 20, 60)
);
transform: scaleX(0);
transform-origin: right;
transition: transform 250ms ease-in-out;
box-shadow: 0px 2px 2px #0005;
}
.callout::after {
background: 1% 0px / 100%
linear-gradient(to right, #fff8dc 40%, #0004 42%, transparent 42%),
radial-gradient(circle at top, #bffaf070, #fff 20%, #fff9 90%),
radial-gradient(ellipse at bottom right, #0003, transparent 20%);
transform: scaleY(0);
transition: transform 150ms ease-in 250ms;
transform-origin: bottom;
}
header {
z-index: 1;
}
header h1 {
transition: 150ms ease-in-out 100ms;
}
.container:hover h1 {
color: var(--body-bg);
filter: drop-shadow(-2px 3px 3px #0005);
}
.container:hover header::after {
transform: scaleX(1);
transform-origin: left;
}
.container:hover .callout::after {
transform: scaleY(1);
transform-origin: top;
}
/* -- lay it out -- */
.container {
grid-template-rows: auto 0.5fr 0.1fr 1fr 1fr 1fr 0.1fr;
min-height: unset;
width: min(800px, 100% - 1rem);
height: max-content;
grid-template-columns: 1fr 0.1fr 1fr 1fr 3fr;
}
.links {
grid-column: 5;
grid-row: 1;
}
header {
grid-column: 1 / 5;
grid-row: 1;
}

.callout {
grid-column: 4;
grid-row: 2 / 7;
}
.taginfo {
grid-column: 5;
grid-row: 5;
}
.tagline {
grid-row: 4;
grid-column: 5;
}
aside {
grid-row: 5;
grid-column: 1 / 3;
padding: 1rem;
}
footer {
grid-row: 6;
grid-column: 5;
}
.line {
grid-row: 1 / 7;
grid-column: 2;

width: min-content;
opacity: 0.5;
}
.info {
grid-row: 6 / 8;
grid-column: 1 / 4;
}
.divider {
grid-row: 7;
grid-column: 4 / 6;
}
}
@media (min-width: 890px) {
.container {
transform: rotate(-25deg);
}
}
}

</style>
<script>

</script>
<div class="container">
<header>
<h1>Fun With Grids</h1>
</header>
<div class="callout">
<h2>What is going on here</h2>
</div>
<div class="tagline">
<p>Think outside contained boxes</p>
</div>
<div class="taginfo">
<p>
<span class="dropcap">A</span>
<span>
responsive play with grids, and fallback to a simpler layout if grids are not supported.
</span>
</p>
</div>
<aside>
<p>this page is a play on grid layout, having some fun with grids, and to think outside a rectangle</p>
</aside>
<div class="info">hover over, touch, resize, look at the code, #keywords: min-content, max-content, fr</div>
<div class="links">
<a href="https://www.linkedin.com/in/ghaste" target="_blank" class="linkedin">linkedin</a>
</div>
<div class="line">0 1 1 0 0 0 0 1 || 0 1 1 0 0 1 1 1

</div>
<b class="divider"></b>
<footer>have fun with code™</footer>
</div>

[/html]

0

Поделиться362022-05-19 09:55:45

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[html]
<style>
h41 {
font-size: 100px;
line-height: 20px;
}

.gradient-text {
color: transparent;
background: conic-gradient(
#D9D7F1 12%,
#BAABDA 12%, #BAABDA 33%,
#E7FBBE 33%, #E7FBBE 55%,
#FFCBCB 55%, #FFCBCB 70%,
#B5DEFF 70%, #B5DEFF 87%,
#F7D1BA 87%);
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;

animation: expand-rev 0.5s ease forwards;

cursor: pointer;
}

.gradient-text:hover {
animation: expand 0.5s ease forwards;
}

@keyframes expand {
0% {
background-size: 50%;
background-position: 0 0;
}
20% {
background-size: 55%;
background-position: 0 1em;
}
100% {
background-size: 325%;
background-position: -10em -4em;
}
}

@keyframes expand-rev {
0% {
background-size: 325%;
background-position: -10em -4em;
}
20% {
background-size: 55%;
background-position: 0 1em;
}
100% {
background-size: 50%;
background-position: 0 0;
}
}
</style>
<h41 class="gradient-text"><br>hello world!<h41>
[/html]

0

Поделиться372022-05-20 08:38:28

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[html]
<style>
body {
font-family: "IBM Plex Sans", sans-serif;
background-color: rgba(0,0,0,.1);
}

h2 {
margin: 20px auto 80px;
font-size: 38px;
font-weight: 300;
text-align: center;
letter-spacing: 2px;
line-height: 1.5;
}

details {
width: 75%;
min-height: 5px;
max-width: 700px;
padding: 45px 70px 45px 45px;
margin: 0 auto;
position: relative;
font-size: 22px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 15px;
box-sizing: border-box;
transition: all .3s;
}

details + details {
margin-top: 20px;
}

details[open] {
min-height: 50px;
background-color: #f6f7f8;
box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

details p {
color: #96999d;
font-weight: 300;
}

summary {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
cursor: pointer;
}

summary:focus {
outline: none;

}

summary:focus::after {
content: "";
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 0 5px rebeccapurple;
}

summary::-webkit-details-marker {
display: none
}

.control-icon {
fill: rebeccapurple;
transition: .3s ease;
pointer-events: none;
}

.control-icon-close {
display: none;
}

details[open] .control-icon-close {
display: initial;
transition: .3s ease;
}

details[open] .control-icon-expand {
display: none;
}

</style>
<script>

</script>
<h2>Frequently Asked Questions</h2>

<details open>
<summary>
Does this product have what I need?
<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
</summary>
<p>Totally. Totally does.</p>
</details>

<summary>
Can I use it all the time?
<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
</summary>
<p>Of course you can, we won't stop you.</p>
</details>

<details>
<summary>
Are there any restrictions?
<svg class="control-icon control-icon-expand" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expand-more" /></svg>
<svg class="control-icon control-icon-close" width="24" height="24" role="presentation"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close" /></svg>
</summary>
<p>Only your imagination my friend. Go forth!</p>
</details>
[/html]

0

Поделиться382022-05-20 08:42:46

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[hideprofile][html]
<style>
.container63 {
background: #fffefebf;
width: 700px;
}
#faq-links {padding: 10px 20px}

#faq-links div {
color: #aeaeaf;
cursor: pointer;
font-weight: 700;
text-transform: capitalize;
margin: 18px 0
}

.faq-group {
padding: 0 20px 40px 20px;
position: relative
}

.faq-group div {
font-weight: 700;
text-align: center;
}

.faq-group hr {
border: 0;
border-top: 1px solid #606060;
clear: both;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}

.faq-group:after {
top: 33%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #393939;
border-width: 15px;
margin-left: -15px
}

.faq-accordion>li {
border-top: 1px solid rgba(198, 198, 198, 0.4);
color: #666;
padding: 1.125em 0
}

.faq-accordion li a {
color: #666;
padding: 1.125em;
}

.faq-accordion > li:last-child {
border-bottom: 1px solid rgba(198, 198, 198, 0.4);
}

.faq-accordion > li > a:before {
content: 'Q.';
padding-right: 0.313em
}

.faq-accordion > li > a:after {
color: #ff8300;
content: '+';
float: right;
font-weight:300;
margin-right: 1.25em;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
overflow-y: hidden;
}

.faq-accordion > li > a.expanded:after {
color: #ffa326;
content: '\2212';
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}

.faq-accordion > li > a.expanded {font-weight: 700; opacity: 1 !important}

.faq-content {
background-color: #ececec;
margin: 20px 0 -20px;
}

.faq-content p:before {
content: 'A.';
color: #ff8300;
float: left;
font-weight: 700;
margin-right: .5em
}

.faq-content p {
margin: 0 1.2em;
padding: 1.250em 0

}

.faq-hide {display: none}

.faq-selected {
color: #49494b!important;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}

.slide-left{

-webkit-animation-name: slide-left;
-moz-animation-name: slide-left;
animation-name: slide-left;

-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;

-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;

}

@-webkit-keyframes slide-left {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}

@-moz-keyframes slide-left {
0% {
-webkit-transform: translateX(150%);
-moz-transform: translateX(150%);
   transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
-moz-transform: translateX(-8%);
   transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
-moz-transform: translateX(4%);
   transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
-moz-transform: translateX(-4%);
   transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
-moz-transform: translateX(2%);
   transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
   transform: translateX(0%);
}
}
@keyframes slide-left {
0% {
-webkit-transform: translateX(150%);
-moz-transform: translateX(150%);
   transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
-moz-transform: translateX(-8%);
   transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
-moz-transform: translateX(4%);
   transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
-moz-transform: translateX(-4%);
   transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
-moz-transform: translateX(2%);
   transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
   transform: translateX(0%);
}
}
</style>
<script>
/*<p>Pagination part? borrowed from <a href='/JoshBlackwood/'>Joshua Blackwood</a>'s Pen <a href='/JoshBlackwood/pen/yoLBJ/'>yoLBJ</a>.</p>*/

var accordWithPage = function() {

var faqDiv = $('#faq-links div');

$(function () {

faqDiv.on("click", function() {

var hideSec = 'faq-hide';
var $this = $(this),
$id = $this.attr('id'),
$class = '.' + $('.about-' + $id).attr('class').replace(hideSec, '');

$('#faq-wrapper').addClass(hideSec);
$('.about-' + $id).removeClass(hideSec);
$('div[class*=about]').not($class).addClass(hideSec);

});

});

$(function () {

var select = 'faq-selected';

faqDiv.click(function () {

if ($(this).hasClass(select)) {
$(this).removeClass(select);
} else {
$('#faq-links .faq-selected').removeClass(select);
$(this).addClass(select);
}
}); //faq link selected
});

//Accordion

$(function () {

var expand = 'expanded';
var content = $('.faq-content');
//FAQ Accordion
$('.faq-accordion > li > a').click(function (e) {
e.preventDefault();
if ($(this).hasClass(expand)) {
$(this).removeClass(expand);
// $('.faq-accordion > li > a > div').not(this).css('opacity', '1');//returns li back to normal state
$(this).parent().children('ul').stop(true, true).slideUp();
} else {
// $('.faq-accordion > li > a > div').not(this).css('opacity', '0.5');//dims inactive li
$('.faq-accordion > li > a.expanded').removeClass(expand);
$(this).addClass(expand);
content.filter(":visible").slideUp();
$(this).parent().children('ul').stop(true, true).slideDown();
}
}); //accordion function

content.hide();

});

}

accordWithPage();

/*$(function () {
$("#faq-links div").click(function () {
$('.slide-left').fadeOut( "slow", "linear" );
$('.slide-left').fadeIn( "slow", "linear" );
}); //faq link fade in and out
}); //document ready*/
</script>
<div class="container63">
<div id="faq-links">
<div id="service" class="faq-selected">service</div>
<div id="installation">installation</div>
<div id="plan">plan</div>
<div id="features">features</div>
<div id="mobile">mobile</div>
</div>

<div class="faq-group">
<div class="slide-left">
<div>service</div>
</div>
<hr>
</div>
<div class="slide-left">
<div class="faq">
<ul class="faq-accordion">

<li>
<a href="#">insane ipsum</a>
<ul class="faq-content">
<li>
<div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet k.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Beer Ipsum</a>
<ul class="faq-content">
<li>
<div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Carey ipsum</a>
<ul class="faq-content">
<li>
<div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div>
</li>
</ul>
</li>

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

<div class="faq-group">
<div class="slide-left">
<div>installation</div>
</div>
<hr>
</div>

<div class="slide-left">
<ul class="faq-accordion">

<li>
<a href="#">Bacon ipsum</a>
<ul class="faq-content">
<li>
<div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Beer Ipsum</a>
<ul class="faq-content">
<li>
<div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Carey ipsum</a>
<ul class="faq-content">
<li>
<div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div>
</li>
</ul>
</li>

</ul>

</div>
</div>

<li>
<a href="#">Duh ipsum</a>
<ul class="faq-content">
<li>
<div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Buh Ipsum</a>
<ul class="faq-content">
<li>
<div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Muh ipsum</a>
<ul class="faq-content">
<li>
<div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div>
</li>
</ul>
</li>

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

<div class="faq-group">
<div class="slide-left">
<div>features</div>
</div>
<hr>
</div>
<div class="slide-left">
<ul class="faq-accordion">

<li>
<a href="#">Veggie ipsum</a>
<ul class="faq-content">
<li>
<div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Wine Ipsum</a>
<ul class="faq-content">
<li>
<div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Woody ipsum</a>
<ul class="faq-content">
<li>
<div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div>
</li>
</ul>
</li>

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

<div class="faq-group">
<div class="slide-left">
<div>mobile</div>
</div>
<hr>
</div>
<div class="slide-left">
<ul class="faq-accordion">

<li>
<a href="#">Bacon ipsum</a>
<ul class="faq-content">
<li>
<div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Beer Ipsum</a>
<ul class="faq-content">
<li>
<div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div>
</li>
</ul>
</li>

<li>
<a href="#">Carey ipsum</a>
<ul class="faq-content">
<li>
<div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div>
</li>
</ul>
</li>

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

0

Поделиться392022-05-25 21:01:34

Автор: кис
Новичок
Сообщений: 3
Уважение: [+0/-0]

вот и пообщались

0

Поделиться402022-05-26 05:57:38

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

кис,
Киса, ну я теряюсь в догадках по поводу твоей личности
Извини, старость - не радость, память теряется

0

Поделиться412022-05-27 12:14:58

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[hideprofile][html]<div class="htmldemo" div style="background: #c7c5e1;">

<center>
<div style="width: 100%; height: 20px;"></div>
<img width="100%;" src="https://i.ibb.co/XbqrYMH/1.jpg">
<center>
<div style="margin-top: -25px; font-family: 'Pattaya'; font-size: 50px;line-height: 50%; letter-spacing: 1px; color: #3d3466; text-shadow: 2px 0px 0px #bfc2e4; word-spacing: -2px; ">Sailor Moon: Political Games</div>
</center>
<center>
<div style="margin-top: 5px; margin-left: 75px; font-family: 'Times New Roman'; font-size: 20px;line-height: 50%; letter-spacing: 1px; color: #3d3466; text-shadow: 2px 0px 0px #a8a198; word-spacing: -2px; ">Добро пожаловать в Академию!</div>
</center>
<center>
<div style="width: 100%; margin-top: 10px; background-color: #b6b9db; color: #3d3466; word-spacing: 2px; letter-spacing: 2px; font-family: verdana; font-size: 9px; text-transform: uppercase; text-align: center; line-height: 12px;">
● Рейтинг ролевой:
<b>NC-17</b>
●
<br>
● Система игры:
<b>эпизодическая</b>
●
<br>
● Год в игре:
<b>2019</b>
●
<br>
● Тематика:
<b>академия, фэнтези, приключения</b>
●
<br>
● Место действия:
<b>остров в Атлантическом океане</b>
●
<br>
</div>
</center>
<center>
<div style="width: 100%; margin-top: 10px; background-color: #b6b9db; color: #3b1f0b; word-spacing: 2px; letter-spacing: 2px; font-family: verdana; font-size: 9px; text-transform: uppercase; text-align: center; line-height: 12px;">
</center>
<div style="width: 100%; border-top: 4px solid #d6d8e7; border-bottom: 5px solid #d6d8e7;background-color: #b6b9db; color: #ff0033; font-family: verdana; font-size: 11px;">
<div style="width: 100%; height: 20px; background-color: #b0b3d5ab;"></div>
<center>
<div style="width: 100%; margin-top: -5px; background-color: #b0b3d5ab; color: #3b1f0b; word-spacing: 2px; letter-spacing: 2px; font-family: Times New Roman; font-size: 14px; text-transform: uppercase; text-align: center; line-height: 12px;"> ○ <a href="#"><b>АКАДЕМИЯ</b></a> ○ <a href="#"><b>FAQ</b></a> ○ <a href="#"><b>РАСЫ</b></a> ○ <a href="#"><b>ПРАВИЛА</b></a> ○ <a href="#"><b>РОЛИ</b></a> <br><br><a href="#"><b>ЗАНЯТЫЕ ВНЕШНОСТИ</b></a><br>
</div>
</center>
<br>
<div style="font-size: 11px; font-family: Arial; color: #1f1409; background-color: #ffffffbd; text-align: justify; padding: 20px; width: 650px;">
Добро пожаловать в магический мир, путник! В этой теме ты можешь задать любые вопросы, уточнить какую-либо информацию, а также забронировать роль из акции и внешность. При возникновении каких-либо проблем или, если надумаете продлить бронь, обращайтесь также в данную тему. Желаем тебе вдохновения успешного погружения в мир "Вечности".
<BR><BR>
<B>Придержать внешность можно на 5 дней. Придержать роль можно на 3 дня.</b>
</div>
<br>
<div style="width: 100%; height: 2px; background-color: #878fe1; border-bottom: 3px solid #d6d8e7;"></div>
<br>
<div style="font-size: 14px; font-family: Times New Roman; color: #1f1209; letter-spacing: 1px; text-align: justify"><b>Список придержанных:</b><br><br>...<br><br></div>
<div style="width: 100%; height: 2px; background-color: #878fe1; border-bottom: 3px solid #d6d8e7;"></div>
<br>
<div style="width: 100%; margin-top: -5px; background-color: #b6b9db; color: #261b15; word-spacing: 2px; letter-spacing: 2px; font-family: Times New Roman; font-size: 14px; text-transform: uppercase; text-align: center; line-height: 12px;">
<b>АМС - состав</b><br><br>
<a href="#" title="Эммелин Шерман - Администратор"><img src="http://images.vfl.ru/ii/1646494919/b56811d5/38339099_m.png" border="0" /></a> <a href="#" title="Райден Игараси - Администратор"><img src="http://images.vfl.ru/ii/1646494919/b56811d5/38339099_m.png" border="0" /></a> <a href="#" title="Мишель Тьери - Администратор"><img src="http://images.vfl.ru/ii/1646494919/b56811d5/38339099_m.png" border="0" /></a> <a href="#" title="Ислейв Видарсдоуттир - Модератор"><img src="http://images.vfl.ru/ii/1646494919/b56811d5/38339099_m.png" border="0" /></a><br><br>
</div>
</center>

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

</div><br><br>[/html]

0

Поделиться422022-05-27 12:53:22

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[hideprofile][html]
<style>
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}

#info
{
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}

a{
color: #074E8C;
}

.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}

.force-overflow
{
min-height: 450px;
}

#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}

/*
* STYLE 1
*/

#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

/*
* STYLE 2
*/

#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}

/*
* STYLE 3
*/

#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}

/*
* STYLE 4
*/

#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}

/*
* STYLE 5
*/

#style-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar-thumb
{
background-color: #0ae;

background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}

/*
* STYLE 6
*/

#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-6::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}

/*
* STYLE 7
*/

#style-7::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}

#style-7::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-7::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}

/*
* STYLE 8
*/

#style-8::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-8::-webkit-scrollbar-thumb
{
background-color: #000000;
}

/*
* STYLE 9
*/

#style-9::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-9::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}

/*
* STYLE 10
*/

#style-10::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}

#style-10::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-10::-webkit-scrollbar-thumb
{
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, .2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, .2) 50%,
rgba(0, 0, 0, .2) 75%,
transparent 75%,
transparent)
}

/*
* STYLE 11
*/

#style-11::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}

#style-11::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-11::-webkit-scrollbar-thumb
{
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}

/*
* STYLE 12
*/

#style-12::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #444444;
}

#style-12::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

#style-12::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}

/*
* STYLE 13
*/

#style-13::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}

/*
* STYLE 14
*/

#style-14::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: #CCCCCC;
}

#style-14::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-14::-webkit-scrollbar-thumb
{
background-color: #FFF;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
transparent 100%,
rgba(0, 0, 0, 1) 75%,
transparent)
}

/*
* STYLE 15
*/

#style-15::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

#style-15::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear,
40% 0%,
75% 84%,
from(#4D9C41),
to(#19911D),
color-stop(.6,#54DE5D))
}

/*
* STYLE 16
*/

#style-16::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

#style-16::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}

#style-16::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%);
}

</style>
<script>

</script>

[/html]

0

Поделиться432022-05-27 12:56:54

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[hideprofile][html]
<style>
/*
Based from this article from Divya Manian -
http://nimbupani.com/using-background-c … lback.html
*/

* {
margin: 0;
padding: 0;
}

*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html,
body {
min-height: 100%;
}

body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}

.wrapper {
text-align: center;
}

.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}

/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;

-webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}

/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}

/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}

/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.75em 0;
}

.clip-text--no-textzone:after {
content: none;
}

/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
}

/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(https://picsum.photos/480/200?random);
}

.clip-text_two {
background-image: url(https://picsum.photos/480/200?grayscale);
}

.clip-text_tree {
background-image: url(https://picsum.photos/480/200?grayscale&random=2);
}

.clip-text_four {
background-image: url(https://picsum.photos/480/200?grayscale&blur=3);
}

.clip-text_five {
background-image: url(https://picsum.photos/480/200?grayscale);
}

.clip-text_six {
background-image: url(https://picsum.photos/480/200?random=3);
}

.clip-text_seven {
background-image: url(https://picsum.photos/480/200?random=4);
}

.clip-text_eight {
background-image: url(https://picsum.photos/480/200?random=6);
}

.clip-text_nine {
background-image: url(https://picsum.photos/480/200?random=5);
}

.clip-text_ten {
background-image: url(https://picsum.photos/480/200?random=7);
}

.clip-text_eleven {
background-image: url(https://picsum.photos/480/200?random=8);
background-size: cover;
}

.clip-text_twelve {
background-image: url(https://picsum.photos/480/200?random=9);
}

.clip-text_thirteen {
background-image: url(https://picsum.photos/480/200?random=10);
}

.clip-text_fourteen {
background-image: url(https://picsum.photos/480/200?random=11);
}

.clip-text_fifteen {
background-image: url(https://picsum.photos/480/200?random=12);
}

</style>
<script>

</script>

<div class="wrapper">
<p class="title">Play with background-clip text</p>
<div class="clip-text clip-text_one">JINTOS</div>
<div class="clip-text clip-text_fifteen clip-text--no-textzone">JINTOS</div>
<div class="clip-text clip-text_twelve clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_tree clip-text--no-textzone">JINTOS</div>
<div class="clip-text clip-text_two">JINTOS</div>
<div class="clip-text clip-text_fourteen clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_tree">JINTOS</div>
<div class="clip-text clip-text_eleven clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_four">JINTOS</div>
<div class="clip-text clip-text_five">JINTOS</div>
<div class="clip-text clip-text_six">JINTOS</div>
<div class="clip-text clip-text_seven">JINTOS</div>
<div class="clip-text clip-text_eight">JINTOS</div>

<div class="clip-text clip-text_nine">JINTOS</div>
<div class="clip-text clip-text_ten">JINTOS</div>
<div class="clip-text clip-text_thirteen clip-text--cover">JINTOS</div>
</div>

[/html]

0

Поделиться442022-05-27 13:57:34

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

https://www.deviantart.com/nathanmacker … -414198916

0

Поделиться452022-06-09 10:52:40

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

0

Поделиться462022-06-30 11:19:05

Автор: Око Саурона
Администратор
поле 1: упыкцпурукеуп
поле 22: ывпцкгу5шккач
поле 3: ывпеокнларпфукенртивукенрти мвукенгоруккенгнорр
Сообщений: 82
Уважение: [+0/-0]

[html]<style>
.punk {
width: 500px;
height: 420px;
border: 2px solid #333;
background-image: url(https://78.media.tumblr.com/3463faccbc2 … qhwjx8.png);
padding: 15px;
}

.hunk-top {
font-family:Roboto;
font-size:9px;
text-shadow: .5px 1px #333;
color:#e8be5c;
text-align:center;
letter-spacing:4px;
text-transform:uppercase;
margin-bottom:-5px;
}

.pidge-bottom {
font-family: 'Satisfy', cursive;
color:#7bae4f;
text-shadow: 2px 2px #333;
text-align:center;
float: left;
margin-top:-20px;
line-height:50%;
font-weight:bold;
letter-spacing:3px;
font-size:45px;
margin-left:60px;
}

.science {
width: 220px;
float: left;
margin-bottom:2px;
border: 2px solid #333;
}

.science img {
object-fit: cover;
object-position: center;
width: 220px;
height: 420px;
}

.spaaace {
height: 350px;
width: 230px;
background: #f2f2f2;
overflow: auto;
padding: 20px;
border: 2px solid #333;
font-family: 'Roboto', script;
font-size: 10px;
text-align: justify;
line-height: 150%;
margin-left:5px;
}

.spaaace b {
font-family: 'Roboto', script;
font-size: 11px;
text-shadow: .5px .5px #333;
color: #7bae4f;
}

.spaaace i {
font-family: 'Satisfy', cursive;
font-size: 13px;
text-shadow: .5px .5px #333;
color: #e8be5c;
}

.spaaace:first-letter {
font-size: 25px;
font-family: 'Satisfy', cursive;
margin-left: 10px;
color: #7bae4f;
padding-top: 5px;
}

.lions {
margin-top: 10px;
width: 250px;
background: #f2f2f2;
border: 2px solid #333;
padding: 10px;
font-family: roboto;
font-size: 8px;
text-align: center;
line-height: 30%;
margin-left: 229px;
margin-top: 4px;
}

.keefcred {
color: #ccc;
font-family: Roboto;
font-size: 8px;
letter-spacing: 1px;
padding-left: 155px;
text-align: center;
margin-top: 13px;
text-transform: uppercase;
}

.keefcred a {
font-family: Roboto;
font-size: 8px;
letter-spacing: 1px;
color: #626262;
text-decoration: none;
transition: all 0.3s ease-in-out;
}

.keefcred a:hover {color: #e8be5c;}

</style>

<center>
<div class="hunk-top">There's a skip in my heart when I think Of you thinking of me</div>
<div class="punk">
<div class="science"><img src="https://via.placeholder.com/220x420"></div>
<div class="spaaace">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<i>Where does it come from?</i> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="lions">Hippo && Nara + Feel free to use it loves</div>
<div class="pidge-bottom">Babe, I'm crazy over you.</div>
</div>
</center>

<div class="keefcred">
✾ <a href="http://pixel-perfect.boards.net/user/603">𝚔𝚎𝚒𝚝𝚑</a> <a href="http://wecode.jcink.net/index.php?showuser=5596"> 𝚔𝚘𝚐𝚊𝚗𝚎</a></div> [/html]

0

SM:Selena Wars

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

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

Объявление

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

тема

Сообщений 31 страница 46 из 46

Поделиться312022-05-17 12:28:48

Поделиться322022-05-17 14:01:10

Поделиться332022-05-17 14:32:04

Поделиться342022-05-18 12:04:46

Поделиться352022-05-19 09:39:34

Поделиться362022-05-19 09:55:45

Поделиться372022-05-20 08:38:28

Поделиться382022-05-20 08:42:46

Поделиться392022-05-25 21:01:34

Поделиться402022-05-26 05:57:38

Поделиться412022-05-27 12:14:58

Поделиться422022-05-27 12:53:22

Поделиться432022-05-27 12:56:54

Поделиться442022-05-27 13:57:34

Поделиться452022-06-09 10:52:40

Поделиться462022-06-30 11:19:05