Merge pull request #187 from Muhammed-Rahif/source

Changes on header section and card's button

Author: Roshanjossey

src/components/LinkButton/LinkButton.css

@@ -7,15 +7,15 @@
 
   border-width: 0;
   border-radius: 2px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
-  
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+
   background-color: #2ecc71;
   color: #fff;
-  
-  -webkit-transition: background-color .3s;
-  -moz-transition: background-color .3s;
-  transition: background-color .3s;
-  margin-bottom: 10vw;
+
+  -webkit-transition: background-color 0.3s;
+  -moz-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  margin-bottom: 0 !important;
 }
 
 .LinkButton:hover {
@@ -24,5 +24,32 @@
 
 .LinkButton > span {
   font-size: 1.1em;
-  letter-spacing: .05em;
+  letter-spacing: 0.05em;
+}
+.LinkButton-Wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+.Scroll-Down {
+  cursor: pointer;
+  position: relative;
+  animation: swing alternate 0.5s infinite;
+}
+.Scroll-Down:active {
+  opacity: 0.75;
+}
+.Scroll-Down-Wrapper {
+  padding: 1vw;
+  padding-bottom: 1.75vw;
+}
+@keyframes swing {
+  from {
+    top: -0.5rem;
+  }
+  to {
+    top: 1rem;
+  }
 }

src/components/LinkButton/LinkButton.jsx

@@ -1,12 +1,21 @@
-import React, { Component } from 'react';
-import './LinkButton.css';
+import React, { Component } from "react";
+import "./LinkButton.css";
+import scrollDown from "./scroll-down.svg";
 
 class LinkButton extends Component {
   render() {
     return (
-      <a className="LinkButton" href="https://github.com/firstcontributions/first-contributions/blob/master/README.md">
-        <span> Get started </span>
-      </a>
+      <div className="LinkButton-Wrapper">
+        <a
+          className="LinkButton"
+          href="https://github.com/firstcontributions/first-contributions/blob/master/README.md"
+        >
+          <span> Get started </span>
+        </a>
+        <div className="Scroll-Down-Wrapper">
+          <img className="Scroll-Down" onClick={() => { window.scrollBy({ top: window.innerHeight - 80, left: 0, behavior: "smooth" }); }} src={scrollDown} alt="Scroll Down!" width="64" height="64" />
+        </div>
+      </div>
     );
   }
 }

src/components/LinkButton/scroll-down.svg

@@ -34,8 +34,8 @@ const Card = ({
           <div className="Card-Description">
             <p> {description}</p>
           </div>
-          <div className="Card-Link">Go to Project</div>
         </div>
+        <div className="Card-Link">Go to Project</div>
       </a>
     </div>
   );

src/components/ProjectList/ProjectsCards.jsx

@@ -10,7 +10,7 @@
 }
 .Project-Logo {
   width: 45%;
-  height: 40%;
+  height: auto;
   margin-top: 5%;
 }
 .Card-Body {
@@ -49,6 +49,8 @@
   color: black;
 }
 .Card-Real-Link:link {
+  display: flex;
+  flex-direction: column;
   text-decoration: none;
   color: black;
   margin: 0 auto;
@@ -63,8 +65,16 @@
 }
 .Card-Link {
   position: relative;
-  padding: 10px;
+  padding: 15px;
   color: #0f3cef;
+  background: transparent;
+  transition: .5s;
+  margin-top: auto;
+  border-top: rgba(0, 0, 0, 0.12) 1px solid;
+}
+.Card-Link:hover {
+  color: whitesmoke;
+  background: #0f3cef;
 }
 .Card-Title {
   margin-top: 6%;

src/components/ProjectList/css/project-cards.css

@@ -16,6 +16,10 @@
   border: 1px solid #DCDCDC;
 }
 
+#search:hover,#search:focus {
+  border: 1px #0f3cef solid ;
+}
+
 .inputContainer {
    width: 47%;
    margin-top: 40px;