♠ theme id stock ♠

ลำดับตอนที่ #10 : ♦ theme no.9 : floating ballons (clourful)

สีสดใส แจ่มๆ บอลลูนเยอะดี

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
body {
 background-color: #FFC;
}

.sky {
 position:relative;
 width:960px;
 }

.float {
 position:absolute;
 }
 
.cloud1 {
 position: absolute;
 top: 14px;
 left: 764px;
 }
 
.cloud2 {
 position: absolute;
 top: 2426px;
 left: 527px;
 width: 4px;
 height: 0px;
 }
 
.cloud3 {
 position: absolute;
 top: 606px;
 left: 68px;
 }
 
.cloud4 {
 position: absolute;
 top: 1344px;
 left: 596px;
 }
 
.balloon {
 position:absolute;
 width:100px;
 height:100px;
 }

.balloon1 {
 position: absolute;
 top: 264px;
 left: 468px;
 width: 100px;
 height: 100px;
 }

.balloon2 {
 position: absolute;
 top: 996px;
 left: 84px;
 width: 100px;
 height: 100px;
 }
 
.balloon3 {
 position: absolute;
 top: 1676px;
 left: 504px;
 width: 100px;
 height: 100px;
 }

.balloon4 {
 position:absolute;
 top:2700px;
 left:40px;
 width:100px;
 height:100px;
 }
 
.text {
 position:absolute;
 width:350px;
 height:;
 font-family:Helvetica;
 font-size:12px;
 }
 
.text1 {
 position:absolute;
 top:100px;
 left:50px;
 width:350px;
 height:500px;
 font-family:Helvetica;
 color:#999;
 }
 
.text2 {
 position: absolute;
 top: 1688px;
 left: 58px;
 font-family: Helvetica;
 color: #999;
 }
 
.text3 {
 position: absolute;
 top: 3164px;
 left: 50px;
 width: 350px;
 height: 500px;
 font-family: Helvetica;
 color: #999;
 }
 
.text4 {
 position:absolute;
 top:1000px;
 left:60px;
 width:350px;
 height:500px;
 font-family:Helvetica;
 color:#666;
 }

#navbar-iframe {
display: none !important;
}

blockquote {
margin-top: 1px;
margin-bottom: 1px;
background: url(http://media.tumblr.com/tumblr_m92zu48JHH1rrd4z3.png);
width: 470px;
border:1px solid #e9e9e9;
padding: 20px;
color: #7a7a7a;
margin-left: 18px;
line-height: 2.0;
}

 
.group1{
 position:relative;
 }

.group2{
 position:relative;
 }

.group3{
 position:relative;
 }
 
.group4{
 position:relative;
 }

.header {
 position:fixed;
 top:0px;
 right:0px;
 width:100%;
 background-color:#F66;
 font-family:helvetica;
 text-align:center;
 letter-spacing:5pt;
 font-size:16px;
 padding:20px;
 word-spacing:70pt;
  ;
 text-shadow: 2px 2px 2px #CCC;
 }
 
.about {
 font-family:helvetica;
 text-align:center;
 padding:10px;
 }

.what {
 font-family:helvetica;
 text-align:center;
 width:590px;
 padding:10px;
 }
 
.contact {
 font-family:helvetica;
 text-align:center;
 padding:10px;
 }

.blog {
width:550px;
height:auto;
background-color:#FFF;
padding:20px;
font-size:12pt;
}

.date{
width:550px;
background-color:#F8E0F7;
padding:20px;
}

.content{
background-color:#FFF;
padding:20px;
line-height:20px;
}
 
a:link {
 color: #FFF;
 text-decoration:none;
}
a:visited {
 color: #000;
background-color:#FFC;
}
a:hover {
 color: #000;
 background-color:#FFC;
}
a:active {
 color: #000;
background-color:#FFC;
}

h1 {
 background-color:#6FC;
 padding:10px;
 font-size:36px;
 letter-spacing:-2pt;
 color:#FFF;;
 text-shadow: 1px 1px 1px #999;
 }
 
i {
 font-size:15pt;
 color:#666;
 text-shadow: 1px 1px 1px #999;
 }</style>
<div class="sky">
    <div class="group1">
        <div class="cloud1 float">
            <img height="150" src="http://i1179.photobucket.com/albums/x383/leejungeun/cloud_zps7f6e7652.png" width="223" /></div>
        <div class="cloud2 float">
            <img height="150" src="http://i1179.photobucket.com/albums/x383/leejungeun/cloud_zps7f6e7652.png" width="223" /></div>
        <div class="cloud3 float">
            <img height="150" src="http://i1179.photobucket.com/albums/x383/leejungeun/cloud_zps7f6e7652.png" width="223" /></div>
        <div class="cloud4 float">
            <img height="150" src="http://i1179.photobucket.com/albums/x383/leejungeun/cloud_zps7f6e7652.png" width="223" /></div>
    </div>
    <div class="group2">
        <div class="balloon1 balloon">
            <img height="531" src="http://i1179.photobucket.com/albums/x383/leejungeun/balloon_zpsbb66c912.png" width="420" /></div>
        <div class="balloon2 balloon">
            <img height="531" src="http://i1179.photobucket.com/albums/x383/leejungeun/balloon_zpsbb66c912.png" width="420" /></div>
        <div class="balloon3 balloon">
            <img height="531" src="http://i1179.photobucket.com/albums/x383/leejungeun/balloon_zpsbb66c912.png" width="420" /></div>
        <div class="balloon4 balloon">
            <img height="531" src="http://i1179.photobucket.com/albums/x383/leejungeun/balloon_zpsbb66c912.png" width="420" /></div>
    </div>
    <div class="header">
        <a class="about" href="http://my.dek-d.com/beer-  naka/friend/request_friend.php">ADDME</a> <a class="what" href="http://writer.dek-d.com/beer-naka/writer/">WRITER</a> <a class="contact" href="http://my.dek-d.com/beer-naka/qmsg/">QMSG.</a></div>
    <div class="text">
        <div class="about text1" id="about">
            <h1>
                FLOATING BALLOONS</h1>
            <div class="content">
                <p>
                    <i>This is your about section</i></p>
                <p>
                    A balloon is an inflatable flexible bag filled with a gas, such as helium, hydrogen, nitrous oxide, oxygen, or air. Modern balloons can be made from materials such as rubber, latex, polychloroprene, or a nylon fabric, while some early balloons were made of dried animal bladders, such as the pig bladder. Some balloons are used for decorative purposes, while others are used for practical purposes such as meteorology, medical treatment, military defense, or transportation. A balloon&#39;s properties, including its low density and low cost, have led to a wide range of applications. The inventor of the rubber balloon, (the most common balloon) was Michael Faraday in 1824, via experiments with various gases.</p>
            </div>
        </div>
        <div class="what text2" id="what">
            <h1>
                FLOATING CLOUDS</h1>
            <p>
                <mtentries lastn="7"></mtentries></p>
            <div class="date">
                &lt;$BlogItemTitle$&gt; &bull; <mtdateheader>&lt;$MTEntryDate format=&quot;%B %e, %Y&quot;$&gt;</mtdateheader> &bull; &lt;$MTEntryDate format=&quot;%I:%M:%S %p&quot;$&gt;</div>
            <div class="blog">
                <p>
                    &nbsp;</p>
            </div>
            <div class="contact text3" id="contact">
                <h1>
                    X X X X X X X X X</h1>
                <div class="content">
                    <p>
                        <i>This is where you put whatever you want, some links? A playlist? An ad? Anything!</i></p>
                    In literary theory, a text is any object that can be &quot;read,&quot; whether this object is a work of literature, a street sign, an arrangement of buildings on a city block, or styles of clothing. It is a coherent set of signs that transmits some kind of informative message. This set of symbols is considered in terms of the informative message&#39;s content, rather than in terms of its physical form or the medium in which it is represented. Within the field of literary criticism, &quot;text&quot; also refers to the original information content of a particular piece of writing; that is, the &quot;text&quot; of a work is that primal symbolic arrangement of letters as originally composed, apart from later alterations, deterioration, commentary, translations, paratext, etc. Therefore, when literary criticism is concerned with the determination of a &quot;text,&quot; it is concerned with the distinguishing of the original information content from whatever has been added to or subtracted from that content as it appears in a given textual document (that is, a physical representation of text).
                    <p>
                        Skin By <a href="http://nineofthirteen.blogspot.com">NINEOF</a><a href="http://twitter.com/nineofthirteen">THIRTEEN</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(function(){
 
  function resize (){
   $('.bg').css ('width', $(window).width());
   $('.bg').css ('height',$(window).height());
  }
 
 function dosomething (){
  $('.bg').css ('width', $(window).width());
   $('.bg').css ('height',$(window).height());
 }
 
 $('.about').on('click'), function(){
    $('html, body').animate({
     scrollTop: $('#about').offset().top - 80
    }, 1000);
    }
 
  function moveToSection(id) {
    $('html, body').animate({
     scrollTop: $('#'+id).offset().top - 80
    }, 1000);
  }
 
  $('.about').on('click', function(){
   moveToSection('about');
  });
 
   $('.what').on('click', function(){
   moveToSection('what');
  });
 
   $('.contact').on('click', function(){
   moveToSection('contact');
   });
  });
 
 
 $(window).on('scroll', function(){
  $('.group1').css('top',$(window).
  scrollTop()*0.35);
  $('.group2').css('top',$(window).
  scrollTop()*0.65);
  $('.group3').css('top',$(window).
  scrollTop()*0.25);
  $('.group4').css('top',$(window).
  scrollTop()*0.45);
 
 
  $(window).scrollTop()
 console.log()
 
 
 });
 

</script><!-- iD Clean Code Ver. 2.4.1 By Fantasier --

><!-- อย่าลบข้อความเครดิตที่มานะครับ สามารถก็อปต่อไปได้โดยไม่ลบเครดิตในโค้ด

ไม่ต้องให้เครดิตที่หน้าไอดีก็ได้จ้า -->
<style type="text/css">
#wrapper,.thcon { display:none

}</style>
<div class="theanchor">
    &nbsp;</div>
<script

type="text/javascript">$('.theanchor').parent

().wrapInner('<div class="thcon"></div>');

$('#wrapper').before($('.thcon').contents());

$('.thcon') ();</script>

:-Daisy ✿