Отредактировано Маркус Нойманн (2023-04-21 12:51:59)

[html]
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"><!-- COULEURS PERSONNALISABLES --><div class="THROW" style="    margin: auto; background:rgba(0,0,0,0.6);"><!-- TITRE --><div class="tleTHROW" style="display:none; background:#212121; color:lightgrey;"></div><!-- FT --><div class="ftTHROW"><!-- CONTENU --><p style="    margin: 20px -2px;     background: #4e2d23b3; color:white;">Особняк семейства Нойманн</p><!-- IMAGE 500*150 - REDIMENSIONNEMENT AUTOMATIQUE --><img src="https://s1.hostingkartinok.com/uploads/images/2023/04/ee2acf396e13b238a8ef70b05bce8af1.png" /></div><!-- MESSAGE --><div class="msgTHROW" style="color:black;">
<!-- DIALOGUE GAUCHE --><div class="UITHROW" style="background-image: linear-gradient(45deg, black, transparent);
    color: #f8d4d4;
    text-shadow: 1px -1px 3px #300000;">Большая часть территории занята полем и частью леса. Дом большой, старый и очень ухоженный. Белоснежный, так что большую часть дней в году сливается с окружающей действительностью, за исключением короткого лета. В огромном доме всегда горит свет, не редко можно услышать голоса разных животных и птиц. Есть оранжерея, в виде одноэтажной крупной пристройки и огромная куча комнат. Несколько из них, в независимости от ситуации, могут использоваться только одним членом семьи, даже если тот на данный момент не живёт дома.На территории есть небольшое и неглубокое, но очень живописное озеро, часто используется как каток, да множество маленьких разнообразных "домиков" для питомцев. </div>
<!-- FIN DIALOGUE DROITE --></div></div>

<style>
.THROW {
margin:auto;
width:500px; padding:20px 0; line-height:16px;
box-shadow:0 0 10px rgba(0,0,0,0);
}
.tleTHROW {
margin:auto;
width:450px; padding:10px 5px;
text-align:center; text-transform:uppercase; font-size:24px; font-family:Raleway; line-height:24px;
}
/* FT */
.ftTHROW {
margin:15px auto; width:498px; height:410px; overflow:hidden; text-align:center;    border: 1px dotted;
    border-color: bisque;
}
.ftTHROW img{
width:500px;
}
.ftTHROW:hover img {
filter:grayscale(1); -webkit-filter:grayscale(1);
}
.ftTHROW p{
    position: absolute;
    top: 30px;
width: 500px;
    padding: 13px 1px;
    font-family: 'Zeferino Three';
    font-size: 40px !important;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    z-index: 3;
}

.ftTHROW:hover p{
opacity:1;
}
.msgTHROW {
    z-index: 100;
    position: absolute;
    margin: -220px 20px 0;
    width: 440px;
    padding: 10px;
    font-size: 12px;
    text-align: justify;
    font-style: italic;
    font-family: inherit;
}
/* DIALOGUE GAUCHE */
.UITHROW {
margin:5px 0 5px -45px;
width:455px; padding:10px 10px 10px 20px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.UITHROW::before {
content:''; position:absolute; margin-top:-25px; margin-left:-20px;
width:0; height:0; border-style:solid; border-width:0 0 15px 15px; border-color:transparent; border-bottom-color:black;
}
/* DIALOGUE DROITE */
.UIITHROW {
margin:5px 0;
width:455px; padding:10px 20px 10px 10px;
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
.UIITHROW::before {
content:''; position:absolute; margin-top:-25px; margin-left:460px;
width:0; height:0; border-style:solid; border-width:15px 0 0 15px; border-color:transparent; border-left-color:black;
}
.cdtTHROW {
position:absolute; z-index:3; margin-left:485px; margin-top:85px;
transform:scale(0); -webkit-transform:scale(0); transition:transform ease-in-out 0.75s; -webkit-transition:-webkit-transform ease-in-out 0.75s;
}
.THROW:hover .cdtTHROW {
transform:scale(1); -webkit-transform:scale(1);
}
</style>
[/html]

Отредактировано Маркус Нойманн (2023-04-21 13:05:51)