style.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    color: #ffffff;
}

.container{
    position: relative;
}

header{
    text-align: center;
    position: absolute;
    top: 0;
    left: 0%;
    /*width: 100%;*/
    height: 100%;
    z-index: 100;
}

header label{
    display: inline-block;
    background-color: darkslategrey;
    padding: 10px;
    margin: 0;
    border-right: 1px solid gray;
    cursor: pointer;
    color: white;
}

header label:hover{
    background-color: gray;
}

/*hiding the radios*/
input{
    transform: translateX(-99999px);
    height: 0;
}


.slides-container{
    position: relative;
    height: 100vh;
    width: 100%;
}



.slide{
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: left 2s ease;
}

section h1{
    transform: translateY(400px);
    transition: transform 1s ease 2s;
}
.slide-one{
    background: url("./images/android.jpg");
    background-size: cover;

}

.slide-two{
    background: url("./images/laptop.jpg");
    background-size: cover;

}

.slide-three{
    background: url("./images/mountains.jpg");
    background-size: cover;

}

.slide-four{
    background: url("./images/valley.jpg");
    background-size: cover;

}

input[id^="slide"]:checked + .slide{
    z-index: 10;
    left: 0;
}

input[id^="slide"]:checked + .slide h1{
    transform: translateY(300px);
}