O mica aventura in HTML si CSS pentru a realiza mufele "mama" si "tata".
<div class="err404"> <div class="err404-layer"> <div class="err404-layer-txt"> <div>ERROR 404</div> <div>Pagina nu exista.</div> </div> <div class="err404-layer-cables"> <div class="err404-layer-cable"> <div class="err404-layer-cable-line"></div> </div> <div class="err404-layer-cable-conn"> <div class="err404-layer-cable-conn-area"> <div class="err404-layer-cable-conn-area-mother"> <div class="err404-layer-cable-conn-area-mother1"></div> <div class="err404-layer-cable-conn-area-mother2"> <div class="err404-layer-cable-conn-area-mother21"></div> <div class="err404-layer-cable-conn-area-mother21"></div> </div> <div class="err404-layer-cable-conn-area-mother3"></div> <div class="err404-layer-cable-conn-area-mother4"></div> </div> </div> <div class="err404-layer-cable-conn-area"> <div class="err404-layer-cable-conn-area-father"> <div class="err404-layer-cable-conn-area-father4"> <div class="err404-layer-cable-conn-area-father41"></div> <div class="err404-layer-cable-conn-area-father41"></div> </div> <div class="err404-layer-cable-conn-area-father3"> <div class="err404-layer-cable-conn-area-father31"></div> </div> <div class="err404-layer-cable-conn-area-father2"> <div class="err404-layer-cable-conn-area-father21"></div> <div class="err404-layer-cable-conn-area-father21"></div> </div> <div class="err404-layer-cable-conn-area-father1"></div> </div> </div> </div> <div class="err404-layer-cable"> <div class="err404-layer-cable-line"></div> </div> </div> </div> </div>
.err404-layer,
.err404-layer-txt,
.err404-layer-cables,
.err404-layer-cable-conn,
.err404-layer-cable-conn-area,
.err404-layer-cable-conn-area-mother,
.err404-layer-cable-conn-area-father,
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-father2,
.err404-layer-cable-conn-area-father3,
.err404-layer-cable-conn-area-father4{
display: flex;
}
.err404-layer-txt{
justify-content: center;
}
.err404-layer-cable-conn{
justify-content: space-between;
}
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-father2,
.err404-layer-cable-conn-area-father4{
justify-content: space-evenly;
}
.err404-layer-cable-conn-area-father{
justify-content: flex-end;
}
.err404-layer-txt,
.err404-layer-cables,
.err404-layer-cable-conn-area,
.err404-layer-cable-conn-area-mother,
.err404-layer-cable-conn-area-father,
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-father2,
.err404-layer-cable-conn-area-father3{
align-items: center;
}
.err404-layer:nth-child(1),
.err404-layer-txt,
.err404-layer-cable-conn-area-father4{
flex-direction: column;
}
.err404-layer-txt,
.err404-layer-cables,
.err404-layer-cable-conn-area-mother,
.err404-layer-cable-conn-area-father{
width: 100%;
}
.err404-layer-cable-conn-area-mother,
.err404-layer-cable-conn-area-father{
height: 50%;
}
.err404-layer-cable-line,
.err404-layer-cable-conn-area-mother1,
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-mother3,
.err404-layer-cable-conn-area-mother4,
.err404-layer-cable-conn-area-father1,
.err404-layer-cable-conn-area-father2,
.err404-layer-cable-conn-area-father3,
.err404-layer-cable-conn-area-father31,
.err404-layer-cable-conn-area-father41{
border: 0 solid #e75038;
}
.err404{
width: 100%;
min-width: 100px;
max-width: 500px;
height: 300px;
background: white;
position: relative;
margin: auto;
}
.err404-layer{
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px;
position: absolute;
top: 0;
left: 0;
}
.err404-layer-txt{
height: 100px;
font-size: 16px;
color: #e75038;
}
.err404-layer-cables{
height: calc(100% - 100px);
}
.err404-layer-cable{
width: calc(100% / 2 - 25px * 2);
}
.err404-layer-cable-line{
height: 5px;
}
.err404-layer-cable-conn{
width: 100px;
height: 100px;
}
.err404-layer-cable-conn-area{
width: calc(100% / 2 - 1px);
}
.err404-layer-cable-conn-area-mother{}
.err404-layer-cable-conn-area-mother1,
.err404-layer-cable-conn-area-father1{
width: 5px;
height: 10px;
}
.err404-layer-cable-line,
.err404-layer-cable-conn-area-mother1,
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-mother3,
.err404-layer-cable-conn-area-father1,
.err404-layer-cable-conn-area-father2,
.err404-layer-cable-conn-area-father3,
.err404-layer-cable-conn-area-father31,
.err404-layer-cable-conn-area-father41{
border-top-width: 2px;
border-bottom-width: 2px;
}
.err404-layer-cable-conn-area-mother1,
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-mother3,
.err404-layer-cable-conn-area-father3,
.err404-layer-cable-conn-area-father41{
border-left-width: 2px;
}
.err404-layer-cable-conn-area-mother1,
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-mother3{
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.err404-layer-cable-conn-area-mother2,
.err404-layer-cable-conn-area-father2{
width: 10px;
height: 30px;
}
.err404-layer-cable-conn-area-mother21,
.err404-layer-cable-conn-area-father21{
width: 2px;
height: calc(100% - 10px);
background: #e75038;
}
.err404-layer-cable-conn-area-mother3,
.err404-layer-cable-conn-area-father3{
width: 15px;
height: 40px;
}
.err404-layer-cable-conn-area-mother4{
width: 2px;
height: calc(100% - 4px);
border-radius: 4px;
border-width: 2px;
}
.err404-layer-cable-conn-area-father{}
.err404-layer-cable-conn-area-father1,
.err404-layer-cable-conn-area-father2,
.err404-layer-cable-conn-area-father3,
.err404-layer-cable-conn-area-father31{
border-right-width: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.err404-layer-cable-conn-area-father3{}
.err404-layer-cable-conn-area-father31{
width: 5px;
height: 2px;
}
.err404-layer-cable-conn-area-father4{
width: 10px;
height: 100%;
}
.err404-layer-cable-conn-area-father41{
width: calc(100% - 2px);
height: 4px;
}