<style type="text/css">
body{
font-family: sans-serif;
}
.error-page{
text-align: center;
margin-top: 10%;
}
.error-list {
float: none;
}
.error-list ul{
padding: 0;
list-style: none;
}
.error-list ul li{
display: inline-block;
background: #111;
color: #fff;
width: 140px;
height: 140px;
font-size: 95px;
font-weight: bold;
box-shadow: -2px 3px 8px #000;
margin: 0 13px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
line-height:140px;
}
.error-message .error-1{
font-size: 50px;
color: #ff2d54;
}
.error-message {
font-size: 30px;
}
.error-message p{
font-size: 14px;color: gray;
}
.error-message{
background: #fff;
box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.42);
width: 70%;
margin: auto;
float: none;
margin-top: 35px;
margin-bottom: 35px;
padding-bottom: 20px;
padding-top: 10px;
}
.error-btn{
margin-bottom:20px;
}
.error-btn a{
padding: 10px 12px;
text-transform: capitalize;
font-size: 16px;
top: 10%;
text-decoration: none;
font-weight: bold;
letter-spacing: 1px;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row ">
<div class="col-xs-12 error-page">
<div class="col-xs-12 error-list">
<ul>
<li>4</li>
<li>0</li>
<li>4</li>
</ul>
</div>
<div class="col-xs-12 error-message">
<span class="error-1">O</span><span class="error-2">ops! Malesef</span><br/>
<p>Aradığınız Konu Silinmiş Olabilir, Diğer Konulara Bakın</p>
<a href="https://www.bloggeriz.com/"> Bloggeriz </a> </div>
<div class='col-xs-12 error-btn'>
<a href="https://www.bloggeriz.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPZ3KWkpW64_wG2WBJVjzVymegvruh2DpgncYO9s6MpTGqDATsQLzYXKgCxXhbIfoI447kp_3rUMtmf_cRUnWjOBvvoX2stRzL4EVjBzBqq5QaMCcNFf81g-9BQXycT4o6y6svTzP0qpRa/s1600/logobloggeriz.png" alt="Logo"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Demosu İçin
https://codepen.io/bloggeriz/pen/dyvPdWJ
Yorum Gönder