md.shakil hossain
1229
Create a 404 Error Page Using HTML & CSS
<div class="svg">
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="250px" height="112px" viewBox="0 0 3462.869 1552" enable-background="new 0 0 3462.869 1552" xml:space="preserve">
<path d="M806.917,363.94V107.66l221.833,128.139L806.917,363.94"/>
<path fill-opacity="0.7" d="M96.747,501.107V244.822l221.834,128.137L96.747,501.107"/>
<path fill-opacity="0.7" d="M96.747,774.959V518.674l221.834,128.144L96.747,774.959"/>
<path fill-opacity="0.6" d="M323.632,364.14V107.847L101.798,235.989L323.632,364.14"/>
<path fill-opacity="0.5" d="M323.632,637.688V381.404L101.798,509.547L323.632,637.688"/>
<path fill-opacity="0.85" d="M806.917,637.787V381.502l221.833,128.144L806.917,637.787"/>
<path fill-opacity="0.7" d="M1032.306,774.368V518.083L810.481,646.231L1032.306,774.368"/>
<path fill-opacity="0.7" d="M1032.306,501.107V244.822L810.481,372.966L1032.306,501.107"/>
<path fill-opacity="0.7" d="M332.96,911.501V655.216l221.839,128.142L332.96,911.501"/>
<path fill-opacity="0.7" d="M323.632,911.529V655.25L101.798,783.386L323.632,911.529"/>
<path fill-opacity="0.6" d="M806.917,911.137V654.866l221.833,128.127L806.917,911.137"/>
<path fill-opacity="0.85" d="M808.699,1184.994V928.71l221.845,128.137L808.699,1184.994"/>
<path fill-opacity="0.7" d="M1034.097,1321.577v-256.293L812.264,1193.43L1034.097,1321.577"/>
<path fill-opacity="0.7" d="M1034.097,1048.311V792.02L812.264,920.165L1034.097,1048.311"/>
<path fill-opacity="0.6" d="M808.699,1458.338v-256.272l221.845,128.126L808.699,1458.338"/>
<path fill-opacity="0.6" d="M569.971,1048.311V792.02l221.834,128.156L569.971,1048.311"/>
<path fill-opacity="0.5" d="M560.086,1048.311V792.02L338.262,920.176L560.086,1048.311"/>
<path fill-opacity="0.5" d="M796.86,911.334V655.063L575.012,783.194L796.86,911.334"/>
<path d="M1736.824,364.132V107.84l221.829,128.148L1736.824,364.132"/>
<path d="M1973.771,500.708v-256.28l221.834,128.136L1973.771,500.708"/>
<path fill-opacity="0.85" d="M1499.813,500.858V244.571l221.829,128.134L1499.813,500.858"/>
<path fill-opacity="0.9" d="M1726.94,364.132V107.84l-221.825,128.148L1726.94,364.132"/>
<path fill-opacity="0.7" d="M1263.59,910.949v-256.28l221.845,128.137L1263.59,910.949"/>
<path fill-opacity="0.7" d="M1263.59,1184.806V928.523l221.845,128.137L1263.59,1184.806"/>
<path fill-opacity="0.9" d="M1963.708,500.905V244.618L1741.87,372.762L1963.708,500.905"/>
<path fill-opacity="0.6" d="M1490.476,500.905V244.618l-221.834,128.144L1490.476,500.905"/>
<path fill-opacity="0.5" d="M1490.476,1047.533V791.25l-221.834,128.138L1490.476,1047.533"/>
<path fill-opacity="0.7" d="M1263.59,637.208V380.916l221.845,128.142L1263.59,637.208"/>
<path fill-opacity="0.5" d="M1490.476,773.783V517.495l-221.834,128.144L1490.476,773.783"/>
<path fill-opacity="0.85" d="M1973.771,1047.632V791.349l221.834,128.138L1973.771,1047.632"/>
<path fill-opacity="0.7" d="M2199.158,1184.216V927.922l-221.818,128.147L2199.158,1184.216"/>
<path fill-opacity="0.7" d="M2199.158,910.949v-256.28L1977.34,782.811L2199.158,910.949"/>
<path fill-opacity="0.85" d="M1973.771,773.886v-256.29l221.834,128.148L1973.771,773.886"/>
<path fill-opacity="0.7" d="M2199.158,637.201V380.916L1977.34,509.058L2199.158,637.201"/>
<path fill-opacity="0.7" d="M1499.813,1321.34v-256.281l221.829,128.146L1499.813,1321.34"/>
<path fill-opacity="0.7" d="M1490.476,1321.38v-256.293l-221.834,128.146L1490.476,1321.38"/>
<path fill-opacity="0.6" d="M1973.771,1320.986v-256.272l221.834,128.116L1973.771,1320.986"/>
<path fill-opacity="0.6" d="M1736.824,1458.16v-256.292l221.829,128.146L1736.824,1458.16"/>
<path fill-opacity="0.5" d="M1726.94,1458.16v-256.292l-221.825,128.146L1726.94,1458.16"/>
<path fill-opacity="0.5" d="M1963.708,1321.183V1064.91l-221.838,128.126L1963.708,1321.183"/>
<path d="M3138.832,363.94V107.66l221.844,128.139L3138.832,363.94"/>
<path fill-opacity="0.7" d="M2428.662,501.107v-256.29l221.834,128.141L2428.662,501.107"/>
<path fill-opacity="0.7" d="M2428.662,774.959V518.674l221.834,128.144L2428.662,774.959"/>
<path fill-opacity="0.6" d="M2655.537,364.14V107.847l-221.824,128.141L2655.537,364.14"/>
<path fill-opacity="0.5" d="M2655.537,637.688V381.403l-221.824,128.144L2655.537,637.688"/>
<path fill-opacity="0.85" d="M3138.832,637.787V381.502l221.844,128.144L3138.832,637.787"/>
<path fill-opacity="0.7" d="M3364.221,774.368V518.083l-221.819,128.148L3364.221,774.368"/>
<path fill-opacity="0.7" d="M3364.221,501.107V244.822l-221.819,128.145L3364.221,501.107"/>
<path fill-opacity="0.7" d="M2664.88,911.501V655.216l221.824,128.141L2664.88,911.501"/>
<path fill-opacity="0.7" d="M2655.537,911.529V655.25l-221.824,128.136L2655.537,911.529"/>
<path fill-opacity="0.6" d="M3138.832,911.137V654.866l221.844,128.127L3138.832,911.137"/>
<path fill-opacity="0.85" d="M3140.614,1184.993V928.7l221.844,128.146L3140.614,1184.993"/>
<path fill-opacity="0.7" d="M3366.003,1321.577v-256.293l-221.82,128.146L3366.003,1321.577"/>
<path fill-opacity="0.7" d="M3366.003,1048.311V792.02l-221.82,128.146L3366.003,1048.311"/>
<path fill-opacity="0.6" d="M3140.614,1458.338v-256.272l221.844,128.126L3140.614,1458.338"/>
<path fill-opacity="0.6" d="M2901.886,1048.311V792.02l221.834,128.155L2901.886,1048.311"/>
<path fill-opacity="0.5" d="M2892.002,1048.311V792.02l-221.825,128.155L2892.002,1048.311"/>
<path fill-opacity="0.5" d="M3128.78,911.334V655.063l-221.849,128.131L3128.78,911.334"/>
</svg>
</div>
body {
background-color: #0057B8;
text-align: center;
margin-top: 50px;
}
.svg {
display: inline-block;
height: 300px;
width: 300px;
line-height: 300px;
text-align: center;
background-color: #FFF;
border-radius: 50%;
}
#svg {
display: inline-block;
vertical-align: middle;
fill: #0057B8;
}
#svg path:nth-child(1) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.04s;
animation-delay: 0.04s;
}
#svg path:nth-child(1):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(2) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.08s;
animation-delay: 0.08s;
}
#svg path:nth-child(2):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(3) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.12s;
animation-delay: 0.12s;
}
#svg path:nth-child(3):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(4) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
#svg path:nth-child(4):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(5) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#svg path:nth-child(5):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(6) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.24s;
animation-delay: 0.24s;
}
#svg path:nth-child(6):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(7) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.28s;
animation-delay: 0.28s;
}
#svg path:nth-child(7):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(8) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
#svg path:nth-child(8):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(9) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.36s;
animation-delay: 0.36s;
}
#svg path:nth-child(9):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(10) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#svg path:nth-child(10):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(11) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.44s;
animation-delay: 0.44s;
}
#svg path:nth-child(11):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(12) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
#svg path:nth-child(12):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(13) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.52s;
animation-delay: 0.52s;
}
#svg path:nth-child(13):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(14) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.56s;
animation-delay: 0.56s;
}
#svg path:nth-child(14):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(15) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#svg path:nth-child(15):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(16) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#svg path:nth-child(16):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(17) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.68s;
animation-delay: 0.68s;
}
#svg path:nth-child(17):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(18) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#svg path:nth-child(18):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(19) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.76s;
animation-delay: 0.76s;
}
#svg path:nth-child(19):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(20) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#svg path:nth-child(20):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(21) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.84s;
animation-delay: 0.84s;
}
#svg path:nth-child(21):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(22) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#svg path:nth-child(22):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(23) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.92s;
animation-delay: 0.92s;
}
#svg path:nth-child(23):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(24) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#svg path:nth-child(24):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(25) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#svg path:nth-child(25):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(26) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#svg path:nth-child(26):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(27) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 1.08s;
animation-delay: 1.08s;
}
#svg path:nth-child(27):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(28) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#svg path:nth-child(28):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(29) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 1.16s;
animation-delay: 1.16s;
}
#svg path:nth-child(29):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(30) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#svg path:nth-child(30):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(31) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear infinite;
-webkit-animation-delay: 1.24s;
animation-delay: 1.24s;
}
#svg path:nth-child(31):hover {
-webkit-animation-play-state: paused;
/* Chrome, Safari, Opera */
animation-play-state: paused;
}
#svg path:nth-child(32) {
-webkit-animation: pweek 5s linear infinite;
animation: pweek 5s linear inf
