diff --git a/src/App.css b/src/App.css index 4494c45..a587a66 100644 --- a/src/App.css +++ b/src/App.css @@ -41,3 +41,34 @@ transform: rotate(360deg); } } + +.social-container { + position: fixed; + top: 10px; + width: 100%; + display: flex; + justify-content: center; + padding: 25px 50px; +} + +a.social { + margin: 0 1rem; + transition: transform 250ms; + display: inline-block; +} + +a.social:hover { + transform: translateY(-2px); +} + +a.github { + color: white; +} + +a.linkedin { + color: royalblue; +} + +a.instagram { + color: indianred; +} diff --git a/src/App.js b/src/App.js index 9e2501c..5e31850 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css'; import Logo from './components/Logo/Logo'; import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm'; import FaceRecognition from './components/FaceRecognition/FaceRecognition'; +import SocialFollow from './SocialFollow'; const returnClarifaiRequestOptions = (imageUrl) => { const PAT = '9a79ac5267f54073853713833271f89d'; @@ -91,6 +92,7 @@ class App extends Component{ onButtonSubmit = {this.onButtonSubmit} /> + ); diff --git a/src/SocialFollow.js b/src/SocialFollow.js new file mode 100644 index 0000000..563ae74 --- /dev/null +++ b/src/SocialFollow.js @@ -0,0 +1,24 @@ +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faGithub, + faLinkedin, + faInstagram +} from "@fortawesome/free-brands-svg-icons"; + +export default function SocialFollow() { + return ( +
+

+ + + + + + + + + +
+ ); +} \ No newline at end of file diff --git a/src/components/FaceRecognition/FaceRecognition.js b/src/components/FaceRecognition/FaceRecognition.js index 39e5736..7467eb1 100644 --- a/src/components/FaceRecognition/FaceRecognition.js +++ b/src/components/FaceRecognition/FaceRecognition.js @@ -4,7 +4,7 @@ import './FaceRecognition.css'; const FaceRecognition = ({imageUrl, box}) => { return(
-
+
diff --git a/src/index.js b/src/index.js index b3419f9..d96185c 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,6 @@ import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import 'tachyons'; -import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(