@font-face{ font-family: "raphaelicons"; src: url('../fonts/raphaelicons-webfont.eot') format('eot'), url('../fonts/raphaelicons-webfont.svg') format('svg'), url('../fonts/raphaelicons-webfont.ttf') format('truetype'), url('../fonts/raphaelicons-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } body{ font-family: Georgia, serif; background: #ddd; font-weight: 400; font-size: 15px; color: #333; overflow: hidden; -webkit-font-smoothing:antialiased; } a{text-decoration: none;color: #555;} .clearfix{width: 0;height: 0;overflow: hidden;clear: both;padding: 0;margin: 0;} .st-container{ width: 100%;height: 100%; position: absolute;left: 0;top: 0; font-size: "Josefin Slab","Myriad Pro",Arial,sans-serif; } .st-container input{ z-index: 2; opacity: 0; } .st-container a{ z-index: 1; font-weight: 700; font-size: 16px; background-color: #e23a6e; text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); cursor: pointer; } .st-container input,.st-container a{ width: 20%; height: 34px; line-height: 34px; position: fixed; bottom: 0; } #st-control-1,#st-control-1+a{left: 0;} #st-control-2,#st-control-2+a{left: 20%;} #st-control-3,#st-control-3+a{left: 40%;} #st-control-4,#st-control-4+a{left: 60%;} #st-control-5,#st-control-5+a{left: 80%;} .st-container input:checked+a,.st-container input:checked:hover+a{ background-color: #821134; } .st-container input:checked+a:after{ content:""; width: 0;height: 0; overflow: hidden; border: 20px solid transparent; border-bottom-color: #821134; position: absolute;bottom: 100%;left: 50%; margin-left: -20px; } .st-container input:hover+a{background-color: #AD244F;} .st-scroll,.st-panel{width: 100%;height: 100%;position: relative;} .st-scroll{ left: 0;top: 0; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; } .st-panel{background-color: #fff;overflow: hidden;} #st-control-1:checked~.st-scroll{ transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); } #st-control-2:checked~.st-scroll{ transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); } #st-control-3:checked~.st-scroll{ transform: translateY(-200%); -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); } #st-control-4:checked~.st-scroll{ transform: translateY(-300%); -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); -ms-transform: translateY(-300%); } #st-control-5:checked~.st-scroll{ transform: translateY(-400%); -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); -ms-transform: translateY(-400%); } .st-desc{ width: 200px; height: 200px; background-color: #fa96B5; position: absolute; left: 50%; top: 0; margin-left: -100px; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); } [date-icon]:after{ content: attr(date-icon); width: 200px; height: 200px; color: #fff; font-size: 90px; text-align: center; line-height: 200px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -100px; transform: rotate(-45deg) translateY(25%); -webkit-transform: rotate(-45deg) translateY(25%); -moz-transform: rotate(-45deg) translateY(25%); -o-transform: rotate(-45deg) translateY(25%); -ms-transform: rotate(-45deg) translateY(25%); font-family: "raphaelicons"; } .st-panel h2{ color: #e23a6e; font-size: 54px; line-height: 50px; text-align: center; font-weight: 900; width: 80%; position: absolute; left: 10%; top: 50%; margin-top: -70px; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); -webkit-backface-visibility: hidden; } #st-control-1:checked~.st-scroll #st-panel-1 h2, #st-control-2:checked~.st-scroll #st-panel-2 h2, #st-control-3:checked~.st-scroll #st-panel-3 h2, #st-control-4:checked~.st-scroll #st-panel-4 h2, #st-control-5:checked~.st-scroll #st-panel-5 h2{ animation: moveDown 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards; -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards; } @keyframes moveDown{ 0%{ transform:translateY(-40px); opacity: 0; } 100%{ transform:translateY(0); opacity: 1; } } @-webkit-keyframes moveDown{ 0%{ -webkit-transform:translateY(-40px); opacity: 0; } 100%{ -webkit-transform:translateY(0); opacity: 1; } } @-moz-keyframes moveDown{ 0%{ -moz-transform:translateY(-40px); opacity: 0; } 100%{ -moz-transform:translateY(0); opacity: 1; } } @-o-keyframes moveDown{ 0%{ -o-transform:translateY(-40px); opacity: 0; } 100%{ -o-transform:translateY(0); opacity: 1; } } @-ms-keyframes moveDown{ 0%{ -ms-transform:translateY(-40px); opacity: 0; } 100%{ -ms-transform:translateY(0); opacity: 1; } } .st-panel p{ position: absolute; width: 50%; left: 25%; top: 50%; font-size: 16px; line-height: 22px; padding: 0; text-align: center; -webkit-backface-visibility: hidden; color: #8b8b8b; margin-top: 10px; } #st-control-1:checked~.st-scroll #st-panel-1 p, #st-control-2:checked~.st-scroll #st-panel-2 p, #st-control-3:checked~.st-scroll #st-panel-3 p, #st-control-4:checked~.st-scroll #st-panel-4 p, #st-control-5:checked~.st-scroll #st-panel-5 p{ animation: moveUp 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards; -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards; } @keyframes moveUp{ 0%{ transform: translateY(40px); opacity: 0; } 100%{ transform: translateY(0); opacity: 1; } } @-webkit-keyframes moveUp{ 0%{ -webkit-transform: translateY(40px); opacity: 0; } 100%{ -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes moveUp{ 0%{ -moz-transform: translateY(40px); opacity: 0; } 100%{ -moz-transform: translateY(0); opacity: 1; } } @-o-keyframes moveUp{ 0%{ -o-transform: translateY(40px); opacity: 0; } 100%{ -o-transform: translateY(0); opacity: 1; } } @-ms-keyframes moveUp{ 0%{ -ms-transform: translateY(40px); opacity: 0; } 100%{ -ms-transform: translateY(0); opacity: 1; } } .st-color{background-color: #fa96B5;} .st-color .st-desc{background-color: #fff;} .st-color [date-icon]:after{color: #fa96B5;} .st-color h2{color: #fff;text-shadow: 1px 1px 1px rgba(0,0,0,0.1);} .st-color p{color:rgba(255,255,255,0.8);} @media screen and (max-width:520px){ .st-panel h2{font-size: 42px;} .st-panel p{width: 80%;left: 10%;margin-top: 0;} .st-container a{font-size: 13px;} } @media screen and (max-width:520px){ .st-panel h2{font-size: 42px;} .st-panel p{width: 80%;left: 10%;margin-top: 0;} .st-container a{font-size: 10px;} .st-desc{width: 120px;height: 120px;margin-left: -60px;} [date-icon]:after{ font-size: 60px; transform: rotate(-45deg) translateY(15%); -webkit-transform: rotate(-45deg) translateY(15%); -moz-transform: rotate(-45deg) translateY(15%); -o-transform: rotate(-45deg) translateY(15%); -ms-transform: rotate(-45deg) translateY(15%); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>content</title> <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="./css//normalize.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="container"> <div class="st-container"> <!--nav begin--> <input type="radio" name="radio-set" checked="checked" id="st-control-1"> <a href="#st-panel-1">Serendipity</a> <input type="radio" name="radio-set" id="st-control-2"> <a href="#st-panel-2">Happiness</a> <input type="radio" name="radio-set" id="st-control-3"> <a href="#st-panel-3">Tranquillity</a> <input type="radio" name="radio-set" id="st-control-4"> <a href="#st-panel-4">Positivity</a> <input type="radio" name="radio-set" id="st-control-5"> <a href="#st-panel-5">Passion</a> <!--nav end--> <div class="st-scroll"> <section class="st-panel" id="st-panel-1"> <div class="st-desc" date-icon="H"></div> <h2>Serendipity</h2> <p>Banksy adipisicing eiusmod banh mi sed.Squid stumptown est odd future nisi,commodo mlkshk pop-up adipisicing retro.</p> </section> <section class="st-panel st-color" id="st-panel-2"> <div class="st-desc" date-icon="2"></div> <h2>Happiness</h2> <p>Art party readymade beard labore cosby sweater culpa.Art party whatever incididunt,scenester umami polaroid tofu.</p> </section> <section class="st-panel" id="st-panel-3"> <div class="st-desc" date-icon="B"></div> <h2>Tranquillity</h2> <p>Sint aute occaecat id vice.Post-ironic fap pork belly next level godard,id fanny pack williamsburg forage truffaut.</p> </section> <section class="st-panel st-color" id="st-panel-4"> <div class="st-desc" date-icon="x"></div> <h2>Positivity</h2> <p>Mixtape fap leggings art party,butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p> </section> <section class="st-panel" id="st-panel-5"> <div class="st-desc" date-icon="C"></div> <h2>Passion</h2> <p>Fixie ad odd future polaroid dreamcatcher,nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p> </section> </div> </div> </div> </body> </html>