From 8daa21c0ef604ec0bae3485e1dac2be7c2887a95 Mon Sep 17 00:00:00 2001
From: Alexander <alexfox_2000@hotmail.com>
Date: Fri, 19 Feb 2021 17:00:40 -0500
Subject: [PATCH] Created Card Component

---
 src/App.js                               |  8 +++-
 src/components/Card.js                   | 14 +++---
 src/components/Link.js                   |  2 +-
 src/stylesheets/Card.css                 | 54 ++++++++++++++++++++++++
 src/{components => stylesheets}/Link.css |  0
 5 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 src/stylesheets/Card.css
 rename src/{components => stylesheets}/Link.css (100%)

diff --git a/src/App.js b/src/App.js
index 57bc017..7655852 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,23 @@
 import React from "react";
 import Header from "./components/Header";
 import Link from "./components/Link";
+import Card from "./components/Card"
 /* import Main from "./components/Main"; */
 
 const App = () => {
   return (
     <>
       <Header className="header" >
-        <Link/>
+        <Link>Hola</Link>
         <p>Search</p>
         <Link/>
       </Header>
       {/* <Main /> */}
+      <Card description="Una Foto"
+      title="Intereses, el nuevo widget de pinterest"
+      src="https://i.picsum.photos/id/0/536/354.jpg?hmac=pYva7VotLDyw33JFwZdFMkf5Egtdk2Z6p7Rr8nO6ngs"
+      size="large"
+      />
     </>
   );
 };
diff --git a/src/components/Card.js b/src/components/Card.js
index e5b1bf7..62e3377 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,11 +1,15 @@
+import styles from "./../stylesheets/Card.css"
 
-const Card = () => {
+const Card = ({className, description, title, size, src, ...props}) => {
+  const sizeClassName = size ? "card--large" : "";
   return (
-    <div>
-      Card
+    <div className={`card ${className} ${sizeClassName}`}>
+      <div className='card__gradient'/>
+      <img src={src} className="card__img"/>
+      <p className='card__description'>{description}</p>
+      <h2 className='card__title'>{title}</h2>
     </div>
-
   );
 };
 
-export default Card;
\ No newline at end of file
+export default Card;
diff --git a/src/components/Link.js b/src/components/Link.js
index 57da21a..f86124f 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./Link.css"
+import styles from "./../stylesheets/Link.css"
 
 export default function Link({href, children, ...props}) {
   return (
diff --git a/src/stylesheets/Card.css b/src/stylesheets/Card.css
new file mode 100644
index 0000000..ff4d53d
--- /dev/null
+++ b/src/stylesheets/Card.css
@@ -0,0 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+
+.card {
+  width: 400px;
+  height: 284px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  border-radius: 24px;
+  box-sizing: border-box;
+  padding: 33px;
+  color: white;
+  z-index: 100;
+  overflow: hidden;
+  font-family: 'Roboto', arial, monospace;
+  gap: 16px;
+  text-align: center;
+  font-style: normal;
+}
+
+.card--large {
+  height: 600px;
+}
+
+.card__description {
+  font-size: 16px;
+}
+
+.card__title {
+  font-size: 28px;
+}
+
+.card__img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -10;
+  top: 0;
+  left: 0;
+}
+
+.card__gradient {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(17, 17, 17, 0.6) 100%);
+}
diff --git a/src/components/Link.css b/src/stylesheets/Link.css
similarity index 100%
rename from src/components/Link.css
rename to src/stylesheets/Link.css