Creating a brick style image pattern using CSS
Description
hello world. good morning.
CSS Source Code
/****** Image size patter*****/
.home1 .item1{
width: 17.5%;
}
.home1 .item1:nth-child(2){
width:25%;
}
.home1 .item1:nth-child(3){
width:37%;
}
.home1 .item1:nth-child(4){
width:17.5%;
}
.home1 .item1:nth-child(5){
width:25%;
}
.home1 .item1:nth-child(6){
width:17.5%;
}
.home1 .item1:nth-child(7){
width:17.5%;
}
.home1 .item1:nth-child(8){
width:37%;
}
.home1 .item1:nth-child(9){
width:37%;
}
.home1 .item1:nth-child(10){
width:25%;
}
.home1 .item1:nth-child(11){
width:17.5%;
}
.home1 .item1:nth-child(12){
width:17.5%;
}
.home1 .item1:nth-child(4), .home1 .item1:nth-child(8) {
padding-right: 0px;
}
.home1 .item1:nth-child(5), .home1 .item1:nth-child(9) {
padding-left: 0px;
}
/* number at end is starting the point and first number is the pattern*/
.home1 .item1:nth-child(12n+13) {
width: 17.5%;
}
.home1 .item1:nth-child(12n+14){
width:25%;
}
.home1 .item1:nth-child(12n+15){
width:37%;
}
.home1 .item1:nth-child(12n+16){
width:17.5%;
}
.home1 .item1:nth-child(12n+17) {
width: 25%;
}
.home1 .item1:nth-child(12n+18){
width:17.5%;
}
.home1 .item1:nth-child(12n+19){
width:17.5%;
}
.home1 .item1:nth-child(12n+20) {
width: 37.0%;
}
.home1 .item1:nth-child(12n+21) {
width: 37%;
}
.home1 .item1:nth-child(12n+22){
width:25%;
}
.home1 .item1:nth-child(12n+23){
width:17.5%;
}
.home1 .item1:nth-child(12n+24) {
width: 17.5%;
}
.home1 .item1:nth-child(4n+4), .home1 .item1:nth-child(8n+4), .home1 .item1:nth-child(12n+4) {
padding-right: 0px;
}
.home1 .item1:nth-child(12n+13), .home1 .item1:nth-child(12n+17), .home1 .item1:nth-child(12n+21){
padding-left: 0px;
}
