Commit 16aed30

author

Ritam Chakraborty

committed

Add style

1 parent 5215308 commit 16aed30Copy full SHA for 16aed30

File tree

+72

-7

lines changed

+72

-7

lines changed

Lines changed: 3 additions & 7 deletions

Original file line number	Diff line number	Diff line change
`@@ -3,23 +3,19 @@`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="UTF-8">`
`5`	`5`	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`6`	`+ <link rel="stylesheet" href="style.css">`
`6`	`7`	`<title>Image Search Engine App</title>`
`7`	`8`	`</head>`
`8`	`9`	`<body>`
`9`	`10`	`<main>`
`10`	`11`	`<h1>image search engine</h1>`
`11`	`12`	`<form>`
`12`	`13`	`<input type="text" id="query" placeholder="Search anything here...">`
`13`		`- <button type="submit">Search</button>`
	`14`	`+ <button type="submit"class="search">Search</button>`
`14`	`15`	`</form>`
`15`	`16`	`<div class="images">`
`16`		`- <img src="http://picsum.photos/200/130" alt="">`
`17`		`- <img src="http://picsum.photos/200/130" alt="">`
`18`		`- <img src="http://picsum.photos/200/130" alt="">`
`19`		`- <img src="http://picsum.photos/200/130" alt="">`
`20`		`- <img src="http://picsum.photos/200/130" alt="">`
`21`		`- <img src="http://picsum.photos/200/130" alt="">`
`22`	`17`	`</div>`
	`18`	`+ <button class="show-more">Show more</button>`
`23`	`19`	`</main>`
`24`	`20`	`</body>`
`25`	`21`	`</html>`

Lines changed: 69 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,69 @@`
	`1`	`+body {`
	`2`	`+ background-color: #4c4585;`
	`3`	`+ font-family: sans-serif;`
	`4`	`+}`
	`5`	`+`
	`6`	`+main {`
	`7`	`+ max-width: 36rem;`
	`8`	`+ margin-inline: auto;`
	`9`	`+ padding: 1rem;`
	`10`	`+ display: flex;`
	`11`	`+ flex-direction: column;`
	`12`	`+ gap: 3rem;`
	`13`	`+ align-items: center;`
	`14`	`+}`
	`15`	`+`
	`16`	`+h1 {`
	`17`	`+ color: #FAFAFA;`
	`18`	`+ margin: 0;`
	`19`	`+}`
	`20`	`+`
	`21`	`+form {`
	`22`	`+ display: flex;`
	`23`	`+}`
	`24`	`+`
	`25`	`+input {`
	`26`	`+ width: 15rem;`
	`27`	`+ padding: 1rem;`
	`28`	`+ border-radius: 0.25rem 0 0 0.25rem;`
	`29`	`+ background-color: rgba(255, 255, 255, 0.1);`
	`30`	`+ color: #FAFAFA;`
	`31`	`+}`
	`32`	`+`
	`33`	`+input::placeholder {`
	`34`	`+ color: #FAFAFA;`
	`35`	`+}`
	`36`	`+`
	`37`	`+button {`
	`38`	`+ width: 5rem;`
	`39`	`+ background-color: #E2703A;`
	`40`	`+ color: #FAFAFA;`
	`41`	`+}`
	`42`	`+`
	`43`	`+input, button {`
	`44`	`+ border: none;`
	`45`	`+}`
	`46`	`+`
	`47`	`+:is(input, button):is(:focus, :active) {`
	`48`	`+ border: none;`
	`49`	`+ outline: none;`
	`50`	`+}`
	`51`	`+`
	`52`	`+.search {`
	`53`	`+ border-radius: 0 0.25rem 0.25rem 0;`
	`54`	`+}`
	`55`	`+`
	`56`	`+.images {`
	`57`	`+ display: grid;`
	`58`	`+ gap: 2rem;`
	`59`	`+}`
	`60`	`+`
	`61`	`+img {`
	`62`	`+ border-radius: 0.25rem;`
	`63`	`+}`
	`64`	`+`
	`65`	`+.show-more {`
	`66`	`+ padding: 0.75rem 1rem;`
	`67`	`+ width: max-content;`
	`68`	`+ border-radius: 0.25rem;`
	`69`	`+}`

Comments

(0)