


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Üzgünüz,404 Sayfa Bulunamadı</title>

<!--  thanks for colorlib -->
<link href="https://fonts.googleapis.com/css?family=Cabin:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">

<style>
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

#notfound {
  position: relative;
}

#notfound .notfound {
 /* position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);*/
}

.notfound {
  width: 100%;
  line-height: 1.4;
  text-align: center;
  user-select:none;
}

.notfound .notfound-404 {
  position: relative;
  height: 240px;
}

.notfound .notfound-404 h1 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 142px;
  font-weight: 900;
  margin: 0px;
  color: #000;
  text-transform: uppercase;
  letter-spacing: -40px;
  margin-left: -20px;
}

.notfound .notfound-404 h1>span {
  text-shadow: -8px 0px 0px #fff;
}

.notfound .notfound-404 h3 {
  font-family: 'Cabin', sans-serif;
  position: relative;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0px;
  letter-spacing: 3px;
  padding-left: 6px;
}

.notfound h2,.notfound h4 {
  font-family: 'Cabin', sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: white;
  margin-top: -50px;
  margin-bottom: 25px;
}

html,body{
  height:100vh;
  width:100vw;
  display:block;
  margin:0;
  padding:0;
  background: #898989; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #898989 0%, #3f3f3f 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#898989), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #898989 0%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #898989 0%,#3f3f3f 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #898989 0%,#3f3f3f 100%); /* IE10+ */
  background: radial-gradient(ellipse at center, #898989 0%,#3f3f3f 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#898989', endColorstr='#3f3f3f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

setup{
	position:absolute;
  top:50%;
  left:50%;
height:18em;
width:30em;
margin-top:-9em;
margin-left:-15em;  
}
setup:before{
  content:'';
  display:block;
  height:6px;
  width:150px;
  background-color:#111;
  margin-left:-75px;
  position:absolute;
  top:-6px;
  left:50%;
  z-index:2;
  border-radius:1px;
  -webkit-border-radius:1px;
}
setup:after{
  content:'';
  display:block;
  height:6px;
  width:86px;
  background-color:#333;
  margin-left:-43px;
  position:absolute;
  top:-6px;
  left:50%;
  z-index:3;
  border-radius:1px;
  -webkit-border-radius:1px;
}

device{
  height:100%;
  width:100%;
  background-color:black;
  color:white;
  display:block;
  border-radius:.2em;
  -webkit-border-radius:.2em;
}
device:before{
  content:'';
  display:block;
  height:30px;
  width:50px;
  top:100%;
  left:50%;
  margin-left:-25px;
  background-color:#222;
  position:absolute;
  -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,1);
-moz-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,1);
box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,1);
}
device:after{
  content:'';
  display:block;
  border-bottom: 12px solid black;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
  width:180px;
  top:100%;
  left:50%;
  margin-left:-100px;
  margin-top:30px;
  position:absolute;
}

device .display{
  display:block;
  height:78%;
  width:92%;
  background-color:#222;
  border-radius:.2em;
  -webkit-border-radius:.2em;
  position:absolute;
  top:8%;
  left:4%;
  z-index:10;
  overflow:hidden;
}
device .display:before{
  content:'';
  display:block;
  height:500px;
  width:500px;
  background-color:rgba(99,99,99,.1);
  position:absolute;
  top:0%;
  left:-60%;
  z-index:11;
-webkit-transform-style:preserve-3d;
  -webkit-transform:rotateZ(70deg);
}
device .display:after{
  content:'';
  display:block;
  height:100%;
  width:100%;
  -webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
  position:absolute;
  top:0%;
  left:0%;
  z-index:11;
}

device .power{
  display:block;
  height:20px;
  width:20px;
  background-color:#333;
  border-radius:20px;
  -webkit-border-radius:20px;
  position:absolute;
  bottom:5%;
  margin-top:-20px;
  right:5%;
  z-index:20;
}

device .power:before{
  content:'';
  display:block;
  height:4px;
  width:6px;
  background-color:red;
  border-radius:1px;
  -webkit-border-radius:1px;
  position:absolute;
  bottom:0%;
  margin-bottom:-8px;
  left:50%;
  margin-left:-2px;
  z-index:20;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 5px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 5px 1px rgba(255,0,0,1);
}

device .logo{
  display:block;
  height:14px;
  width:14px;
  background-color:#999;
  border-radius:14px;
  -webkit-border-radius:14px;
  position:absolute;
  bottom:4.5%;
  margin-top:-7px;
  left:50%;
  margin-left:-7px;
  z-index:20;
}

@media only screen and (max-width: 767px) {
  .notfound .notfound-404 {
    height: 200px;
  }
  .notfound .notfound-404 h1 {
    font-size: 135px;
  }
}

@media only screen and (max-width: 480px) {
  .notfound .notfound-404 {
    height: 162px;
  }
  .notfound .notfound-404 h1 {
    font-size: 135px;
    height: 150px;
    line-height: 162px;
  }
  .notfound h2 {
    font-size: 16px;
  }

  setup{
    transform:scale(0.7);
  }
  .notfound h4{
    margin-top:0;
  }
}
</style>

</head>
<body>

<setup>
  <device>
    <div class="display">
      <div id="notfound">
        <div class="notfound">
            <div class="notfound-404">
            <h3>Oops! sayfa bulunamadı</h3>
            <h1><span>4</span><span>0</span><span>4</span></h1>
            </div>
            <h4>üzgünüz, ancak istediğiniz sayfa bulunamadı</h2>
        </div>
      </div>
    
    </div>
    <div class="power"></div>
    <div class="logo"></div>
  </device>
</setup>

</body>
</html>
