98%</div> <div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<input type="radio" name="frame" id="frame4" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame frame_1">
<div class="frame-content">
<br><br><br><br><br><br><div class="telegodzinka">4:31PM</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="telefoniconki"><img src="https://i.imgur.com/IT5lfL4.png" width="45px" height="45px"><img src="https://i.imgur.com/fxEyosM.png" width="45px" height="45px"><img src="https://i.imgur.com/dzkhlqe.png" width="45px" height="45px"></div>
</div>
</div>
<div class="frame frame_2">
<div class="frame-content">
<div class="tel0"> <div class="tel1"> <img src="https://i.imgur.com/1wMbRSW.png" class="tel-ik"> <div class="cname">Zach</div></div> <div class="tel2"> <div class="tel-w">treść wiadomości</div> <div class="tel-w">treść wiadomości </div> <div class="tel-w">treść wiadomości </div> </div></div>
</div>
</div>
<div class="frame frame_3">
<div class="frame-content">
<div class="chat2orion"><br><br><br><b>ZACHARY PRESCOTT</b><br> +1 (360) 850 9394</div><br>
<br>ulubione
<div class="orionkontakt"><img src="https://cdn.discordapp.com/attachments/ ... 189e99.png"> ☆ Harper-Jack Dweller<br><a href="viewtopic.php?p=69832#69832">Jackie</a></div> <div class="orionkontakt"><img src="https://i.pinimg.com/originals/c6/ed/04 ... b7f6cf.jpg"> ☆ Jenna McCall<br><a href="viewtopic.php?p=123514#123514">Jenna</a></div> <div class="orionkontakt"><img src="https://i.imgur.com/O0bCGXp.jpg"> ☆ Phoenix Grace Farrell<br><a href="viewtopic.php?p=59635#59635">Phoenix</a></div> <br>kontakty <div class="orionkontakt"><img src="https://i.imgur.com/NeSya9e.png"> Becky Astor-Bass <br> <a href="viewtopic.php?p=108204#108204">Bex</a></div> <div class="orionkontakt"><img src="https://i.imgur.com/VSJRn9z.png"> Demeter Orlov <br> <a href="viewtopic.php?p=114450#114450">D.</a></div> <div class="orionkontakt"><img src="https://i.imgur.com/zUgQCuQ.png"> Ginevra Dweller-Sparks <br> Joachim Mama</div> <div class="orionkontakt"><img src="https://i.imgur.com/zUgQCuQ.png"> Kent Prescott <br> Ojciec</div> <div class="orionkontakt"><img src="https://i.imgur.com/6hmQcfP.png"> Samael De Vill <br> <a href="viewtopic.php?p=121257#121257">Sammy</a></div> <div class="orionkontakt"><img src="https://i.imgur.com/zUgQCuQ.png"> Serene Prescott <br> Mama</div> <div class="orionkontakt"><img src="https://64.media.tumblr.com/7a8d3d8aeaa ... 1be6b3.jpg"> Teresa Kingsley <br> <a href="viewtopic.php?p=98564#98564">Terry</a></div><br>
zablokowane
<div class="orionkontakt"><img src="https://i.imgur.com/zUgQCuQ.png"> Cyrus Brown <br> <a href="viewtopic.php?p=105515#105515">+1 (
425) 301-6442</a> </div>
</div>
</div>
<div class="frame frame_4">
<div class="frame-content">
<br>
<br>
<br>21.09<br>
<div class="rel6"> <input type="radio" id="rel6-1" name="rel6-gr"><label for="rel6-1"> <img src="https://cdn.discordapp.com/attachments/ ... nknown.png" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://cdn.discordapp.com/attachments/ ... nknown.png">
</div> </div> </div>
<div class="rel6"> <input type="radio" id="rel6-3" name="rel6-gr"><label for="rel6-3"> <img src="https://cdn.discordapp.com/attachments/ ... nknown.png" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://cdn.discordapp.com/attachments/ ... nknown.png">
</div> </div> </div>
<br>
<br>
<br>26.08<br>
<div class="rel6"> <input type="radio" id="rel6-4" name="rel6-gr"><label for="rel6-4"> <img src="https://cdn.discordapp.com/attachments/ ... nknown.png" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://cdn.discordapp.com/attachments/ ... nknown.png">
</div> </div> </div>
<br>
<br>
<br>04.06<br>
<div class="rel6"> <input type="radio" id="rel6-5" name="rel6-gr"><label for="rel6-5"> <img src="https://cdn.discordapp.com/attachments/ ... nknown.png" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://cdn.discordapp.com/attachments/ ... nknown.png">
</div> </div> </div> <div class="rel6"> <input type="radio" id="rel6-6" name="rel6-gr"><label for="rel6-6"> <img src="https://cdn.discordapp.com/attachments/ ... nknown.png" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://cdn.discordapp.com/attachments/ ... nknown.png">
</div> </div> </div> <div class="rel6"> <input type="radio" id="rel6-7" name="rel6-gr"><label for="rel6-7"> <img src="https://cdn.discordapp.com/attachments/ ... nknown.png" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://cdn.discordapp.com/attachments/ ... nknown.png">
</div> </div> </div>
<br>
<br>
<br>10.01<br>
<div class="rel6"> <input type="radio" id="rel6-8" name="rel6-gr"><label for="rel6-8"> <img src="https://i.pinimg.com/originals/c9/ba/75 ... 07f183.jpg" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://i.pinimg.com/originals/c9/ba/75 ... 07f183.jpg">
</div> </div> </div>
<div class="rel6"> <input type="radio" id="rel6-9" name="rel6-gr"><label for="rel6-9"> <img src="https://i.pinimg.com/564x/99/e1/2a/99e1 ... ef4169.jpg" width="200px" height="200px"> </label>
<div class="rel7">
<div class="rel8"><div class="rel6"> <input type="radio" id="rel6-2" name="rel6-gr"><label for="rel6-2"> ♥ </label>
</div>
<img src="https://i.pinimg.com/564x/99/e1/2a/99e1 ... ef4169.jpg">
</div> </div> </div> <br>
<br>
<br>
<br>
<br><img src="https://i.imgur.com/a96pBrs.gif" width="30px" height="30px"> <br>
<br>
</div>
</div>
</div>
</div>
</div>
<div id="bullets">
<label for="frame4"><img src="https://i.imgur.com/2WnRA5c.png"></label>
<label for="frame2"><img src="https://i.imgur.com/pwvW6SL.png"></label>
<label for="frame3"><img src="https://i.imgur.com/lYEGs4P.png"></label>
<label for="frame1"><img src="https://i.imgur.com/NyqlJY8.png"></label>
</div>
<div id="controls">
<label for="frame4"></label>
<label for="frame2"></label>
<label for="frame3"></label>
<label for="frame1"></label>
</div>
<div class="ig4"> </div><div class="telefonzach2"></div> </div> </div></table>
<style>
.frame-content br {
line-height: 1;
}
.frame-content .telefoniconki {
margin-left: 8px;
margin-top: -40px;
}
.telefoniconki img {
margin-right: 35;
}
.telegodzinka {
font-size: 32px;line-height: normal;box-shadow: 0 0 13px 0px #ffffff70;border-radius: 100px;font-family: montserrat;font-weight: 100;padding: 10px;text-shadow: 0 0 5px #00000073; width: 150px;
}
#frame {
margin: 0 auto;
width: 340px;
height: 400px;
margin-left: -10px;
max-width: 340px;
}
.frame-content {
width: 300px;
height: 500px;
color: var(--kolor1);
display: inline-table;
}
.frame.frame_4 {
height: 430px !important;
overflow-y: scroll;
}
.frame.frame_1 {
background-image:url('https://cdn.discordapp.com/attachments/ ... adc566.png');
background-size: cover;
}
.frame.frame_3 {
line-height: 1;
height: 430px !important;
overflow-y: scroll;
}
#frame input[type=radio] {
display: none;
}
#frame label {
cursor: pointer;
text-decoration: none;
}
div#bullets img {
width: 45px;
height: 45px;
}
#slides {
padding: 10px;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
border: 1px solid #4242420f;
background-color: var(--bg4);
}
#frame1:checked~#slides .inner {
margin-left: 0;
}
#frame2:checked~#slides .inner {
margin-left: -100%;
}
#frame3:checked~#slides .inner {
margin-left: -200%;
}
#frame4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: auto;
}
#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
height: 500px;
color: #FFF;
}
#controls {
z-index: 3;
position: relative;
bottom: 240px;
left: 65px;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 35px;
height: 450px;
bottom: -190px;
opacity: .75;
}
#controls label:hover {
opacity: 1;
}
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(1),
#frame4:checked~#controls label:nth-child(0) {
right: 60;
position: absolute;
display: block;
}
#frame1:checked~#controls label:nth-last-child(0),
#frame2:checked~#controls label:nth-last-child(1),
#frame3:checked~#controls label:nth-last-child(3),
#frame4:checked~#controls label:nth-last-child(2) {
float: left;
margin: 0 0 0 -70px;
display: block;
position: absolute;
}
#bullets {
text-align: center;
position: absolute;
margin-left: 14;
margin-top: -70px;
z-index: 4;
}
#bullets label {
display: inline-block;
width: 45px;
height: 45px;
border-radius: 100%;
background: #cccccc00;
margin: 0 15px;
}
#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3),
#frame4:checked~#bullets label:nth-child(4) {
background: #cccccc00;
}
@media screen and (max-width: 900px) {
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(4),
#frame4:checked~#controls label:nth-child(1),
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(4),
#frame4:checked~#controls label:nth-last-child(1) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
.telefonzach {
left: 25%;
position: relative;
height: 530px;
width: 320px;
border-radius: 40px;
padding: 50px 10px 60px;
background: var(--bg1);
border: 2px solid var(--bg5);
outline: solid 5px #0000000f;
box-shadow: 0 0 13px 0px #00000024;
}
.telefonzach1 {
position: relative;
top: 30px;
left: 295px;
z-index: 11;
width: 60px;
background: var(--bg4);
height: 8px;
border-radius: 20px;
}
.telefonzach2 {
position: absolute;
bottom: 13px;
margin-left: 142px;
width: 50px;
height: 50px;
border-radius: 30px;
border: 2px solid var(--bg4);
display: block;
}
.telefonzach3 {
position: absolute;
color: var(--kolor1);
padding-left: 10px;
width: 312px;
border-bottom: 1px solid var(--bg3);
font-size: 11;
height: 22px;
z-index: 10;
background-color: var(--bg4);
}
.telefoniconki {
}
.rel8 {
height: 340px;
}
.rel8 img {
max-width: 390px;
height: 350px;
object-fit: cover;
}
.rel6 label img {
height: 100px;
width: 100px;
object-fit: cover;
}
.rel7 {
height: 380px;
left: -50px;
top: 56px;
border: double #0000001f;
transition-duration: 0s;
}
.rel8 label {
border-radius: 100px !important;
height: 20px !important;
width: 20px !important;
margin-left: 440px;
margin-top: 9px;
background-image: url(https://cdn3.emoji.gg/emojis/9636_Cross.png);
background-size: cover;
position: absolute !important;
}
.rel6 label {
display: block;
position: relative;
z-index: 0;
width: 70px;
height: 70px;
line-height: 54px;
border-radius: 0;
border: 1px solid var(--post2);
margin-right: -30px;
left: -25px;
top: 10px;
background-color: var(--kolor1);
font-family: Montserrat, sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 8px;
font-weight: bold;
letter-spacing: 1px;
overflow: hidden;
}
.rel6 {
float: unset;
display: inline-block;
}
.orionkontakt {
height: 50px;
padding-top: 5px;
font-size: 0.8em;
display: block;
color: var(--kolor1);
padding-right: 10%;
margin-top: 10px;
position: relative;
text-align: right;
background-color: var(--bg5);
text-transform: uppercase;
}
.orionkontakt img {
width: 50px !important;
height: 50px;
top: 8px;
left: 10px;
position: absolute;
border: double 3px #0000001f !important;
border-radius: 100px;
margin-top: -8px;
object-fit: cover;
}
.chat2orion {
height: 150px;
border-bottom: 1px solid var(--bg7);
display: block;
vertical-align: middle;
position: relative;
text-align: center;
color: var(--kolor1);
background-color: var(--bg5);
box-shadow: rgb(0 0 0 / 3%) 2px 2px 10px;
}
.chat2orion img {
width: 80px !important;
height: 80px;
border: double 3px #0000001f !important;
border-radius: 100px;
margin-top: -8px;
object-fit: cover;
}
</style>