css3

Data utworzenia: 29-10-2024 07:26:47
/* * czyli wszystko */
/* margin na zewnatrz dokumentu o -> na zewnatrz kwadratu
    padding wewnatrz dokumentu do srodka kwadratu np */
*{
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

html{
    font-size: 24px; /* fz */
}

body{
    font-family: Arial, sans-serif; /* ffss */
    background-color: #222; /* bgc */
}

.container{
    display: flex;
    justify-content: center;
}

.square{
    width: 200px; /* w200 */
    /* jesli chce 200% to będzie w200p */
    height: 200px; /* h200 */
    background: #fff;

    /* przy dwóch wartościach góra,dół np 10px i prawo,lewo 0 to margin:10px 0 */
    
    /* margin: 10px 0; */
    margin: 10px;
    border: 2px solid blue;
    border-radius: 10px;
}

.pierwszy{
    background-color: rgb(26, 164, 26);
    border: 2px solid green;
    box-shadow: 0 0 15px green;
}

.drugi{
    background-color: rgb(176, 115, 9);
    border: 2px solid rgb(187, 126, 20);
    box-shadow: 0 0 15px rgb(255, 251, 0);
}

.trzeci{
    background-color: #e96b99;
    border: 2px solid rgb(235, 62, 62);
    box-shadow: 0 0 15px pink;
}

.czwarty{
    background-color: #3700ff;
    border: 2px solid blue;
    box-shadow: 0 0 15px rgb(119, 119, 246)
}

.container2{
    display: flex;
    justify-content: center;
}

.square1{
    width: 200px; /* w200 */
    /* jesli chce 200% to będzie w200p */
    height: 200px; /* h200 */
    
        /* przy dwóch wartościach góra,dół np 10px i prawo,lewo 0 to margin:10px 0 */
        
        /* margin: 10px 0; */
    margin: 10px;
    border: 2px solid #fff;
    border-radius: 10px;
    
    /* bgi */
    background-image: url(../zdjecie.jpg);
    background-size: contain;
}
p{
    color:blueviolet;
}
.text{
    color:chartreuse;
}