added the Happy Recovery Story page #519
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| .happy-recoveries-page { | ||
| background: url('../RecoveredsPage/images/bg2.png') no-repeat center center fixed; | ||
| background-size: cover; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100%; | ||
| flex-direction: column; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .this-title { | ||
| font-size: 2.8rem; | ||
| font-weight: bold; | ||
| color: #0056AF; | ||
| margin: 40px 0 20px 0; | ||
| text-align: center; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| animation: typing 3s steps(40, end); | ||
| } | ||
|
|
||
| @keyframes typing { | ||
| from { | ||
| width: 0; | ||
| } | ||
| to { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| .cards { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-around; | ||
| } | ||
|
|
||
| .card { | ||
| margin-right: 80px; | ||
| margin-top: 50px; | ||
| margin-left: 80px; | ||
| width: 300px; | ||
| height: 350px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 40px 60px -16px rgb(98, 98, 98); | ||
| overflow: hidden; | ||
| position: relative; | ||
| } | ||
|
|
||
| .card-title { | ||
| display: block; | ||
| text-align: center; | ||
| color: #fff; | ||
| background-color: #4582be; | ||
| padding: 2%; | ||
| border-top-right-radius: 4px; | ||
| border-top-left-radius: 4px; | ||
| background-image: linear-gradient(#37d9f2, #5fa1f2); | ||
| border: 0; | ||
| border-radius: 4px; | ||
| box-shadow: rgba(0, 0, 0, .3) 0 5px 15px; | ||
| box-sizing: border-box; | ||
| color: #fff; | ||
| cursor: pointer; | ||
| font-family: Montserrat,sans-serif; | ||
| font-size: 1.1em; | ||
| margin: 5px; | ||
| margin-bottom: 10px; | ||
| padding: 5px 5px; | ||
| text-align: center; | ||
| user-select: none; | ||
| -webkit-user-select: none; | ||
| touch-action: manipulation; | ||
| } | ||
|
|
||
| .card img { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| display: block; | ||
| position: relative; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .card-desc { | ||
| display: block; | ||
| font-size: 1rem; | ||
| position: absolute; | ||
| height: 0; | ||
| top: 0; | ||
| opacity: 0; | ||
| padding: 18px 8%; | ||
| background-color: white; | ||
| overflow-y: scroll; | ||
| transition: 0.8s ease; | ||
| } | ||
|
|
||
| .card:hover .card-desc { | ||
| opacity: 1; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .rescuer-info { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| .rescuer-info .rescuer-photo { | ||
| width: 50px; | ||
| height: 50px; | ||
| border-radius: 50%; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .rescuer-info .rescuer-name { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .read-more-link { | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .read-more-link a { | ||
| color: #3498db; | ||
| text-decoration: none; | ||
| font-size: 1.1em; | ||
| } | ||
|
|
||
| .read-more-link a:hover { | ||
| text-decoration: underline; | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React from 'react'; | ||
| import './HappyRecoveriesPage.css'; | ||
|
|
||
| const HappyRecoveriesPage = () => { | ||
| const recoveredAnimals = [ | ||
| { | ||
| name: 'Buddy', | ||
| recoveryDetails: 'Buddy, the dog, was rescued by one of our dedicated rescuers. After being saved from a difficult situation, he found a loving family who adopted him and gave him a new life full of care and happiness.', | ||
| imageUrl: './src/pages/user/RecoveredsPage/images/buddy.PNG', | ||
| rescuer: { | ||
| name: 'Ms. Lobo', | ||
| photoUrl: './src/pages/user/RecoveredsPage/images/rescuer1.PNG', | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Ash', | ||
| recoveryDetails: 'Ash, the cat rescued from a high-rise building by one of our dedicated rescuers and treated by Dr. Carol, now thrives in a loving foster home. Her journey from peril to safety is a testament to compassion and the promise of a brighter future for every rescued animal.', | ||
| imageUrl: './src/pages/user/RecoveredsPage/images/ash.PNG', | ||
| rescuer: { | ||
| name: 'Mr. Smith', | ||
| photoUrl: './src/pages/user/RecoveredsPage/images/rescuer2.PNG', | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Kau', | ||
| recoveryDetails: 'Kau, a cow rescued by one of our rescuers, was found abandoned near a slaughterhouse. Nursed back to health with care and compassion, she was eventually adopted by a kind couple involved in agriculture, who provided her with a loving home on their farm.', | ||
| imageUrl: './src/pages/user/RecoveredsPage/images/kau.PNG', | ||
| rescuer: { | ||
| name: 'Dr. Carol', | ||
| photoUrl: './src/pages/user/RecoveredsPage/images/rescuer3.jpg', | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Cherry', | ||
| recoveryDetails: 'Cherry, the horse, was found injured and in need of help by one of our rescuers. Thanks to the dedicated care of Dr. Carol, Cherry was nursed back to health. She found a new home with a compassionate family involved in agriculture, where she now thrives and enjoys a life filled with care and comfort.', | ||
| imageUrl: './src/pages/user/RecoveredsPage/images/cherry.PNG', | ||
| rescuer: { | ||
| name: 'Ms. Lobo', | ||
| photoUrl: './src/pages/user/RecoveredsPage/images/rescuer1.PNG', | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Luna', | ||
| recoveryDetails: 'Luna, a dog abandoned and abused by her previous owners, was rescued by one of our dedicated rescuers. She received compassionate care and rehabilitation, thanks to the efforts of our brave hearts. Now, Luna has found a loving forever home where she is cherished and cared for, embodying the resilience and joy that come with a second chance at life.', | ||
| imageUrl: './src/pages/user/RecoveredsPage/images/luna.PNG', | ||
| rescuer: { | ||
| name: 'Mr. Smith', | ||
| photoUrl: './src/pages/user/RecoveredsPage/images/rescuer2.PNG', | ||
| }, | ||
| }, | ||
| { | ||
| name: 'Cotton', | ||
| recoveryDetails: 'Cotton, a rabbit needing care, was rescued by a dedicated rescuer. Found in a situation requiring attention, Cotton received compassionate care and nurturing. Now, in a safe and loving home, Cotton hops freely, embodying resilience and joy after receiving a second chance at life..', | ||
| imageUrl: './src/pages/user/RecoveredsPage/images/cotton.PNG', | ||
| rescuer: { | ||
| name: 'Dr. Carol', | ||
| photoUrl: './src/pages/user/RecoveredsPage/images/rescuer3.jpg', | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="happy-recoveries-page"> | ||
| <h1 className="this-title">Happy Recoveries</h1> | ||
| <div className="cards"> | ||
| {recoveredAnimals.map((animal, index) => ( | ||
| <div key={index} className="card"> | ||
| <img src={animal.imageUrl} alt={animal.name} /> | ||
| <div className="card-desc"> | ||
| <h2 className="card-title">{animal.name}</h2> | ||
| <p>{animal.species}</p> | ||
| <p>{animal.recoveryDetails}</p> | ||
| <div className="rescuer-info"> | ||
| <img src={animal.rescuer.photoUrl} alt={animal.rescuer.name} className="rescuer-photo" /> | ||
| <p className="rescuer-name">Rescued by: {animal.rescuer.name}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <p className="read-more-link"> | ||
| <a href="/recovereds-page">Our Rescuers</a> | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default HappyRecoveriesPage; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if possible revert this file as before