JSFiddle - React, Tailwind, and code Playground

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,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic,cyrillic-ext);
@import url(http://fonts.googleapis.com/css?family=Lobster);
html{
    margin: 0;
    padding: 0;
}
* {
}
body {
    background:#333;
    margin: 0;
    padding: 0
}
.wrapper {
    width:inherit;
    height:inherit;
    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-image:url('http://cs623828.vk.me/v623828442/13fe3/GO2rCKQUkJs.jpg');
    background-size:cover;
}
.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: 0 0 20px...

JavaScript

function randomInt(min, max) {
        return min + ((max-min+1)*Math.random()^0);
}
function setHeight() {
    $(".wrapper").css({
        height: $(window).height() + 'px'
    });
}
function setWidth() {
    $('.wrapper').css({
        width: $(window).width() + 'px'
    });
}
function randBack(){
    var first = 1;
    var last = 5;
    var path = 'img/background/';
    
    var img_src = 'url("'+path+randomInt(first,last)+'.jpg")';
    $('.randBack').css('background-image',img_src);

}

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

$('.myname').hover(function(){
    var r,g,b;
    r = randomInt(0,10);
    g = randomInt(0,10);
    b = randomInt(0,150);
    var c = 'rgba('+r+','+g+','+b+',1)';
    $('.myname').css(
        'color',c
    );
});