Created
July 8, 2012 11:10
-
-
Save nataschachu/3070560 to your computer and use it in GitHub Desktop.
Домашка
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Домашка */ | |
| body | |
| { | |
| margin: 0; | |
| padding: 0; | |
| font-family: PT Sans; | |
| font-size: 14px; | |
| } | |
| .card | |
| { | |
| background: #f1ecd0; | |
| margin: 20px 0 0 20px; | |
| box-shadow: inset 0 0 2px #f1ebc9; | |
| padding: 60px; | |
| position: relative; | |
| width: 580px; | |
| height: 222px; | |
| } | |
| .close | |
| { | |
| font-size: 22px; | |
| font-family: Verdana,sans-serif; | |
| font-weight: bold; | |
| position: absolute; | |
| top: 4px; | |
| right: 10px; | |
| } | |
| .card input[type="radio"] | |
| { | |
| position: fixed; | |
| left: -200px; | |
| } | |
| .texts | |
| { | |
| display: inline-block; | |
| width: 430px; | |
| padding: 0 0 0 15px; | |
| } | |
| .photo-chooser | |
| { | |
| display: inline-block; | |
| vertical-align: top; | |
| width: 100px; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| box-shadow: 0 0 5px 3px rgba(0,0,0,0.15); | |
| } | |
| .photos-preview | |
| { | |
| height: 30px; | |
| padding: 5px 0 6px; | |
| background: #474747; | |
| margin-top: -5px; | |
| } | |
| .photos-preview div | |
| { | |
| padding: 0 4px; | |
| display: table-cell; | |
| } | |
| .photos-preview label | |
| { | |
| display: block; | |
| cursor: pointer; | |
| } | |
| .photos-preview img | |
| { | |
| border-radius: 3px; | |
| } | |
| .photos | |
| { | |
| -webkit-transition: margin 0.15s ease-in; | |
| -moz-transition: margin 0.15s ease-in; | |
| -o-transition: margin 0.15s ease-in; | |
| transition: margin 0.15s ease-in; | |
| } | |
| .photos div | |
| { | |
| display: table-cell; | |
| } | |
| #photo-1:checked ~ .photo-chooser .photos | |
| { | |
| margin-left:0; | |
| } | |
| #photo-1:checked ~ .photo-chooser label[for="photo-1"] img | |
| { | |
| box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5); | |
| } | |
| #photo-1:checked ~ .texts .text-1 | |
| { | |
| display: block; | |
| } | |
| #photo-2:checked ~ .photo-chooser .photos | |
| { | |
| margin-left: -100px; | |
| } | |
| #photo-2:checked ~ .photo-chooser label[for="photo-2"] img | |
| { | |
| box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5); | |
| } | |
| #photo-2:checked ~ .texts .text-2 | |
| { | |
| display: block; | |
| } | |
| #photo-3:checked ~ .photo-chooser .photos | |
| { | |
| margin-left: -200px; | |
| } | |
| #photo-3:checked ~ .photo-chooser label[for="photo-3"] img | |
| { | |
| box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5); | |
| } | |
| #photo-3:checked ~ .texts .text-3 | |
| { | |
| display: block; | |
| } | |
| #photo-4:checked ~ .photo-chooser .photos | |
| { | |
| margin-left: -300px; | |
| } | |
| #photo-4:checked ~ .photo-chooser label[for="photo-4"] img | |
| { | |
| box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5); | |
| } | |
| #photo-4:checked ~ .texts .text-4 | |
| { | |
| display: block; | |
| } | |
| #photo-5:checked ~ .photo-chooser .photos | |
| { | |
| margin-left: -400px; | |
| } | |
| #photo-5:checked ~ .photo-chooser label[for="photo-5"] img | |
| { | |
| box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5); | |
| } | |
| #photo-5:checked ~ .texts .text-5 | |
| { | |
| display: block; | |
| } | |
| #photo-6:checked ~ .photo-chooser .photos | |
| { | |
| margin-left: -500px; | |
| } | |
| #photo-6:checked ~ .photo-chooser label[for="photo-6"] img | |
| { | |
| box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5); | |
| } | |
| #photo-6:checked ~ .texts .text-6 | |
| { | |
| display: block; | |
| } | |
| .texts h1 | |
| { | |
| display: inline-block; | |
| font-size: 24px; | |
| font-weight: 500; | |
| line-height: 2px; | |
| } | |
| .texts h1:first-letter | |
| { | |
| color: red; | |
| } | |
| .texts div | |
| { | |
| display: none; | |
| } | |
| .animation-runner | |
| { | |
| height: 9px; | |
| background: #6c6c6c; | |
| cursor: pointer; | |
| } | |
| .animation-runner:hover | |
| { | |
| background: #9f9fa0; | |
| } | |
| .card::after | |
| { | |
| -moz-transform: rotate(3deg); | |
| -webkit-transform: rotate(3deg); | |
| -o-transform: rotate(3deg); | |
| transform: rotate(3deg); | |
| bottom: 16px; | |
| box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3); | |
| content: ""; | |
| height: 20px; | |
| max-width: 300px; | |
| position: absolute; | |
| right: 10px; | |
| width: 50%; | |
| z-index: -1; | |
| } | |
| @-webkit-keyframes slider | |
| { | |
| 0% { margin-left: 0 } | |
| 100% { margin-left: -128px; } | |
| } | |
| @keyframes slider | |
| { | |
| 0% { margin-left: 0 } | |
| 100% { margin-left: -128px; } | |
| } | |
| @-o-keyframes slider | |
| { | |
| 0% { margin-left: 0 } | |
| 100% { margin-left: -128px; } | |
| } | |
| .photo-chooser:hover .photos-preview | |
| { | |
| animation: 4s slider infinite linear; | |
| -webkit-animation: 4s slider infinite linear; | |
| -o-animation: 4s slider infinite linear; | |
| animation-direction: alternate; | |
| -webkit-animation-direction: alternate; | |
| -o-animation-direction: alternate; | |
| } | |
| .photos-preview:hover, | |
| .card:hover | |
| { | |
| animation-play-state: paused; | |
| -webkit-animation-play-state: paused; | |
| -o-animation-play-state: paused; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="card"> | |
| <span class="close">×</span> | |
| <input type="radio" id="photo-1" name="photo" checked> | |
| <input type="radio" id="photo-2" name="photo"> | |
| <input type="radio" id="photo-3" name="photo"> | |
| <input type="radio" id="photo-4" name="photo"> | |
| <input type="radio" id="photo-5" name="photo"> | |
| <input type="radio" id="photo-6" name="photo"> | |
| <div class="photo-chooser"> | |
| <div class="photos"> | |
| <div class="photo-1"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/100/square.jpg" alt="tyv@"> | |
| </div | |
| ><div class="photo-2"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/100/square.jpg" alt="nop@"> | |
| </div | |
| ><div class="photo-3"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/100/square.jpg" alt="shirokoff@"> | |
| </div | |
| ><div class="photo-4"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/100/square.jpg" alt="aandrosov@"> | |
| </div | |
| ><div class="photo-5"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/100/square.jpg" alt="dfilatov@"> | |
| </div | |
| ><div class="photo-6"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/100/square.jpg" alt="panyakor@"> | |
| </div> | |
| </div> | |
| <div class="photos-preview"> | |
| <div> | |
| <label for="photo-1"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/tyv/photo/30/square.jpg" alt="tyv@"> | |
| </label> | |
| </div> | |
| <div> | |
| <label for="photo-2"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/nop/photo/30/square.jpg" alt="nop@"> | |
| </label> | |
| </div> | |
| <div> | |
| <label for="photo-3"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/shirokoff/photo/30/square.jpg" alt="shirokoff@"> | |
| </label> | |
| </div> | |
| <div> | |
| <label for="photo-4"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/aandrosov/photo/30/square.jpg" alt="aandrosov@"> | |
| </label> | |
| </div> | |
| <div> | |
| <label for="photo-5"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/dfilatov/photo/30/square.jpg" alt="dfilatov@"> | |
| </label> | |
| </div> | |
| <div> | |
| <label for="photo-6"> | |
| <img src="http://center.yandex-team.ru/api/v1/user/panyakor/photo/30/square.jpg" alt="panyakor@"> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="animation-runner"></div> | |
| </div> | |
| <div class="texts"> | |
| <div class="text-1"> | |
| <h1>Юра Ткаченко</h1> | |
| <p> | |
| Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков. | |
| </p> | |
| <p> | |
| Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам. | |
| </p> | |
| </div> | |
| <div class="text-2"> | |
| <h1>Сергей Никитин</h1> | |
| <p> | |
| Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute). | |
| </p> | |
| <p> | |
| Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают. | |
| </p> | |
| </div> | |
| <div class="text-3"> | |
| <h1>Иван Широков</h1> | |
| <p> | |
| Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute). | |
| </p> | |
| <p> | |
| Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" | |
| </p> | |
| </div> | |
| <div class="text-4"> | |
| <h1>Алексей Андросов</h1> | |
| <p> | |
| Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute). | |
| </p> | |
| <p> | |
| Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают. | |
| </p> | |
| </div> | |
| <div class="text-5"> | |
| <h1>Дмитрий Филатов</h1> | |
| <p> | |
| Математический горизонт меняет эллиптический эксцентриситет, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute). | |
| </p> | |
| <p> | |
| Очевидно, что аномальная джетовая активность выбирает межпланетный годовой параллакс, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" | |
| </p> | |
| </div> | |
| <div class="text-6"> | |
| <h1>Михаил Корепанов</h1> | |
| <p> | |
| Аномальная джетовая активность, как бы это ни казалось парадоксальным, вызывает эллиптический маятник Фуко, об интересе Галла к астрономии и затмениям Цицерон говорит также в трактате "О старости" (De senectute). | |
| </p> | |
| <p> | |
| Гелиоцентрическое расстояние прочно выбирает астероид, в таком случае эксцентриситеты и наклоны орбит возрастают. | |
| </p> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment