Skip to content

Commit

Permalink
Merge pull request #1266 from AlfiyaSiddique/feature-improvement
Browse files Browse the repository at this point in the history 
Feature-Improvement
  • Loading branch information
@rohansx
rohansx authored Aug 10, 2023
2 parents e959c70 + 1008f4f commit cbc36c2
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 23 deletions.
64 changes: 60 additions & 4 deletions components/About/Feature.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,83 @@
margin: 10px;
padding: 50px 20px;
display: flex;
width: 300px;
width:300px;
height: 200px;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.feature_card_outer {
display: flex;
gap: 10px;
align-items: stretch;
justify-content: center;
margin-bottom: 50px;
}

.feature .feature_card .icons {
margin-bottom: 20px;
font-size: 50px;
transition: all 0.3s ease;
}

.feature_box{
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
border: 5px solid #fff;
background: #fff;
transition: all .4s ease-in;
transform-style: preserve-3d;
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.feature_box:hover{
border: 5px solid #1857a0;
transform: rotateY(180deg);
}

.feature_box .card-front {
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}

.card-back p{
font-weight: bolder;
}

.feature .feature_box .card-front *{
align-self: center;
}

.feature_box .card-back {
height: 90%;
width: 100%;
background: #fff;
padding: 10px;
margin-top: 10px;
backface-visibility: hidden;
transform: rotateY(180deg);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
}

.feature .feature_card .book {
color: #ff6b6b; /* Updated book icon color */
}
Expand Down Expand Up @@ -129,5 +184,6 @@
@media screen and (max-width: 640px) {
.feature_card_outer {
align-items: center;
margin: auto;
}
}
101 changes: 82 additions & 19 deletions components/About/Feature.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,45 +32,108 @@ export default function Feature(props) {
>
<div className="feature_card_outer flex flex-col sm:flex-row ">
<div className="feature_card dark:bg-gray-900">
<MdMenuBook className="icons book" />
<p className="font-bold text-xl">Read Books</p>
<div className="feature_box">
<div className="card-front">
<MdMenuBook className="icons book" />
<p className="font-bold text-xl">Read Books</p>
</div>
<div className="card-back">
<p>Immerse yourself in captivating stories and thought-provoking ideas from our vast collection of books, spanning genres and cultures.</p>
</div>
</div>
</div>
<div className="feature_card dark:bg-gray-900">
<MdUpload className="icons upload text-sky-500" />
<p className="font-bold text-xl">Upload Books</p>
<div className="feature_box">
<div className="card-front">
<MdUpload className="icons upload text-sky-500" />
<p className="font-bold text-xl">Upload Books</p>
</div>
<div className="card-back">
<p>Share your literary creations with the world. Easily upload and showcase your work on our platform to connect with readers.</p>
</div>
</div>
</div>
<div className="feature_card dark:bg-gray-900">
<MdOutlineMoneyOff className="dollar icons text-yellow-400" />
<p className="font-bold text-xl">Free of Cost</p>
<div className="feature_box">
<div className="card-front">
<MdOutlineMoneyOff className="dollar icons text-yellow-400" />
<p className="font-bold text-xl">Free of Cost</p>
</div>
<div className="card-back">
<p>Enjoy unlimited access to our library of books without any charges. Explore, learn, and expand your horizons at no cost.</p>
</div>
</div>
</div>
</div>
<div className="feature_card_outer flex flex-col sm:flex-row">
<div className="feature_card dark:bg-gray-900">
<MdPeople className="icons reader" />
<p className="font-bold text-xl">Readers Community</p>
<div className="feature_box">
<div className="card-front">
<MdPeople className="icons reader" />
<p className="font-bold text-xl">Readers Community</p>
</div>
<div className="card-back">
<p>Join a vibrant community of fellow book enthusiasts. Connect, discuss, and share your thoughts with like-minded readers.</p>
</div>
</div>
</div>
<div className="feature_card dark:bg-gray-900">
<MdEmail className="icons letterClose text-blue-500 hover:hidden" />
<MdDrafts className="icons letterOpen text-blue-500 hidden hover:block" />
<p className="font-bold text-xl">Newsletter</p>
<div className="feature_box">
<div className="card-front">
<MdEmail className="icons letterClose text-blue-500 hover:hidden" />
<MdDrafts className="icons letterOpen text-blue-500 hidden hover:block" />
<p className="font-bold text-xl">Newsletter</p>
</div>
<div className="card-back">
<p> Stay informed and inspired with our regular newsletter. Get updates on new releases, author interviews, and literary insights</p>
</div>
</div>
</div>
<div className="feature_card dark:bg-gray-900">
<MdEmojiEvents className="icons readingChallenge" />
<p className="font-bold text-xl">Reading Challenge</p>
<div className="feature_box">
<div className="card-front">
<MdEmojiEvents className="icons readingChallenge" />
<p className="font-bold text-xl">Reading Challenge</p>
</div>
<div className="card-back">
<p> Embark on exciting reading challenges that push your reading boundaries. Set goals, discover new authors, and win rewards.</p>
</div>
</div>
</div>
</div>
<div className=" feature_card_outer flex flex-col sm:flex-row ">
<div className="feature_card dark:bg-gray-900">
<MdTimeline className="icons progressTracking" />
<p className="font-bold text-xl">Progress Tracking</p>
<div className="feature_box">
<div className="card-front">
<MdTimeline className="icons progressTracking" />
<p className="font-bold text-xl">Progress Tracking</p>
</div>
<div className="card-back">
<p>Keep tabs on your reading journey. Track your progress, set milestones, and celebrate your literary accomplishments.</p>
</div>
</div>
</div>
<div className="feature_card dark:bg-gray-900">
<MdMoreTime className="icons readingChallenge text-red-400" />
<p className="font-bold text-xl">Read Anytime</p>
<div className="feature_box">
<div className="card-front">
<MdMoreTime className="icons readingChallenge text-red-400" />
<p className="font-bold text-xl">Read Anytime</p>
</div>
<div className="card-back">
<p>Whether it's a quiet morning or a late-night escape, enjoy the freedom to read at your convenience, any time you desire.</p>
</div>
</div>
</div>
<div className="feature_card dark:bg-gray-900">
<MdPark className="icons readingChallenge text-green-400" />
<p className="font-bold text-xl">Read Anywhere</p>
<div className="feature_box">
<div className="card-front">
<MdPark className="icons readingChallenge text-green-400" />
<p className="font-bold text-xl">Read Anywhere</p>
</div>
<div className="card-back">
<p> Our platform ensures you can indulge in your favorite reads from the comfort of your home, while traveling, or wherever you go.</p>
</div>
</div>
</div>
</div>
</Carousel>
Expand Down

0 comments on commit cbc36c2

Please sign in to comment.