единый шаблон анкеты

Код:

<!--HTML--><link href="dark.css" type="text/css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Lobster|Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
#tab-content1::-webkit-scrollbar {width: 5px; background: fff}
#tab-content1::-webkit-scrollbar-thumb {background:fff}
#tab-content1::-webkit-scrollbar-corner {background:fff}

#tab-content2::-webkit-scrollbar {width: 5px; background: fff}
#tab-content2::-webkit-scrollbar-thumb {background:fff}
#tab-content2::-webkit-scrollbar-corner {background:fff}
.pages [type=radio] {
/*position: absolute;
 top: -9999px;
 left: -9999px;  */ 
 display: none;
}
.dcontainer {
width: 450px;
height: 550px;
font-family: 'Open Sans Condensed', sans-serif;
   background: url(http://se.uploads.ru/1zrja.jpg
);
   margin: 0 auto;
   padding-left: 20px;
   padding-top: 20px;
}
.dimage h2 {
display: none;
color:#cdcdcd;
text-shadow: 1px 1px 0 #3c3b3b;
}
.dimage:hover h2 {
display: inline;
} 
.pages {
   float: none;
   list-style-type: none;
   position: relative;
   padding: 0;
}
.pages p {
margin: 0;
padding: 0;
}
.pages li{
       float: left;
     }    
.pages label {
         display: block;
         /*padding: 10px 10px;*/
         border-radius: 2px;
        /* color: #b2b2b2;
         font-size: 20px;
         font-weight: normal;
color: #285747;
         font-family: 'Open Sans Condensed', sans-serif;
         background: #cdcdcd;
         cursor: pointer;*/
         width: 210px;
         padding: 5px 0 5px 0;
         margin: 0 0px 0 0;
         text-align: center;
 	font-size: 10px;
         background-color:#cdcdcd;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
     }  
.pages label:hover {
background-color:#cdcdcd;
}   
[id^=tab]:checked + label {
   top: 0;
   background-color:#cdcdcd;
}     
[id^=tab]:checked ~ [id^=tab-content] {
   display: block;
}
.tab-content{
width: 420px;
height: 500px;
border-radius: 2px;
color:#222;
overflow: auto;
background:#cdcdcd;
   z-index: 2;
   display: none;
   text-align: left;
   line-height: 120%;
   padding: 5px;
   position: absolute;
   top: 30px;
   left: 0;
text-align: justify;
   font-family: 'Arial';
   font-size: 12px;
   box-sizing: border-box;
   -webkit-animation-duration: 0.5s;
   -o-animation-duration: 0.5s;
   -moz-animation-duration: 0.5s;
   animation-duration: 0.5s;
}
</style>
<div class="dcontainer">
<div class="dimage"> 
<h2> First.Last</h2>
</div>
<ul class="pages">
       <li>
         <input type="radio" checked name="pages" id="tab1">
         <label for="tab1"><p>PROFILE</p></label></class>
         <div id="tab-content1" class="tab-content animated fadeIn">
<div style=' padding:0px 10px;  line-height:100%;  text-align:center; font-family: Poiret One; font-size:13px; color:#222; letter-spacing:1px;'><b>ПОЛНОЕ ИМЯ НА АНГЛ / НА РУСС </b> </div>
<div style=' padding:0px 10px;  line-height:100%;  text-align:center; font-family: Poiret One; font-size:11px; color:#222; letter-spacing:1px;'>
<b>Сейчас мне полный возраст. В N лет я попал в этот город, потому что я /что совершил?/. </b>  
<br>
<b>Раньше я работал(а) ...кем? а сейчас ...кем?<br></b>
</div><br>
<img src="http://s5.uploads.ru/IX6zA.jpg"><br>
         </div>
       </li>
       <li>
         <input type="radio" name="pages" id="tab2">
         <label for="tab2"><p>TELL ME</p></label>
         <div id="tab-content2" class="tab-content animated fadeIn">
Биография и характер в одном. Можете разделить их, можете писать сплошным текстом. Не забывайте, что переход на следующую строку осуществляется с помощью <*br> без звездочки. 
         </div>
       </li>
       <li>
         
         </div>

</ul>

</div>

Код:

[code**]<!**--HTML--><link href="dark.css" type="text/css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Lobster|Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
#tab-content1::-webkit-scrollbar {width: 5px; background: fff}
#tab-content1::-webkit-scrollbar-thumb {background:fff}
#tab-content1::-webkit-scrollbar-corner {background:fff}

#tab-content2::-webkit-scrollbar {width: 5px; background: fff}
#tab-content2::-webkit-scrollbar-thumb {background:fff}
#tab-content2::-webkit-scrollbar-corner {background:fff}
.pages [type=radio] {
/*position: absolute;
 top: -9999px;
 left: -9999px;  */ 
 display: none;
}
.dcontainer {
width: 450px;
height: 550px;
font-family: 'Open Sans Condensed', sans-serif;
   background: url(http://se.uploads.ru/1zrja.jpg
);

   margin: 0 auto;
   padding-left: 20px;
   padding-top: 20px;
}
.dimage h2 {
display: none;
color:#cdcdcd;
text-shadow: 1px 1px 0 #3c3b3b;
}
.dimage:hover h2 {
display: inline;
} 
.pages {
   float: none;
   list-style-type: none;
   position: relative;
   padding: 0;
}
.pages p {
margin: 0;
padding: 0;
}
.pages li{
       float: left;
     }    
.pages label {
         display: block;
         /*padding: 10px 10px;*/
         border-radius: 2px;
        /* color: #b2b2b2;
         font-size: 20px;
         font-weight: normal;
color: #285747;
         font-family: 'Open Sans Condensed', sans-serif;
         background: #cdcdcd;
         cursor: pointer;*/
         width: 210px;
         padding: 5px 0 5px 0;
         margin: 0 0px 0 0;
         text-align: center;
 	font-size: 10px;
         background-color:#cdcdcd;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
     }  
.pages label:hover {
background-color:#cdcdcd;
}   
[id^=tab]:checked + label {
   top: 0;
   background-color:#cdcdcd;
}     
[id^=tab]:checked ~ [id^=tab-content] {
   display: block;
}
.tab-content{
width: 420px;
height: 500px;
border-radius: 2px;
color:#222;
overflow: auto;
background:#cdcdcd;
   z-index: 2;
   display: none;
   text-align: left;
   line-height: 120%;
   padding: 5px;
   position: absolute;
   top: 30px;
   left: 0;
text-align: justify;
   font-family: 'Arial';
   font-size: 12px;
   box-sizing: border-box;
   -webkit-animation-duration: 0.5s;
   -o-animation-duration: 0.5s;
   -moz-animation-duration: 0.5s;
   animation-duration: 0.5s;
}
</style>
<div class="dcontainer">
<div class="dimage"> 
<h2> First.Last</h2>
</div>
<ul class="pages">
       <li>
         <input type="radio" checked name="pages" id="tab1">
         <label for="tab1"><p>PROFILE</p></label></class>
         <div id="tab-content1" class="tab-content animated fadeIn">
<div style=' padding:0px 10px;  line-height:100%;  text-align:center; font-family: Poiret One; font-size:13px; color:#222; letter-spacing:1px;'><b>ПОЛНОЕ ИМЯ НА АНГЛ / НА РУСС </b> </div>
<div style=' padding:0px 10px;  line-height:100%;  text-align:center; font-family: Poiret One; font-size:11px; color:#222; letter-spacing:1px;'>
<b>Сейчас мне полный возраст. В N лет  я попал в этот город, потому что я /что совершил?/. </b>  
<br>
<b>Раньше я работал(а) ...кем? а сейчас ...кем?<br></b>
</div><br>
<img src="http://s5.uploads.ru/IX6zA.jpg"><br>
         </div>
       </li>
       <li>
         <input type="radio" name="pages" id="tab2">
         <label for="tab2"><p>TELL ME</p></label>
         <div id="tab-content2" class="tab-content animated fadeIn">
Биография и характер в одном. Можете разделить их, можете писать сплошным текстом. Не забывайте, что переход на следующую строку осуществляется с помощью <*br> без звездочки. 
         </div>
       </li>
       <li>
         
         </div>

</ul>

</div>[**/code]

Light Out

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

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

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

единый шаблон анкеты

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

Поделиться12016-10-16 07:47:08