MSN Messenger Layout

Tags: msn, messenger, internet, hotmail, vista, windows
Description:

Voici ma propre mise en page du thème Windows Vista & MSN Messenger sur SpaceHey. 🦋🌐 Des indications de : Pourra t'aider pour comprendre chaque morceau de ce code.
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by TektoRock (https://layouts.spacehey.com/layout?id=39237) -->

<style>

    :root {
        --logo-blue: #d7e1e3;
        --darker-blue: #E41a66;
        --lighter-blue: #c3d0d4;
        --even-lighter-blue: #ccc;
        --lightest-blue: #E41a66;
        --dark-orange: #333;
        --light-orange: #E41a66;
        --even-lighter-orange: #000000;
        --green: #000000;
    }

    * {
        font-family: monospace;
    }
    
 .contact {
  border-radius: 10px;
  background: url(https://images-ext-1.discordapp.net/external/NZqhBUyE4C1xfPRhzucvuvBnq1dHDVjvcw99lEfJhi8/https/www.informatiquegifs.com/fonds/1024/msn/01.jpg);
  background-position: left top;
  background-repeat: repeat;
  padding: 0px;
  width: 0px;
  height: 0px;
   color:#ffffff

}

    
    
    

    body
        {background: url("https://media.discordapp.net/attachments/1142061315662287020/1143832728878469120/skymsn.jpg")
        fixed; background-size:;
        
        }
    .url-info{display:none !important;}

     }

    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: black;
    }

    .blog-preview p a{
        color: #66CDAA!important;
    }

    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: white!important;
    }

    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
    }

    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }

    table.details-table {
        border-collapse: collapse;
    }

    table.details-table td {
        background-color: transparent !important;
    }

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }

    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #000000 !important;
        border-bottom: 2px solid;
    }

    main {
        border-radius: 0 0 15px 15px;
        background: url(https://media.discordapp.net/attachments/1142061315662287020/1143853344994107472/msnabstract.png);
    }

    .container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }

    footer {
        border-radius: 15px;
        background: url(https://media.discordapp.net/attachments/1142061315662287020/1143853344994107472/msnabstract.png);
        display: block !important;
    }

    table.comments-table td {
        background-color: white !important;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }

    .profile .friends .person img {
        border-radius: 500px;
    }
    
     table.comments-table td {
        background-color: rgba(230, 234, 235, 1.0) !important;
    }

    .blog-preview p {
        font-size:0.9rem;
    }
    
    table.comments-table{
display: block;
height: 220px!important;
overflow-y: scroll;
}


    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }

</style>
<!-- Logo MSN dans la Nav -->

<style>
     .logo{content: url(https://thumbs.gfycat.com/UnsightlyUnconsciousGermanshepherd.webp);width: 80px !important;height: 80px !important;}</style>

<!-- Logo en Ligne -->

<style>.online{content: url("https://media.discordapp.net/attachments/1142061315662287020/1143841625504747611/msnonline.gif") !important;width: 298px !important;height: 105px !important;}</style>

<!-- Logo Vista -->

<style>
     .general-about img {-webkit-mask-image: url(https://media.discordapp.net/attachments/1142061315662287020/1143266330015973526/FyaPV.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center; width: 300px; height: 300px;}</style>

<!-- Profil Vista Ami -->

<style>
     .profile .friends .person img {-webkit-mask-image: url(https://media.discordapp.net/attachments/1142061315662287020/1143266330015973526/FyaPV.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center; width: 150px; height: 150px;}>

<!-- Profil Vista Commentaire -->

<style>
     .comments-table td:first-child img {-webkit-mask-image: url(https://media.discordapp.net/attachments/1142061315662287020/1143266330015973526/FyaPV.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}>



<!-- Curseur -->

<style>body { cursor: url('http://www.rw-designer.com/cursor-view/185279.png'), auto; }</style>

<!-- Déco Pied de Page -->

<style>
     footer {
        border-radius: 15px;
        background: url(https://media.discordapp.net/attachments/1142061315662287020/1143853344994107472/msnabstract.png);
        display: block !important;}</style>

<!-- Déco Page du Profil -->

<style>
    main {
        border-radius: 0 0 15px 15px;
        {background: url(https://media.discordapp.net/attachments/1142061315662287020/1143853344994107472/msnabstract.png); 
        width: 15px;
        height: 15px};}</style>

<!-- Banderole du Profil -->

<style>
main:before {
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://media.discordapp.net/attachments/1142061315662287020/1143641666683678813/cute-emo-pfp-15.png');
 background-position: center center;
 background-size: cover;
 </style>

<!-- Embed Youtube -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/qnuTAa8LQiA//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<!-- Introduction du Profil -->

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://i.makeagif.com/media/9-04-2016/r_BhGs.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }</style>

<!-- Mettre en avant la page du Profil -->

<style>
nav, footer {
	margin: 1em;
	position: relative;
	box-shadow: 5px 8px 10px #0006;
}</style>

<!-- Skin Cloche de Notification -->

<style>li.active .icon { content:url('https://www.flava.co.nz/media/1772223/giphy.gif'); width: 25PX;height: 20px;}</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
Unaun👍
1703993932
cool 👍
Report Comment