diff --git a/src/App.js b/src/App.js index 0398b2c..70fbf35 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,9 @@ import React from "react"; import Header from "./components/Header"; import Link from "./components/Link"; -import Card from "./components/Card" +import Card from "./components/Card"; import SearchBar from "./components/SearchBar"; +import Container from "./components/Container"; /* import Main from "./components/Main"; */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faBell, faCommentDots, faUser } from '@fortawesome/free-solid-svg-icons' @@ -24,11 +25,19 @@ const App = () => { {/*
*/} - + + + ); }; diff --git a/src/components/Container.js b/src/components/Container.js new file mode 100644 index 0000000..86254b2 --- /dev/null +++ b/src/components/Container.js @@ -0,0 +1,15 @@ +import React from "react"; +import styles from "./../stylesheets/Container.css" + +export default function Container({title, children, ...props}) { + return ( +
+
+

{title}

+
+ {children} +
+
+
+ ) +} diff --git a/src/stylesheets/Card.css b/src/stylesheets/Card.css index ff4d53d..d06c9cf 100644 --- a/src/stylesheets/Card.css +++ b/src/stylesheets/Card.css @@ -40,6 +40,7 @@ z-index: -10; top: 0; left: 0; + transition: all 1.2s; } .card__gradient { @@ -52,3 +53,7 @@ left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(17, 17, 17, 0.6) 100%); } + +.card:hover > .card__img { + transform: scale(1.2); +} diff --git a/src/stylesheets/Container.css b/src/stylesheets/Container.css new file mode 100644 index 0000000..2ffe00c --- /dev/null +++ b/src/stylesheets/Container.css @@ -0,0 +1,27 @@ +.container__wrapper { + display: flex; + display: flex; + flex-direction: column; + align-items: center; + max-width: 832px; + margin: auto; + max-height: 665px; +} + +.container__title { + font-size: 28px; + text-align: center; + width: 100%; +} + +.container { + display: flex; + gap: 32px; + flex-direction: column; +} + +.container__cards { + display: flex; + gap: 32px; + flex-wrap: wrap; +} diff --git a/yarn.lock b/yarn.lock index 8dde23b..af25ff3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1170,6 +1170,32 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fortawesome/fontawesome-common-types@^0.2.34": + version "0.2.34" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz#0a8c348bb23b7b760030f5b1d912e582be4ec915" + integrity sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA== + +"@fortawesome/fontawesome-svg-core@^1.2.34": + version "1.2.34" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz#1d1a7c92537cbc2b8a83eef6b6d824b4b5b46b26" + integrity sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.34" + +"@fortawesome/free-solid-svg-icons@^5.15.2": + version "5.15.2" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz#25bb035de57cf85aee8072965732368ccc8e8943" + integrity sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.34" + +"@fortawesome/react-fontawesome@^0.1.14": + version "0.1.14" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca" + integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA== + dependencies: + prop-types "^15.7.2" + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.able.co/@hapi%2faddress/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"