драмы

Код:

<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Yeseva+One" rel="stylesheet">
<style type="text/css">
body {
 background-color: #af997b;
}
#somewhere {
 width: 430px;
 padding: 25px;
 margin: auto;
}
#somewhere .w-head {
 padding: 30px;
 background-color: #957955;
 color: #654d2e;
 font-family: montserrat;
 text-align: right;
 font-size: 10px;
 line-height: 140%;
 height: 5px;
}
#somewhere .w-head h1 {
 text-transform: uppercase;
 margin-top: -20px;
 padding-top: 20px;
 padding-right: 17px;
 letter-spacing: 2px;
 color: #654d2e;
}
#somewhere .w-head h2 {
 font-family: trebuchet ms;
 font-size: 9px;
 text-transform: lowercase;
 letter-spacing: 1px;
 text-align: right;
 border-right: 1px solid #fff;
 padding-right: 5px;
 margin-right: 21px;
 margin-top: -5px;
 color: #efefef;
 line-height: 120%;
 font-style: italic;
 padding-left: 40px;
}
#somewhere .w-bod {
 padding: 40px; 
 background-color: #efefef;
 height: 390px;
}
#somewhere .w-bod .im1 a, #somewhere .w-bod .im2 a, #somewhere .w-bod .im3 a, #somewhere .w-bod .im4 a {
 color: #31220d;
 text-decoration: none;
}
#somewhere .w-bod .im1 {
 width: 160px;
 height: 140px;
 padding-top: 50px;
 float: left;
}
#somewhere .w-bod .im2 {
 padding-top: 50px;
 background-image:url();
 float: left;
 margin-left: 10px;
}

#somewhere .w-bod .im3 {
 padding-top: 50px;
 margin-top: 10px;
 float: left;
}
#somewhere .w-bod .im4 {
 padding-top: 50px;
 float: left;
 margin-left: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
}

.drama { margin-top: -60px; } 

.merc_modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity:0; -webkit-transition: opacity .5s ease-in; -moz-transition: opacity .5s ease-in; transition: opacity .5s ease-in; pointer-events: none; }

.merc_modal:target { opacity:1; pointer-events: auto; }

.merc_modal > .merc_pop { width: 300px; position: relative; margin: 10% auto; padding: 10px; }

.merc_pop a { color: #fff; }

.merc_pop2 { padding: 40px; color: #fff; background-color: #957955; letter-spacing: 5px; text-align: right; font-weight: bold;
font-family: montserrat; text-transform: uppercase; font-size: 8px; margin-top: 20px; }

.merc_pop3 { padding: 10px; background-color: #dcdcdc; }

.merc_pop4 { padding: 20px; background-color: #fff; text-align: justify; font-family: trebuchet ms, calibri; font-size: 10px; line-height: 110%;  }

.merc_pop8 { padding: 20px; background-color: #fff; text-align: justify; font-family: trebuchet ms, calibri; font-size: 10px; line-height: 110%;  }

.merc_pop4 h1 {
 font-family: montserrat;
 color: #957955;
 font-size: 9px;
 font-weight: bold;
 text-align: left;
 padding: 10px;
 text-transform: uppercase;
}

.merc_pop4 .cdesc {
 padding: 10px;
 line-height: 135%;
 padding-top: 0px;
}

.merc_close { color: #FFF; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-family: montserrat; font-weight: bold; text-transform: lowercase; font-size: 15px; text-shadow: 1px 1px #957955; }

.merc_close a { color: #fff; }

.merc_cred { text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase; margin-top: 00px; margin-bottom: 25px; }

</style>


<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,900italic,400italic,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<div id="somewhere">
 <div class="w-head">
   <h1>KOREAN DRAMA</h1>
 </div>
 <div class="w-bod">
   <div class="im1"><a href="#mercPop1"><img src="http://funkyimg.com/i/2oqXE.png" style="margin-top: -50px;"></a></div>
   <div class="im2"><a href="#mercPop2"><img src="http://funkyimg.com/i/2or2r.png" style="margin-top: -50px;"></a></div>
   <div class="im3"><a href="#mercPop3"><img src="http://funkyimg.com/i/2or4q.png" style="margin-top: -50px;"></a></div>
   <div class="im4"><a href="#mercPop4"><img src="http://funkyimg.com/i/2or1z.png" style="margin-top: -50px;"></a></div>
 </div>
</div>


<div id="mercPop1" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

<div class="merc_pop2">Goblin</div>
<div class="merc_pop3">
<div class="merc_pop4">

<br>text
<br>text 

<div class="cdesc">Description</div>

</div>
</div>


 </div>
</div>

<div id="mercPop2" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

   <div class="merc_pop2">First Last</div>
   <div class="merc_pop3">
     <div class="merc_pop4">

       <h1>face claim: first last</h1>

       <div class="cdesc">Description</div>

     </div>
   </div>


 </div>
</div>

<div id="mercPop3" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

   <div class="merc_pop2">First Last</div>
   <div class="merc_pop3">
     <div class="merc_pop4">

       <h1>face claim: first last</h1>

       <div class="cdesc">Description</div>

     </div>
   </div>


 </div>
</div>


<div id="mercPop4" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

   <div class="merc_pop2">First Last</div>
   <div class="merc_pop3">
     <div class="merc_pop4">

       <h1>face claim: first last</h1>

       <div class="cdesc">Description</div>

     </div>
   </div>


 </div>
</div>

<div id="somewhere">
 <div class="drama"><div class="w-bod">
<div class="im1"><a href="#mercPop5"><img src="http://funkyimg.com/i/2or1B.png" style="margin-top: -50px;"></a></div>
   <div class="im2"><a href="#mercPop6"><img src="http://funkyimg.com/i/2or1E.png" style="margin-top: -50px;"></a></div>
   <div class="im3"><a href="#mercPop7"><img src="http://funkyimg.com/i/2or1F.png" style="margin-top: -50px;"></a></div>
   <div class="im4"><a href="#mercPop8"><img src="http://funkyimg.com/i/2or1A.png" style="margin-top: -50px;"></a></div>
 </div>
</div>



<div id="mercPop5" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

<div class="merc_pop2">The Girl Who Sees Smells</div>
<div class="merc_pop3">
<div class="merc_pop4">
<div class="merc_pop5">

<br>text
<br>text 

<div class="cdesc">Description</div>

</div>
</div>


 </div>
</div>

<div id="mercPop6" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

   <div class="merc_pop2">First Last</div>
   <div class="merc_pop3">
     <div class="merc_pop4">
  <div class="merc_pop5">
<div class="merc_pop6">

       <h1>face claim: first last</h1>

       <div class="cdesc">Description</div>

     </div>
   </div>


 </div>
</div>

<div id="mercPop7" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

   <div class="merc_pop2">First Last</div>
   <div class="merc_pop3">
     <div class="merc_pop4">
  <div class="merc_pop5">
<div class="merc_pop6">
  <div class="merc_pop7">

       <h1>face claim: first last</h1>

       <div class="cdesc">Description</div>

     </div>
   </div>


 </div>
</div>


<div id="mercPop8" class="merc_modal">
 <div class="merc_pop"> <a href="#close" title="Close" class="merc_close">X</a>

   <div class="merc_pop2">Потомки</div>
   <div class="merc_pop3">
     <div class="merc_pop4">
  <div class="merc_pop5">
<div class="merc_pop6">
  <div class="merc_pop7">
  <div class="merc_pop8">

       <h1>face claim: first last</h1>

       <div class="cdesc">Description</div>

     </div>
   </div>

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

Код:

<!--HTML-->

<div class='foursquare'>

 <span class='zeddit'>
</span>
 
   <div class='squarebox'>
       <img src='http://funkyimg.com/i/2or4q.png'>

       <div class='plotbox'>
           <h3>Firstname Lastname</h3><hr>

           <div class='scroll'>
               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>
           </div>

           <h4 class='hleft'>Age / playby</h4>
       </div>


  </div><div class='squarebox'>
       <img src='url to image'>

       <div class='plotbox'>
           <h3>Firstname Lastname</h3><hr>

           <div class='scroll'>
               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>
           </div>

           <h4>Age / playby</h4>
       </div>



  </div><div class='squarebox'>
       <img src='url to image'>

       <div class='plotbox'>
           <h3>Firstname Lastname</h3><hr>

           <div class='scroll'>
               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>
           </div>

           <h4 class='hleft'>Age / playby</h4>
       </div>



  </div><div class='squarebox'>
       <img src='url to image'>

       <div class='plotbox'>
           <h3>Firstname Lastname</h3><hr>

           <div class='scroll'>
               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>

               <p>Stuff, with paragraph tags.</p>
           </div>

           <h4>Age / playby</h4>
       </div>
   </div>

</div>

<link href='http://fonts.googleapis.com/css?family=Lato:300|Roboto' rel='stylesheet' type='text/css'><style>

.foursquare { width: 500px; height: 500px; margin: 0 auto 20px; padding: 10px; color: #555; border: 3px double #CCC; background-color: #FFF; position: relative; line-height: 1.3em; } 

.squarebox { width: 160px; display: inline-block; height: 190px; background-color: #ccc; position: relative; overflow: hidden; } 

.squarebox:nth-of-type(even) { margin-right: 10px; } 
.squarebox:nth-of-type(2), .squarebox:nth-of-type(3) { margin-bottom: 10px; } 
.squarebox > img:nth-of-type(1) { position: absolute; height: 160px; width: 190px; }

.plotbox { position: absolute; top: 5px; left: 5px; padding: 10px; height: 160px; width: 190px; background-color: #CCC; z-index: 3; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } 

.scroll { height: 190px; overflow-x: hidden; overflow-y: scroll; display: block; padding: 0 10px 10px; text-align: justify; font-family: Roboto; font-size: 11px; } 

.squarebox:nth-child(2) > .plotbox { border-bottom-right-radius: 25px; } 
.squarebox:nth-child(3) > .plotbox { border-bottom-left-radius: 25px; } 
.squarebox:nth-child(4) > .plotbox { border-top-right-radius: 25px; }
.squarebox:nth-child(5) > .plotbox { border-top-left-radius: 25px } 
.squarebox:nth-child(2) > .plotbox, .squarebox:nth-child(4) > .plotbox { -moz-transform: translateX(-250px); -webkit-transform: translateX(-250px); -o-transform: translateX(-250px); -ms-transform: translateX(-250px); transform: translateX(-250px); } .squarebox:nth-child(3) > .plotbox, .squarebox:nth-child(5) > .plotbox { -moz-transform: translateX(250px); -webkit-transform: translateX(190px); -o-transform: translateX(190px); -ms-transform: translateX(190px); transform: translateX(190px);  } 

.squarebox:hover .plotbox { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); z-index: 5; } 
.round { height: 190px; width: 150px; background-color: #FFF; padding: 9px; display: table; border-radius: 100%; position: absolute; top: 50%; left: 50%; margin: -84px 0 0 -84px; text-align: center; z-index: 4; } 

.foursquare h1, .foursquare h2, .foursquare h3, .foursquare h4 { font-weight: normal; margin: 0; padding: 0; font-family: Lato; } 
.foursquare h1 { color: #888;  padding-top: 13px; font-size: 24px; padding-bottom: 1px; } 
.foursquare h2 { text-transform: lowercase; font-size: 14px; padding-bottom: 1px; } 
.foursquare h3 { font-size: 15px; text-align: center; padding-bottom: 3px; } 
.foursquare h4 { font-size: 11px; text-align: right; padding-top: 3px; } h4.hleft { text-align: left; } 
.foursquare h1, .foursquare h3 { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 300; } 
.foursquare h2, .foursquare h4 { text-transform: lowercase; letter-spacing: 0.05em; } 
.foursquare hr { text-align: center; border: 0; height: 1px; background-color: #BBB; } 
.foursquare hr:after { content:""; display: inline-block; margin: 0 auto; position: relative; top: -9px; height: 11px; width: 11px; background-color: #BBB; border-radius: 100%; border: 4px solid #CCC; z-index: 3; }
.zeddit { text-align: center; padding: 0px;  margin: 0px; font-size: 20px; height: 20px; line-height: 10px; display: block; font-family: Lato; }
</style>

happy little pill

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

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

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

драмы

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

Поделиться12017-02-06 21:01:03

Поделиться22017-02-06 21:01:08

Поделиться32017-02-07 11:57:40