ONE-TWO-FREE

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

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

Вы здесь » ONE-TWO-FREE » три » russian boi - uedu s toboi

russian boi - uedu s toboi

Страница:   1 2 3

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

61

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Roboto" rel="stylesheet">
<style>

#foolforyou {
   width: 550px;
   height: auto;
}

.ffyinbox {
   height: 250px;
   background: #eee;
   width: 400px;
   box-shadow: -2px 2px 5px #ccc;
   margin: 15px;
   border: 0px solid white;
   outline: 5px solid #eee;
   overflow: hidden;
   margin-bottom: 5px;
}

.ffyicon {
   width: 180px;
   height: 180px;
   border: 10px solid #eee;
   box-shadow: 0 0 1pt 1pt #b3cad3;
   box-shadow: 0 0 0 1pt #fff;
   float: left;
   margin: 15px;
}

.ffyicon img {
   height: 180px;
   width: 180px;
}

.ffytraittext {
   height: 15px;
   width: 450px;
   padding: 10px;
   margin-left: 10px;
   padding-top: 15px;
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   color: #558b99;
   letter-spacing: 3px;
   text-transform: uppercase;
   text-align: left;
   border-bottom: 1px solid white;
   line-height: 80%;
}

.ffytraittext .ffytraittext2 {
   font-size: 10px;
   color: #aaa;
}

.ffytextbox {
   height: 135px;
   overflow: auto;
   width:180px;
   color: #aaa;
   font-family: 'Gothic A1', sans-serif;
   float: right;
   text-align: justify;
   margin-right: 15px;
   margin-top: 10px;
   font-size: 10px;
   line-height: 100%;
   padding-right: 5px;
} 

.ffytextbox::-webkit-scrollbar {
   width: 5px;
}

.ffytextbox::-webkit-scrollbar-track {
   display: none;
}

.ffytextbox::-webkit-scrollbar-thumb {
   background: #e1e1e1;
}

</style><center>
<div id="foolforyou">

<div class="ffyinbox"><div style="position:relative">
   <div class="ffyicon"><img src="https://forumupload.ru/uploads/0018/1f/c9/8/132099.png"></div>
   <div class="ffytraittext">Имя Фамилия<br>
     <span class="ffytraittext2">дата</span>
   </div>

<div class="ffytextbox">
   
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
     
   </p>
   
</div></div></div>

</div>
<a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:7px;"></a>
</center>
[/html]

0

62

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

111111111111

11111111111111

0

63

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<style>
#slider {
   margin: 0 auto;
   width: 550px;
   height: 520px;
   max-width: 100%;
   text-align: center;
}
#slider input[type=radio] {
   display: none;
}
#slider label {
   cursor:pointer;
   text-decoration: none;
}
#slides {
   padding: 0px;
   border: 1px solid #ccc;
   background: #fff;
   position: relative;
   z-index: 1;
}
#overflow {
   width:100%;
   overflow: hidden;
}
#slide1:checked ~ #slides .inner {
   margin-left: 0;
}
#slide2:checked ~ #slides .inner {
   margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
   margin-left: -200%;
}
#slide4: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: 420px;
}
#slides .slide {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff;
}
#slides .slide_1 {
   background: #ffffff;
}
#slides .slide_2 {
   background: #ffffff;
}
#slides .slide_3 {
   background: #ffffff;
}
#slides .slide_4 {
   background: #ffffff;
}
#controls {
   margin: -180px 0 0 0;
   width: 100%;
   height: 35px;
   z-index: 3;
   position: relative;
}
#controls label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   opacity: .4;
}
#controls label:hover {
   opacity: 1;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(1) {
   background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
   float:right;
   margin: 0 -50px 0 0;
   display: block;
}
#slide1:checked ~ #controls label:nth-last-child(2),
#slide2:checked ~ #controls label:nth-last-child(3),
#slide3:checked ~ #controls label:nth-last-child(4),
#slide4:checked ~ #controls label:nth-last-child(1) {
   background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
   float:left;
   margin: 0 0 0 -50px;
   display: block;
}
#bullets {
   margin: 150px 0 0;
   text-align: center;
}
#bullets label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #ccc;
   margin: 0 10px;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4) {
   background: #444;
}
@media screen and (max-width: 900px) {
   #slide1:checked ~ #controls label:nth-child(2),
   #slide2:checked ~ #controls label:nth-child(3),
   #slide3:checked ~ #controls label:nth-child(4),
   #slide4:checked ~ #controls label:nth-child(1),
   #slide1:checked ~ #controls label:nth-last-child(2),
   #slide2:checked ~ #controls label:nth-last-child(3),
   #slide3:checked ~ #controls label:nth-last-child(4),
   #slide4:checked ~ #controls label:nth-last-child(1) {
      margin: 0;
   }
   #slides {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}
</style>
<div id="slider">
   <input type="radio" name="slider" id="slide1" checked>
   <input type="radio" name="slider" id="slide2">
   <input type="radio" name="slider" id="slide3">
   <input type="radio" name="slider" id="slide4">
   <div id="slides">
      <div id="overflow">
         <div class="inner">
            <div class="slide slide_1">
               <div class="slide-content">
                  <h2>Slide 1</h2>
                  <p><center><img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli"></center></p>
               </div>
            </div>
            <div class="slide slide_2">
               <div class="slide-content">
                  <h2>Slide 2</h2>
                  <p>Content for Slide 2</p>
               </div>
            </div>
            <div class="slide slide_3">
               <div class="slide-content">
                  <h2>Slide 3</h2>
                  <p>Content for Slide 3</p>
               </div>
            </div>
            <div class="slide slide_4">
               <div class="slide-content">
                  <h2>Slide 4</h2>
                  <p>Content for Slide 4</p>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div id="controls">
      <label for="slide1"></label>
      <label for="slide2"></label>
      <label for="slide3"></label>
      <label for="slide4"></label>
   </div>
   <div id="bullets">
      <label for="slide1"></label>
      <label for="slide2"></label>
      <label for="slide3"></label>
      <label for="slide4"></label>
   </div>
</div>[/html]

0

64

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cousine:400,400i,700,700i" rel="stylesheet">

<div id="pins">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/6bccbdfdd9.js"></script>

<div class="pierrottinder">

<div class="pierrottindertitle"><i class="fa fa-angle-left" aria-hidden="true"></i> Park Sora <span style="float:right;font-size:14px;"><i class="fa fa-times fa-fw" aria-hidden="true" style="font-size:20px; color:rgb(255, 108, 76);"></i><i class="fa fa-heart fa-fw" aria-hidden="true" style="font-size:16px; color:rgb(110, 227, 90);"></i></span></div>
<a href="http://wecode.jcink.net/index.php?showuser=454">

<div class="profilepic">
</div></a>

<div class="pierrottindercontent">
<div class="pierrottindername"><b>Aleksandr,</b> 25</div>
<div class="pierrottinderdistance"><b>5 км от вас</b> был в сети 10 часов назад</div>

ENTP | Loves Cats |  Swipe right???? lmao idk what to put here tbh. my tinder game suxx lmao!! jk but like jk not jk this has a min height of 500px but will extend forever..... idk maybe i'll add a scroll
</div>

</div>

<style>

.pierrottinder {
   width:400px;
   min-height:600px;
   background:white;
   border:1px solid silver;
   margin:0 auto; 
}

.pierrottindertitle {
   padding:15px;
   font-family: 'Lora', serif;
   font-size:15px;
   color:silver;
}
.profilepic {
   width:400px;
   height:400px;
   background:url(https://forumupload.ru/uploads/0018/1f/c9/4/756415.png) center center;

}
.pierrottindercontent {
padding:15px;
   font-family: 'Open Sans', sans-serif;
font-size:15px;
color: #888;
}
.pierrottindername { font-size:18px; color:black; }
.pierrottinderdistance { color:silver; font-size:12px; margin-bottom:10px; }
.pierrottinderdistance b { margin-right:5px; }
</style>
<input type="radio" name="pinsts" id="pinst1" checked>
<label for="pinst1">Главная </label>
   <input type="radio" name="pinsts" id="pinst2">
<label for="pinst2">Предпочтения</label>
   <input type="radio" name="pinsts" id="pinst3">
<label for="pinst3">Фото</label>
<bg1></bg1>

<div id="pinscont1"> ваши  грязные секретики и не оч грязные, можно писать все от ориентации до ожиданий от игры (свидания, только поцелуи, интрижка и тд)

</div>

<div id="pinscont2">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Roboto" rel="stylesheet">
<style>

#foolforyou {
   width: auto;
   height: auto;
}

.ffyinbox {
   height: 200px;
   background: #eee;
   width: 330px;
   box-shadow: -2px 2px 5px #ccc;
   margin: 15px;
   border: 1px solid white;
   outline: 5px solid #eee;
   overflow: hidden;
   margin-bottom: 5px;
}

.ffyicon {
   width: 150px;
   height: 150px;
   border: 10px solid #eee;
   box-shadow: 0 0 1pt 1pt #b3cad3;
   box-shadow: 0 0 0 1pt #fff;
   float: left;
   margin: 15px;
}

.ffyicon img {
   height: 150px;
   width: 150px;
}

.ffytraittext {
   height: 15px;
   width: 300px;
   padding: 10px;
   margin-left: 10px;
   padding-top: 15px;
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   color: #558b99;
   letter-spacing: 3px;
   text-transform: uppercase;
   text-align: left;
   border-bottom: 1px solid white;
   line-height: 80%;
}

.ffytraittext .ffytraittext2 {
   font-size: 10px;
   color: #aaa;
}
  .ffytextbox {
   height: 135px;
   overflow: 100px;
   width:300px;
   color: #aaa;
   font-family: 'Gothic A1', sans-serif;
   float: right;
   text-align: justify;
   margin-right: 15px;
   margin-top: 10px;
   font-size: 10px;
   line-height: 100%;
   padding-right: 5px;
} 

</style><center>
<div id="foolforyou">

<div class="ffyinbox"><div style="position:relative">
   <div class="ffyicon"><img src="https://forumupload.ru/uploads/0018/1f/c9/8/132099.png"></div>
   <div class="ffytraittext">Имя Фамилия<br>
     <span class="ffytraittext2">дата</span>
      <div class="ffytextbox">
   
описаниhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
     
   
</div>
   </div>
</div></div>

</div>
<a href="http://wecode.jcink.net/index.php?showuser=4933" style="color:#ccc;font-size:7px;letter-spacing:7px;"></a>
</center>
</div>

<a href="http://wecode.jcink.net/index.php?showuser=4918"><div style="width: 420px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">liv's codes</div></a>
<style>#pins {height: 617px; width: 500px; border: 1px solid #192520; outline: 1px solid #C27489; outline-offset: 10px; margin: 20px auto; position: relative; background: #FF7158}
#pins bg {position: absolute; bottom: 0; right: 0; background-size: cover; height: 617px; width: 450px; filter: grayscale(100%)}
#pins sc1 {background: #C27489; position: absolute; bottom: 0; right: 0; height: 617px; width: 450px; mix-blend-mode: darken;}
#pins h1 {font-family: poppins; text-transform: uppercase; color: #192520; position: absolute; left: 50px; font-size: 20px; height: 0; line-height:65px; letter-spacing: 1px;}
#pinst1+label, #pinst2+label, #pinst3+label, #pinst4+label, #pinst5+label {font-family: poppins; position: absolute; text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 1px; color: #192520; transform: rotate(-90deg); height: 30px; line-height: 30px; width: 50px; cursor: crosshair; }
#pins input {display: none;}
#pinst1+label {top: 70px}
#pinst2+label {top: 215px}
#pinst3+label {top: 285px}
#pinst1:checked+label, #pinst2:checked+label, #pinst3:checked+label, #pinst4:checked+label, #pinst5:checked+label {color: #C27489; font-style: italic; font-weight: 900; }
#pins bg1 {background: rgba(0,0,0,0.5); height: 600px; width: 400px; opacity: 0; position: absolute; bottom: 0; right: 0; transition: 0.4s ease}
#pinst1:checked+label ~ bg1 {opacity: 0}
#pinscont1, #pinscont2, #pinscont3, #pinscont4 {height: 617px; width: 400px; background: #ffffff; box-sizing: border-box; position: absolute; bottom: 0px; right: 50px; border-width: 20px 15px 20px 20px; border-color: #ffffff; border-style: solid; padding-right: 5px; font-family: cousine; color: ; font-size: 10px; line-height: 1.6; text-align: justify; overflow: auto; transition: 0.5s ease; opacity: 0}
#pinst2:checked+label ~ #pinscont1 {opacity: 1; z-index: 5}
#pinst3:checked+label ~ #pinscont2 {opacity: 1; z-index: 5}

#pins b {font-family: poppins; color: #C27489; font-size: 14px}
#pinst1:checked+label:before, #pinst2:checked+label:before, #pinst3:checked+label:before, #pinst4:checked+label:before, #pinst5:checked+label:before {height: 10px; width: 1px; background: #C27489; content: ""; display: block; position: absolute; top: -10px}
#pinst1:checked+label:before {left: 20px}
#pinst2:checked+label:before, #pinst3:checked+label:before, #pinst5:checked+label:before {left: 25px}
#pinst4:checked+label:before {left: 30px}
#pins h2 {font-family: poppins; color: #C27489; text-transform: uppercase; font-weight: 700; margin: 0px 0px 10px 0px}
#pinscont1::-webkit-scrollbar, #pinscont2::-webkit-scrollbar, #pinscont3::-webkit-scrollbar, #pinscont4::-webkit-scrollbar {width: 5px}
#pinscont1::-webkit-scrollbar-thumb, #pinscont2::-webkit-scrollbar-thumb, #pinscont3::-webkit-scrollbar-thumb, #pinscont4::-webkit-scrollbar-thumb {background: #C27489; border: 2px solid #eee}
#pinscont1::-webkit-scrollbar-track, #pinscont2::-webkit-scrollbar-track, #pinscont3::-webkit-scrollbar-track, #pinscont4::-webkit-scrollbar-track {background: #eee!important; border: none!important}
</style>[/html]

0

65

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/6bccbdfdd9.js"></script>

<div class="pierrottinder">

<div class="pierrottindertitle"><i class="fa fa-angle-left" aria-hidden="true"></i> Park Sora <span style="float:right;font-size:14px;"><i class="fa fa-times fa-fw" aria-hidden="true" style="font-size:20px; color:rgb(255, 108, 76);"></i><i class="fa fa-heart fa-fw" aria-hidden="true" style="font-size:16px; color:rgb(110, 227, 90);"></i></span></div>
<a href="">

<div class="profilepic">
</div></a>
<div class="slides">
  <!-- (A1) SLIDE 1 -->
  <input type="radio" name="slides" id="slide1" checked>
  <figure>
    <img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png">
   
    <label for="slide2" class="next">►</label>
  </figure>

  <!-- (A2) SLIDE 2 -->
  <input type="radio" name="slides" id="slide2">
  <figure>
    <img src="https://forumupload.ru/uploads/0018/1f/c9/4/327776.png">
   
    <label for="slide1" class="last">◄</label>
    <label for="slide3" class="next">►</label>
  </figure>

  <!-- (A3) SLIDE 3 -->
  <input type="radio" name="slides" id="slide3">
  <figure>
    <img src="https://forumupload.ru/uploads/0018/1f/c9/4/674697.png">
    <label for="slide2" class="last">◄</label>
  </figure>
</div>
<div class="pierrottindercontent">
<div class="pierrottindername"><b>Aleksandr,</b> 25</div>
<div class="pierrottinderdistance"><b>5 км от вас</b>  Active 10 hours ago</div>

ENTP | Loves Cats |  Swipe right???? lmao idk what to put here tbh. my tinder game suxx lmao!! jk but like jk not jk this has a min height of 500px but will extend forever..... idk maybe i'll add a scroll
</div>

</div>

<style>

.pierrottinder {
   width:400px;
   min-height:600px;
   background:white;
   border:1px solid silver;
   margin:0 auto; 
}

.pierrottindertitle {
   padding:15px;
   font-family: 'Lora', serif;
   font-size:15px;
   color:silver;
}
.profilepic {
   width:0px;
   height:0px;
   background:
}
.pierrottindercontent {
padding:15px;
   font-family: 'Open Sans', sans-serif;
font-size:15px;
color: #888;
}
.pierrottindername { font-size:18px; color:black; }
.pierrottinderdistance { color:silver; font-size:12px; margin-bottom:10px; }
.pierrottinderdistance b { margin-right:5px; }
}
/* (PART A) SHOW SELECTED SLIDE ONLY */
.slides input[type="radio"] { display: none; }
.slides figure {
  visibility: hidden; opacity: 0;
  transition: all 0.5s;
}
.slides input[type="radio"]:checked + figure {
  visibility: visible; opacity: 1;
}
.slides {
  position: relative;
  max-width: 400px; height: 400px;
}
.slides img, .slides figcaption, .slides label {
  position: absolute;
}
.slides label, .slides figcaption {
  color: #fff; background: rgba(0, 0, 0, 0.7);
}

/* (PART C) SLIDE IMAGES */
.slides img {
  top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* (PART D) SLIDE CAPTION */
.slides figcaption {
  bottom: 0; left: 0;
  width: 100%; padding: 10px; text-align: center;
}

/* (PART E) LAST & NEXT BUTTONS */
.slides label {
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 1.5em; cursor: pointer;
}
.slides label.last { left: 5px; }
.slides label.next { right: 5px; }
</style>[/html]

0

66

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/6bccbdfdd9.js"></script>

<div class="pierrottinder">

<div class="pierrottindertitle"><i class="fa fa-angle-left" aria-hidden="true"></i> Park Sora <span style="float:right;font-size:14px;"><i class="fa fa-times fa-fw" aria-hidden="true" style="font-size:20px; color:rgb(255, 108, 76);"></i><i class="fa fa-heart fa-fw" aria-hidden="true" style="font-size:16px; color:rgb(110, 227, 90);"></i></span></div>
<a href="">

<div class="profilepic">
</div></a>
<div id="slider">
   <input type="radio" name="slider" class="slide1" checked>
   <input type="radio" name="slider" class="slide2">
   <input type="radio" name="slider" class="slide3">
   <input type="radio" name="slider" class="slide4">
   <div id="slides">
      <div id="overflow">
         <div class="inner">
            <div class="slide slide_1">
               <div class="slide-content">
                  <h2>Slide 1</h2>
                  <p><center><img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli"></center></p>
               </div>
            </div>
            <div class="slide slide_2">
               <div class="slide-content">
                  <h2>Slide 2</h2>
                  <p>Content for Slide 2</p>
               </div>
            </div>
            <div class="slide slide_3">
               <div class="slide-content">
                  <h2>Slide 3</h2>
                  <p>Content for Slide 3</p>
               </div>
            </div>
            <div class="slide slide_4">
               <div class="slide-content">
                  <h2>Slide 4</h2>
                  <p>Content for Slide 4</p>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div id="controls">
      <label for="slide1"></label>
      <label for="slide2"></label>
      <label for="slide3"></label>
      <label for="slide4"></label>
   </div>
   <div id="bullets">
      <label for="slide1"></label>
      <label for="slide2"></label>
      <label for="slide3"></label>
      <label for="slide4"></label>
   </div>
</div>
<div class="pierrottindercontent">
<div class="pierrottindername"><b>Aleksandr,</b> 25</div>
<div class="pierrottinderdistance"><b>5 км от вас</b>  Active 10 hours ago</div>

ENTP | Loves Cats |  Swipe right???? lmao idk what to put here tbh. my tinder game suxx lmao!! jk but like jk not jk this has a min height of 500px but will extend forever..... idk maybe i'll add a scroll
</div>

</div>

<style>

.pierrottinder {
   width:400px;
   min-height:600px;
   background:white;
   border:1px solid silver;
   margin:0 auto; 
}

.pierrottindertitle {
   padding:15px;
   font-family: 'Lora', serif;
   font-size:15px;
   color:silver;
}
.profilepic {
   width:0px;
   height:0px;
   background:center center;
}
.pierrottindercontent {
padding:15px;
   font-family: 'Open Sans', sans-serif;
font-size:15px;
color: #888;
}
.pierrottindername { font-size:18px; color:black; }
.pierrottinderdistance { color:silver; font-size:12px; margin-bottom:10px; }
.pierrottinderdistance b { margin-right:5px; }
#slider {
   margin: 0 auto;
   width: 550px;
   height: 520px;
   max-width: 100%;
   text-align: center;
}
#slider input[type=radio] {
   display: none;
}
#slider label {
   cursor:pointer;
   text-decoration: none;
}
#slides {
   padding: 0px;
   border: 1px solid #ccc;
   background: #fff;
   position: relative;
   z-index: 1;
}
#overflow {
   width:100%;
   overflow: hidden;
}
#slide1:checked ~ #slides .inner {
   margin-left: 0;
}
#slide2:checked ~ #slides .inner {
   margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
   margin-left: -200%;
}
#slide4: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: 420px;
}
#slides .slide {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #fff;
}
#slides .slide_1 {
   background: #ffffff;
}
#slides .slide_2 {
   background: #ffffff;
}
#slides .slide_3 {
   background: #ffffff;
}
#slides .slide_4 {
   background: #ffffff;
}
#controls {
   margin: -180px 0 0 0;
   width: 100%;
   height: 35px;
   z-index: 3;
   position: relative;
}
#controls label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   opacity: .4;
}
#controls label:hover {
   opacity: 1;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(1) {
   background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
   float:right;
   margin: 0 -50px 0 0;
   display: block;
}
#slide1:checked ~ #controls label:nth-last-child(2),
#slide2:checked ~ #controls label:nth-last-child(3),
#slide3:checked ~ #controls label:nth-last-child(4),
#slide4:checked ~ #controls label:nth-last-child(1) {
   background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
   float:left;
   margin: 0 0 0 -50px;
   display: block;
}
#bullets {
   margin: 150px 0 0;
   text-align: center;
}
#bullets label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #ccc;
   margin: 0 10px;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4) {
   background: #444;
}
@media screen and (max-width: 900px) {
   #slide1:checked ~ #controls label:nth-child(2),
   #slide2:checked ~ #controls label:nth-child(3),
   #slide3:checked ~ #controls label:nth-child(4),
   #slide4:checked ~ #controls label:nth-child(1),
   #slide1:checked ~ #controls label:nth-last-child(2),
   #slide2:checked ~ #controls label:nth-last-child(3),
   #slide3:checked ~ #controls label:nth-last-child(4),
   #slide4:checked ~ #controls label:nth-last-child(1) {
      margin: 0;
   }
   #slides {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}</style>[/html]

0

67

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<div class="slides">
  <!-- (A1) SLIDE 1 -->
  <input type="radio" name="slides" id="slide1" checked>
  <figure>
    <img src="https://forumupload.ru/uploads/0018/1f/c9/4/346639.jpg">
   
    <label for="slide2" class="next"></label>
  </figure>

  <!-- (A2) SLIDE 2 -->
  <input type="radio" name="slides" id="slide2">
  <figure>
    <img src="https://forumupload.ru/uploads/0018/1f/c9/4/364777.webp
">
   
    <label for="slide1" class="last"></label>
    <label for="slide3" class="next"></label>
  </figure>

  <!-- (A3) SLIDE 3 -->
  <input type="radio" name="slides" id="slide3">
  <figure>
    <img src="slide-3.webp">
    <figcaption>Canned Coffee</figcaption>
    <label for="slide2" class="last"></label>
  </figure>
</div>
<style>
/* (PART A) SHOW SELECTED SLIDE ONLY */
.slides input[type="radio"] { display: none; }
.slides figure {
  visibility: hidden; opacity: 0;
  transition: all 0.5s;
}
.slides input[type="radio"]:checked + figure {
  visibility: visible; opacity: 1;
}
.slides {
  position: relative;
  max-width: 400px; height: 400px;
}
.slides img, .slides figcaption, .slides label {
  position: absolute;
}
.slides label, .slides figcaption {
  color: #fff; background: rgba(0, 0, 0, 0.7);
}

/* (PART C) SLIDE IMAGES */
.slides img {
  top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* (PART D) SLIDE CAPTION */
.slides figcaption {
  bottom: 0; left: 0;
  width: 100%; padding: 10px; text-align: center;
}

/* (PART E) LAST & NEXT BUTTONS */
.slides label {
  top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 1.5em; cursor: pointer;
}
.slides label.last { left: 5px; }
.slides label.next { right: 5px; }
</style>[/html]

0

68

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/6bccbdfdd9.js"></script>

<style>
.pierrottinder {
width: 400px;
min-height: 600px;
background: white;
border: 1px solid silver;
margin: 0 auto;
}

.pierrottindertitle {
padding: 15px;
font-family: 'Lora', serif;
font-size: 15px;
color: silver;
}

.profilepic {
width: 400px;
height: 400px;
background: url(https://forumupload.ru/uploads/0018/1f/c9/4/756415.png) center center;
}

.pierrottindercontent {
padding: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #888;
}

.pierrottindername {
font-size: 18px;
color: black;
}

.pierrottinderdistance {
color: silver;
font-size: 12px;
margin-bottom: 10px;
}

.pierrottinderdistance b {
margin-right: 5px;
}

#slider {
margin: 0 auto;
width: 550px;
max-width: 100%;
text-align: center;
}

#slider input[type=radio] {
display: none;
}

#slider label {
cursor: pointer;
text-decoration: none;
}

#slides {
padding: 0px;
background: #fff;
position: relative;
z-index: 1;
}

#overflow {
width: 100%;
overflow: hidden;
}

#slide1:checked~#slides .inner {
margin-left: 0;
}

#slide2:checked~#slides .inner {
margin-left: -100%;
}

#slide3:checked~#slides .inner {
margin-left: -200%;
}

#slide4: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;
}

#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}

#slides .slide_1 {
background: #ffffff;
}

#slides .slide_2 {
background: #ffffff;
}

#slides .slide_3 {
background: #ffffff;
}

#slides .slide_4 {
background: #ffffff;
}

#controls {
margin: -180px 0 0 0;
width: 100%;
height: 35px;
z-index: 3;
position: relative;
}

#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}

#controls label:hover {
opacity: 1;
}

#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}

#slide1:checked~#controls label:nth-last-child(2),
#slide2:checked~#controls label:nth-last-child(3),
#slide3:checked~#controls label:nth-last-child(4),
#slide4:checked~#controls label:nth-last-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}

#bullets {
margin: 150px 0 0;
text-align: center;
}

#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}

#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}

</style>

<div class="pierrottinder">
<div
class="pierrottindertitle">
<i class="fa fa-angle-left" aria-hidden="true"></i>
Park Sora
<span style="float:right;font-size:14px;">
<i class="fa fa-times fa-fw" aria-hidden="true" style="font-size:20px; color:rgb(255, 108, 76);"></i>
<i class="fa fa-heart fa-fw" aria-hidden="true" style="font-size:16px; color:rgb(110, 227, 90);"></i>
</span>
</div>
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
</div>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
</div>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
</div>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
<div class="pierrottindercontent">
<div class="pierrottindername"><b>Aleksandr,</b> 25</div>
<div class="pierrottinderdistance"><b>5 км от вас</b> Active 10 hours ago</div>
ENTP | Loves Cats | Swipe right???? lmao idk what to put here tbh. my tinder game suxx lmao!! jk but like jk not jk this has a min height of 500px but will extend forever..... idk maybe i'll add a scroll
</div>
</div>[/html]

0

69

  • Автор: highgrounder
  • Администратор
  • highgrounder
  • Зарегистрирован: 2020-01-24
  • Приглашений: 0
  • Сообщений: 300
  • Уважение: [+30/-0]
  • Позитив: [+22/-0]
  • Провел на форуме:
    4 дня 4 часа
  • Последний визит:
    Сегодня 00:50:11

[html]<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://use.fontawesome.com/6bccbdfdd9.js"></script>

<style>
.pierrottinder {
width: 400px;
min-height: 600px;
background: white;
border: 1px solid silver;
margin: 0 auto;
}

.pierrottindertitle {
padding: 15px;
font-family: 'Lora', serif;
font-size: 15px;
color: silver;
}

.profilepic {
width: 400px;
height: 400px;
background: url(https://forumupload.ru/uploads/0018/1f/c9/4/756415.png) center center;
}

.pierrottindercontent {
padding: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #888;
}

.pierrottindername {
font-size: 18px;
color: black;
}

.pierrottinderdistance {
color: silver;
font-size: 12px;
margin-bottom: 10px;
}

.pierrottinderdistance b {
margin-right: 5px;
}

#slider {
margin: 0 auto;
width: 550px;
max-width: 100%;
text-align: center;
}

#slider input[type=radio] {
display: none;
}

#slider label {
cursor: pointer;
text-decoration: none;
}

#slides {
padding: 0px;
background: #fff;
position: relative;
z-index: 1;
}

#overflow {
width: 100%;
overflow: hidden;
}

#slide1:checked~#slides .inner {
margin-left: 0;
}

#slide2:checked~#slides .inner {
margin-left: -100%;
}

#slide3:checked~#slides .inner {
margin-left: -200%;
}

#slide4: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;
}

#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}

#slides .slide_1 {
background: #ffffff;
}

#slides .slide_2 {
background: #ffffff;
}

#slides .slide_3 {
background: #ffffff;
}

#slides .slide_4 {
background: #ffffff;
}

#controls {
margin: -180px 0 0 0;
width: 100%;
height: 35px;
z-index: 3;
position: relative;
}

#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}

#controls label:hover {
opacity: 1;
}

#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}

#slide1:checked~#controls label:nth-last-child(2),
#slide2:checked~#controls label:nth-last-child(3),
#slide3:checked~#controls label:nth-last-child(4),
#slide4:checked~#controls label:nth-last-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}

#bullets {
margin: 150px 0 0;
text-align: center;
}

#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}

#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}
</style>

<div id="pins">
<div class="pierrottinder">
<div class="pierrottindertitle">
<i class="fa fa-angle-left" aria-hidden="true"></i>
Park Sora
<span style="float:right;font-size:14px;">
<i class="fa fa-times fa-fw" aria-hidden="true" style="font-size:20px; color:rgb(255, 108, 76);"></i>
<i class="fa fa-heart fa-fw" aria-hidden="true" style="font-size:16px; color:rgb(110, 227, 90);"></i>
</span>
</div>
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
</div>
<div class="slide slide_2">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
>
</div>
<div class="slide slide_3">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
</div>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<div>
<center>
<img src="https://forumupload.ru/uploads/0018/1f/c9/4/756415.png" alt="Italian Trulli">
</center>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
<div class="pierrottindercontent">
<div class="pierrottindername"><b>Aleksandr,</b> 25</div>
<div class="pierrottinderdistance"><b>5 км от вас</b> Active 10 hours ago</div>
ENTP | Loves Cats | Swipe right???? lmao idk what to put here tbh. my tinder game suxx lmao!! jk but like jk not jk this has a min height of 500px but will extend forever..... idk maybe i'll add a scroll
</div>
</div>

<input type="radio" name="pinsts" id="pinst1" checked>
<label for="pinst1">Главная </label>
   <input type="radio" name="pinsts" id="pinst2">
<label for="pinst2">Предпочтения</label>
<bg1></bg1>

<div id="pinscont1"> ваши  грязные секретики и не оч грязные, можно писать все от ориентации до ожиданий от игры (свидания, только поцелуи, интрижка и тд)

</div>

<div id="pinscont2">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1|Roboto" rel="stylesheet">

<style>#pins {height: 617px; width: 500px; border: 1px solid #192520; outline: 1px solid #C27489; outline-offset: 10px; margin: 20px auto; position: relative; background: #FF7158}
#pins bg {position: absolute; bottom: 0; right: 0; background-size: cover; height: 617px; width: 450px; filter: grayscale(100%)}
#pins sc1 {background: #C27489; position: absolute; bottom: 0; right: 0; height: 617px; width: 450px; mix-blend-mode: darken;}
#pins h1 {font-family: poppins; text-transform: uppercase; color: #192520; position: absolute; left: 50px; font-size: 20px; height: 0; line-height:65px; letter-spacing: 1px;}
#pinst1+label, #pinst2+label, #pinst3+label, #pinst4+label, #pinst5+label {font-family: poppins; position: absolute; text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 1px; color: #192520; transform: rotate(-90deg); height: 30px; line-height: 30px; width: 50px; cursor: crosshair; }
#pins input {display: none;}
#pinst1+label {top: 70px}
#pinst2+label {top: 215px}
#pinst3+label {top: 285px}
#pinst1:checked+label, #pinst2:checked+label, #pinst3:checked+label, #pinst4:checked+label, #pinst5:checked+label {color: #C27489; font-style: italic; font-weight: 900; }
#pins bg1 {background: rgba(0,0,0,0.5); height: 600px; width: 400px; opacity: 0; position: absolute; bottom: 0; right: 0; transition: 0.4s ease}
#pinst1:checked+label ~ bg1 {opacity: 0}
#pinscont1, #pinscont2, #pinscont3, #pinscont4 {height: 617px; width: 400px; background: #ffffff; box-sizing: border-box; position: absolute; bottom: 0px; right: 50px; border-width: 20px 15px 20px 20px; border-color: #ffffff; border-style: solid; padding-right: 5px; font-family: cousine; color: ; font-size: 10px; line-height: 1.6; text-align: justify; overflow: auto; transition: 0.5s ease; opacity: 0}
#pinst2:checked+label ~ #pinscont1 {opacity: 1; z-index: 5}
#pinst3:checked+label ~ #pinscont2 {opacity: 1; z-index: 5}

#pins b {font-family: poppins; color: #C27489; font-size: 14px}
#pinst1:checked+label:before, #pinst2:checked+label:before, #pinst3:checked+label:before, #pinst4:checked+label:before, #pinst5:checked+label:before {height: 10px; width: 1px; background: #C27489; content: ""; display: block; position: absolute; top: -10px}
#pinst1:checked+label:before {left: 20px}
#pinst2:checked+label:before, #pinst3:checked+label:before, #pinst5:checked+label:before {left: 25px}
#pinst4:checked+label:before {left: 30px}
#pins h2 {font-family: poppins; color: #C27489; text-transform: uppercase; font-weight: 700; margin: 0px 0px 10px 0px}
#pinscont1::-webkit-scrollbar, #pinscont2::-webkit-scrollbar, #pinscont3::-webkit-scrollbar, #pinscont4::-webkit-scrollbar {width: 5px}
#pinscont1::-webkit-scrollbar-thumb, #pinscont2::-webkit-scrollbar-thumb, #pinscont3::-webkit-scrollbar-thumb, #pinscont4::-webkit-scrollbar-thumb {background: #C27489; border: 2px solid #eee}
#pinscont1::-webkit-scrollbar-track, #pinscont2::-webkit-scrollbar-track, #pinscont3::-webkit-scrollbar-track, #pinscont4::-webkit-scrollbar-track {background: #eee!important; border: none!important}
</style>[/html]

0

Страница:   1 2 3

Вы здесь » ONE-TWO-FREE » три » russian boi - uedu s toboi

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