Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

News Page is been changed with Animated Buttons #634

Merged
merged 10 commits into from
Jun 26, 2024
Merged

News Page is been changed with Animated Buttons #634

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
eb65fab
News Page is been changed with Animated Buttons and Cool Css Background
AbheetHacker4278 Jun 17, 2024
ef3401f
Added Animated Buttons for the News Page Cards
AbheetHacker4278 Jun 18, 2024
cb8b7f1
Merge branch 'main' into news
AbheetHacker4278 Jun 18, 2024
eb41c5b
Merge branch 'main' into news
AbheetHacker4278 Jun 19, 2024
439772a
Update news.html
AbheetHacker4278 Jun 20, 2024
d1d42eb
Merge branch 'main' into news
AbheetHacker4278 Jun 22, 2024
b0ac702
Merge branch 'main' into news
AbheetHacker4278 Jun 22, 2024
f77843c
Merge branch 'main' into news
AbheetHacker4278 Jun 23, 2024
2ad9caf
Merge branch 'main' into news
AbheetHacker4278 Jun 26, 2024
ea126a8
Merge branch 'main' into news
varshith257 Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
265 changes: 216 additions & 49 deletions Html-Files/news.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@
.news-item {
width: calc(33.33% - 20px);
margin-bottom: 30px;
background-color: #f8f8f8;
background-color: #fcf8f8;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Expand Down Expand Up @@ -441,54 +441,156 @@

</div>
</header>
<div class="container" style="display:flex ;">
<div class="news-section">
<h2 style="color: white;">Latest News</h2>
<div class="news-container">
<div class="news-item">
<h3>RapiDoc Launches Revolutionary Telemedicine Platform</h3>
<p>RapiDoc introduces a cutting-edge telemedicine platform, connecting patients with top specialists nationwide. This user-friendly service aims to revolutionize healthcare accessibility, especially for those in remote areas.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc Expands Network: 500 New Doctors Join</h3>
<p>In a major expansion, RapiDoc welcomes 500 new doctors across various specialties to its network. This growth significantly enhances our ability to provide diverse, high-quality healthcare services to more patients.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc's AI Diagnosis Tool Shows 95% Accuracy in Trials</h3>
<p>RapiDoc's innovative AI-powered diagnosis tool demonstrates an impressive 95% accuracy rate in recent clinical trials. This breakthrough technology promises faster, more accurate preliminary diagnoses for patients.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc Introduces 24/7 Emergency Consultation Service</h3>
<p>Responding to the need for round-the-clock medical support, RapiDoc launches a 24/7 emergency consultation service. This initiative ensures patients can access expert medical advice anytime, anywhere.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc Partners with Leading Hospitals for Seamless Referrals</h3>
<p>RapiDoc announces strategic partnerships with top hospitals nationwide, creating a seamless referral system. This collaboration aims to streamline the patient journey from online consultation to in-person specialized care.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc's Mobile App Reaches 1 Million Downloads</h3>
<p>The RapiDoc mobile app hits a milestone with 1 million downloads. This achievement underscores the growing popularity of our digital healthcare solutions and the trust patients place in our services.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc Introduces Personalized Health Monitoring Wearables</h3>
<p>RapiDoc unveils a line of state-of-the-art health monitoring wearables. These devices offer personalized health tracking, real-time data analysis, and seamless integration with our telemedicine platform, empowering patients to take control of their well-being.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc Launches Innovative Mental Health Support Program</h3>
<p>In response to growing mental health concerns, RapiDoc introduces a comprehensive online mental health support program. This initiative combines AI-driven mood tracking, virtual therapy sessions, and community support groups to provide holistic care.</p>
<a href="#" class="read-more">Read More</a>
</div>
<div class="news-item">
<h3>RapiDoc's Research Team Publishes Groundbreaking Study on Preventive Healthcare</h3>
<p>RapiDoc's research division publishes a landmark study on preventive healthcare in a leading medical journal. The findings highlight the potential of data-driven, personalized preventive strategies to significantly reduce the risk of chronic diseases.</p>
<a href="#" class="read-more">Read More</a>

<div class="conta" style="display: flex; flex-wrap: wrap;">
<div class="container" style="display:flex ;">
<div class="news-section">
<h2 style="color: white"><strong>Latest News</strong></h2>
<div class="news-container">
<div class="news-item">
<h3>RapiDoc Launches Revolutionary Telemedicine</h3>
<p>RapiDoc introduces a cutting-edge telemedicine platform, connecting patients with top specialists nationwide. This user-friendly service aims to revolutionize healthcare accessibility, especially for those in remote areas.</p>

<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>

</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
<div class="news-item">
<h3>RapiDoc Expands Network: 500 New Doctors Join</h3>
<p>In a major expansion, RapiDoc welcomes 500 new doctors across various specialties to its network. This growth significantly enhances our ability to provide diverse, high-quality healthcare services to more patients.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>

</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>

</div>
<div class="news-item">
<h3>RapiDoc's AI Diagnosis Tool Shows 95% Accuracy in Trials</h3>
<p>RapiDoc's innovative AI-powered diagnosis tool demonstrates an impressive 95% accuracy rate in recent clinical trials. This breakthrough technology promises faster, more accurate preliminary diagnoses for patients.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>
</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
<div class="news-item">
<h3>RapiDoc Introduces 24/7 Emergency Consultation Service</h3>
<p>Responding to the need for round-the-clock medical support, RapiDoc launches a 24/7 emergency consultation service. This initiative ensures patients can access expert medical advice anytime, anywhere.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>
</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
<div class="news-item">
<h3>RapiDoc Partners with Leading Hospitals for Seamless Referrals</h3>
<p>RapiDoc announces strategic partnerships with top hospitals nationwide, creating a seamless referral system. This collaboration aims to streamline the patient journey from online consultation to in-person specialized care.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>

</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
<div class="news-item">
<h3>RapiDoc's Mobile App Reaches 1 Million Downloads</h3>
<p>The RapiDoc mobile app hits a milestone with 1 million downloads. This achievement underscores the growing popularity of our digital healthcare solutions and the trust patients place in our services.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>

</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
<div class="news-item">
<h3>RapiDoc Introduces Personalized Health Monitoring Wearables</h3>
<p>RapiDoc unveils a line of state-of-the-art health monitoring wearables. These devices offer personalized health tracking, real-time data analysis, and seamless integration with our telemedicine platform, empowering patients to take control of their well-being.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>

</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
<div class="news-item">
<h3>RapiDoc Launches Innovative Mental Health Support Program</h3>
<p>In response to growing mental health concerns, RapiDoc introduces a comprehensive online mental health support program. This initiative combines AI-driven mood tracking, virtual therapy sessions, and community support groups to provide holistic care.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>

</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
<div class="news-item">
<h3>RapiDoc's Research Team Publishes Groundbreaking Study on Preventive Healthcare</h3>
<p>RapiDoc's research division publishes a landmark study on preventive healthcare in a leading medical journal. The findings highlight the potential of data-driven, personalized preventive strategies to significantly reduce the risk of chronic diseases.</p>
<div class="button-icon" style="padding-left: 90px;">
<div class="icon">
<svg style="color: rgb(81, 107, 188);" class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
</svg>

</div>
<div class="cube">
<span class="side front">hover me</span>
<span class="side top">Read More</span>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -727,6 +829,71 @@ <h4>RAPIDOC Newsletter</h4><br>
});
});
</script>
<style>


.button-icon {
display: flex;
width: 400px;
height: 100px;
cursor: pointer;
padding-left: 90px;
}

.icon {
background-color: #fff;
padding: 10px 10px 5px 10px;
}

.icon svg {
width: 25px;
height: 25px;
}

.cube {
transition: all 0.4s;
transform-style: preserve-3d;
width: 200px;
height: 20px;
}

.button-icon:hover {
border-color: #264923;
}

.button-icon:hover .cube {
transform: rotateX(90deg);
}

.side {
position: absolute;
height: 47px;
width: 200px;
display: flex;
font-size: 0.8em;
justify-content: center;
align-items: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: bold;
}

.top {
background: #264923;
color: #fff;
transform: rotateX(-90deg) translate3d(0, 13.5px, 2em);
width: 170px;
}

.front {
background: #444478;
color: #fff;
transform: translate3d(0, 0, 1em);
width: 170px;
}


</style>
</body>

</html>