diff --git a/src/App.css b/src/App.css index d075b6c..b509da4 100644 --- a/src/App.css +++ b/src/App.css @@ -2,6 +2,7 @@ background-color: #121212; font-family: 'Courier New', Courier, monospace; overflow-x: hidden; + color: pink; } .header { @@ -10,13 +11,62 @@ align-items: center; justify-content: center; } + +.cardchild h1 { + text-align: center; +} + +.cardchild img { + max-width: 4em; + margin: 1em; +} + +.cardchild { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* browsers agreeing on stuff challenge (impossible) */ + cursor: default; + background-color: #272525; + border-radius: 5%; + width: 20em; + padding: 0.5em 2em 2em 2em; + transform: translateY(-0em); + transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s; +} + +.cardchild:hover { + box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75); + -webkit-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75); + -moz-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75); + background-color: #5e5a5a; + animation: big 500ms infinite; + transform: translateY(-0.3em); + transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s; +} + +.parent { + width: 100%; + height: 100%; + display: flex; + justify-content: space-evenly; +} + .header h1 { font-size: 2.5em; - color:blanchedalmond; + color: blanchedalmond; display: inline-table; } -.header h1:not(:active){ +.cardchild h2 { + display: inline-table; + vertical-align: text-bottom; +} + +.header h1:not(:active) { animation: slide-right 1.5s; } @@ -29,7 +79,7 @@ margin-right: 1em; vertical-align: middle; max-width: 10em; - animation: slide-left 1.5s ; + animation: slide-left 1.5s; } @keyframes slide-left { @@ -53,9 +103,23 @@ } @keyframes shake { - 0% { transform: translate(0, 0) rotate(0deg); } - 25% { transform: translate(5px, 5px) rotate(5deg); } - 50% { transform: translate(0, 0) rotate(0eg); } - 75% { transform: translate(-5px, 5px) rotate(-5deg); } - 100% { transform: translate(0, 0) rotate(0deg); } + 0% { + transform: translate(0, 0) rotate(0deg); + } + + 25% { + transform: translate(5px, 5px) rotate(5deg); + } + + 50% { + transform: translate(0, 0) rotate(0eg); + } + + 75% { + transform: translate(-5px, 5px) rotate(-5deg); + } + + 100% { + transform: translate(0, 0) rotate(0deg); + } } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 32f0189..f29e9e2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,19 +1,44 @@ import { createSignal } from 'solid-js' import './App.css' import HoverComponent from './components/name' +import AdvancedBr from './components/comps' +import Review from './components/api' function App() { - const [count, setCount] = createSignal(0) return ( <> -
AdvancedBr my beloved
+