Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@shagun0915
shagun0915 authored Feb 4, 2021
1 parent 297c41c commit a5134cb
Show file tree
Hide file tree
Showing 2 changed files with 404 additions and 0 deletions.
343 changes: 343 additions & 0 deletions admin.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,343 @@
html {
height: 100%;
}

body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background: linear-gradient(#141e30, #243b55);
}

.navbar {
background-color: #000;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
width: 100%;
height: 80px;
line-height: 80px;
font-size: 18px;
padding: 0 30px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}

.navbar a {
text-decoration: none;
color: #fff;
}

.navbar a.navbar-brand {
float: left;
height: inherit;
line-height: inherit;
padding: 0 30px;
font-size: 22px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}

.navbar a.navbar-brand span {
font-size: 28px;
font-weight: 700;
}

.navbar ul {
float: right;
list-style: none;
height: inherit;
line-height: inherit;
padding: 0 50px;
}

.navbar ul li {
display: inline-block;
}

.navbar ul li a {
display: block;
text-align: center;
min-width: 120px;
padding: 0 30px;
}

.navbar ul li a:hover {
background-color: rgba(255, 255, 255, 0.15);
}

.navbar .navbar-toggler {
display: none;
}

#html {
background-color: #e34f26;
}

#css {
background-color: #002561;
}

#javascript {
background-color: #333;
}

@media (max-width: 991px) {
.navbar ul {
padding: 0 10px;
}
.navbar ul li a {
min-width: 100px;
padding: 0 20px;
}
}

@media (max-width: 767px) {
.navbar {
padding: 0;
}
.navbar ul {
width: 100%;
padding: 0;
background-color: rgba(0, 0, 0, 0.9);
/* height: auto; */
height: 100vh;
max-height: 0;
overflow: hidden;
transition: all ease-in-out 0.3s;
}
.navbar ul.open {
max-height: 100vh;
}
.navbar ul li {
width: 100%;
/* border-bottom: 1px solid rgba(255,255,255,0.3); */
}
.navbar ul li a {
padding: 0;
}
.navbar .navbar-toggler {
display: block;
position: absolute;
height: 40px;
top: 20px;
right: 20px;
background-color: transparent;
color: #fff;
border: 3px solid #fff;
/* border: none; */
/* border-radius: 4px; */
outline: none;
padding: 0 5px;
cursor: pointer;
}
.navbar .navbar-toggler span,
.navbar .navbar-toggler span::before,
.navbar .navbar-toggler span::after {
display: block;
content: '';
background-color: #fff;
height: 3px;
width: 28px;
border-radius: 4px;
transition: all ease-in-out 0.3s;
}
.navbar .navbar-toggler span::before {
transform: translateY(-8px);
}
.navbar .navbar-toggler span::after {
transform: translateY(5px);
}
.navbar .navbar-toggler.open-navbar-toggler span {
/* transform: rotate(90deg); */
background-color: transparent;
/* transform: scale(0.85) rotate(270deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::before {
transform: translateY(0px) rotate(45deg);
/* transform: translateY(0px) scale(0.75) rotate(45deg); */
}
.navbar .navbar-toggler.open-navbar-toggler span::after {
transform: translateY(-3px) rotate(-45deg);
/* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
}
}

a {
text-decoration: none;
color: #1ab188;
transition: 0.5s ease;
}

a:hover {
color: #03e9f4;
}

.login-box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
border-radius: 10px;
}

.login-box h2 {
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}

.login-box .user-box {
position: relative;
}

.login-box .user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}

.login-box .user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}

.login-box .user-box input:focus~label,
.login-box .user-box input:valid~label {
top: -20px;
left: 0;
color: #03e9f4;
font-size: 12px;
}

.login-box form a {
position: relative;
display: inline-block;
padding: 10px 20px;
color: #03e9f4;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
letter-spacing: 4px
}

.login-box a:hover {
background: #03e9f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}

.login-box a span {
position: absolute;
display: block;
}

.login-box a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}

.login-box a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}

@keyframes btn-anim2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}

.login-box a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}

@keyframes btn-anim3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}

.login-box a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}

@keyframes btn-anim4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}

.footer {
position: relative;
bottom: 0;
right: 0;
}
Loading

0 comments on commit a5134cb

Please sign in to comment.