[IMPROVE] Added links and Hover Effect (#146)

* added link and hover effect
RocketChat · Apr 16, 2022 · 65fbcd3 · 65fbcd3
1 parent ddc933b
commit 65fbcd3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/app/components/newscarousel.js b/app/components/newscarousel.js
@@ -5,7 +5,7 @@ import 'slick-carousel/slick/slick-theme.css';
 
 const Item = (props) => {
   return (
-    <div className='bg-white m-2 h-auto'>
+    <div className={`bg-white m-2 h-auto + ${styles.active_carousel}`}>
       <a
         href={props.item.url}
         target='_blank'
@@ -16,7 +16,7 @@ const Item = (props) => {
           className={styles['carousel-item-image']}
           src={props.item.imageUrl}
         />
-        <div className='p-2 p-md-3 h-auto'>
+        <div className={`p-2 p-md-3 h-auto + ${styles.content}`}>
           <h2 className={`${styles.heading}`}>{props.item.name}</h2>
           <p className={`${styles.description}`}>{props.item.description}</p>
         </div>

diff --git a/app/pages/index.js b/app/pages/index.js
@@ -38,7 +38,7 @@ function Home(props) {
           </p>
         </Col>
         <Col className='mb-5 d-flex flex-column align-items-center'>
-          <h6 className='py-2 fs-6'>Read the Guides | Read Release Notes</h6>
+          <h6 className='py-2 fs-6'> <a href={props?.guides?.location} target="_blank">Read the Guides</a>  | <a href={props?.releaseNotes?.location} target="_blank">Read Release Notes</a> </h6>
           <Searchbox></Searchbox>
         </Col>
         <Col>

diff --git a/app/styles/Newscarousel.module.css b/app/styles/Newscarousel.module.css
@@ -3,13 +3,20 @@
   max-width: 90rem;
   align-self: center;
 }
-
+.active_carousel:hover{
+  transform: scale(1.04);
+  transition: 0.5s all;
+}
 .carousel-item-link {
   text-decoration: none;
   color: #000000;
   outline: none;
 }
-
+.active_carousel:hover .content{
+  background-color: #1d74f5;
+  color: white;
+  transition: 0.5s all;
+}
 .carousel-item-image {
   width: 100%;
   height: 100%;