• milan_shubin
    19.09.2017 в 23:06

    Чтобы скачать надо приобрести V.I.P Группу!

  • Dimonnss666
    19.09.2017 в 22:12

    А где ссылка на скачивание?

  • milan_shubin
    11.09.2017 в 17:36

    кеукеукеукеукеукеукеукеукеку куеп
    упкуцепук

  • milan_shubin
    11.09.2017 в 17:30

    кекек

  • Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сегодняшние посетители:
    На сайте:
    СОТОВЫЙ ТЕЛЕФОН В СВЕТЛОМ СТИЛЕ НА ЧИСТОМ CSS
    Описание:

    Светлый стиль сотового телефона который написан на чистом CSS коде. Довольно интересное применение ему подойдет для вида материалов сайтов мобильной тематики. Установка очень проста и тривиальна. Применяйте данную реализацию в своем сайте и удивляйте им своих пользователей. Так как код написан на чистом CSS, вы значительно снизите нагрузку на своем сайте. 

    Установка:

    HTML
    
    Код
    <div class="container">  
       <div class="top-button"></div>  
       <div class="side-button"></div>  
       <div class="side-button vol"></div>  
       <div class="side-button vol"></div>  
       <div class="body">  
       <div class="cam"></div>  
       <div class="sensor"></div>  
       <div class="speaker"></div>  
       <div class="screen"></div>  
       <div class="home-button"></div>  
       </div>  
    </div>

    Подключаем CSS стили:
    
    Код
    <style class="cp-pen-styles">  
       body {  
       background: #4a4a4a;  
       margin: 0;  
       }  
         
       body .container {  
       position: relative;  
       margin: auto;  
       margin-top: 30px;  
       height: 500px;  
       width: 250px;  
       }  
         
       body .container .top-button {  
       position: absolute;  
       top: 2px;  
       left: 168px;  
       height: 8px;  
       width: 42px;  
       border-radius: 4px;  
       background: #d0bd9b;  
       }  
         
       body .container .side-button {  
       position: absolute;  
       left: 2px;  
       width: 8px;  
       border-radius: 4px;  
       background: #d0bd9b;  
       }  
         
       body .container .side-button:nth-child(2) {  
       height: 30px;  
       top: 80px;  
       }  
         
       body .container .vol {  
       height: 20px;  
       }  
         
       body .container .vol:nth-child(3) {  
       top: 135px;  
       }  
         
       body .container .vol:nth-child(4) {  
       top: 170px;  
       }  
         
       body .container .body {  
       position: absolute;  
       top: 6px;  
       left: 6px;  
       height: calc(100% - 6px);  
       width: calc(100% - 6px);  
       background: #fff;  
       border-radius: 40px;  
       border: 4px solid;  
       border-right-color: #e7d5b3;  
       border-left-color: #e7d5b3;  
       border-top-color: #f2e1c0;  
       border-bottom-color: #cdbc9b;  
       box-sizing: border-box;  
       }  
         
       body .container .body::after,  
       body .container .body::before {  
       content: "";  
       position: absolute;  
       height: 5px;  
       width: calc(100% + 8px);  
       left: -4px;  
       border-left: 3px solid #fff;  
       border-right: 3px solid #fff;  
       box-sizing: border-box;  
       }  
         
       body .container .body::after {  
       top: 50px;  
       }  
         
       body .container .body::before {  
       bottom: 50px;  
       }  
         
       body .container .body .cam {  
       position: absolute;  
       top: 15px;  
       left: calc(50% - 7px);  
       height: 12px;  
       width: 12px;  
       background: #222;  
       border-radius: 50%;  
       }  
         
       body .container .body .sensor {  
       position: absolute;  
       top: 40px;  
       left: 78px;  
       height: 8px;  
       width: 8px;  
       background: #222;  
       border-radius: 50%;  
       }  
         
       body .container .body .speaker {  
       position: absolute;  
       top: 41px;  
       left: calc(50% - 25px);  
       height: 6px;  
       width: 50px;  
       background: #222;  
       border-radius: 4px;  
       }  
         
       body .container .body .home-button {  
       position: absolute;  
       bottom: 10px;  
       left: calc(50% - 26px);  
       height: 52px;  
       width: 52px;  
       background: -webkit-linear-gradient(315deg, #291A00, #E5D2B1, #fff, #291A00);  
       background: linear-gradient(135deg, #291A00, #E5D2B1, #fff, #291A00);  
       border-radius: 50%;  
       }  
         
       body .container .body .home-button::after {  
       content: "";  
       position: absolute;  
       top: 50%;  
       left: 50%;  
       -webkit-transform: translate(-50%, -50%);  
       transform: translate(-50%, -50%);  
       height: 46px;  
       width: 46px;  
       background: #fff;  
       border-radius: 50%;  
       }  
         
       body .container .body .screen {  
       position: absolute;  
       top: 70px;  
       left: 10px;  
       height: calc(100% - 140px);  
       width: calc(100% - 20px);  
       background: #222;  
       border-radius: 4px;  
       background: url("https://lh3.googleusercontent.com/yaWaivd_MyjLDlffOqZNuQ5OvtIPxn8gWSCAXPXmwslWXNvBd2Gk6hdjETfR_Wf5jA8=h900");  
       background-size: 100% 100%;  
       background-position: 0px 0px;  
       }  
    </style>

    Стили можно подключить в файловым менеджере, Указав путь.

    Вот и всё!

    Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
    Автор материала:
    ...
    Логин на сайте: ...
    Группа: ...
    Статус: ...
    О материале:
    Дата добавления материала: 15.03.2017 в 10:45
    Материал просмотрен: 12 раз
    Категория материала: Вид материалов
    К материалу оставлено: 0 комментариев

    Пожаловаться
    Сказать спасибо
    Источник
    Теги к материалу
    Поделись материалом с друзьями
    Рекомендуем к просмотру
    Всего комментариев: 0
    Обсуждение материала:
    Комментариев: 0
    avatar