A Pen by Aleks Moroz on CodePen.
Created
August 16, 2025 23:28
-
-
Save alirezarezamand/8c174c6c826428ff88b9c9faac501cd0 to your computer and use it in GitHub Desktop.
403 Forbidden
This file contains hidden or 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
<!doctype html> | |
<html> | |
<head> | |
<title>fitnes.pinup-shop.com.ua</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width"> | |
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'> | |
<style> | |
body { | |
background-color: #fff; | |
color: #37474f; | |
line-height: 1.4; | |
font-family: 'Open Sans', sans-serif; | |
margin: 0; | |
padding: 0; | |
} | |
.error_brief { | |
display: block; | |
font-size: 30px; | |
font-weight: 700; | |
margin-bottom: 15px; | |
} | |
</style> | |
<style> | |
.cssload-loader { | |
position: relative; | |
left: calc(50% - 36px); | |
width: 72px; | |
height: 72px; | |
border-radius: 50%; | |
-o-border-radius: 50%; | |
-ms-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
perspective: 900px; | |
} | |
.cssload-inner { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
-o-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
border-radius: 50%; | |
-o-border-radius: 50%; | |
-ms-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
} | |
.cssload-inner.cssload-one { | |
left: 0%; | |
top: 0%; | |
animation: cssload-rotate-one 1.6s linear infinite; | |
-o-animation: cssload-rotate-one 1.6s linear infinite; | |
-ms-animation: cssload-rotate-one 1.6s linear infinite; | |
-webkit-animation: cssload-rotate-one 1.6s linear infinite; | |
-moz-animation: cssload-rotate-one 1.6s linear infinite; | |
border-bottom: 3px solid rgb(255 0 0); | |
} | |
.cssload-inner.cssload-two { | |
right: 0%; | |
top: 0%; | |
animation: cssload-rotate-two 1.6s linear infinite; | |
-o-animation: cssload-rotate-two 1.6s linear infinite; | |
-ms-animation: cssload-rotate-two 1.6s linear infinite; | |
-webkit-animation: cssload-rotate-two 1.6s linear infinite; | |
-moz-animation: cssload-rotate-two 1.6s linear infinite; | |
border-right: 3px solid rgb(255 0 0); | |
} | |
.cssload-inner.cssload-three { | |
right: 0%; | |
bottom: 0%; | |
animation: cssload-rotate-three 1.6s linear infinite; | |
-o-animation: cssload-rotate-three 1.6s linear infinite; | |
-ms-animation: cssload-rotate-three 1.6s linear infinite; | |
-webkit-animation: cssload-rotate-three 1.6s linear infinite; | |
-moz-animation: cssload-rotate-three 1.6s linear infinite; | |
border-top: 3px solid rgb(255 0 0); | |
} | |
@keyframes cssload-rotate-one { | |
0% { | |
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); | |
} | |
100% { | |
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); | |
} | |
} | |
@-o-keyframes cssload-rotate-one { | |
0% { | |
-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); | |
} | |
100% { | |
-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); | |
} | |
} | |
@-ms-keyframes cssload-rotate-one { | |
0% { | |
-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); | |
} | |
100% { | |
-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); | |
} | |
} | |
@-webkit-keyframes cssload-rotate-one { | |
0% { | |
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); | |
} | |
100% { | |
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); | |
} | |
} | |
@-moz-keyframes cssload-rotate-one { | |
0% { | |
-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); | |
} | |
100% { | |
-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); | |
} | |
} | |
@keyframes cssload-rotate-two { | |
0% { | |
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); | |
} | |
100% { | |
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); | |
} | |
} | |
@-o-keyframes cssload-rotate-two { | |
0% { | |
-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); | |
} | |
100% { | |
-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); | |
} | |
} | |
@-ms-keyframes cssload-rotate-two { | |
0% { | |
-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); | |
} | |
100% { | |
-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); | |
} | |
} | |
@-webkit-keyframes cssload-rotate-two { | |
0% { | |
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); | |
} | |
100% { | |
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); | |
} | |
} | |
@-moz-keyframes cssload-rotate-two { | |
0% { | |
-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); | |
} | |
100% { | |
-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); | |
} | |
} | |
@keyframes cssload-rotate-three { | |
0% { | |
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); | |
} | |
100% { | |
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); | |
} | |
} | |
@-o-keyframes cssload-rotate-three { | |
0% { | |
-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); | |
} | |
100% { | |
-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); | |
} | |
} | |
@-ms-keyframes cssload-rotate-three { | |
0% { | |
-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); | |
} | |
100% { | |
-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); | |
} | |
} | |
@-webkit-keyframes cssload-rotate-three { | |
0% { | |
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); | |
} | |
100% { | |
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); | |
} | |
} | |
@-moz-keyframes cssload-rotate-three { | |
0% { | |
-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); | |
} | |
100% { | |
-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); | |
} | |
} | |
</style> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script> | |
(function() { | |
var str = document.location.href; | |
var segments = str.split("/"); | |
var lastDir = (segments.length > 1) ? segments[segments.length - 2] : ""; | |
$( function(){ | |
$('#folder').html(lastDir); | |
}); | |
})(); | |
</script> | |
</head> | |
<body> | |
<div style="display: table; position: absolute; height: 100%; width: 100%;"> | |
<div style="display: table-cell; vertical-align: middle; padding: 0 40px;"> | |
<div style="margin-left: auto; margin-right: auto; width: 800px;"> | |
<div style="float:left; width: 140px;"> | |
<div class="cssload-loader"> | |
<div class="cssload-inner cssload-one"></div> | |
<div class="cssload-inner cssload-two"></div> | |
<div class="cssload-inner cssload-three"></div> | |
</div> | |
</div> | |
<div style="float:left;"> | |
<span class="error_brief">403 Forbidden</span> | |
<span class="error_details">You don't have permission to access <strong id="folder"></strong> on this server.</span> | |
</div> | |
<div style="clear:both; margin-bottom: 30px;"></div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
403 page