<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
<div class="card">
<div class="star top">
<img src="https://svgshare.com/i/YdG.svg">
</div>
<div class="star top-rg">
<img src="https://svgshare.com/i/Ydc.svg">
</div>
<div class="star bottom-lf">
<img src="https://svgshare.com/i/YdG.svg">
</div>
<div class="star bottom-rg">
<img src="https://svgshare.com/i/Ydo.svg">
</div>
<div class="container flex">
<div class="error">
<span>404
error
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button>more</button>
</div>
<div class="img">
<img src="https://svgshare.com/i/Ye7.svg">
</div>
</div>
</div
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background-color: #ffb000;
}
.container{
padding-left: 20px;
padding-right: 20px;
margin-top: auto;
margin-bottom:auto ;
}
.card{
background-color: #ffb000;
margin-top: 100px;
position: relative;
}
.star{
position: absolute;
}
.star img{
width: 100%;
}
.top{
left: 37px;
top: -71px;
width: 300px;
}
.top-rg{
right: 37px;
width: 83px;
top: -71px
}
.bottom-lf{
bottom: -160px;
width: 300px;
left: 37px;
}
.bottom-rg{
right: 37px;
bottom: -160px;
width: 83px;
}
.flex{
display: flex;
justify-content: center;
align-items: center;
}
.error{
z-index: 1;
position: relative;
}
.error span{
font-size: 90px;
color: #150035;
font-weight: 900;
white-space: pre-line;
line-height: 1;
letter-spacing: 3px;
text-shadow: 1px 7px 1px #fff;
}
.error p{
color: #fff;
white-space: pre-line;
padding-top: 25px;
font-size: 15px;
line-height: 1.3;
}
.img img{
width: 570px;
}
button{
width: 100px;
padding: 8px;
font-size: 18px;
font-weight: 700;
margin-top: 25px;
border: none;
background-color:#150035 ;
color:#ffb000 ;
position: relative;
}
button::after{
content: '';
width: 96px;
height: 35px;
border: 3px solid #fff;
position: absolute;
top: 7px;
left: 5px;
z-index: -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.