├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Image Search using AlpineJS 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Image Search

19 |
20 |
21 | 22 | 23 |

* powered by pixabay

24 |
25 |
26 |
27 | 32 |
33 |
34 | 35 | 36 | 37 | 54 | 55 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { margin-left: calc(100vw - 100%); } 2 | h1{ 3 | text-align: center; 4 | font-size: 48px; 5 | font-weight: 300; 6 | margin-top:150px; 7 | font-family: 'Playfair Display', serif; 8 | } 9 | .search{ 10 | display:flex; 11 | align-items: center; 12 | justify-content: center; 13 | margin-top:70px; 14 | margin-bottom:200px; 15 | } 16 | 17 | .search p{ 18 | color: #bbb; 19 | font-size:12px; 20 | } 21 | 22 | .search input{ 23 | font-size:24px; 24 | padding:10px 20px; 25 | width:400px; 26 | border:1px solid #bbb; 27 | } 28 | 29 | .search input::placeholder{ 30 | color:#ccc; 31 | font-weight: 300; 32 | } 33 | 34 | .search button{ 35 | font-size:24px; 36 | font-weight: 300; 37 | padding:10px 20px; 38 | margin-left:10px; 39 | border:1px solid #bbb; 40 | } 41 | 42 | .search-result{ 43 | margin-left: auto; 44 | margin-right: auto; 45 | display:grid; 46 | grid-template-columns: repeat(3,1fr); 47 | grid-auto-rows: 1fr; 48 | column-gap: 5px; 49 | row-gap: 1px; 50 | width:1600px; 51 | } 52 | 53 | .search-result img{ 54 | width:100%; 55 | height: 353px; 56 | object-fit: cover; 57 | } --------------------------------------------------------------------------------