page

by mirowin

HTML

<div class="wrapper">
    <input type="radio" name="point" id="slide1" checked>
    <input type="radio" name="point" id="slide2">
    <input type="radio" name="point" id="slide3">
    <input type="radio" name="point" id="slide4">
    <input type="radio" name="point" id="slide5">
    <div class="slider">
        <div class="slides slide1">
          <div class="mynamecard"><h1 class="myname">Шитиков Никита</h1>
    <h3>Веб-визитка</h3></div>  
        </div>
        <div class="slides slide2"><img src="http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg" /></div>
        <div class="slides slide3"><img src="http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg" /></div>
        <div class="slides slide4"><img src="http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg" /></div>
        <div class="slides slide5"><img src="http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg" /></div>
    </div>
    <div class="controls">
        <div>
        <label for="slide1">Главная</label>
        <label for="slide2">Проекты</label>
        <label for="slide3">Блог</label>
        <label for="slide4">Фото</label>
        <label for="slide5">Видео</label>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400, 500&subset=latin, cyrillic);
@import url(http://fonts.googleapis.com/css?family=Lobster);
html{
    min-width:700px;
    max-width:1100px;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background:#333;
}
.wrapper {
    width:inherit;
    height:inherit;
    min-width:700px;
    max-width:1100px;
    position: relative;
}
.slider {
    height: inherit;
    overflow: hidden;
    position: relative;
    float:left;
    width: inherit;
    border:0px solid black;
    -webkit-box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
    -moz-box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
    -o-box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
    box-shadow:inset 0 0 20px rgba(0, 0, 0, 1);
}
.slides {
    overflow: hidden;
    margin-left:-100%;
    height: inherit;
    opacity: 0;
    position: absolute;
    width: inherit;
    z-index: 0;
    -webkit-transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
    -moz-transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
    -o-transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
    transition: opacity ease-in-out .5s, margin-left ease-in-out .5s;
}
.slide1{
background:#555;


}
.slide2 img{
    height:inherit;
}
.slide3 img{
    width:inherit;
}
.slide4 img{
    width:inherit;
}
.slide5 img{
    width:inherit;
}
#slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4, #slide5:checked ~ .slider > .slide5 {
    margin-left:0;
    opacity: 1;
    z-index: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.wrapper > input {
    display: none;
}
.wrapper .controls {
    min-width:450px;
    width:inherit;
    background:rgba(0,0,0,0.7);
    -webkit-box-shadow:...

JavaScript

function setHeight() {
    $(".wrapper").css({
        height: $(window).height() + 'px'
    });
}
function setWidth() {
    $('.wrapper').css({
        width: $(window).width() + 'px'
    });
}
function resizeimg(){
    var widt = $(window).width();
    var heig = $(window).height();
    var wimg = $('.resimg').width();
    var himg = $('.resimg').height();
    
    if (heig<=himg){
        $('.resimg').css({
        width: 'inherit',
            height:''
    });
    }
    else{
        $('.resimg').css({
        height: 'inherit',
            width:''
    });
    }
}


setHeight();
setWidth();
resizeimg();
$(window).resize( setHeight );
$(window).resize( setWidth );
$(window).resize( resizeimg );

function randomInt(min, max) {
        return min + ((max-min+1)*Math.random()^0);
      }
$('.myname').hover(function(){
    var r,g,b;
    r = randomInt(0,20);
    g = randomInt(0,20);
    b = randomInt(0,20);
    c = 'rgba('+r+','+g+','+b+',0.8)';
    $('.myname').css(
        'color',c
    );
});