Projekt (2) Karty Animowanej na stronę internetową lub bloga

🔧 MOdelarstwo kartonowe, Mały Modelarz i własne projekty 🔧

Projekt (2) Karty Animowanej na stronę internetową lub bloga

w dniu marca 06, 2021

Zapraszam do przeglądania kodu html i css3

Kochani jeśli podoba ci się to co robię i zawieszam na blogu. Proszę ciebie o wsparcie , abym mógł tworzyć dalej projekty i zawieszać na blogu.

Można wpłacać na PayPal lub zakupić świeczki na moim blogu ŚWIECZKI PARTLITE

Poniżej projekt razem z kodem

Below is the project with the code

KOD HTML KOD CSS3

body
{
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;

}
*
{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.box{
    position: relative;
    border-radius: 8px;
    width: 400px;
    height: 400px;
    background: black;
}
.content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    align-items: center;
    color: white;
    padding: 20px;
    font-family: consolas;
    text-align: center;
}
.content a
{
    background-color: #4CAF50;
    border-radius: 4px;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: 0.5s;
}
.content a:hover
{
    color: white;
    background: #1DEA3C ;
}
.box img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    -webkit-clip-path: polygon(0 0, 100% 0,100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 1s;
    
    
}
.box:hover img
{
    -webkit-clip-path: polygon(0 0, 100% 0,100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%); 
}

Kod jest ustawiony na mojego bloga. Bloga mam na Google. Można zaimplementować w kodzie PHP.
The code is set to my blog. I have a blog on Google. Can be implemented in PHP code.
Der Code ist auf meinen Blog eingestellt. Ich habe einen Blog bei Google. Kann in PHP-Code implementiert werden.
El código está configurado en mi blog. Tengo un blog en Google. Se puede implementar en código PHP.

ATOM CRAFT MAXIMO

Szukaj na tym blogu

Projekt (2) Karty Animowanej na stronę internetową lub bloga

Komentarze