diff --git a/README.md b/README.md deleted file mode 100644 index 94cfe1c..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# AdoptMe -🐶 Landing page for Adoptme NGO diff --git a/img/Mask group-1.svg b/img/Mask group-1.svg deleted file mode 100644 index d0ae36c..0000000 --- a/img/Mask group-1.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/img/Mask group-2.svg b/img/Mask group-2.svg deleted file mode 100644 index b2a11eb..0000000 --- a/img/Mask group-2.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/img/Mask group-3.svg b/img/Mask group-3.svg deleted file mode 100644 index fd438c5..0000000 --- a/img/Mask group-3.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/img/Mask group.svg b/img/Mask group.svg deleted file mode 100644 index 9803b69..0000000 --- a/img/Mask group.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/img/adopt.png b/img/adopt.png new file mode 100644 index 0000000..0bbf4e7 Binary files /dev/null and b/img/adopt.png differ diff --git a/img/arrow 1.svg b/img/arrow 1.svg new file mode 100644 index 0000000..d0e6397 --- /dev/null +++ b/img/arrow 1.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/arrow 2.svg b/img/arrow 2.svg new file mode 100644 index 0000000..0a4951e --- /dev/null +++ b/img/arrow 2.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/cat&dog.png b/img/cat&dog.png new file mode 100644 index 0000000..da9aedb Binary files /dev/null and b/img/cat&dog.png differ diff --git a/svg/lupa.svg b/img/lupa.svg similarity index 100% rename from svg/lupa.svg rename to img/lupa.svg diff --git a/svg/patinha.svg b/img/patinha.svg similarity index 100% rename from svg/patinha.svg rename to img/patinha.svg diff --git a/index.html b/index.html index 86d9ab6..7c91b6a 100644 --- a/index.html +++ b/index.html @@ -6,153 +6,173 @@ - - - - + Adoptme + - +
-
-
-
-
-
-
-
-

Let´s Choose and

- patinha -
-
-
-

Adopt your new Pet


-
-
-
-
-

Adopt a pet, give them the best treatment, and you will feel - really happy of friendship with your pet.

+ + + +
+
+
+

Let's Choose and Patinha
Adopt your new Pet

+
+ +
+ Cachorros e gatos +
+
+ +
+
+

Adopt a pet, give them the best treatment,
and you will feel really happy of friendship
with your + pet.

+ + +
+
+ + + +
+
+

Supported by:

+ Ong + Ong + Ong + Ong +
+
+
+ +
+ + + +
+
+
+ +
+

our mission for pet

+

Let's Choose and Adopt your
New Lovely Pet

+
+
+

You need to see some pets in Adoptme. We have the friend that's you need to have. We + also have the equipment you need to take care of it.

+
+
+
+
+ + foto cachorro e gato +
+
+ +

adoptme community

+

Connect with adoptme
across the country

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, error molestiae + quasi + quibusdam sunt minus. Libero reprehenderit minima obcaecati odio doloremque similique incidunt natus quasi, + numquam voluptas quos non aspernatur.

+
+
+
+ +
+ 0+
+ proin vestibulum, duis. im dol.
-
-
-
-
- Adopt now -
-
-
Donate for food
 -
-
-
-
-
-
-
-

SUPPORTED BY:

-
-
-
-
-
-
- patrocinador -
-
- patrocinador -
-
- patrocinador -
-
- patrocinador -
-
+
+
+ 0+
+ proin ulduis. isimuim dol.
-
-
-
-
- imagens-dogs - imagens-dogs +
+
+ 0+ +
+ proin vestibulum, duis. im dua.
- - imagens-dogs - imagens-dogs -
-
- -
+
+ - - -
-

ADOPTION PET

+ +
+
+

ADOPTION PET

Adopt the pet that has
waited too long

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. It ac
purus eget. Sit dolor est proin vestibulum, duis. im dolor sit amet,
consectetur adipisci.

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. It ac
purus eget. Sit dolor + est proin vestibulum, duis. im dolor sit amet,
consectetur adipisci.

+ - + + + + - - - -
+ +
@@ -410,7 +432,7 @@

Sponsoring your pet
before adopt

- +
@@ -419,8 +441,7 @@

Sponsoring your pet
before adopt

-
- +
@@ -548,8 +569,7 @@

Adopt the pet that has
waited too long

-
+
  • What are the requirements for adopting a pet?
    • @@ -566,8 +586,7 @@

    Adopt the pet that has
    waited too long

    voluptas.
    -
    +
  • What kind of care should I give my pet?
    • @@ -655,10 +674,9 @@

    Adopt the pet that has
    waited too long

    - + - - + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..013520a --- /dev/null +++ b/script.js @@ -0,0 +1,70 @@ +const accordion_item = document.querySelectorAll(".accordion_item"); + +accordion_item.forEach((item) => { + const accordion_header_item = item.querySelector(".accordion_header"); + + accordion_header_item.addEventListener("click", () => { + const accordion_content_item = item.querySelector(".accordion_content"); + + const item_actived = document.querySelector(".active"); + + VerifyActive(item, accordion_content_item, item_actived); + }); +}); + +function VerifyActive(item, content, content_actived) { + const icon_item = item.querySelector(".icon"); + const icon_item_active = document.querySelectorAll(".icon"); + + icon_item_active.forEach((item) => (item.innerHTML = "^")); + + if (content_actived) { + content_actived.style.height = 0; + content_actived.classList.remove("active"); + } + + if (content !== content_actived) { + icon_item.innerHTML = "v"; + content.classList.add("active"); + content.style.height = content.scrollHeight + 10 + "px"; + } +} + +let valueDisplays = document.querySelectorAll(".number-counter"); +let interval = 5000; + +function isElementVisible(element) { + const rect = element.getBoundingClientRect(); + return ( + rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); +} + +function animateCounter(element) { + let startValue = 0; + let endValue = parseInt(element.getAttribute("finalValue")); + let duration = Math.floor(interval / endValue); + let counter = setInterval(function() { + startValue += 5; + element.textContent = startValue + "+"; + if (startValue >= endValue) { + clearInterval(counter); + } + }, duration); +} + +let observer = new IntersectionObserver(function(entries, observer) { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateCounter(entry.target); + observer.unobserve(entry.target); + } + }); +}); + +valueDisplays.forEach(valueDisplay => { + observer.observe(valueDisplay); +}); diff --git a/scripts/script.js b/scripts/script.js deleted file mode 100644 index 2420c62..0000000 --- a/scripts/script.js +++ /dev/null @@ -1,31 +0,0 @@ -const accordion_item = document.querySelectorAll(".accordion_item"); - -accordion_item.forEach((item) => { - const accordion_header_item = item.querySelector(".accordion_header"); - - accordion_header_item.addEventListener("click", () => { - const accordion_content_item = item.querySelector(".accordion_content"); - - const item_actived = document.querySelector(".active"); - - VerifyActive(item, accordion_content_item, item_actived); - }); -}); - -function VerifyActive(item, content, content_actived) { - const icon_item = item.querySelector(".icon"); - const icon_item_active = document.querySelectorAll(".icon"); - - icon_item_active.forEach((item) => (item.innerHTML = "^")); - - if (content_actived) { - content_actived.style.height = 0; - content_actived.classList.remove("active"); - } - - if (content !== content_actived) { - icon_item.innerHTML = "v"; - content.classList.add("active"); - content.style.height = content.scrollHeight + 10 + "px"; - } -} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b5ceadb --- /dev/null +++ b/style.css @@ -0,0 +1,649 @@ +@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap'); + +body { + background: linear-gradient(180deg, rgba(195, 222, 255, 0.33) 0%, rgba(216, 216, 216, 0) 76.04%, rgba(195, 222, 255, 0.215644) 100%); + font-family: 'Sawarabi Gothic'; + box-sizing: border-box; + margin: 0; + padding: 0; +} +/* fim da pag */ +.stories { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 26px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #637C95; + +} + +.before_adopt { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 59px; + color: #151515; +} + +.before_adopt_text { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 29px; + color: #6D6D6D; +} + +#Sponsor { + background: #304057; + border-radius: 10px; + width: 230px; + height: 63px; +} + +#Sponsor { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 32px; + text-align: center; + color: #FFFFFF; +} + +#Sponsor { + margin-top: -100px; + margin-left: 50px; +} + +#dog_stories { + margin-top: -260px; +} + +.content { + display: flex; + flex-direction: column; + gap: 10px; +} + +.accordion_item { + border-radius: 5px; +} + +.accordion_item:hover { + opacity: 0.9; +} + +.accordion_header { + padding: 10px; + cursor: pointer; + display: flex; + justify-content: space-between; +} + +.span-header { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 35px; + color: #304057; +} + +.accordion_content { + margin-left: 50px; + margin-right: 15px; + overflow: hidden; + height: 0; + transition: all .5s ease; + font-size: 14px; +} + +.active { + padding-bottom: 10px; +} + +span, +.icon { + font-weight: 600; +} + +.p-accordion { + text-align: justify; + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + + color: #6D6D6D; +} + +.forum { + padding-top: 5em; + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 18px; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #637C95; +} + +.adadopt-pet { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 48px; + line-height: 71px; + text-align: center; + color: #151515; +} + +.text-adopt-final { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 29px; + text-align: center; + color: #6D6D6D; +} + +#acordion1, +#acordion2 { + padding-top: 6em; +} + + +.rodape { + padding-top: 10em; +} + +footer { + + color: #fff; + padding: 20px; + border-top: solid 2px black; +} + +.geral { + border-top: 5px solid black; +} + +.copy { + justify-content: center; + align-items: center; +} + +.direitos { + padding-top: 1em; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 15px; + line-height: 20px; + letter-spacing: 0.1em; + color: #304057; + +} + +.Adoptme-footer { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 30px; + line-height: 35px; + color: #304057; +} + +.follow-us { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 35px; + color: #304057; +} + +.contact1 { + font-family: 'Sawarabi Gothic'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 35px; + color: #304057; + +} + +.contact2 { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 22px; + letter-spacing: 0.1em; + color: #304057; + +} + +.icons { + color: #304057; +} + +@media screen and (max-width: 990px) { + #Sponsor { + margin-top: auto; + margin-left: 20%; + width: 60%; + } + + #dog_stories { + margin-top: auto; + } + + .stories { + font-size: 20px; + + } + + .before_adopt { + font-size: 30px; + line-height: 40px; + margin-top: 1em; + } + + .before_adopt_text { + font-size: 13; + margin-top: 1em; + + } + +} + + +@media screen and (max-width: 990px) { + + .forum { + font-size: 15px; + } + + .adopt-pet { + font-size: 33px; + } + + .text-adopt-final { + font-size: 19px; + } + + .span-header { + font-size: 15px; + } + + .Adoptme-footer { + font-size: 15px; + } + + #pata { + width: 18px; + height: 15px; + } + + .follow-us { + font-size: 15px; + } + + .contact1 { + font-size: 13px; + } + + .contact2 { + font-size: 13px; + } + + .direitos { + font-size: 11px; + } + + #last_accordion { + display: none; + } + + #acordion2 { + padding-top: 10px; + margin-left: 10px; + width: 96%; + } +} + +/* Conect */ + +.conteiner-counter { + background-color: #FDFDFD; +} + +#missionChoose, +#adpComunity { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 26px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #637C95; +} + +#titleChose { + font-style: normal; + font-weight: 400; + font-size: 36px; + line-height: 43px; + color: #151515; + +} + +#titleConnect { + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 49px; + color: #151515; + +} + +#textAdoptsChoose, +#textAdoptsConnect { + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 29px; + color: #6D6D6D; +} + +#missionChoose { + margin-top: 20px; +} + +#textAdoptsChoose { + margin-top: 60px; +} + +#adpComunity, +#catDog { + margin-top: 80px; +} + +.number-counter { + color: #304057; + font-size: 40px; +} + +@media (max-width: 990px) { + + #catDog { + margin-top: 40px; + } + + #textAdoptsChoose { + margin-top: 10px; + } + + #missionChoose, + #adpComunity { + font-size: 14px; + line-height: 15px; + } + + #textAdoptsChoose, + #textAdoptsConnect { + font-size: 16px; + line-height: 19px; + } + + #titleChose, + #titleConnect { + font-size: 30px; + line-height: 32px; + } + + .number-counter { + font-size: 15px; + } +} + + +/* carrousel */ + + +.carousel-title { + font-size: 40px; + color: #151515; +} + +.carousel-p { + font-size: 20px; + color: #6D6D6D; +} + +.card { + padding: 10px; + border: none; + border-radius: 15px; + text-align: center; +} + +.card:hover { + box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.15); +} + +.gradiente { + width: 100%; + height: 100%; + background-image: linear-gradient(to top, black, rgba(255, 255, 255, 0)); + position: absolute; + border-radius: 10px; + opacity: 0.8; +} + +.days-waiting-text { + color: white; + position: absolute; + top: 90%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 18px; +} + +button.adopt { + border: none; + text-decoration: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #304057; + color: white; + font-size: 22px; + width: 197px; + height: 53px; + border-radius: 10px; + opacity: 0; +} + +.card:hover button.adopt { + opacity: 1; +} + +.card:hover .gradiente { + background-image: linear-gradient(to top, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.2)); +} + +.card:hover .days-waiting-text { + color: #151515; +} +.stories_carousel{ + color: #637C95; +} + +button.controle-carrossel { + border: none; + text-decoration: none; + background: none; +} + +@media screen and (min-width:990px) { + .cards-wrapper { + display: flex; + } + + .card { + margin: 0.5em; + width: calc(100%/4); + } + +} + +@media screen and (max-width:990px) { + + .card:not(:first-child) { + display: none; + } + + .card { + margin: 0.5em; + } + + .card:first-child { + margin-left: 0; + /* Remova a margem esquerda para o primeiro filho */ + } +} + +@media (max-width:990px) { + .stories_carousel { + font-size: 14px; + line-height: 15px; + } + + .carousel-title { + font-size: 30px; + line-height: 32px; + } + + .carousel-p { + font-size: 16px; + line-height: 19px; + } + +} + + +/* topo da pag */ + +.background { + background: linear-gradient(180deg, rgba(196, 222, 255, 0.33) 0%, rgba(216, 216, 216, 0) 54.69%, rgba(190, 220, 255, 0.215644) 100%); +} + +#TextAndButton { + margin-top: -350px; +} + +#AdoptButtonTop { + background: #304057; + border-radius: 10px; + width: 181px; + height: 59px; +} + +#AdoptButtonTop { + font-size: 20px; + line-height: 32px; + color: #FFFFFF; +} + +#AdoptButtonTop:hover { + background: #3f4652; +} + +#DonateButton { + background: none; + border-radius: 10px; + width: 181px; + height: 59px; + border: none; + margin-left: 10px; +} +#DonateButton:hover { + border: 1px solid #304057; +} + +.link_acesso { + color: #304057; + font-size: 20px; + line-height: 32px; +} + +#navItens { + font-size: 20px; + line-height: 29px; + color: #6D6D6D; +} +#pTextTop{ + font-size: 20px; + line-height: 29px; + color: #6D6D6D; +} + +#logoAdopt { + font-size: 24px; + line-height: 35px; + color: #304057; +} +#suported{ + font-size: 16px; + line-height: 24px; + text-transform: uppercase; + color: #304057; +} + +@media (max-width: 990px) { + #TextAndButton { + margin-top: 40px; + } + + #AdoptButtonTop { + margin-left: 35px; + width: 96px; + height: 31px; + font-size: 10px; + line-height: 15px; + } + + #DonateButton { + width: 106px; + height: 31px; + font-size: 10px; + line-height: 15px; + } + #pTextTop{ + font-size: 13px; + line-height: 19px; + margin-left: 15px; + } + #suported{ + font-size: 8px; + line-height: 10px; + } + .ong{ + width: 30px; + height: 30px; + } + #Ongs{ + margin-left: 80px; + } +} \ No newline at end of file diff --git a/styles/bottom-style.css b/styles/bottom-style.css deleted file mode 100644 index 012a48e..0000000 --- a/styles/bottom-style.css +++ /dev/null @@ -1,327 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap'); - -body { - background-color: #FDFDFD; -} - -.parte-final { - background: linear-gradient(180deg, rgba(195, 222, 255, 0.171) 0%, rgba(216, 216, 216, 0) 76.04%, rgba(195, 222, 255, 0.123) 100%); -} - -.cachorrinho { - background-color: #FDFDFD; - padding-bottom: 5em; - margin: 75px; -} - - -.stories { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 26px; - letter-spacing: 0.1em; - text-transform: uppercase; - color: #637C95; - -} - -.before_adopt { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 40px; - line-height: 59px; - color: #151515; -} - -.before_adopt_text { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 29px; - color: #6D6D6D; -} - -button.sponsor-btn{ - background: #304057; - border-radius: 10px; - width: 230px; - height: 63px; -} - -button.sponsor-btn{ - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 32px; - text-align: center; - color: #FFFFFF; -} - -button.sponsor-btn{ - margin-top: -100px; - margin-left: 50px; -} - -.img-fluid { - margin-top: -260px; -} - -.content { - display: flex; - flex-direction: column; - gap: 10px; -} - -.accordion_item { - border-radius: 5px; -} - -.accordion_item:hover { - opacity: 0.9; -} - -.accordion_header { - padding: 10px; - cursor: pointer; - display: flex; - justify-content: space-between; -} - -.span-header { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 35px; - color: #304057; -} - -.accordion_content { - margin-left: 50px; - margin-right: 15px; - overflow: hidden; - height: 0; - transition: all .5s ease; - font-size: 14px; -} - -.active { - padding-bottom: 10px; -} - -span, -.icon { - font-weight: 600; -} - -.p-accordion { - text-align: justify; - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 24px; - - color: #6D6D6D; -} - -.forum { - padding-top: 5em; - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 18px; - text-align: center; - text-transform: uppercase; - letter-spacing: 0.1em; - color: #637C95; -} - -.adadopt-pet { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 48px; - line-height: 71px; - text-align: center; - color: #151515; -} - -.text-adopt-final { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 29px; - text-align: center; - color: #6D6D6D; -} - -#acordion1, -#acordion2 { - padding-top: 6em; -} - - -.rodape { - padding-top: 10em; -} - -footer { - - color: #fff; - padding: 20px; - border-top: solid 2px black; -} - -.geral { - border-top: 5px solid black; -} - -.copy { - justify-content: center; - align-items: center; -} - -.direitos { - padding-top: 1em; - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-size: 15px; - line-height: 20px; - letter-spacing: 0.1em; - color: #304057; - -} - -.Adoptme-footer { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 30px; - line-height: 35px; - color: #304057; -} - -.follow-us { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 35px; - color: #304057; -} - -.contact1 { - font-family: 'Sawarabi Gothic'; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 35px; - color: #304057; - -} - -.contact2 { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 22px; - letter-spacing: 0.1em; - color: #304057; - -} - -.icons { - color: #304057; -} - -@media screen and (max-width: 990px) { - button.sponsor-btn{ - margin-top: auto; - margin-left: 20%; - width: 60%; - } - - .img-fluid{ - margin-top: auto; - } - - .stories{ - font-size: 20px; - - } - .before_adopt{ - font-size: 30px; - line-height: 40px; - margin-top: 1em; - } - .before_adopt_text{ - font-size: 13; - margin-top: 1em; - - } - -} - - -@media screen and (max-width: 990px) { - - .forum { - font-size: 15px; - } - - .adopt-pet { - font-size: 33px; - } - - .text-adopt-final { - font-size: 19px; - } - - .span-header { - font-size: 15px; - } - - .Adoptme-footer { - font-size: 15px; - } - - #pata { - width: 18px; - height: 15px; - } - - .follow-us { - font-size: 15px; - } - - .contact1 { - font-size: 13px; - } - - .contact2 { - font-size: 13px; - } - - .direitos { - font-size: 11px; - } - - #last_accordion { - display: none; - } - - #acordion2 { - padding-top: 10px; - margin-left: 10px; - width: 96%; - } -} diff --git a/styles/carousel-style.css b/styles/carousel-style.css deleted file mode 100644 index 31b47a2..0000000 --- a/styles/carousel-style.css +++ /dev/null @@ -1,111 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap'); - -* { - font-family: 'Sawarabi Gothic', sans-serif; -} - -.conteiner-carrossel { - /* background-color: #FDFDFD; */ - background-color: #FDFDFD; - padding-bottom: 5em; - margin: 75px; - } - - .carousel-title { - font-size: 40px; - color: #151515; - } - - .carousel-p { - font-size: 20px; - color: #6D6D6D; - } - - .card { - padding: 10px; - border: none; - border-radius: 15px; - text-align: center; - } - - .card:hover { - box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.15); - } - - .gradiente { - width: 100%; - height: 100%; - background-image: linear-gradient(to top, black, rgba(255, 255, 255, 0)); - position: absolute; - border-radius: 10px; - opacity: 0.8; - } - - .days-waiting-text { - color: white; - position: absolute; - top: 90%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 18px; - } - - button.adopt { - border: none; - text-decoration: none; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #304057; - color: white; - font-size: 22px; - width: 197px; - height: 53px; - border-radius: 10px; - opacity: 0; - } - - .card:hover button.adopt{ - opacity: 1; - } - - .card:hover .gradiente{ - background-image: linear-gradient(to top, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.2)); - } - - .card:hover .days-waiting-text { - color: #151515; - } - - button.controle-carrossel { - border: none; - text-decoration: none; - background: none; - } - - @media screen and (min-width:990px) { - .cards-wrapper { - display: flex; - } - - .card { - margin: 0.5em; - width: calc(100%/4); - } - - } - - @media screen and (max-width:990px) { - body { - margin: 50px; - } - - .card:not(:first-child){ - display: none; - } - - .card { - margin: 0.5em; - } - } \ No newline at end of file diff --git a/styles/top-style.css b/styles/top-style.css deleted file mode 100644 index 4d5d782..0000000 --- a/styles/top-style.css +++ /dev/null @@ -1,46 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap'); - -body{ - font-family: 'Sawarabi Gothic', sans-serif; - -} -.background{ - background: linear-gradient(180deg, rgba(196, 222, 255, 0.33) 0%, rgba(216, 216, 216, 0) 54.69%, rgba(190, 220, 255, 0.215644) 100%); - -} -.link_acesso{ - color: #304057; -} -.patinha{ - width: 35px; - -} -.texto_corpo{ - text-align: justify; -} -.btn-color{ - color: #304057; -} -.link{ - text-decoration: none; -} -.imagens_footer{ - width: 50px; -} -.alinhamento{ - display: flex; - flex-direction: row; - justify-content: space-around; -} -.img_dogs{ - width: 298px; -} -.img_dogs1{ - width: 367px; -} -.img_dogs2{ - width: 281.09px; -} -.img_dogs3{ - width: 300.56px; -} \ No newline at end of file