Untitled
unknown
css
a year ago
2.4 kB
6
Indexable
hr { background-color: rgba(27, 48, 34, 0); height: 2em; border: none; } #aside-low { height: 30em; } #cards { display: grid; grid-template-rows: 1fr 10fr; height: 45em; } .titlo { color: var(--color-orange); text-align: center; padding: 20px 0px; color: white; font-size: 4em; } .wrapper { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 6fr 1fr; align-items: center; justify-items: center; } .carousel { display: flex; justify-content: space-around; align-items: center; width: 100%; height: 100%; } .card_animais { background-color: var(--cor5); display: grid; border-radius: 5%; border: solid 2px var(--cor4); grid-template-rows:10fr 1fr; width: 26em; height: 95%; text-align: center; } .img{ width: 100%; transition: 1s; filter: grayscale(100%); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 5% 5% 0% 0%; } .img:hover{ filter: grayscale(0%); } .leao{ background-image: url(/src/img/Lion.jpg); background-position: 45%; } .camaleao{ background-image: url(/src/img/camaleao.jpg); background-position: 36%; } .lobo{ background-image: url(/src/img/lobo.jpg); background-position: 36%; } .card_animais h2{ font-size: 2em; color: #fff; padding: 7px; } #left img{ width: 7em; background-color: var(--cor4); border-radius: 50%; padding: 5px 5px 5px 7px; transition: 0.5s; } #left img:hover{ scale: 1.1; background-color: var(--cor3); } #left{ background-color:transparent; border: none; } #right img{ width: 7em; background-color: var(--cor4); border-radius: 50%; padding: 5px 5px 5px 7px; transition: 0.5s; } #right img:hover{ scale: 1.1; background-color: var(--cor3); } #right{ background-color:transparent; border: none; } footer{ display: flex; justify-content: center; align-items: center; height: 4em; background-color: rgb(0, 0, 0); color: #fff; font-size: 2em; } footer a { color: var(--cor4); transition: 0.1s; } footer a:hover{ color: var(--cor3); }
Editor is loading...
Leave a Comment