Created
December 31, 2020 08:49
-
-
Save mdmoin7/0cabe7c835903096fe401c11780ed276 to your computer and use it in GitHub Desktop.
style.css
This file contains 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: "Work Sans", sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.text-light .shadow { | |
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.25) !important; | |
} | |
.text-light .shadow-sm { | |
box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.25) !important; | |
} | |
.btn.btn-sm { | |
text-transform: uppercase; | |
font-weight: 500; | |
} | |
.btn > i { | |
font-size: 1.5rem; | |
} | |
.wishlist { | |
width: 30px; | |
height: 30px; | |
align-items: center; | |
display: flex; | |
justify-content: center; | |
} | |
.footer-basic { | |
padding: 40px 0; | |
background-color: #ffffff; | |
color: #4b4c4d; | |
} | |
footer ul { | |
padding: 0; | |
list-style: none; | |
text-align: center; | |
font-size: 18px; | |
line-height: 1.6; | |
margin-bottom: 0; | |
} | |
.footer-basic li { | |
padding: 0 10px; | |
} | |
.footer-basic ul a { | |
color: inherit; | |
text-decoration: none; | |
opacity: 0.8; | |
} | |
.footer-basic ul a:hover { | |
opacity: 1; | |
} | |
footer .social { | |
text-align: center; | |
} | |
footer .social > a { | |
font-size: 24px; | |
width: 40px; | |
height: 40px; | |
line-height: 40px; | |
display: inline-block; | |
text-align: center; | |
border-radius: 50%; | |
border: 1px solid #ccc; | |
margin: 0 8px; | |
color: inherit; | |
opacity: 0.75; | |
} | |
footer .social > a:hover { | |
opacity: 0.9; | |
} | |
footer .copyright { | |
margin-top: 15px; | |
text-align: center; | |
font-size: 13px; | |
color: #aaa; | |
margin-bottom: 0; | |
} | |
footer .list-inline-item > a { | |
text-decoration: none; | |
color: #aaa; | |
} | |
table img { | |
max-height: 100px; | |
} | |
table .btn > i { | |
font-size: inherit; | |
} | |
.wishlist { | |
position: absolute; | |
right: 40px; | |
top: 40px; | |
color: #aaa; | |
background: #fff; | |
border: 1px solid #fff; | |
padding: 5px; | |
border-radius: 50%; | |
cursor: pointer; | |
} | |
.btn:focus, | |
.form-control:focus, | |
.btn:active:focus, | |
.btn.active:focus { | |
box-shadow: none !important; | |
} | |
.btn-ripple { | |
display: inline-block; | |
position: relative; | |
overflow: hidden; | |
transition: all ease-in-out 0.5s; | |
} | |
.btn-ripple::after { | |
content: ""; | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 25%; | |
height: 100%; | |
width: 50%; | |
background-color: #000; | |
border-radius: 50%; | |
opacity: 0; | |
pointer-events: none; | |
transition: all ease-in-out 1s; | |
transform: scale(5, 5); | |
} | |
.btn-ripple:active::after { | |
padding: 0; | |
margin: 0; | |
opacity: 0.2; | |
transition: 0s; | |
transform: scale(0, 0); | |
} | |
/* Chrome, mobile browser support */ | |
@-webkit-keyframes sonarEffect { | |
0% { | |
opacity: 0.3; | |
} | |
40% { | |
opacity: 0.5; | |
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #eea3a3, | |
0 0 0 10px rgba(255, 255, 255, 0.5); | |
} | |
100% { | |
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #eea3a3, | |
0 0 0 10px rgba(255, 255, 255, 0.5); | |
-webkit-transform: scale(1.5); | |
opacity: 0; | |
} | |
} | |
/* Mozilla browser support*/ | |
@-moz-keyframes sonarEffect { | |
0% { | |
opacity: 0.3; | |
} | |
40% { | |
opacity: 0.5; | |
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #eea3a3, | |
0 0 0 10px rgba(255, 255, 255, 0.5); | |
} | |
100% { | |
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #eea3a3, | |
0 0 0 10px rgba(255, 255, 255, 0.5); | |
-moz-transform: scale(1.5); | |
opacity: 0; | |
} | |
} | |
@keyframes sonarEffect { | |
0% { | |
opacity: 0.3; | |
} | |
40% { | |
opacity: 0.5; | |
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #eea3a3, | |
0 0 0 10px rgba(255, 255, 255, 0.5); | |
} | |
100% { | |
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #eea3a3, | |
0 0 0 10px rgba(255, 255, 255, 0.5); | |
transform: scale(1.5); | |
opacity: 0; | |
} | |
} | |
#notfound { | |
position: relative; | |
height: 80vh; | |
} | |
#notfound .notfound { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
-webkit-transform: translate(-50%, -50%); | |
-ms-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
} | |
.notfound { | |
max-width: 767px; | |
width: 100%; | |
line-height: 1.4; | |
padding: 0px 15px; | |
} | |
.notfound .notfound-404 { | |
position: relative; | |
height: 150px; | |
line-height: 150px; | |
margin-bottom: 3rem; | |
} | |
.notfound .notfound-404 h1 { | |
font-size: 186px; | |
font-weight: 900; | |
margin: 0px; | |
text-transform: uppercase; | |
background-size: cover; | |
background-position: center; | |
} | |
.notfound h2 { | |
font-size: 26px; | |
font-weight: 700; | |
margin: 0; | |
} | |
.notfound p { | |
font-size: 14px; | |
font-weight: 500; | |
margin-bottom: 0px; | |
text-transform: uppercase; | |
} | |
.notfound a { | |
display: inline-block; | |
text-transform: uppercase; | |
color: #fff; | |
text-decoration: none; | |
border: none; | |
background: #5c91fe; | |
padding: 10px 40px; | |
font-size: 14px; | |
font-weight: 700; | |
border-radius: 1px; | |
margin-top: 15px; | |
-webkit-transition: 0.2s all; | |
transition: 0.2s all; | |
} | |
.notfound a:hover { | |
opacity: 0.8; | |
} | |
@media only screen and (max-width: 767px) { | |
.notfound .notfound-404 { | |
height: 110px; | |
line-height: 110px; | |
} | |
.notfound .notfound-404 h1 { | |
font-size: 120px; | |
} | |
} | |
main { | |
margin-bottom: 5rem; | |
} | |
#cart .fa-stack[data-count]:after { | |
position: absolute; | |
right: 0%; | |
top: -20%; | |
content: attr(data-count); | |
font-size: 80%; | |
padding: 0.3em; | |
border-radius: 50%; | |
line-height: 0.8em; | |
color: white; | |
background: #ffb300; | |
text-align: center; | |
min-width: 1em; | |
font-weight: bold; | |
} | |
table img { | |
height: 75px !important; | |
width: 75px !important; | |
} | |
.spinner { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
height: 60px; | |
width: 60px; | |
margin: 0px auto; | |
-webkit-animation: rotation 0.6s infinite linear; | |
-moz-animation: rotation 0.6s infinite linear; | |
-o-animation: rotation 0.6s infinite linear; | |
animation: rotation 0.6s infinite linear; | |
border-left: 6px solid rgba(0, 174, 239, 0.15); | |
border-right: 6px solid rgba(0, 174, 239, 0.15); | |
border-bottom: 6px solid rgba(0, 174, 239, 0.15); | |
border-top: 6px solid rgba(0, 174, 239, 0.8); | |
border-radius: 100%; | |
} | |
@-webkit-keyframes rotation { | |
from { | |
-webkit-transform: rotate(0deg); | |
} | |
to { | |
-webkit-transform: rotate(359deg); | |
} | |
} | |
@-moz-keyframes rotation { | |
from { | |
-moz-transform: rotate(0deg); | |
} | |
to { | |
-moz-transform: rotate(359deg); | |
} | |
} | |
@-o-keyframes rotation { | |
from { | |
-o-transform: rotate(0deg); | |
} | |
to { | |
-o-transform: rotate(359deg); | |
} | |
} | |
@keyframes rotation { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(359deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment