Last active
March 25, 2023 11:38
-
-
Save Hazelwu2/40bea68ff873582dc6d3c677c6da825c to your computer and use it in GitHub Desktop.
React Photo Search App.scss
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| font-family: sans-serif; | |
| } | |
| h1 { | |
| color: coral; | |
| } | |
| .grid-container { | |
| columns: 5 200px; | |
| column-gap: 1.5rem; | |
| width: 90%; | |
| margin: 0 auto; | |
| div { | |
| width: 150px; | |
| margin: 0 1.5rem 1.5rem 0; | |
| display: inline-block; | |
| width: 100%; | |
| border: solid 2px black; | |
| padding: 5px; | |
| box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); | |
| border-radius: 5px; | |
| transition: all 0.25s ease-in-out; | |
| &:hover img { | |
| filter: grayscale(0); | |
| } | |
| &:hover { | |
| border-color: coral; | |
| } | |
| img { | |
| width: 100%; | |
| filter: grayscale(100%); | |
| border-radius: 5px; | |
| transition: all 0.25s ease-in-out; | |
| } | |
| p { | |
| margin: 5px 0; | |
| padding: 0; | |
| text-align: center; | |
| font-style: italic; | |
| } | |
| } | |
| } | |
| .item { | |
| margin: 0 1.5rem 1.5rem 0; | |
| display: inline-block; | |
| width: 100%; | |
| border: solid 2px black; | |
| padding: 5px; | |
| box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); | |
| border-radius: 5px; | |
| transition: all 0.25s ease-in-out; | |
| } | |
| .input { | |
| background: #fff; | |
| border: 0; | |
| border-radius: 6px; | |
| color: #333; | |
| font-size: 16px; | |
| line-height: 23px; | |
| margin-right: 1.5rem; | |
| padding: 12px 16px; | |
| width: 200px; | |
| border: 1px solid #333; | |
| } | |
| button[type='submit'] { | |
| padding: 12px 16px; | |
| background: transparent; | |
| border: 1px solid #333; | |
| border-radius: 6px; | |
| } | |
| .grid { | |
| width: 90%; | |
| margin: 2rem; | |
| column-count: 4; | |
| column-gap: 15px; | |
| } | |
| .grid > div { | |
| grid-template-rows: 1fr auto; | |
| margin-bottom: 1.5em; | |
| break-inside: avoid; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 5px; | |
| border: 1px solid rgba(255, 255, 255, 0.425); | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| .grid > div > img { | |
| grid-column: 1; | |
| object-fit: cover; | |
| height: 100%; | |
| width: 100%; | |
| max-width: 100%; | |
| border-radius: 5px; | |
| vertical-align: top; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment