balki/collage-maker
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

add tenspl template

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2024-08-13 17:18:10 -04:00
parent 3d044b5076
commit e67fa7b279
3 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/index.css
View File

@ -167,6 +167,27 @@
"A A A" "A A A"
"B C D"; "B C D";
} }
.one-three-topbottom .img1 { .one-three-topbottom .img1 {
grid-area: A; grid-area: A;
} }
.ten-spl {
display: grid;
grid-template-areas:
"A A A B B B"
"C D D E E F"
"G D D E E H"
"I I I J J J";
}
.ten-spl .img1 { grid-area: A; }
.ten-spl .img2 { grid-area: B; }
.ten-spl .img3 { grid-area: C; }
.ten-spl .img4 { grid-area: D; }
.ten-spl .img5 { grid-area: E; }
.ten-spl .img6 { grid-area: F; }
.ten-spl .img7 { grid-area: G; }
.ten-spl .img8 { grid-area: H; }
.ten-spl .img9 { grid-area: I; }
.ten-spl .img10 { grid-area: J; }

14
web/index.html
View File

@ -156,6 +156,20 @@
<div class="img img4"></div> <div class="img img4"></div>
</div> </div>
</li> </li>
<li>
<div class="template ten-spl">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
</div>
</li>
</ul> </ul>
</div> </div>

22
web/splgrid.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="template ten-spl">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
</div>
</body>
</html>