|
|
| Line 303: |
Line 303: |
| | .side-button.pinterest:after { | | .side-button.pinterest:after { |
| | background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") no-repeat center; | | background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") no-repeat center; |
| − | }
| |
| − |
| |
| − | .plus-button {
| |
| − | position: absolute;
| |
| − | bottom: 30px;
| |
| − | right: 30px;
| |
| − | z-index: 100;
| |
| − | height: 75px;
| |
| − | width: 75px;
| |
| − | border-radius: 100%;
| |
| − | background-color: #e91e63;
| |
| − | box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.58);
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | backface-visibility: hidden;
| |
| − | -webkit-transform: scale(0.92);
| |
| − | transform: scale(0.92);
| |
| − | }
| |
| − |
| |
| − | .plus-button::before {
| |
| − | content: "+";
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | -webkit-transform: translate(-50%, -50%);
| |
| − | transform: translate(-50%, -50%);
| |
| − | color: #fff;
| |
| − | font-size: 28px;
| |
| − | font-weight: 600;
| |
| − | }
| |
| − |
| |
| − | .plus-button:hover {
| |
| − | -webkit-transform: scale(1);
| |
| − | transform: scale(1);
| |
| − | box-shadow: 3px 3px 12px 2px rgba(0, 0, 0, 0.5);
| |
| − | }
| |
| − |
| |
| − | .plus-button:active {
| |
| − | -webkit-transform: scale(0.96);
| |
| − | transform: scale(0.96);
| |
| − | box-shadow: 2px 3px 11px 1px rgba(0, 0, 0, 0.53);
| |
| − | }
| |
| − |
| |
| − | .plus-button.open {
| |
| − | -webkit-transform: rotate(45deg) scale(0.92);
| |
| − | transform: rotate(45deg) scale(0.92);
| |
| − | background-color: #333;
| |
| − | box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.58);
| |
| − | }
| |
| − |
| |
| − | .plus-button.open:hover {
| |
| − | -webkit-transform: scale(1) rotate(45deg);
| |
| − | transform: scale(1) rotate(45deg);
| |
| − | box-shadow: 3px 3px 12px 2px rgba(0, 0, 0, 0.5);
| |
| − | }
| |
| − |
| |
| − | .plus-button.open:active {
| |
| − | -webkit-transform: scale(0.96) rotate(45deg);
| |
| − | transform: scale(0.96) rotate(45deg);
| |
| − | box-shadow: 2px 3px 11px 1px rgba(0, 0, 0, 0.53);
| |
| − | }
| |
| − |
| |
| − | .social-button {
| |
| − | position: absolute;
| |
| − | bottom: 43px;
| |
| − | right: 41px;
| |
| − | height: 50px;
| |
| − | width: 50px;
| |
| − | -webkit-transform: scale(0.8);
| |
| − | transform: scale(0.8);
| |
| − | background-size: 153% !important;
| |
| − | border-radius: 100%;
| |
| − | box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.4);
| |
| − | cursor: pointer;
| |
| − | z-index: 99;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .social-button:hover {
| |
| − | -webkit-transform: scale(1);
| |
| − | transform: scale(1);
| |
| − | transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
| |
| − | }
| |
| − |
| |
| − | .social-button.twitter-button {
| |
| − | background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center;
| |
| − | }
| |
| − |
| |
| − | .social-button.twitter-button.active {
| |
| − | bottom: 110px;
| |
| − | right: 21px;
| |
| − | }
| |
| − |
| |
| − | .social-button.facebook-button {
| |
| − | background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center;
| |
| − | }
| |
| − |
| |
| − | .social-button.facebook-button.active {
| |
| − | bottom: 105px;
| |
| − | right: 73px;
| |
| − | }
| |
| − |
| |
| − | .social-button.pinterest-button {
| |
| − | background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center;
| |
| − | }
| |
| − |
| |
| − | .social-button.pinterest-button.active {
| |
| − | bottom: 67px;
| |
| − | right: 109px;
| |
| − | }
| |
| − |
| |
| − | .social-button.insta-button {
| |
| − | background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center;
| |
| − | }
| |
| − |
| |
| − | .social-button.insta-button.active {
| |
| − | bottom: 15px;
| |
| − | right: 105px;
| |
| | } | | } |
| | </style> | | </style> |
| Line 443: |
Line 325: |
| | <div class="side-bar"> | | <div class="side-bar"> |
| | <div class="side-container top"> | | <div class="side-container top"> |
| − | <svg viewbox="0 0 120 120" class="hover-svg"> | + | <!-- <svg viewbox="0 0 120 120" class="hover-svg"> |
| | <path D="M 60 25 L 20 95 L 100 95 Z"/> | | <path D="M 60 25 L 20 95 L 100 95 Z"/> |
| | <path D="M 36 67 L 53 95"/> | | <path D="M 36 67 L 53 95"/> |
| Line 449: |
Line 331: |
| | <path D="M 30 78 L 41 95"/> | | <path D="M 30 78 L 41 95"/> |
| | <path D="M 27 83 L 35 95"/> | | <path D="M 27 83 L 35 95"/> |
| − | </svg> | + | </svg> --> |
| | </div> | | </div> |
| | <div class="side-container middle"> | | <div class="side-container middle"> |
