Valdemirkim (Talk | contribs) |
Valdemirkim (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | + | <!DOCTYPE html> | |
− | + | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <link rel="stylesheet" href="style.css" type="text/css"/> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | ||
<style> | <style> | ||
− | |||
.hr ul{ | .hr ul{ | ||
list-style:none;} | list-style:none;} | ||
ul .hr { | ul .hr { | ||
− | margin: 0; /* Обнуляем значение отступов */ | + | margin: 0; /* Обнуляем значение отступов */ |
− | padding: 4px; /* Значение полей */ | + | padding: 4px; /* Значение полей */ |
+ | |||
+ | } | ||
+ | ul.hr li { | ||
+ | display: inline; /* Отображать как строчный элемент */ | ||
+ | |||
+ | } | ||
+ | #div{ | ||
+ | border-bottom:1px solid black; | ||
+ | margin:0px 0px; | ||
+ | margin:auto auto; | ||
+ | margin-top:15px; | ||
+ | } | ||
+ | span{font-family:"Roboto";} | ||
+ | a{text-decoration:none;} | ||
+ | a:link { | ||
+ | color: #000000; /* Цвет ссылок */ | ||
+ | padding: 2px; /* Поля вокруг текста */ | ||
+ | }a{ | ||
+ | margin-left:5%; | ||
+ | margin-right:5%; | ||
+ | color:#000; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | a:hover { | ||
+ | color: #9ddef2; /* Цвет ссылки */ | ||
+ | } | ||
+ | </style> | ||
+ | <style> | ||
+ | |||
+ | |||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; } | ||
+ | caption, th, td { | ||
+ | text-align: left; | ||
+ | font-weight: normal; | ||
+ | vertical-align: middle; } | ||
+ | q, blockquote { | ||
+ | quotes: none; } | ||
+ | q:before, q:after, blockquote:before, blockquote:after { | ||
+ | content: ""; | ||
+ | content: none; } | ||
+ | a img { | ||
+ | border: none; } | ||
+ | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { | ||
+ | display: block; } | ||
+ | |||
+ | |||
+ | h1,h2,h3,h4,h5,h6 { | ||
+ | font-weight:bold; | ||
+ | font-size: 16px; | ||
+ | margin: 12px 0; | ||
} | } | ||
− | |||
− | |||
+ | h1 { | ||
+ | margin: 35px 0 5px; | ||
+ | font-size: 26px; | ||
+ | font-weight: normal; | ||
} | } | ||
− | # | + | |
− | + | #slider { | |
− | + | text-align: center; | |
− | + | ||
} | } | ||
− | + | ||
− | + | h2 { | |
− | + | margin: 40px 0 25px; | |
− | padding: | + | border-bottom: 1px solid #bbb; |
+ | padding: 0 0 10px; | ||
} | } | ||
− | + | ||
− | + | p { | |
− | margin | + | margin: 0 0 16px; |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | strong { | |
− | + | font-weight: bold; | |
+ | } | ||
+ | |||
+ | |||
+ | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } | ||
+ | label, #active, img { -moz-user-select:none;-webkit-user-select:none; } | ||
+ | .catch { display: block; height: 0; overflow: hidden; } | ||
+ | #slider { | ||
+ | margin: 0 auto; | ||
} | } | ||
− | + | #description { | |
− | + | margin: 25px auto; | |
+ | text-align: left; | ||
+ | max-width: 650px; | ||
+ | padding: 0 25px; | ||
} | } | ||
− | + | .respond { | |
− | + | margin: 0 auto; | |
+ | max-width: 370px; | ||
} | } | ||
− | . | + | |
− | + | ||
− | + | /* NEW EXPERIMENT */ | |
− | + | /* Slider Setup */ | |
− | + | ||
− | + | input { | |
− | + | display: none; | |
− | + | } | |
− | + | ||
− | . | + | #slide1:checked ~ #slides .inner { margin-left:0; } |
− | + | #slide2:checked ~ #slides .inner { margin-left:-100%; } | |
− | + | #slide3:checked ~ #slides .inner { margin-left:-200%; } | |
− | + | #slide4:checked ~ #slides .inner { margin-left:-300%; } | |
+ | #slide5:checked ~ #slides .inner { margin-left:-400%; } | ||
+ | |||
+ | |||
+ | #overflow { | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | article img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #slides .inner { | ||
+ | width: 500%; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | |||
+ | #slides article { | ||
+ | width: 20%; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /* Slider Styling */ | ||
+ | |||
+ | /* Control Setup */ | ||
+ | |||
+ | #controls { | ||
+ | margin: -25% 0 0 0; | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #controls label { | ||
+ | display: none; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | |||
+ | #active { | ||
+ | margin: 23% 0 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #active label { | ||
+ | -webkit-border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | display: inline-block; | ||
+ | width: 10px; | ||
+ | height: 10px; | ||
+ | background: #bbb; | ||
+ | } | ||
+ | |||
+ | #active label:hover { | ||
+ | background: #ccc; | ||
+ | border-color: #777 !important; | ||
+ | } | ||
+ | |||
+ | #controls label:hover { | ||
+ | opacity: 0.8; | ||
+ | } | ||
+ | |||
+ | #slide1:checked ~ #controls label:nth-child(2), | ||
+ | #slide2:checked ~ #controls label:nth-child(3), | ||
+ | #slide3:checked ~ #controls label:nth-child(4), | ||
+ | #slide4:checked ~ #controls label:nth-child(5), | ||
+ | #slide5:checked ~ #controls label:nth-child(1) { | ||
+ | background: url('images/next.png') no-repeat; | ||
+ | float: right; | ||
+ | margin: 0 -70px 0 0; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | |||
+ | #slide1:checked ~ #controls label:nth-child(5), | ||
+ | #slide2:checked ~ #controls label:nth-child(1), | ||
+ | #slide3:checked ~ #controls label:nth-child(2), | ||
+ | #slide4:checked ~ #controls label:nth-child(3), | ||
+ | #slide5:checked ~ #controls label:nth-child(4) { | ||
+ | background: url('images/prev.png') no-repeat; | ||
+ | float: left; | ||
+ | margin: 0 0 0 -70px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #slide1:checked ~ #active label:nth-child(1), | ||
+ | #slide2:checked ~ #active label:nth-child(2), | ||
+ | #slide3:checked ~ #active label:nth-child(3), | ||
+ | #slide4:checked ~ #active label:nth-child(4), | ||
+ | #slide5:checked ~ #active label:nth-child(5) { | ||
+ | background: #333; | ||
+ | border-color: #333 !important; | ||
+ | } | ||
+ | |||
+ | /* Info Box */ | ||
+ | |||
+ | .info { | ||
+ | line-height: 20px; | ||
+ | margin: 0 0 -150%; | ||
+ | position: absolute; | ||
+ | font-style: italic; | ||
+ | padding: 30px 30px; | ||
+ | opacity: 0; | ||
+ | color: #000; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .info h3 { | ||
+ | color: #333; | ||
+ | margin: 0 0 5px; | ||
+ | font-weight: normal; | ||
+ | font-size: 22px; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | /* Slider Styling */ | ||
+ | |||
+ | #slides { | ||
+ | margin: 45px 0 0; | ||
+ | -webkit-border-radius: 5px; | ||
+ | -moz-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | box-shadow: 1px 1px 4px #666; | ||
+ | padding: 1%; | ||
+ | background: #fff; | ||
+ | background: rgb(252,255,244); /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Animation */ | ||
+ | |||
+ | #slides .inner { | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ | ||
+ | |||
+ | -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); | ||
+ | transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ | ||
+ | } | ||
+ | |||
+ | #slider { | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: all 0.5s ease-out; | ||
+ | -moz-transition: all 0.5s ease-out; | ||
+ | -o-transition: all 0.5s ease-out; | ||
+ | transition: all 0.5s ease-out; | ||
+ | } | ||
+ | |||
+ | #controls label{ | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: opacity 0.2s ease-out; | ||
+ | -moz-transition: opacity 0.2s ease-out; | ||
+ | -o-transition: opacity 0.2s ease-out; | ||
+ | transition: opacity 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | #slide1:checked ~ #slides article:nth-child(1) .info, | ||
+ | #slide2:checked ~ #slides article:nth-child(2) .info, | ||
+ | #slide3:checked ~ #slides article:nth-child(3) .info, | ||
+ | #slide4:checked ~ #slides article:nth-child(4) .info, | ||
+ | #slide5:checked ~ #slides article:nth-child(5) .info { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: all 1s ease-out 0.6s; | ||
+ | -moz-transition: all 1s ease-out 0.6s; | ||
+ | -o-transition: all 1s ease-out 0.6s; | ||
+ | transition: all 1s ease-out 0.6s; | ||
+ | } | ||
+ | |||
+ | .info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile { | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: all 0.5s ease-out; | ||
+ | -moz-transition: all 0.5s ease-out; | ||
+ | -o-transition: all 0.5s ease-out; | ||
+ | transition: all 0.5s ease-out; | ||
+ | } | ||
+ | |||
+ | /* Respond Options */ | ||
+ | |||
+ | #desktop:checked ~ #slider { | ||
+ | max-width: 960px; | ||
+ | } | ||
+ | |||
+ | #tablet:checked ~ #slider { | ||
+ | max-width: 850px; | ||
+ | } | ||
+ | |||
+ | #mobile:checked ~ #slider { | ||
+ | max-width: 450px; | ||
+ | } | ||
+ | |||
+ | #desktop:checked ~ #slider .desktop, | ||
+ | #tablet:checked ~ #slider .tablet, | ||
+ | #mobile:checked ~ #slider .mobile { | ||
+ | color: #777; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .desktop, .tablet, .mobile { | ||
+ | display: inline-block; | ||
+ | width: 60px; | ||
+ | height: 60px; | ||
+ | padding-top: 50px; | ||
+ | opacity: 0.35; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | .desktop:hover, .tablet:hover, .mobile:hover { | ||
+ | opacity: 0.2; | ||
+ | } | ||
+ | |||
+ | .desktop { | ||
+ | background: url('images/desktop.png') no-repeat; | ||
+ | } | ||
+ | |||
+ | .tablet { | ||
+ | background: url('images/tablet.png') no-repeat; | ||
+ | } | ||
+ | |||
+ | .mobile { | ||
+ | background: url('images/mobile.png') no-repeat; | ||
+ | } | ||
+ | |||
+ | /* Responsive Styling */ | ||
+ | |||
+ | /* Tablet */ | ||
+ | |||
+ | #tablet:checked ~ #slider #controls { | ||
+ | margin: -25% 0 0 12%; | ||
+ | width: 76%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #tablet:checked ~ #slider #controls label { | ||
+ | -moz-transform: scale(0.8); | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | } | ||
+ | |||
+ | #tablet:checked ~ #slider #slides, #mobile:checked ~ #slider #slides { | ||
+ | padding: 1% 0; | ||
+ | -webkit-border-radius: 0px; | ||
+ | -moz-border-radius: 0px; | ||
+ | border-radius: 0px; | ||
+ | } | ||
+ | |||
+ | #tablet:checked ~ #slider #active { | ||
+ | margin: 22% 0 0; | ||
+ | } | ||
+ | |||
+ | @media only screen and (max-width: 850px) and (min-width: 450px) { | ||
+ | |||
+ | #slider #controls { | ||
+ | margin: -25% 0 0 15%; | ||
+ | width: 70%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #slider #controls label { | ||
+ | -moz-transform: scale(0.8); | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | } | ||
+ | |||
+ | #slider #slides { | ||
+ | padding: 1% 0; | ||
+ | -webkit-border-radius: 0px; | ||
+ | -moz-border-radius: 0px; | ||
+ | border-radius: 0px; | ||
+ | } | ||
+ | |||
+ | #slider #active { | ||
+ | margin: 22% 0 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Mobile */ | ||
+ | |||
+ | #mobile:checked ~ #slider #controls { | ||
+ | margin: -28% 0 0 24%; | ||
+ | width: 50%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #mobile:checked ~ #slider #active { | ||
+ | margin: 23% 0 0; | ||
+ | } | ||
+ | |||
+ | #mobile:checked ~ #slider #slides .info { | ||
+ | opacity: 0 !important; | ||
+ | } | ||
+ | |||
+ | #mobile:checked ~ #slider #controls label { | ||
+ | -moz-transform: scale(0.6); | ||
+ | -webkit-transform: scale(0.6); | ||
+ | -o-transform: scale(0.6); | ||
+ | -ms-transform: scale(0.6); | ||
+ | transform: scale(0.6); | ||
+ | } | ||
+ | |||
+ | |||
+ | @media only screen and (max-width: 450px) { | ||
+ | |||
+ | #slider #controls { | ||
+ | margin: -28% 0 0 24%; | ||
+ | width: 50%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #slider #active { | ||
+ | margin: 23% 0 0; | ||
+ | } | ||
+ | |||
+ | #slider #slides { | ||
+ | padding: 1% 0; | ||
+ | -webkit-border-radius: 0px; | ||
+ | -moz-border-radius: 0px; | ||
+ | border-radius: 0px; | ||
+ | } | ||
+ | |||
+ | #slider #slides .info { | ||
+ | opacity: 0 !important; | ||
+ | } | ||
+ | |||
+ | #slider #controls label { | ||
+ | -moz-transform: scale(0.6); | ||
+ | -webkit-transform: scale(0.6); | ||
+ | -o-transform: scale(0.6); | ||
+ | -ms-transform: scale(0.6); | ||
+ | transform: scale(0.6); | ||
+ | } | ||
+ | |||
+ | |||
+ | @media only screen and (min-width: 850px) { | ||
+ | |||
+ | body { | ||
+ | padding: 0 80px; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
− | <body> | + | <body style="font-family:Roboto;"> |
<div id="div"><center> | <div id="div"><center> | ||
<ul class="hr"> | <ul class="hr"> | ||
Line 71: | Line 488: | ||
<li><span><a href="notebook.html">Notebook</a></span></li> | <li><span><a href="notebook.html">Notebook</a></span></li> | ||
</ul></center> | </ul></center> | ||
− | </div | + | </div> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | </ | + | <input checked type=radio name=respond id=desktop /> |
+ | <input type=radio name=respond id=tablet /> | ||
+ | <input type=radio name=respond id=mobile /> | ||
+ | <article id=slider> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!-- Slider Setup --> | ||
+ | |||
+ | <input checked type=radio name=slider id=slide1 /> | ||
+ | <input type=radio name=slider id=slide2 /> | ||
+ | <input type=radio name=slider id=slide3 /> | ||
+ | <input type=radio name=slider id=slide4 /> | ||
+ | <input type=radio name=slider id=slide5 /> | ||
+ | |||
+ | |||
+ | <!-- The Slider --> | ||
− | </ | + | |
+ | <div id=slides> | ||
+ | |||
+ | <div id=overflow> | ||
+ | |||
+ | <div class=inner> | ||
+ | |||
+ | <article> | ||
+ | |||
+ | <img src="images/CouldDragonByBjzaba.png" /> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="images/MountainFortByBjzaba.png" /> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="images/MountainOutpostByBjzaba.png" /> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="images/CliffsByBjzaba.png" /> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="images/HillFortByBjzaba.png" /> | ||
+ | </article> | ||
+ | |||
+ | </div> <!-- .inner --> | ||
+ | |||
+ | </div> <!-- #overflow --> | ||
+ | |||
+ | </div> <!-- #slides --> | ||
+ | |||
+ | |||
+ | <!-- Controls and Active Slide Display --> | ||
+ | |||
+ | <div id=controls> | ||
+ | <label for=slide1></label> | ||
+ | <label for=slide2></label> | ||
+ | <label for=slide3></label> | ||
+ | <label for=slide4></label> | ||
+ | <label for=slide5></label> | ||
+ | |||
+ | </div> <!-- #controls --> | ||
+ | |||
+ | <div id=active> | ||
+ | |||
+ | <label for=slide1></label> | ||
+ | <label for=slide2></label> | ||
+ | <label for=slide3></label> | ||
+ | <label for=slide4></label> | ||
+ | <label for=slide5></label> | ||
+ | |||
+ | </div> | ||
+ | </article> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 18:51, 20 August 2017
<!DOCTYPE html>