Learn 2 Programming: Website Designs Based on Large Photographs

Best Website Designs Based on Large Photographs, Perfect Full Page Background Image

----------------------------------------------------------------

<html>

<head>

<style>

html,body {
    margin:0;
    padding:0;
    background-color: #E4D4C5,
}

#header{
    margin: 0;
    padding:0;
    width:;
    height:700px;
}

#push-recit {
    position: relative;
    padding: 0px;
    line-height: 0;
    background: url('http://atelierstersi.fr/image/data/push-recit.jpg') no-repeat scroll 50% 50% / cover transparent;
}
#push-recit > div {
   position: absolute;
   width: 100%;
   margin-top: -50px;
   top: 50%;
   text-align: center;
   line-height: 22px;
}

h3 {
    margin: 0px 0px 40px;
    font-family: "Playfair Display",serif;
    font-weight: 1000;
    font-style: italic;
    color: white;
    font-size: 34px;
}

#content {
      left:70px;
      right:70px;      width: 1000px;
      height: 1500px;
      margin: 0 auto;
      position: relative;
            }


a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

a.nowandthen.alt{
width: 650px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,650px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}

footer {

    background: none repeat scroll 0% 0% #DFDFDE;
    padding: 120px 0px;
    text-align: center;
    position: relative;
    bottom:0;

}

.divider {
    background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png') repeat-x scroll center center transparent;
    height: 7px;
    width: 100%;
    position: absolute;
    top: -6px;
}

.container {
    width: 930px;
    margin: 0px auto;
}

</style>
</head>

<body>



<div id="header">

<div id="push-recit"><img alt="" src="http://atelierstersi.fr/image/data/push-recit.jpg" style="width: 100%; opacity: 0; z-index: -1;" />
<div><h3>THIS IS IT</h3>
<br/>
<h3>HAPPY BIRTDAY</h3>
</div>

</div>

<div id="content">

<p style="background-color:white;">
I am a person who is positive about every aspect of life. There are many things I like to do, to see, and to experience. I like to read, I like to write; I like to think, I like to dream; I like to talk, I like to listen. I like to see the sunrise in the morning, I like to see the moonlight at night; I like to feel the music flowing on my face, I like to smell the wind coming from the ocean. I like to look at the clouds in the sky with a blank mind, I like to do thought experiment when I cannot sleep in the middle of the night. I like flowers in spring, rain in summer, leaves in autumn, and snow in winter. I like to sleep late, I like to get up late; I like to be alone, I like to be surrounded by people. I like country’s peace, I like metropolis’ noise. I like delicious food and comfortable shoes; I like good books and romantic ,action and drama in movies. I like the land and the nature, I like people And, I like to laugh.i love watching & making short film.i am computer geek, programmer :) .

engineer in information technology

i am freelancer,entrepreneur,web designer,computer expert,blogger,programmer(java,c&c++,php,dot net,asp&c#)

</p>
<h2>HELLO WORLD</h2>

<a class="nowandthen">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1WnuDcaUKkeofrkMWW0z5uJKgZokiLcNRf0InbzGjDnu8IMivuee65ngGMgOM_93eOTxhy2mPyBpsYyeno0wBLyOn_kbWPYuSpEbnS6XbrFlSrR6ys6Fd0-SGsIN2RrJQMjbMwVqZVmed/s1600/DSC03406.JPG" alt="">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtao_mHmLMGJ9oHM4AsKq5hgcCxn2wNzDiOIK7URPZn2Zf7WQLXsfplTHu3ScrFhX1eD8nTLd7PiIAabSpLfN3XZ-UwuL3Ud96MX8KyboYdImItocpn-mePPapcOfToI0Umaf0Cvmoq3qO/s1600/hacking_wordcloud.jpg" alt=""></a>

<a class="nowandthen alt">
    <img src="http://img23.imageshack.us/img23/3189/before2f.jpg" alt="">
    <img src="http://img824.imageshack.us/img824/2466/after2g.jpg" alt="">
</a>

<h2>hiiiiiiiiiiiiiiiiiiiiiii</h2>

</div>



<footer>
<div class="divider"></div>
<div class="container">

<h1>hiiiiiiiiiii</h1>

</div>
</footer>

<body>
</html>

Learn 2 Programming

Search Google

Tuesday, 24 June 2014

Website Designs Based on Large Photographs, Perfect Full Page Background Image