Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body, html {
- width: 100%;
- height: 100%;
- }
- * {
- margin: 0;
- padding: 0;
- outline: none;
- }
- body {
- background-color: #d5feff;
- margin: 0px;
- font-family: Trebuchet MS, Helvetica;
- }
- header {
- background-color: #78eced;
- height: 80px;
- border-top: 1px solid #867777;
- border-bottom: 1px solid #867777;
- display: flex;
- position: fixed;
- width: 100%;
- }
- #box_menu {
- min-width: 60px;
- width: 60px;
- margin: auto 10px;
- z-index: 2;
- }
- /* скрываем чекбокс */
- #menu__toggle {
- opacity: 0;
- }
- /* стилизуем кнопку */
- .menu__btn {
- display: flex; /* используем flex для центрирования содержимого */
- align-items: center; /* центрируем содержимое кнопки */
- position: fixed;
- top: 20px;
- left: 20px;
- width: 26px;
- height: 26px;
- cursor: pointer;
- z-index: 2;
- }
- /* добавляем "гамбургер" */
- .menu__btn > span,
- .menu__btn > span::before,
- .menu__btn > span::after {
- display: block;
- position: absolute;
- width: 100%;
- height: 2px;
- background-color: #616161;
- }
- .menu__btn > span::before {
- content: '';
- top: -8px;
- }
- .menu__btn > span::after {
- content: '';
- top: 8px;
- }
- /* контейнер меню */
- .menu__box {
- display: block;
- position: fixed;
- visibility: hidden;
- top: 0;
- left: -100%;
- width: 300px;
- height: 100%;
- margin: 0;
- padding: 80px 0;
- list-style: none;
- text-align: center;
- background-color: #78eced;
- box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
- border: 1px solid #00000047;
- }
- /* элементы меню */
- .menu__item {
- display: block;
- padding: 12px 24px;
- color: #333;
- font-family: 'Roboto', sans-serif;
- font-size: 20px;
- font-weight: 600;
- text-decoration: none;
- }
- .menu__item:hover {
- background-color: #d5feff;
- border: 2px solid #867777;
- }
- #menu__toggle:checked ~ .menu__btn > span {
- transform: rotate(45deg);
- }
- #menu__toggle:checked ~ .menu__btn > span::before {
- top: 0;
- transform: rotate(0);
- }
- #menu__toggle:checked ~ .menu__btn > span::after {
- top: 0;
- transform: rotate(90deg);
- }
- #menu__toggle:checked ~ .menu__box {
- visibility: visible;
- left: 0;
- }
- #box_logo {
- width: 20%;
- min-width: none;
- float: left;
- }
- #box_logo .logo {
- }
- #find {
- min-width: 50%;
- width: 50%;
- z-index: 1;
- }
- #find input {
- width: 100%;
- height: 60px;
- background: white;
- border: 1px solid #867777;
- margin: 10px 0px;
- border-radius: 60px;
- padding-left: 56px;
- }
- input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
- input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
- input[type="search"]::-webkit-search-decoration,
- input[type="search"]::-webkit-search-cancel-button,
- input[type="search"]::-webkit-search-results-button,
- input[type="search"]::-webkit-search-results-decoration { display: none; }
- #find input:hover{
- box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
- }
- #find input:focus{
- box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);
- }
- #icon_panel {
- float: left;
- width: 30%;
- display: flex;
- justify-content: space-evenly;
- min-width: 180px;
- text-align: center;
- }
- #icon_panel .box {
- min-width: 60px;
- }
- #icon_panel .box .love {
- background: url("image/love.png");
- display: inline-block;
- background-repeat: no-repeat;
- background-size: 56px 56px;
- width: 56px;
- height: 80px;
- background-position: center center;
- transition: all.3s ease;
- -ms-transition: all.3s ease;
- -o-transition: all.3s ease;
- -moz-transition: all.3s ease;
- -webkit-transition: all.3s ease;
- }
- #icon_panel .box .love:hover {
- background-image: url("image/buy.png");
- display: inline-block;
- background-repeat: no-repeat;
- background-size: 56px 56px;
- width: 56px;
- height: 80px;
- background-position: center center;
- transition: all.3s ease;
- -ms-transition: all.3s ease;
- -o-transition: all.3s ease;
- -moz-transition: all.3s ease;
- -webkit-transition: all.3s ease;
- }
- #icon_panel .box .buy{
- background: url("image/buy.png");
- display: inline-block;
- background-repeat: no-repeat;
- background-size: 56px 56px;
- width: 56px;
- height: 80px;
- background-position: center center;
- transition: all.3s ease;
- -ms-transition: all.3s ease;
- -o-transition: all.3s ease;
- -moz-transition: all.3s ease;
- -webkit-transition: all.3s ease;
- }
- #icon_panel .box .buy:hover {
- background: url("image/love.png");
- display: inline-block;
- background-repeat: no-repeat;
- background-size: 56px 56px;
- width: 56px;
- height: 80px;
- background-position: center center;
- transition: all.3s ease;
- -ms-transition: all.3s ease;
- -o-transition: all.3s ease;
- -moz-transition: all.3s ease;
- -webkit-transition: all.3s ease;
- }
- #icon_panel .box .profile {
- background: url("image/profile.png");
- display: inline-block;
- background-repeat: no-repeat;
- background-size: 56px 56px;
- width: 56px;
- height: 80px;
- background-position: center center;
- transition: all.3s ease;
- -ms-transition: all.3s ease;
- -o-transition: all.3s ease;
- -moz-transition: all.3s ease;
- -webkit-transition: all.3s ease;
- }
- #icon_panel .box .profile:hover {
- background: url("image/love.png");
- display: inline-block;
- background-repeat: no-repeat;
- background-size: 56px 56px;
- width: 56px;
- height: 80px;
- background-position: center center;
- transition: all.3s ease;
- -ms-transition: all.3s ease;
- -o-transition: all.3s ease;
- -moz-transition: all.3s ease;
- -webkit-transition: all.3s ease;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement